लाइब्रेरी को फिर से लोड करना या Redo jQuery.html को रोकें ()

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

लेकिन अगर आप करीब से देखें, तो यहां सब कुछ इतना सुंदर नहीं है। jQuery प्रत्येक नेस्टेड लाइब्रेरी को लोड करता है, भले ही यह ब्राउज़र द्वारा लोड किया गया हो या नहीं, और यहां तक ​​कि ब्राउज़र कैश के उपयोग को रोकने के लिए क्वेरी के लिए एक अनूठा पैरामीटर जोड़ता है। मैंने विवरण में नहीं बताया कि jQuery डेवलपर्स ने इस विशेष योजना को क्यों चुना और इसे html () फ़ंक्शन के चारों ओर लपेटा, जो इस समस्या को ठीक करता है।

So. हमें किन समस्याओं को हल करने की आवश्यकता है:

1. पुस्तकालयों और शैलियों को फिर से लोड न करें
2. नए पुस्तकालयों या शैलियों को लोड करते समय, ब्राउज़र कैश का उपयोग करें
3. चूंकि नेस्टेड स्क्रिप्ट जुड़े पुस्तकालयों से कार्यों का उपयोग कर सकते हैं, उन्हें सभी पुस्तकालयों को लोड करने के बाद चलाने की आवश्यकता है।

सिद्धांत रूप में, कुछ भी जटिल नहीं है। नियमित अभिव्यक्ति का उपयोग करके समस्या हल की जाती है।

1. हमने सामग्री से सभी <script> और <link> टैग्स को काट दिया, उनकी तुलना पहले से जुड़े लोगों से करें और स्थिति के आधार पर उन्हें लोड करें।
2. हम जुड़े पुस्तकालयों के लिए ऑनलोड इवेंट हैंडलर डालते हैं जिसमें हम सभी नेस्टेड स्क्रिप्ट चलाते हैं।

मैं खुद ही प्लगइन का कोड संलग्न करता हूं:

(function($){ var originalHtmlMethod = $.fn.html; /** *      */ var sanitize = { scriptsCountLoading:0, inlineScripts:[], /** *     onload. *          */ loadingCompleted:function(){ if (this.scriptsCountLoading==0){ if ($.isArray(this.inlineScripts)){ for (var i=0; i<this.inlineScripts.length; i++){ eval.call(window,this.inlineScripts[i]); } this.inlineScripts = []; }else{ if (this.inlineScripts){ eval.call(window,this.inlineScripts); this.inlineScripts = []; } } } }, /** *   javascript       . *   scriptsCountLoading */ sanitizeScripts:function(data){ var scripts = $('script'); var scriptSrc = []; for (var i=0; i<scripts.length; i++){ scriptSrc[scriptSrc.length] = scripts[i].src; } var patternScripts = /<script[^<>]*?src=\"?([^><\\\"\\']*)\"?[^<>]*?>[\s\S]*?<\/script>/igm; var absolutePath = /https?:\/\//; var matches = null; var dataScriptSrc = {}; while (matches = patternScripts.exec(data)){ var matchedString = matches[0]; var src = matches[1]; if (absolutePath.test(src)){ // absolute path }else{ // relative path if (src[0]!='/'){ src = window.location.href.replace(/#|\?.*$/)+'/'+src; var m = null; while (m = /[^\/]*\/\.\.\//ig.exec(src)){ src = src.replace(m[0],''); } }else{ src = window.location.protocol+'//'+window.location.hostname+src; } } data = data.replace(matchedString,''); patternScripts.lastIndex -= matchedString.length; if ($.inArray(src,scriptSrc)==-1){ this.scriptsCountLoading++; //   var self = this; this.loadScript(src,function(){ self.scriptsCountLoading--; self.loadingCompleted(); }); } } return data; }, /** *   .        */ sanitizeInlineScripts:function(data){ var scripts = $('script'); var scriptSrc = []; for (var i=0; i<scripts.length; i++){ scriptSrc[scriptSrc.length] = scripts[i].src; } var patternScripts = /<script[^<>]*?>([\s\S]*?)<\/script>/igm; var absolutePath = /https?:\/\//; var matches = null; var dataScriptSrc = {}; while (matches = patternScripts.exec(data)){ var matchedString = matches[0]; var script = matches[1]; data = data.replace(matchedString,''); patternScripts.lastIndex -= matchedString.length; this.inlineScripts[this.inlineScripts.length] = script } return data; }, /** *   css ,       */ sanitizeHeadLinks:function(data){ var links = $('link'); var linkSrc = []; for (var i=0; i<links.length; i++){ linkSrc[linkSrc.length] = links[i].href; } var patternHeadLinks = /<link[^<>]*?href=\"?([^><\\\"\\']*)\"?[^<>]*?\/>/igm; var absolutePath = /https?:\/\//; var matches = null; var dataScriptSrc = {}; while (matches = patternHeadLinks.exec(data)){ var matchedString = matches[0]; var src = matches[1]; if (absolutePath.test(src)){ // absolute path }else{ // relative path if (src[0]!='/'){ src = window.location.href.replace(/#|\?.*$/)+'/'+src; var m = null; while (m = /[^\/]*\/\.\.\//ig.exec(src)){ src = src.replace(m[0],''); } }else{ src = window.location.protocol+'//'+window.location.hostname+src; } } data = data.replace(matchedString,''); patternHeadLinks.lastIndex -= matchedString.length; if ($.inArray(src,linkSrc)==-1){ this.loadCSS(src); } } return data; }, /** *    */ sanitizeData:function(data){ data = this.sanitizeInlineScripts(this.sanitizeScripts(this.sanitizeHeadLinks(data))); return data; }, /** *   */ loadScript:function(url,onload){ var e = document.createElement("script"); e.src = url; e.type="text/javascript"; if (onload instanceof Function){ e.onreadystatechange= function () { if (this.readyState == 'complete') onload(); } e.onload= onload; } document.getElementsByTagName("head")[0].appendChild(e); }, /** *  css  */ loadCSS:function(url){ var oLink = document.createElement("link") oLink.href = url; oLink.rel = "stylesheet"; oLink.type = "text/css"; document.getElementsByTagName("head")[0].appendChild(oLink); } } /** *    html() */ $.fn.html = function(data){ data = sanitize.sanitizeData(data); var res = originalHtmlMethod.apply( this, [data] ); sanitize.loadingCompleted(); return res; } })(jQuery); 

अद्यतन: खाबरोवस्क नागरिकों की प्रतिक्रिया को ध्यान में रखते हुए, मैं कुछ स्पष्टीकरण जोड़ना आवश्यक समझता हूं।

यह पोस्ट एक विशेष पीसीपी ढांचे के उपयोग से उत्पन्न होने वाली समस्या (वास्तुकला को बदले बिना) के त्वरित समाधान के लिए एक विचार या एक विकल्प के रूप में बनाया गया था। इस मामले में, उन्हें वाईआईआई की वास्तुकला द्वारा निर्देशित किया गया था।

चूंकि प्लगइन्स स्क्रिप्ट का एक आत्म-निहित पैकेज है, इसलिए यह केवल "प्लग इन" करने के लिए पर्याप्त है क्योंकि सब कुछ चमत्कारिक रूप से काम करना शुरू कर देता है। इस मामले में, प्लगइन स्वयं सभी आवश्यक पुस्तकालयों, लिपियों, शैलियों को जोड़ देगा और रूपरेखा इस पूरी चीज को निष्कर्ष पर भेज देगी।

कई प्लगइन्स सामग्री को गतिशील रूप से (ajaxom) लोड करते हैं, और यहाँ समस्या होती है। इस गतिशील सामग्री में एक स्व-निहित प्लग-इन Yii टूल (सभी पुस्तकालयों, लिपियों और शैलियों के साथ) हो सकता है। ऐसी सामग्री लोड करते समय, jQuery ऊपर वर्णित अनुसार व्यवहार करेगा। चूंकि ये प्लगइन्स jQuery का उपयोग करते हैं, इसलिए वैश्विक प्रदर्शन के लिए HTML () फ़ंक्शन को ओवरलोड करने का प्रस्ताव करना तर्कसंगत था।

सामान्य तौर पर, html () फ़ंक्शन को बदलना मौलिक नहीं है। आप पूर्वनिर्धारित डेटाफिल्टर का उपयोग भी कर सकते हैं जैसा कि पहली टिप्पणी में बताया गया है।