🏚️ 👩🏽 🤹🏿 बाल्टी और कोर नहीं 👃🏽 🧑🏿‍🤝‍🧑🏿 🧗🏻

जो कि jq के उदाहरण पर बुरा है।

समस्या और उसके कार्यान्वयन पर विचार करें: एक्स तत्व हैं, एक तत्व पर क्लिक करके इसे राज्य बदलना चाहिए। एक तत्व पर क्लिक हो सकते हैं, और सबसे अधिक बार होगा, अकेले नहीं।

लेआउट।
बहुत सारे तत्व हैं - वर्ग द्वारा खोजना।

<body> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> <div class="testDiv"></div> </body>

// निस्संदेह लगभग।

जे एस।
वर्ग द्वारा खोजें, हैंग क्लिक, प्रोसेस क्लिक, चेक - अनचेक, चेक नहीं - मार्क

jQ
कनेक्टेड jQ
समस्या का समाधान

 $(function(){ $('.testDiv').on('click', function(){ var vedroCache = $(this); if (vedroCache.hasClass('isActiveTestDiv')){ vedroCache.removeClass('isActiveTestDiv'); } else{ vedroCache.addClass('isActiveTestDiv'); } }); });

जे एस
जक के बदले

 // ≈2—3        (function(u){ var J = {}, W = window, D = document, intCache; WJ = J; // search elements if ('getElementsByClassName' in document){ J.$c = function(className, from){ return (from || D).getElementsByClassName(className); } } else{ J.$c = function(className, from){ var cache = (from || D).getElementsByTagName('*'), result = [], i = cache.length, j = -1; for (; i-- ;){ if (cache[i].className.indexOf(className) !== -1){ result[j += 1](cache[i]); } } return result; } } // events if ('addEventListener' in W){ J.eventAdd = function(object, eventName, callback){ object.addEventListener(eventName, callback); }; J.eventDel = function(object, eventName, callback){ object.removeEventListener(eventName, callback); }; } else{ var ieFixEventsNameObjectsCallbacks = [], ieFixEventsObjectsAndCallbacksLength = 0, ieFixEventsHandlers = {}, fixEvent = function(e){ e.preventDefault = function(){ e.returnValue = false; }; e.stopPropagation = function(){ e.cancelBubble = true; }; e.target= e.srcElement; return e; }, ieAddFixEvent = function(object, eventName, callback){ function fix(){ callback.call(object, fixEvent(W.event)); } intCache = ieFixEventsObjectsAndCallbacksLength; ieFixEventsNameObjectsCallbacks[ieFixEventsObjectsAndCallbacksLength] = eventName; ieFixEventsObjectsAndCallbacksLength += 1; intCache += ieFixEventsObjectsAndCallbacksLength; ieFixEventsNameObjectsCallbacks[ieFixEventsObjectsAndCallbacksLength] = callback; ieFixEventsObjectsAndCallbacksLength += 1; intCache += ieFixEventsObjectsAndCallbacksLength; ieFixEventsNameObjectsCallbacks[ieFixEventsObjectsAndCallbacksLength] = object; ieFixEventsObjectsAndCallbacksLength += 1; ieFixEventsHandlers[intCache] = fix; object.attachEvent('on' + eventName, fix); }, ieRemoveFixEvent = function(object, eventName, callback){ for (var i = ieFixEventsObjectsAndCallbacksLength; i-- ;){ if ((ieFixEventsNameObjectsCallbacks[i] === object) && (ieFixEventsNameObjectsCallbacks[i - 1] === callback) && (ieFixEventsNameObjectsCallbacks[i - 2] === eventName)){ ieFixEventsNameObjectsCallbacks[i] = ieFixEventsNameObjectsCallbacks[i - 1] = ieFixEventsNameObjectsCallbacks[i - 2] = u; i = i * 3 - 3; break; } i -= 2; } if (i !== -1){ object.detachEvent('on' + eventName, ieFixEventsHandlers[i]); ieFixEventsHandlers[i] = u; } }; J.eventAdd = function(object, eventName, callback, isNotNeedFix){ if (isNotNeedFix === true){ object.attachEvent('on' + eventName, callback); } else{ ieAddFixEvent(object, eventName, callback); } }; J.eventDel = function(object, eventName, callback, isNotNeedFix){ if (isNotNeedFix === true){ object.detachEvent('on' + eventName, callback); } else{ ieRemoveFixEvent(object, eventName, callback); } }; } // classes J.classHas = function(object, className){ return object.className.indexOf(className) !== -1; //  * }; J.classAdd = function(object, className){ if (!J.classHas(object, className)){ object.className += ' ' + className; } }; J.classDel = function(object, className){ if (J.classHas(object, className)){ object.className = object.className.replace(className, ''); //  * } }; //*    DOM   —   () ! // fast bad ready J.ready = function(callback){ var callbacks = [callback]; function ready(){ var iMax = callbacks.length, i = 0; J.eventDel(D, 'DOMContentLoaded', ready); J.eventDel(W, 'load', ready, true); for (;i < iMax; i += 1){ callbacks[i].call(J); } ready = callbacks = null; J.ready = function(callback){ callback.call(J); } } if ('addEventListener' in W){ J.eventAdd(D, 'DOMContentLoaded', ready); } J.eventAdd(W, 'load', ready, true); J.ready = function(callback){ callbacks.push(callback); } }; }());

समस्या हल करना

 J.ready(function(){ var J = this, elems = J.$c('testDiv'), i = elems.length; function clickListener(){ J[J.classHas(this, 'isActiveTestDiv') ? 'classDel' : 'classAdd'](this, 'isActiveTestDiv'); } for (;i--;){ J.eventAdd(elems[i], 'click', clickListener); } });

बाल्टी की समस्याओं की व्याख्या करने से पहले, मैं 350 divs और अगले कंसोल के लिए समाधान नोट करना चाहूंगा। एमुलेशन

 if (!('console' in window) || !('time' in console)){ (function(w){ var times = {}, C; if (!('console' in w)){ w.console = C = {}; C.log = function(data){ alert(data); } } else{ C = w.console; } C.time = function(name){ times[name] = new Date().getTime(); }; C.timeEnd = function(name){ if (name in times){ return new Date().getTime() - times[name]; } }; }(window)); }

टाइप किया हुआ
masinka

और लोमड़ी में 18.0.1
jQ ms16ms
जे ms2 मी

क्या अंतर है?
कोड के एक गुच्छा के अलावा, दृष्टिकोण में मुख्य अंतर।

बकेट दृष्टिकोण
अवधारणा को लागू करना, लागू करना है, अर्थात

$ (/ * जो कुछ भी * *) ./ उसके साथ कुछ करो * /

हम jq को किसी अन्य चीज़ में बदल सकते हैं, लेकिन अवधारणा एक ही है।

सब कुछ (बकेट) के लिए एक फ़ंक्शन तैयार है, जो अपने शेल में अपने कार्यों के परिणाम के साथ प्रसंस्करण का परिणाम देता है।

जिसके परिणाम में

 //    ,     $('.testDiv').on('click', function(){ var vedroCache = $(this); //             if (vedroCache.hasClass('isActiveTestDiv')){ vedroCache.removeClass('isActiveTestDiv'); } else{ vedroCache.addClass('isActiveTestDiv'); } }); console.log(console.timeEnd('divs')); });

कोई बाल्टी दृष्टिकोण (समाधान सेट)

/ * समाधान का नाम * / (/ * समस्या के पैरामीटर :) * / /)

मुझे लगता है कि यह सही है अगर समाधान गलत मापदंडों से गिरता है।

 J.ready(function(){ var J = this, elems = J.$c('testDiv'), //   i = elems.length; function clickListener(){ J[J.classHas(this, 'isActiveTestDiv') ? 'classDel' : 'classAdd'](this, 'isActiveTestDiv'); // ,   } for (;i--;){ J.eventAdd(elems[i], 'click', clickListener); //     } });

आप बहुत लंबे समय के लिए विशिष्ट निर्णयों के नियंत्रण के बारे में एक विषय विकसित कर सकते हैं।
निष्कर्ष निम्नानुसार है: आपको यह समझने और नियंत्रित करने की आवश्यकता है कि पारंपरिक बाल्टी में सब कुछ दिए बिना, जितना संभव हो उतना संभव हो सके।

परिणाम

संपादित भाग।
उन्होंने निष्कर्ष निकालने के लिए कहा।
मैं क्या कहना चाहता था:
1. मुख्य विचार।
यह सोचने और करने के लिए तार्किक रूप से बुरा है।

मैजिक बॉक्स, यहाँ मेरा तत्व है इसके साथ मेरे 5 वें स्तर के सपनों की क्रिया है।
जब आप लिखते हैं तो यही कहते हैं
$ ('myElement')। doDoingOfMyDrem (5);
बॉक्स को समझना चाहिए कि उससे क्या पूछा जा रहा है और परिणाम को एक आवरण में चलाएं।

निम्नलिखित मुझे अधिक सही लगता है:
मेरे सपनों की कार्रवाई को एक तत्व के साथ करें, जो कि कक्षा से, 5 वें स्तर की कार्रवाई को लागू करने के लिए मिल सकता है।
J हेल्पर्स की मदद से ऐसा दिखेगा
J.doDoingOfMyDrem (J. $ c ('myElement'), 5);

और अगर आपके पास वांछित तत्व का लिंक था, उदाहरण के लिए तत्व के DOM ईवेंट हैंडलर के संदर्भ में, यह इस तरह होगा:
$ (यह) .doDoingOfMyDrem (5);
के खिलाफ
जे। डूडिंगऑफएम डेड्रीम (यह, 5);

एक उदाहरण के रूप में 350 divs का उपयोग कर एक अच्छे वातावरण में समय, परिणाम 14ms से अलग है और कुछ भी खर्च नहीं करता है, लेकिन मोबाइल पर अंतर अलग है। स्वयं सेवा कियोस्क पर जैसे किवी या नया भुगतान, जो अब तक मुझे HTML में पता है, तीसरा। और Android के साथ टीवी पर?

3. एक लंबे समय से गंभीर वेब अनुप्रयोगों का युग आया है, जिसमें ऐसे छोटे भागों की एक बड़ी संख्या होती है, जो उन्हें कभी बड़े और बड़े बंडलों में जोड़ते हैं। अक्सर, वास्तविक प्रदर्शन की समस्याएं पहले से ही बंडलों के बड़े बंडलों में महसूस होती हैं, इसलिए वास्तव में गंभीर चीज के डिजाइन को न्यूनतम भत्ता इकाइयों के साथ शुरू करने की आवश्यकता है। मेरी राय में, न तो jQ, और न ही कई अन्य रूपरेखाओं ने खुद को एक गंभीर नींव होने का कार्य निर्धारित किया है, लेकिन उन्होंने कई कारणों का आधार बनाया, और सबसे खराब हिस्सा फ्रेमवर्क प्रोग्रामर द्वारा पैदा हुआ था जो अपने जादू के बक्से की कीमत को नहीं समझते हैं। जिसके परिणाम में मैं यह दिखाना चाहता हूं कि यह एक अलग तरीके से कैसे ~~आवश्यक~~ है।

बाल्टी और कोर नहीं

More articles: