अतिरिक्त $ watch'ers से छुटकारा पा रहा है

मैं $ $ पचाने के साथ मानक निर्देशों को प्रतिस्थापित करके $ डाइजेस्ट () को निष्पादित करने की गति को कम करने के बारे में एक छोटी टिप्पणी साझा करना चाहूंगा।

मुद्दा यह है कि अक्सर पृष्ठ पर बहुत सारे तत्व होते हैं जिनके लिए आपको केवल एक बार मॉडल डेटा का उपयोग करके डेटा को बाँधने की आवश्यकता होती है जो कि नहीं बदलता है, उदाहरण के लिए:

<h1 ng-bind="l10n.main_title"></h1> 

 <a ng-href="/edit/{{user.id}}" ng-bind="user.name"></a> 

ये और अन्य मानक निर्देश कृपया जाँचेंगे कि क्या अभिव्यक्ति का मूल्य हर $ पचने के साथ बदल गया है। स्थिति को सरल कस्टम निर्देशों के एक सेट द्वारा ठीक किया जा सकता है, उदाहरण के लिए, पाठ के लिए:

 app.directive("staticText", function() { return { restrict: "A" link: function(scope, element, attrs) { element.text(scope.$eval(attrs.customText)); } }; }) 

 <h1 static-text="l10n.main_title"></h1> 

परिणाम शून्य से एक $ घड़ी है।
बेशक, आपको अपनी बाइक का आविष्कार करने की आवश्यकता नहीं है, GitHub पर दो योग्य मॉड्यूल हैं:

• $ घड़ी सेनानियों - GitHub
• बिंदोंस - गीठहुब

पहला ($ वॉच फाइटर्स) काफी सरल है, इसमें निम्नलिखित निर्देश शामिल हैं:

• सेट शीर्षक
• सेट href
• सेट पाठ
• सेट एचटीएमएल
• सेट वर्ग
• सेट करता है, तो

दूसरा (बिंडोंसे) अधिक दिलचस्प है, क्योंकि डेवलपर्स ने सोचा कि बाध्यकारी के लिए डेटा निर्देश टेम्पलेट प्रदान करने के समय उपलब्ध नहीं हो सकता है (उदाहरण के लिए, वे एक अजाक्स अनुरोध के साथ लोड किए गए हैं)। यह इस तरह दिखता है:

 <div bindonce="User"> <h1 bo-text="User.name"></h1> </div> 

माता-पिता के प्रत्यक्ष निर्देश के लिए, एक अस्थायी $ घड़ी बनाई जाती है, जब इसमें पारित चर का मान अपरिभाषित से अलग हो जाता है , नेस्टेड बो- * निर्देश लॉन्च किए जाते हैं, और अस्थायी $ घड़ी हटा दी जाती है।
Bindonce मॉड्यूल में शामिल हैं:

• बो-अगर
• बो शो
• बो-हाइड
• बो-पाठ
• बो-एचटीएमएल
• बो-href
• बो-src
• बो श्रेणी
• बो-alt
• बो-शीर्षक
• बो-आईडी
• बो शैली
• बो-मूल्य
• बो-अत्र बो-अत्र-फू

आप रिपॉजिटरी पेज पर अधिक विस्तार से पढ़ सकते हैं, काफी विस्तृत रीडमी है।

अंत में, मैं वह फ़ंक्शन दूंगा जो मुझे यहां मिला था । यह प्रति पृष्ठ लगभग $ watch'ers की कुल संख्या की गणना करता है।

 (function () { var root = $(document.getElementsByTagName('body')); var watchers = []; var f = function (element) { if (element.data().hasOwnProperty('$scope')) { angular.forEach(element.data().$scope.$$watchers, function (watcher) { watchers.push(watcher); }); } angular.forEach(element.children(), function (childElement) { f($(childElement)); }); }; f(root); console.log(watchers.length); })(); 

हितों की खातिर, आप शून्य-घड़ी निर्देशों के लिए राशि और कार्यान्वयन क्षेत्र की तुलना कर सकते हैं।
मुझे उम्मीद है कि कोई काम आएगा। आपका धन्यवाद