👨🏾‍🍳 💠 🔜 Jiant पर ToDoMVC लागू करना 🎩 👸🏽 🧜🏾

मैं उन सभी को धन्यवाद देता हूं जिन्होंने पहली पोस्ट को पढ़ा, जवाब दिया और मूल्यांकन किया!

यह प्रदर्शित करने के लिए कि विचारधारा कैसे काम करती है, जाइंट ने ToDoMVC को लागू किया, जो विभिन्न MVC फ्रेमवर्क का मूल्यांकन करने के लिए बनाई गई परियोजना है। Jiant एक MVC फ्रेमवर्क नहीं है, बल्कि सहायक उपकरणों के एक सेट के साथ विकास के लिए एक दृष्टिकोण है। इसे विकसित करने में मुझे लगभग 8 घंटे लगे, स्पेसिफिकेशन पढ़ने और समझने में, रेफ़रेंस इम्प्लीमेंटेशन, लोकलस्टोरेज का अध्ययन करने में, जिसके साथ मेरा कोई व्यवसाय नहीं था (एक बहुत ही साधारण बात), और बाकी सब। मुझे नहीं पता कि यह बहुत कम है या थोड़ा, लेकिन बहुत कुछ है। परिणाम github.com/vecnas/todomvc-jiant पर हैं । क्रोम और फ़ायरफ़ॉक्स में यह फ़ाइल सिस्टम से सीधे काम करता है, IE में - सर्वर से।

विनिर्देश

github.com/addyosmani/todomvc/wiki/App-Specification - विनिर्देश अंग्रेजी में। मैं यहां प्रमुख बिंदुओं को संक्षेप में बताऊंगा।
कार्य प्रबंधन (ToDo) के लिए एक उपकरण विकसित करना आवश्यक है, निम्नलिखित बिंदुओं को लागू किया जाना चाहिए:

भंडारण। सभी कार्यों और उनकी स्थिति को स्थानीय भंडारण (एचटीएमएल 5 लोकलस्टोरेज) में संग्रहित किया जाना चाहिए और बहाल किया जाना चाहिए, उदाहरण के लिए, ब्राउज़र को पुनरारंभ करना।
नेविगेशन। एप्लिकेशन को ब्राउज़र में हैश नेविगेशन का समर्थन करना चाहिए, अधिक विवरण के लिए मूल देखें। एक नेविगेशन प्रारूप वहां निर्दिष्ट किया गया है, लेकिन जाइंट का इससे थोड़ा अलग प्रारूप है, यह नेविगेशन नोड्स को निर्दिष्ट करने की क्षमता और फिर उन पर लौटने के कारण है। इसे नेविगेशन बार के बटनों द्वारा नियंत्रित किया जाता है। तीन राज्य हैं: सभी दिखाएं, सक्रिय दिखाएं और शो पूरा करें
नई चुनौतियां। वे पृष्ठ के शीर्ष पर इनपुट फ़ील्ड को भरने और एंटर कुंजी दबाकर दर्ज किए जाते हैं।
बड़े पैमाने पर हेरफेर। एक विशेष बटन पूर्ण या पूर्ण नहीं के रूप में सभी कार्यों को चिह्नित करता है। बटन स्थिति भी सभी कार्यों की वर्तमान स्थिति के साथ सिंक्रनाइज़ है। यही है, अगर हम एक नया जोड़ते हैं जब सब कुछ पहले से ही पूरा हो जाता है, तो संकेतक यह दिखाना बंद कर देगा कि सब कुछ किया गया है
टास्क। तीन संवादात्मक तत्वों का प्रतिनिधित्व करता है - किया-क्लिक नहीं किया गया कार्य, हटाए गए कार्य बटन और नाम पर डबल-क्लिक करके कार्य करता है - कार्य पाठ को संपादित करना संभव बनाता है
का संपादन। इनपुट फ़ील्ड खुलता है, शेष तत्व छिपे होते हैं, एंटर दबाकर या फोकस खो कर - एस्केप को दबाकर, टेक्स्ट को बचाता है - सभी परिवर्तनों को रद्द कर देता है, यदि सेव करते समय टेक्स्ट खाली है - कार्य को हटा देता है
सक्रिय कार्यों का काउंटर। वर्तमान सक्रिय कार्यों की संख्या को दिखाता है, किसी भी परिवर्तन के लिए सिंक्रनाइज़ किया गया है, पाठ साक्षर होना चाहिए ("1 कार्य", लेकिन "2 कार्य")
पूरा हो गया। पूर्ण किए गए कार्यों की संख्या दिखाता है, उन्हें क्लिक करके हटा देता है और केवल तभी दिखाया जाता है जब कम से कम एक पूर्ण कार्य हो
काउंटर और नेविगेशन बटन के साथ एक पैनल केवल तभी दिखाया जाता है जब कम से कम एक कार्य हो

इनपुट में, एक परियोजना टेम्पलेट जारी किया गया था जिसमें HTML कोड और कुछ इंटरैक्टिव स्क्रिप्ट, साथ ही साथ सभी शैलियाँ थीं।

जाइंट प्रोजेक्ट स्ट्रक्चर

फिलहाल, आदर्श संरचना इस प्रकार है:

एप्लिकेशन डेफिनिशन फाइल - एप्लिकेशन एपीआई का वर्णन करने वाले जसन चर की घोषणा
"इग्निशन" उपयोगकर्ता के लिए कहीं भी सुविधाजनक करने के लिए एक कॉल है
"प्लगइन्स" का एक सेट - एप्लिकेशन लॉजिक, जिनमें से प्रत्येक अपने सैंडबॉक्स में इनकैप्सुलेटेड है और एप्लिकेशन एपीआई के माध्यम से काम करता है

प्रारंभिक डिजाइन

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

राज्यों

यदि आपको हैश नेविगेशन की आवश्यकता है, तो आवेदन में राज्य होंगे। हम उन्हें सूचीबद्ध करते हैं, हम सीधे सूची से सूची लेते हैं, ऐसा नहीं सोचते:

states: { "": { go: function () {}, start: function(cb) {}, end: function(cb) {} }, active: { go: function () {}, start: function(cb) {}, end: function(cb) {} }, completed: { go: function () {}, start: function(cb) {}, end: function(cb) {} } }

स्पष्टीकरण: प्रारूप के अनुसार, यदि एप्लिकेशन विवरण चर में स्टेट्स सेक्शन है, तो Jiant इसमें सूचीबद्ध राज्यों को लोड करता है और प्रत्येक के लिए तीन विधियों को लागू करता है: go, start, end। गो का उपयोग राज्य में संक्रमण, शुरुआत और अंत में राज्य की शुरुआत या अंत पर प्रतिक्रिया करने के लिए किया जाता है। सबसे छोटी प्रविष्टि इस प्रकार है:

  states: { "": {}, active: {}, completed: {} }

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

राज्य डिजाइन के विषय को पूरी तरह से बंद करने के लिए, आप दो मापदंडों के साथ एक राज्य बना सकते हैं, उदाहरण के लिए:

  states: { "": { go: function(showActive, showCompleted) {} } }

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

घटनाओं

अब हम अनुप्रयोग-स्तर की घटनाओं को परिभाषित करते हैं, फिर से सारगर्भित। वास्तव में, निम्नलिखित सूची सही प्रतीत होती है:

  events: { todoAdded: { fire: function(todo) {}, on: function(cb) {} }, todoRemoved: { fire: function(todo) {}, on: function(cb) {} }, todoStateChanged: { fire: function(todo) {}, on: function(cb) {} } }

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

इंटरफ़ेस

अब आपको एप्लिकेशन के दृश्य भाग को परिभाषित करने की आवश्यकता है। तत्वों की सूची, हमेशा की तरह, ग्राहक के विवरण से, सुविधाजनक रूप में कॉपी की गई है। इस तरह लिखने के बाद:

  views: { main: { batchToggleStateCtl: ctl, newTodoTitleInput: input, todoList: container }, controls: { activeCountLabel: label, clearCompletedCtl: ctl, completedCountLabel: label, showAllCtl: ctl, showActiveCtl: ctl, showCompletedCtl: ctl } },

- मैं html में मिला और पाया कि तत्वों के लिए पहचानकर्ता पहले से पंजीकृत हैं, संरचना सेट है, इसलिए इसे लागू करना अधिक तर्कसंगत होगा। परिणाम:

  views: { header: { newTodoTitleInput: input }, main: { batchToggleStateCtl: ctl, todoList: container }, footer: { activeCountLabel: label, clearCompletedCtl: ctl, completedCountLabel: label, showAllCtl: ctl, showActiveCtl: ctl, showCompletedCtl: ctl } }

और यह संरचना, 10 वें मिनट के डिजाइन में बनाई गई, परियोजना के अंत तक नहीं बदली।

टेम्पलेट्स

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

  templates: { tmTodo: { deleteCtl: ctl, editCtl: ctl, stateMarker: label, toggleStateCtl: ctl, titleInput: input, hiddenInEditMode: collection, titleLabel: label } }

फिर से, मस्तिष्क को एक बार फिर से परेशान न करने के लिए, हम केवल ग्राहक के विवरण से सब कुछ स्थानांतरित करते हैं, सिद्धांत के अनुसार "कार्य बटन हटाएं" - DeleteCtl।
टेम्प्लेट के बारे में कुछ कहा जाना है। सबसे पहले, आप देख सकते हैं कि फ़ील्ड टेम्पलेट के लिए परिभाषित की गई हैं - उन्हें पहली बार वैधता के लिए जाँच की जाती है जब आवेदन शुरू होता है, और दूसरी बात, वे टेम्पलेट से एक तत्व बनाने के बाद संलग्न होते हैं। प्रत्येक टेम्पलेट के दो तरीके हैं: parseTemplate, parseTemplate2Text, जो प्रतिस्थापन के लिए पैरामीटर स्वीकार करते हैं। टेम्पलेट में कोई तर्क नहीं है, केवल मूल्यों का प्रतिस्थापन है, और यह जानबूझकर है - जावास्क्रिप्ट कोड में तर्क का स्थान। बाद में, अनुप्रयोग में एक और टेम्प्लेट दिखाई दिया, जिसमें यह दिखाया गया है कि मूल्यों को प्रतिस्थापित कैसे किया जाता है:

  templates: { .... itemsLeft: {}, itemsLeft1: {} }

कार्यान्वयन:

  <div id="itemsLeft1" style="display: none;"> <strong>!!count!!</strong> item left </div> <div id="itemsLeft" style="display: none;"> <strong>!!count!!</strong> items left </div>

और उपयोग करें:

  tm.parseTemplate2Text({count: count})

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

स्टार्टर

आदर्श संरचना के आधार पर, हम एप्लिकेशन स्टार्टर को app.js फ़ाइल ("ग्राहक से मूल टेम्पलेट में उपलब्ध") में रखेंगे और इसका कोड निम्नानुसार है:

  jQuery(function() { jiant.bindUi("", todomvcJiant, true); });

चूंकि html कोड पहले ही ग्राहक द्वारा निर्धारित किया जा चुका है (और मैं इसे बदलना नहीं चाहता हूं, ताकि सीएसएस को बदलना न पड़े), उपसर्ग रिक्त है (पहला पैरामीटर), todomvcJiant वेरिएबल को एप्लिकेशन परिभाषा फ़ाइल में परिभाषित किया गया है (इसमें दृश्य, टेम्पलेट, स्थिति, घटनाएँ शामिल हैं) और हम मोड चालू करते हैं। विकास।

HTML कार्यान्वयन

खैर, यह सब है, हमारे पास केवल एक परिभाषा फ़ाइल और एक स्टार्टर है, कोई तर्क नहीं है, लेकिन यह वास्तव में आवेदन शुरू करने के लिए दर्द होता है। मैं क्रोम में html चलाता हूं और देखता हूं:

Jiant के एक संदेश के साथ चेतावनी दें जो कहता है कि "कोई इतिहास प्लगइन और कॉन्फ़िगर नहीं किया गया है। राज्यों का उपयोग न करें या $ .History प्लगइन »जोड़ें
असत्य इंटरफ़ेस तत्वों के बारे में एक संदेश के साथ एक और चेतावनी
और कंसोल में दूसरे अलर्ट के पाठ को दोहराएं: ऑब्जेक्ट आईडी के तहत क्लास द्वारा संदर्भित गैर मौजूदा ऑब्जेक्ट, आईडी द्वारा निर्दिष्ट गैर मौजूदा ऑब्जेक्ट, विवरण के लिए स्टैक ट्रेस की जांच करें, अपेक्षित ओज आईडी:

मैं इतिहास जोड़ता हूं - यह शामिल है। अब यह HTML स्तर पर सार परिभाषा को लागू करने के लिए बना हुआ है, उदाहरण के लिए इस तरह:

 <section id="main"> <input id="toggle-all" class="batchToggleStateCtl" type="checkbox" style="display: none;"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list" class="todoList"> </ul> </section>

- पहचानकर्ता पहले से ही व्यवस्थित हैं, यह आवश्यक तत्वों में कक्षाएं जोड़ने के लिए बना हुआ है। टेम्पलेट कार्यान्वयन:

  <div id="tmTodo" style="display: none;"> <li class="stateMarker"> <div class="view hiddenInEditMode"> <input class="toggle toggleStateCtl" type="checkbox"> <label class="editCtl titleLabel"></label> <button class="destroy deleteCtl"></button> </div> <input class="edit titleInput" value=""> </li> </div>

यह ध्यान दिया जाना चाहिए कि, <script type = "someUnreadableTypeToFoolBrowser" में टेम्पलेट रखने के सामान्य अभ्यास के विपरीत, Jiant सही html संरचना का उपयोग करता है, यह इस तथ्य के कारण है कि स्क्रिप्ट टैग के अंदर कोई DOM मॉडल नहीं है और कार्यान्वयन के लिए टेम्पलेट फ़ील्ड के बंधन को मान्य करना असंभव है।

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

प्लग-इन

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

आदर्श

सवाल है - क्या इस एप्लिकेशन को एक केंद्रीकृत डेटा मॉडल की आवश्यकता है? सैद्धांतिक रूप से, प्रत्येक प्लगइन का अपना मॉडल हो सकता है और अनुप्रयोग में होने वाली घटनाओं के आधार पर इसे सिंक्रनाइज़ कर सकता है। व्यवहार में, मैंने इस विकल्प को तुलना के लिए लिखा है, और जैसा कि अपेक्षित था - मुझे बहुत सारे अनावश्यक और दोहराव वाले कोड मिले। इसलिए, हम मॉडल को लागू करते हैं (कार्यान्वयन को सीधे json एप्लिकेशन विवरण फ़ाइल में रखना संभव होगा, लेकिन तब इसे पढ़ना अधिक कठिन हो जाएगा, इसलिए हम इसे विचारधारा के बाद एक अलग प्लगइन के रूप में प्रस्तुत करेंगे), मॉडल। जेएस

 todomvcJiant.model.todo = (function($, app) { var todos = []; return { add: function(title, completed) { var todo = {title: title, completed: completed ? true : false}; todos.push(todo); app.events.todoAdded.fire(todo); return todo; }, remove: function(todo) { todos = $.grep(todos, function(value) {return value != todo;}); app.events.todoRemoved.fire(todo); return todo; }, getAll: function() { return todos; }, getCompleted: function() { return $.grep(todos, function(value) {return value.completed}); }, getActive: function() { return $.grep(todos, function(value) {return !value.completed}); } } })($, todomvcJiant);

सबसे सरल सरणी-आधारित कार्यान्वयन। यह ध्यान देने योग्य है कि यहां हम एप्लिकेशन के कुछ ईवेंट लॉन्च कर रहे हैं। इस मामले में, json प्रोजेक्ट विवरण में एक मॉडल जोड़ना कॉस्मेटिक है (उदाहरण के लिए, वहाँ कोई getActive () विधि नहीं है), Jiant डेटा मॉडल के साथ बिल्कुल भी व्यवहार नहीं करता है।

प्लगइन कार्यान्वयन

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

stateCtls.js

 jiant.onUiBound(function($, app) { //      API   var ctlsView = app.views.footer, ctls = { "showActiveCtl": app.states.active, //      "showCompletedCtl": app.states.completed, "showAllCtl": app.states[""] }; $.each(ctls, function(key, state) { ctlsView[key].click(function() { state.go(); }); state.start(function() { //             ctlsView[key].addClass("selected"); }); state.end(function() { ctlsView[key].removeClass("selected"); }); }); });

footerVisibility.js

 jiant.onUiBound(function($, app) { app.events.todoAdded.on(updateView); //    app.events.todoRemoved.on(updateView); function updateView() { //   todo  ,         app.model.todo.getAll().length > 0 ? app.views.footer.show() : app.views.footer.hide(); } });

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

पुनश्च

जब मैंने अंतिम पंक्ति पर सब कुछ लिखा, तो मुझे महसूस हुआ कि टास्क टेक्स्ट को बदलने के बाद, नया टेक्स्ट लोकलस्टोरेज में तब तक स्टोर नहीं किया जाता है जब तक कि कुछ मौजूदा इवेंट्स नहीं होते हैं। इसे ठीक करने के लिए, मैंने एक नया ईवेंट जोड़ा, todoTitleModified, इसे नए टेक्स्ट (todoRenderer.js) में इंस्टॉल करने के बाद एडिटर में फेंकता है और सेव मॉड्यूल (persistence.js) में ईवेंट को सब्सक्राइब करता है।

Jiant पर ToDoMVC लागू करना