डार्ट: कार्रवाई में वेब घटक

वेब घटक Google द्वारा विकसित एक नया वेब मानक है। कुछ का मानना ​​है कि निकट भविष्य में यह एक प्रवृत्ति बन जानी चाहिए। और मैं, व्यापार में इसकी कोशिश कर रहा हूं, शायद इस राय से सहमत हूं।
मानक का विस्तृत विवरण: habrahabr.ru/post/152001

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

• कोड की मात्रा कम हो जाती है
• DOM जोड़तोड़ को कोड से हटा दिया जाता है,
• केवल तर्क कोड में रहता है।

मैं ध्यान देता हूं कि अब तक यह वेब घटकों के लिए वेब मानक के लिए मूल समर्थन के बारे में नहीं है, लेकिन डार्ट का उपयोग करके उनके कार्यान्वयन के बारे में है। शायद यह कार्यान्वयन पुराने ब्राउज़रों के लिए एक प्रकार का कमबैक होगा।

यह पोस्ट नॉकआउट से परिचित किसी को भी आश्चर्यचकित नहीं करेगी। js यह लगभग समान है, लेकिन देशी जेएस में।

वास्तविक अनुभव

मैंने इसे आजमाने का फैसला किया। मेरे पास बस एक मिनी-प्रोजेक्ट था: एक टाइम ट्रैकर। मैंने खुद को बेहतर तरीके से जानने के लिए इसे विशेष रूप से लिखा। (वैसे, परिचित, "ऐसा-तो था।" उस समय, डार्ट और इसके संपादक दोनों कच्चे थे।)

कोड: github.com/Leksat/time_tracker
लाइव संस्करण: leksat.me/sites/default/files/time_tracker/web/out/_nain.html.html

वैश्विक ऑब्जेक्ट timeTracker प्रोग्राम के शुरुआती बिंदु के रूप में कार्य करता है। उनकी मुख्य जिम्मेदारियाँ: स्थानीयकरण में कार्यों को लोड करना और सहेजना। tasks संपत्ति में tasks एक सूची होती है, प्रकार Task की वस्तुएं।

और यहां वेब घटकों के साथ पृष्ठ के लिए कोड है।

संपादित करें: कोड अब प्रासंगिक नहीं है ।

 <div id="main-wrapper" class="{{timeTracker.wrapperClass}}"> <div id="time-tracker"> <div id="tools"> <button data-action="click:timeTracker.createNewTask">New Task</button> <button data-action="click:timeTracker.deleteAllTasks">Clear all</button> </div> <div id="tasks"> <template iterate='task in timeTracker.tasks'> <div class="task"> <input class="name" type="text" data-bind="value:task.name" /> <input class="time" type="text" data-bind="value:task.time" disabled="{{task.working}}" /> <button data-action="click:task.toggleState">{{task.toggleStateLabel}}</button> <button data-action="click:task.delete">Delete</button> </div> </template> </div> </div> </div> 

पहली नज़र में यह एक नियमित टेम्पलेट की तरह दिखता है। लेकिन केवल पहली बार में।

• data-action="click:timeTracker.createNewTask" onclick हैंडलर को data-action="click:timeTracker.createNewTask" ।
• data-bind="value:task.name" input ऑब्जेक्ट की वैल्यू प्रॉपर्टी की वैल्यू के लिए task ऑब्जेक्ट की name प्रॉपर्टी को बांधता है। सबसे अच्छी बात यह है कि यह अप्रत्यक्ष रूप से किया जाता है। जब उपयोगकर्ता ब्राउज़र में मूल्य बदलता है, तो प्रोग्राम में ऑब्जेक्ट की संपत्ति को बदल दिया जाएगा, और इसके विपरीत, यदि ऑब्जेक्ट की संपत्ति प्रोग्राम में बदलती है, तो input तत्व का मूल्य स्वचालित रूप से अपडेट हो जाएगा। यह ध्यान देने योग्य है कि बाध्यकारी वस्तु के संपर्क उदाहरण के लिए होता है। कॉलबैक के लिए भी यही सच है।
• Task . timeTracker.tasks " ". . .
  यह एक बहुत अच्छा दृष्टिकोण है। डार्ट की सभी मुख्य विशेषताएं पहले से ही एक डिग्री या किसी अन्य पर लागू होती हैं। अब यह केवल बग फिक्स का मामला है, एक आभासी मशीन को गति देना और उत्पन्न जावास्क्रिप्ट कोड को कम करना।