जावास्क्रिप्ट इंटरफ़ेस सार संकेतन

सभी को नमस्कार, यह पोस्ट पुस्तकालय के बारे में है, या बल्कि, जावास्क्रिप्ट में अनुप्रयोग विकास का दर्शन है जो मैंने कुछ महीने पहले आविष्कार किया था। मैं लगातार इसका इस्तेमाल खुद करता हूं, इसे अपने सभी दोस्तों को वितरित करता हूं। समीक्षा सकारात्मक हैं, इसलिए मैंने इसे एक व्यापक समुदाय में खोलने का मौका लेने का फैसला किया।
पुस्तकालय स्वयं एक jQuery के रूप में काम करता है। व्यवहार में, jQuery पर निर्भरता सशर्त है और इसे तब तक पुस्तकालय के साथ साझा किया जा सकता है जब तक इसकी आवश्यकता नहीं थी।
जाइंट आपको किसी भी जटिलता के क्लाइंट एप्लिकेशन बनाने की अनुमति देता है, उनके समर्थन और विकास को बहुत सरल करता है।

संक्षिप्त पृष्ठभूमि

मैं 10 वर्षों से वेब एप्लिकेशन विकसित कर रहा हूं। पिछले कुछ वर्षों से, मैं लगातार GWT का उपयोग कर रहा हूं। दुर्भाग्य से, Google इस लाइब्रेरी की सबसे गंभीर समस्या को हल नहीं कर सका - धीमा संकलन। नए संस्करणों (2.4 और 2.5 के बीच) की रिहाई और साइड में GWT के हस्तांतरण के लिए एक लंबे ठहराव के बाद, कंपनी के प्रमुख डेवलपर्स जहां मैं काम करता हूं (व्यापक रूप से ज्ञात नहीं) सहमत थे कि यह GWT के साथ टाई अप करने का समय था। हमने jQuery पर विकास जारी रखने का निर्णय लिया। लेकिन जीडब्ल्यूटी ने कुछ बहुत ही सुविधाजनक विकास "रिफ्लेक्स" दिए जो स्पष्ट रूप से शुद्ध जावास्क्रिप्ट प्रोग्रामिंग के साथ कमी थे। विशेष रूप से, प्रस्तुति और तर्क के अलगाव के साथ MVC दृष्टिकोण, EventBus। नई स्थिति की असुविधा और परेशानी कुछ विचारों को जन्म देती है, जो धीरे-धीरे विकसित हो रही है और बदल रही है, नीचे वर्णित समाधान के कारण।
इसके अलावा, पुस्तकालय लिखने से पहले, मैंने बैकबोन जैसे मौजूदा एमवीसी समाधानों का पता लगाया और बॉयलरप्लेट कोड की मात्रा (आवश्यक घोषणाओं का अतिरेक) से बहुत खुश नहीं था।

लाभ में से

वास्तव में, पढ़ने के लिए प्रोत्साहन देने के लिए, मैं आगे चलूंगा और मुख्य लाभों को सूचीबद्ध करूंगा:

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

और बहुत कुछ छोटी चीजों पर।

सिद्धांतों

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

• किसी भी इंटरफ़ेस में विचारों का एक समूह होता है (देखें, देखें?) - रूसी में एक शब्द ढूंढना मुश्किल है, क्योंकि ये विगेट्स नहीं हैं, लेकिन स्क्रीन भी नहीं हैं। ये इंटरफ़ेस के अनूठे, सार्थक भाग हैं। यदि आप केवल ग्राहक की कहानी सुनते हैं, तो उन्हें चुनना सबसे आसान है: यहां "संपर्क संपादन स्क्रीन" है, यहां से हम "उपयोगकर्ता सूची" पर जाते हैं (उसी समय पृष्ठ पर कई दृश्य दिखाई दे सकते हैं)।
• प्रत्येक दृश्य में तत्वों का एक सेट होता है, जैसे "सूची में वापस जाने के लिए बटन", "उपयोगकर्ताओं की सूची का कंटेनर", "चित्र चित्र"। ये तत्व समान दृश्य के भीतर पहचाने जाने योग्य हैं।

साथ ही साथ कुछ तकनीकी शोध जो जंगल से होकर गुजरेंगे जब आपको निर्णय लेना होगा कि "इसे कैसे करें"? ताकि यह निम्नलिखित के विपरीत न हो:

• उपयोगकर्ता स्क्रीन पर अंत में जो देखता है वह अनिवार्य रूप से HTML कोड है। और html को रेंडर करने का सबसे अच्छा तरीका क्या है? केवल html ही। यही है, जब हमें उपयोगकर्ता को एक निश्चित इंटरफ़ेस दिखाने की आवश्यकता होती है - हम बस पृष्ठ पर अपना एचटीएमएल डालते हैं और आवश्यक होने पर इसका उपयोग करते हैं। DOM के माध्यम से जेनरेट करने के बजाय, फ़्लाइ पर स्ट्रेटिंग या कॉन्टेक्टिंग स्ट्रिंग्स (सबसे सरल मामलों को छोड़कर)। यह डिजाइनर के लिए जीवन को आसान भी बना देगा - वह बस html कोड डिजाइन करेगा।
• दोहराए जाने वाले तत्व टेम्प्लेट द्वारा उत्पन्न होते हैं, जो फिर से पृष्ठ पर सिर्फ HTML कोड होता है

सबसे महत्वपूर्ण बात, Jiant (जावास्क्रिप्ट इंटरफ़ेस अमूर्त अंकन) ट्रिक्स के एक सेट की तुलना में अधिक विकास दर्शन है। यदि आप इस दर्शन का पालन करते हैं, तो सब कुछ आसानी से और स्वाभाविक रूप से निकल जाता है।

राय

डिज़ाइन

इसलिए, पहले हम कार्यान्वयन के विवरण में जाने के बिना, इंटरफेस को डिज़ाइन करते हैं। उदाहरण के लिए, पंजीकरण फॉर्म के बारे में केवल कथावाचक (या ग्राहक) को सुनना: "उपयोगकर्ता को एक नाम और ईमेल दर्ज करने दें, फिर रजिस्टर बटन दबाएं और उसे एक विंडो दिखाई जाएगी जिसे वह पंजीकृत है, जिसे वह क्लिक करता है और अंदर पहुंच जाता है।"
हम इसे जसन में वर्णित करते हैं, जैसा कि हम सुनते हैं और लिखते हैं।

var registration = { //  ,       views: { //  views     View registrationFormView: { //   nameInput: jiant.input, //    emailInput: jiant.input, //    registerCtl: jiant.ctl //  ,      }, successView: { //      continueCtl: jiant.ctl //   , ,     }, errorView: { //      errorMessage: jiant.label, //    disposeCtl: jiant.ctl //             } } }; 

यह सब कैसे समझें? हम निम्नानुसार कोड पढ़ते हैं: “हमारे आवेदन में तीन विचार हैं - एक पंजीकरण फॉर्म, एक सफलता संदेश और एक त्रुटि संदेश। पंजीकरण फॉर्म में दो इनपुट फ़ील्ड और एक नियंत्रण होता है ... "और इसी तरह। jiant.input और jiant.ctl यहां केवल दस्तावेजीकरण के उद्देश्य से हैं। उदाहरण के लिए, आप इस तरह लिख सकते हैं और यह भी काम करेगा, लेकिन यह पढ़ने पर कम स्पष्ट होगा:

 var registration = { views: { registrationFormView: { nameInput: 1, emailInput: 1, registerCtl: 1, }, successView: { continueCtl: 1 }, errorView: { errorMessage: 1, disposeCtl: 1 } } }; 

हमें एहसास होता है

अब जबकि इंटरफ़ेस को सबसे सार और संक्षिप्त तरीके से वर्णित किया गया है, हम इंटरफ़ेस के साथ एप्लिकेशन लॉजिक को लागू करते हैं और इंटरफ़ेस को html कोड में लागू करते हैं। परिणामस्वरूप, JVC-html-जावास्क्रिप्ट के रूप में MVC प्राप्त करना। सबसे पहले, हम निम्नलिखित नियमों के अनुसार, स्वयं HTML विचारों को लागू करते हैं:

• प्रत्येक दृश्य में एक संबंधित आईडी के साथ एक HTML तत्व है
• प्रत्येक व्यू एलिमेंट (nameInput, registerCtl) एक HTML एलिमेंट से संबंधित है, जो व्यू एलिमेंट के अंदर स्थित एक संबंधित क्लास के साथ है

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

 <div id="_registrationFormView"> Your name: <input class="_nameInput"> <br> Your email: <input class="_emailInput"> <br> <button class="_registerCtl">Register</button> </div> 

पहचानकर्ता और वर्ग के नाम से पहले अंडरस्कोर क्या है? थोड़ा कम बताया गया है।

इसी तरह, हम successView को लागू करते हैं:

  <div id="_successView">   ,    ! <button class="_continueCtl">Continue</button> </div> 

और errorView।

अमूर्त अमित

इसलिए हमारे पास एक सार इंटरफ़ेस परिभाषा है। इसका क्रियान्वयन है। उन्हें कैसे जोड़ा जाए?
इस प्रकार है:

 $(function() { jiant.bindUi("_", registration, true); }); 

हो गया।

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

जादू

थोड़ा जादू पहले से ही यहां शुरू हो रहा है। BindUi के दौरान, प्रत्येक दृश्य को पहचानकर्ता द्वारा इंटरफ़ेस परिभाषा से खोजा जाता है। तब परिणामी jQuery रैपर ऑब्जेक्ट परिभाषा चर से जुड़ा हुआ है। यही है, bindUi निष्पादित होने के बाद, Registration.views.registrationFormView चर में $ ("#_ RegistrationFormView") का परिणाम होता है। इसके अलावा, दृश्य के प्रत्येक तत्व को वर्ग द्वारा खोजा जाता है और भरा जाता है, वह यह है कि, registration.views.registrationFormView.registerCtl में $ ("#_ RegistrationFormView") शामिल है। ढूँढें ("._ registerCtl")।

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

आउटपुट पर, हमारे पास एक इंटरफ़ेस विवरण ऑब्जेक्ट है जो पूरी तरह से वास्तविक HTML तत्वों से जुड़ा हुआ है। जिसका उपयोग अब तर्क कोड में निम्नानुसार किया जा सकता है।

उपयोग

सबसे आसान तरीका है कि आप अपनी अलग जावास्क्रिप्ट फ़ाइल लिखें और onUiBound घटना के लिए पंजीकरण करें, उदाहरण के लिए:

 jiant.onUiBound(function($, app) { //     jQuery wrapper       var view = app.views.registrationFormView, errorView = app.views.errorView; //    view.registerCtl.click(function() { errorView.hide(); if (view.nameInput.val() == "") { errorView.errorMessage.html(" !"); errorView.show(); } else if (view.emailInput.val() == "") { errorView.errorMessage.html(" !"); errorView.show(); } else { view.hide(); app.views.successView.show(); } }); }); 

तैयार तर्क। पढ़ते समय, यह महसूस नहीं किया जाता है, लेकिन एक अच्छी आईडीई में - इस कोड का 75% स्वत: पूर्ण होता है, अर्थात। वर्तनी समय बच गया था और टाइपोस के कारण त्रुटि की संभावना कम हो गई थी।

और क्या

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

 var app = { ajax: { getDataFromServer: function(id, callback) {} } } 

डेवलपर से अधिक कुछ भी आवश्यक नहीं है - jiant स्वयं AJAX अनुरोध कोड लागू करता है।

यह उपयोग करने के लिए बनी हुई है:

  app.ajax.getDataFromServer(6345, function(data) { //do smth with data }); 

कौन जानता है कि GWT - तुरंत Async सेवा से पूर्ण समानता को देखता है।

आगे

यदि यह लेख प्रकाशित हुआ है और दिलचस्पी जगाता है, तो मैं शेष कार्यों (टेम्पलेट्स, AJAX, राज्यों और इवेंट बस) का वर्णन करने के लिए तैयार हूं। Gihub प्रोजेक्ट कोड: github.com/vecnas/jiant , एक विवरण के साथ एक साइट: sites.google.com/site/jiantscript/home