जावास्क्रिप्ट: परीक्षण, संकलन और MVVM

शुभ दिन।
आधुनिक दुनिया कुछ अवसरों को जावास्क्रिप्ट का सामना नहीं करने के लिए छोड़ देती है। Nodejs मेरे लिए आखिरी तिनका था और, RoR (बहुत जादू और जनरेटर्स - नो होलीविवि, रूबिस्ट्स!) में निराश होकर, मैंने फिर से पागलपन का शिकार हुआ: क्लाइंट और सर्वर पर एक भाषा। हालाँकि जावास्क्रिप्ट एक भाषा के रूप में सुंदर है, वहाँ कोई रूपरेखा नहीं है जो एमवीवीएम या कम से कम एमवीसी को लागू करता है जो मुझे पसंद है। वे सभी भारी हैं और अतिरिक्त (रद्दी) कोड लिखने की आवश्यकता है। इसलिए, मैं एमवीवीएम के अपने दृष्टिकोण को अदालत में लाना चाहता हूं और सही दिशा में किक्स के समुदाय से प्राप्त करना चाहता हूं। सबसे अच्छी दिशा यह होगी: "आप लाइब्रेरी से चूक गए,% Library_name% को देखें", क्योंकि मैंने सतह पर सब कुछ देखा (कोणीयर्ज, नॉकआउट, आदि)। खैर, चूंकि रूपरेखा कच्ची है और लंबे समय से प्रतीक्षित किक्स के बदले में अब किसी को लाभान्वित करने की संभावना नहीं है, इसलिए इसे लिखते समय मैं अपने अनुभव को संक्षेप में बताने की कोशिश करूंगा।

परीक्षण

वह बिल्बो को बहुत सारे रूमाल, अपने पसंदीदा पाइप और तंबाकू लाया।

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

भले ही यह सुनने में कितना भी अजीब लगे, लेकिन टेस्ट शुरू करने के लिए हमें एक HTML डॉक्यूमेंट की जरूरत होती है।

आप देख सकते हैं कि यह रिपॉजिटरी या यहां क्लोनिंग करके कैसे काम करता है

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

क्वनिट में ऐसी सुविधाएं भी हैं जो किसी भी प्रोग्रामर की आत्मा को गर्म करती हैं। अपने लिए किसी चीज़ को कॉन्फ़िगर करना हमेशा अच्छा होता है, खासकर जब आप यह सुनिश्चित करना चाहते हैं कि कंपाइलर सह-लेखक बनने की कोशिश कर रहा है, बल्कि सह-लेखक बनने की कोशिश कर रहा है, उस तर्क को सही करता है जिसके साथ वह सहमत नहीं है।

 QUnit.config.urlConfig.push({ id: "min", label: "Minified source", tooltip: "Load minified source files instead of the regular unminified ones." }); QUnit.config.autostart = false; ... require( tests.concat(document.location.href.indexOf("min=true") > 0 ? productionRequire : developmentRequire), function() { QUnit.start(); } ); 

संपूर्ण विवरण, फिर से, परियोजना की वेबसाइट पर यहां उपलब्ध है , लेकिन उन लोगों के लिए जो क्लिक करने के लिए बहुत आलसी हैं:

Qunit मेनू में एक चेकबॉक्स जोड़ें, और यदि यह सक्षम है, तो url में हम min = true देखेंगे
हम परीक्षणों की स्वचालित शुरुआत को बंद कर देते हैं और अंत में, एक अद्भुत ruquirejs पुस्तकालय दिखाई देता है , जिसकी मदद से हम डेवलपर्स के लिए संकलित कोड या कोड डाउनलोड करते हैं।

मैं यहाँ ठीक, बराबर, या गहरी विधियों का वर्णन नहीं दूंगा - मेरी राय में यह अनावश्यक है अगर यहाँ एक पूर्ण और समझने योग्य विवरण है । इसलिए, परीक्षण और qunit के बारे में, शायद सभी।

कोड संकलन

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

शायद आधुनिक दुनिया में कुछ किलोबाइट के लिए लड़ाई थोड़ी अजीब लगती है, लेकिन हम एक ऐसी दुनिया में रहते हैं, जहां एक दूसरे के द्वारा साइट लोड समय बढ़ाने से ग्राहकों की संख्या 10-20% कम हो जाती है, इसलिए हम इसे दार्शनिक रूप से लेंगे, खासकर जब से यह इतना मुश्किल नहीं है। ।

एक संकलक के रूप में, मैंने Google बंद को चुना और मुझे निम्न स्क्रिप्ट मिली:


दरअसल, यहां केवल एक ही लाइन ऑफ इंटरेस्ट है, वह है
java -jar libs / compiler.jar - js out / बाइंडिंग .js --js_output_file आउट / बाइंडिंग- min.js --compilation_level SIMPLE_OPTIMIZATIONS

js - संकलित फ़ाइल का नाम
js_output_file - संकलित कोड को डालने के लिए फ़ाइल का नाम
compilation_level - संकलन स्तर

अगर मैं आपके लिए कुछ महत्वपूर्ण याद करता हूं, तो अधिक विस्तृत जानकारी पूरी करके प्राप्त की जा सकती है

 java -jar compiler.jar --help 

BindItJS

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

मैं आँखों में टोरिन की आलोचना नहीं करूँगा और निश्चित रूप से, मैं सफल और निश्चित रूप से अद्भुत मौजूदा रूपरेखाओं पर टिप्पणी नहीं करूंगा, उनके बिना जीना बहुत मुश्किल होगा। इसलिए, मैं निम्नलिखित प्रारूप का प्रस्ताव करता हूं - मैं केवल इस बारे में कल्पना करूंगा कि आदर्श (IMHO) ढांचे को डेटा बाइंडिंग के लिए कैसा दिखना चाहिए।

डाउनलोड करें जो आगे यहां चर्चा की जाएगी ।
और मैं एक्सओ परियोजना से सभी उदाहरण दूंगा, आप यहां खेल सकते हैं

पाठ में कोई "IMHO" कर्टिस नहीं होगा, लेकिन आगे पढ़ते हुए आपको यह समझना चाहिए कि मैं एक व्यक्तिपरक राय लिख रहा हूं जो आपके धार्मिक या किसी अन्य भावना को रोक सकता है, और यदि आप किसी चीज से असहमत हैं, तो मैं आपकी तर्कपूर्ण टिप्पणी को आनंद के लिए पढ़ूंगा और मैं इसका यथोचित उत्तर दूंगा। हम सभी यहाँ वयस्क हैं, हाँ।

• मॉडल और व्यू कोड पोस्ट किया जाना चाहिए ( SRP )
• एक बार लिखे जाने के बाद, व्यू कोड का पुन: उपयोग करना आसान होना चाहिए ( DRY )
• प्रतिनिधित्व को मॉडल परत गठन के सिद्धांत को निर्देशित नहीं करना चाहिए
• अतिरिक्त कोड लिखे बिना मॉडल के डेटा से पृष्ठ पर एक अलग प्रतिनिधित्व हो सकता है
• मॉडल को बदलना स्वचालित रूप से उपयुक्त प्रस्तुति विधि को खींचना चाहिए

नतीजतन, हमें पवित्र त्रिमूर्ति मिलती है: HTML लेआउट, दृश्य, मॉडल। कोड के माध्यम से डेटा और प्रस्तुति को जोड़ना, जब हमारे पास इंटरफ़ेस का एक घोषणात्मक प्रतिनिधित्व होता है, तो यह मुझे कुछ हद तक बेमानी लगता है, इसलिए मैं लेआउट में प्रस्तुति और डेटा को इंगित करना चाहूंगा, क्योंकि html यह अनुमति देता है। परिणामस्वरूप, मुझे निम्नलिखित सिंटैक्स मिला:

 <div class="pull-left" bind-data="board" bind-handler="BoardBinding"></div> 

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

 var ButtonBinding = { init : function(binding) { binding.element.onclick = function() { binding.callBindingFunction(); } }, modelChanged : function(binding) { if (ObjectUtils.getObjectType(binding.getModel()) != ObjectUtils.TYPE_FUNCTION) { binding.element.setAttribute("disabled", "disabled"); return; } binding.element.removeAttribute("disabled"); } }; Binding.DefaultHandlers["BUTTON"] = ButtonBinding; 

 <button class="btn btn-success" bind-data="newGame">New game</button> 

आइए ButtonBinding पर एक करीब से नज़र डालें - इसमें 2 विधियाँ हैं: init , जिसे तब कहा जाता है जब मॉडल और दृश्य को आरंभीकृत किया जाता है, और मॉडलचेंज किया जाता है, जिसे मॉडल बदलने पर कहा जाता है। यह इस उदाहरण में उपयोग नहीं किया गया है, लेकिन मॉडलचैनड में दो अतिरिक्त तर्क हैं: मॉडल परिवर्तित वस्तु है, और घटना में घटना का विवरण होता है।
यह व्याख्या करने योग्य है कि कनेक्शन स्वयं ऑब्जेक्ट के उदाहरण के साथ नहीं बनाया गया है।
Xo में , हमारे पास $ data.Game.board है - यह एक ऐसी वस्तु है जिसमें खेल के मैदान का विवरण होता है। जब हम "नया गेम" बटन पर क्लिक करते हैं, तो $ data.Game की विधि कहलाती है

 newGame : function() { this.board = new Board(DEFAULT_SIZE); this.state = { player : 0, winner : null }; } 

यह फ़ंक्शन एक नया उदाहरण बनाता है, लेकिन हम देखेंगे कि संबंधित दृश्य के मॉडलचैन को बुलाया गया था, और $ data.Game को उस वस्तु के रूप में पारित किया जाएगा जिसने घटना को ट्रिगर किया है, और घटना विवरण घटना के लिए पारित किया जाएगा।

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

वर्तमान स्थिति और रोडमैप

अब यह प्री-प्री-प्री-अल्फा है और सब कुछ बदल सकता है। इस लेख का उद्देश्य आपसे प्रतिक्रिया प्राप्त करना है, क्या इस तरह का वाक्यविन्यास आपकी परियोजनाओं में सुविधाजनक होगा या नहीं, क्या गायब है? केवल क्रोम में लाइब्रेरी की जाँच की।
रोडमैप

• कॉस्मेटिक रीफैक्टरिंग (साफ-सुथरे वर्ग के नाम - सब कुछ ट्रांसफर कर दें)
• प्रमुख ब्राउज़रों के लिए स्थिर करें
• अतिरिक्त UI असेंबली (मुख्य टैग इनपुट, बटन आदि के लिए देखें)
• ...
• लाभ

अंत में, मैं सामूहिक मन से कुछ प्रश्न पूछना चाहूंगा:

• आप UI का परीक्षण कैसे करते हैं? उपयोगकर्ता व्यवहार की नकल करने वाला एक पुस्तकालय मेरे लिए बहुत उपयोगी होगा: क्लिक, पाठ इनपुट आदि
• रूसी में रोडमैप का अनुवाद कैसे करें? यह मुझे देखने के बजाय "दृश्य" से परेशान करता है, लेकिन यह वास्तविक मानक है, और रोडमैप के रूसी एनालॉग भी बदतर हैं