jBone। Backbone के लिए jQuery की जगह या DOM जोड़तोड़ के लिए 2kb

सभी का अभिवादन।

jBone आधुनिक ब्राउज़रों में DOM के साथ काम करने के लिए एक माइक्रो लाइब्रेरी (2kb gzipped) है। यह आंशिक रूप से सही तरीके से काम करने के लिए बैकबोन के लिए आवश्यक बुनियादी तरीकों के लिए jQuery इंटरफेस को लागू करता है, लेकिन स्वतंत्र रूप से उपयोग किया जा सकता है।

समस्या

jBone का जन्म एक विशेष समस्या के समाधान में हुआ था - एक मोबाइल एप्लिकेशन का विकास। मुख्य आवश्यकताएं UI और अनुप्रयोग लोडिंग गति की जवाबदेही थीं। यह जल्द ही स्पष्ट हो गया कि हमारे पास लगभग सभी कोड jQuery द्वारा कब्जे में थे, और बहुत ही सरल कार्यों का उपयोग करके हल किया गया था।

यह jQuery का परित्याग करने का निर्णय लिया गया था। मैं वास्तव में इसे प्यार करता हूं, इसके सहज ज्ञान युक्त इंटरफेस और क्रॉस-ब्राउज़र संगतता के लिए। मैं इंटरफेस छोड़ना चाहूंगा, लेकिन पूर्ण क्रॉस-ब्राउज़र संगतता की आवश्यकता नहीं थी, और मुझे पता था कि इस तरह की कार्यक्षमता को लागू करने के लिए बहुत कम कोड की आवश्यकता थी। इसके अलावा, आप jQuery के तरीकों के बजाय आधुनिक ब्राउज़र क्षमताओं का उपयोग करके प्रदर्शन में एक अच्छी छलांग प्राप्त कर सकते हैं।

समाधान के लिए खोजें

विश्लेषण से पता चला कि इस समस्या को हल करने के लिए पहले से ही तैयार उपकरण हैं, लेकिन उन सभी में कमियां हैं। शुरुआत में, मैंने Zepto को देखने का फैसला किया, लगभग 30 kb, इतना छोटा नहीं, यद्यपि jQuery की तुलना में काफी छोटा, इसके अलावा, इसमें प्रदर्शन की महत्वपूर्ण समस्याएं हैं, jQuery में कई बार प्रदर्शन भी खो देता है। अगला कदम, मैंने एंडर का उपयोग करके "मेरा jQuery" बनाने की कोशिश की, लेकिन परिणामी फ़ाइल आकार मेरी उम्मीदों में फिट नहीं हुआ। तीसरा प्रयास डोम के साथ काम करने के लिए अतिरिक्त पुस्तकालयों के बिना बैकबोन प्राप्त करने की इच्छा थी। पहले मुझे बैकबोन मिला। नेटिव । विचार बुरा नहीं है, लेकिन सुविधाजनक उपनामों को अस्वीकार करने के लिए यह अनुचित लगता है, कोड की मात्रा बहुत तेज़ी से बढ़ेगी, और कोड लिखने की प्रक्रिया इतनी सुविधाजनक नहीं होगी। यह पुल अनुरोध अधिक दिलचस्प लगता है, यह विचार उन लोगों के लिए jQuery को वैकल्पिक बनाने के लिए है, जिन्हें इसकी आवश्यकता है, बाकी के लिए मूल तरीकों का उपयोग करने का अवसर है, जैसा कि Backbone.Native में है, लेकिन सुविधा और विकास की गति की समस्या बनी हुई है।

दांत पीसते हुए मैंने अपनी बाइक लिखने का फैसला किया। मैंने एक दिन मिलने का लक्ष्य रखा। प्रोटोटाइप को jQuery के साथ न्यूनतम संगतता सुनिश्चित करने और बैकबोन के लिए सभी इकाई परीक्षण पास करने के लिए माना जाता था, मैं सिद्धांत रूप में अधिक समय नहीं बिताना चाहता था, इसका मतलब यह होगा कि अंत में हम उसी स्थान पर आएंगे जहां हमने jQuery के लिए शुरू किया था।

निर्णय

अब jBone लगभग 10kb का असम्बद्ध कोड है, जो पूरी तरह से परीक्षणों द्वारा कवर किया गया है और Backbone के लिए jQuery प्रतिस्थापन प्रदान करता है।

चलो jQuery से कार्यान्वयन और अंतर के बारे में थोड़ी बात करते हैं।

चयनकर्ता इंजन

यह एक सरल querySelector , इसके फायदे और नुकसान के साथ , सबसे पहले यह एक querySelector नहीं है और इसके साथ पूर्ण संगतता की उम्मीद नहीं है। लेकिन यह jQuery की तुलना में तेज़, बहुत तेज़ है।

घटनाक्रम

मुख्य अंतर यह है कि आपको देशी जावास्क्रिप्ट घटनाओं के साथ काम करना होगा, जो अच्छा है। तथ्य यह है कि jQuery की घटनाओं में लगभग पूरी तरह से फिर से लिखा जाता है। उदाहरण के लिए, यदि आप addEventListener विधि का उपयोग करते हुए एक श्रोता को जोड़ते हैं, तो ईवेंट "पॉप अप" नहीं होगा यदि नोड दस्तावेज़ के अंदर नहीं है, तो jQuery इस "समस्या" को हल करता है, मुझे लगता है कि इस "सुविधा" और पिछड़े संगतता मुद्दों के कारण, यह अभी भी बहुत लंबा है पूरी तरह से देशी घटनाओं पर स्विच करने में सक्षम नहीं होंगे। JQuery की अपनी ईवेंट ऑब्जेक्ट है, जिसमें मानक एक से अलग गुणों का एक सेट है, और इसी तरह। ये सभी ट्रिफ़ल हैं, लेकिन उन्हें ध्यान में रखना आवश्यक है।

सीएसएस

JBone में, css पद्धति camelCase शैली में गुणों को स्वीकार करती है, अर्थात border-color बजाय border-color लिखें।

विशेषताएँ, एनिमेशन

JBone में विशेषताओं के साथ काम करने के लिए व्यावहारिक रूप से कुछ भी नहीं है, क्योंकि जो कुछ भी आवश्यक है वह जावास्क्रिप्ट में है।

element.[setAttribute, hasAttribute, getAttribute, ...] विशेषताओं के साथ कार्य करना element.[setAttribute, hasAttribute, getAttribute, ...]
क्लास element.classList.add[remove, toggle, contains, ...] साथ कार्य करना element.classList.add[remove, toggle, contains, ...]
element.dataset डेटा विशेषताओं के साथ कार्य करना

यही बात एनिमेशन पर लागू होती है, मेरा मानना ​​है कि अब समय आ गया है जब इतने सारे कामों में हम जेएस की तरफ से एनिमेशन छोड़ सकते हैं और पूरी तरह से उन्हें CSS के हाथों में दे सकते हैं, एप्लिकेशन लॉजिक को प्रस्तुति से अलग कर सकते हैं।

AJAX, आस्थगित

लाइब्रेरी में यह हिस्सा बिल्कुल भी कवर नहीं है और पसंद का अधिकार बचा हुआ है। AJAX कार्यान्वयन की एक बड़ी संख्या है , साथ ही वादे / ए + मानक के कार्यान्वयन भी हैं, उदाहरण के लिए, कब , क्यू या बस-आस्थगित । उत्तरार्द्ध मेरे पास आया, क्योंकि इसमें सबसे कम वजन है, $ चर को पैच कर सकता है और jQuery में कार्यान्वित Deferred ऑब्जेक्ट की सभी विशेषताओं को शामिल करता है।

परिणाम

नतीजतन, हमें DOM जोड़तोड़ के लिए बहुत छोटा और फुर्तीला अमूर्त मिला, जबकि ज्यादातर मामलों में परिचित jQuery इंटरफेस।

जीथुब स्रोत कोड।
प्रलेखन
एपीआई