कोणीय और अर्थपूर्ण मार्कअप/चिंता का पृथक्करण

Question

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

मैं Angular.js के साथ खेल रहा हूं और वास्तव में इसे पसंद करता हूं, लेकिन मेरे दर्शन के बारे में मेरा कोई प्रश्न है। नियंत्रक के लिए कोणीय साइट से कोड का एक स्निपेट यहां दिया गया है।

<div ng-controller="TodoCtrl"> 
     <span>{{remaining()}} of {{todos.length}} remaining</span> 
     [ <a href="" ng-click="archive()">archive</a> ] 
     <ul class="unstyled"> 
     <li ng-repeat="todo in todos"> 
      <input type="checkbox" ng-model="todo.done"> 
      <span class="done-{{todo.done}}">{{todo.text}}</span> 
     </li> 
     </ul> 
     <form ng-submit="addTodo()"> 
     <input type="text" ng-model="todoText" size="30" 
       placeholder="add new todo here"> 
     <input class="btn-primary" type="submit" value="add"> 
     </form> 
    </div> 

इस में छिड़का कोणीय निर्देशों का मूल रूप से HTML है एक है कि मैं संभवतः susupect लगता है यह है:। <a href="" ng-click="archive()">archive</a>।

जब जेफरी ज़ेल्डमैन ने Designing With Web Standards लिखा था, तो यह रखरखाव के लिए विभिन्न फ़ाइलों में मार्कअप (एचटीएमएल), प्रेजेंटेशन (सीएसएस), और इंटरैक्शन (जेएस) को अलग करने का सबसे अच्छा अभ्यास बन गया।

मेरा सवाल यह है कि कोणीय इसका उल्लंघन क्यों नहीं करता है? मैं वास्तव में इसका आनंद ले रहा हूं, और इसे काफी शक्तिशाली खोज रहा हूं, लेकिन एक क्लिक ईवेंट को a तत्व में मार्कअप में बाध्य करने और पूर्व-वेब-मानकों के कोड के इस संस्करण को लिखने के बीच क्या अंतर है:

<a href='#' onClick='showAlert()'>Click here</a> 

<script> 
    var showAlert = function(){ 
     alert('hey'); 
    } 
</script> 

उपयोगी उत्तर ढांचे का उपयोग करने के साथ व्यक्तिगत अनुभव के अलावा दस्तावेज़ों का संदर्भ ले सकते हैं।

Answer 1

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

यह मूलतः में छिड़का कोणीय निर्देशों के साथ HTML है एक कि मैं संभवतः susupect लगता है यह है:। <a href="" ng-click="archive()">archive</a>।

यह बहुत कुछ है जो हमें 10 साल पहले लिखा गया होता जैसा दिखता है:

<a href="" onclick="archive()">archive</a> 

हालांकि, वहाँ ऊपर एचटीएमएल और AngularJS कार्यान्वयन के बीच एक मौलिक अंतर है। AngularJS के लिए, archive फ़ंक्शन उस दायरे पर स्थित है जिसे हम नियंत्रित करते हैं और नियंत्रकों के उपयोग के माध्यम से कुशलतापूर्वक उपयोग कर सकते हैं। कच्चे जेएस उदाहरण के लिए आवश्यक है कि archive वैश्विक नामस्थान में हो (जो कई कारणों से खराब है)।

लेकिन, हम अभी भी देख सकते हैं कि onclick ईवेंट बाध्यकारी क्या करना था; इसका मतलब यह था कि एक व्यक्ति को दृष्टिकोण में व्यवहारिक रूप से निर्माण करने में सक्षम बनाता है, और जेएस को कार्यान्वयन विवरणों को संभालने दें। AngularJS यह करता है, और नियमित रूप से HTML के साथ संभव नहीं है कि हमारे दृश्य के अंतर क्षेत्रों/संदर्भों को व्यवस्थित करने का एक तरीका प्रदान करता है।

हां, एंगुलरजेएस में अधिक प्रस्तुति और बाध्यकारी चिंताओं को दृश्य में ले जाकर HTML को विस्तारित करना शामिल है। अच्छी खबर यह है कि हम HTML6 के साथ इस तरह से आगे बढ़ रहे हैं। यहाँ http://html6spec.com/ से कुछ चुनिंदा उद्धरण हैं:

जिस तरह से आप यह निशान अप करना चाहते हैं कुछ को चिह्नित करने में सक्षम होने की कल्पना करें। कल्पना करें <div id="wrapper"> से <wrapper> ...

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

एक तरह से, AngularJS हमें HTML6 की सभी भलाई लाता है, लेकिन आज हमें इसका उपयोग करने की अनुमति देता है। पिछले 15 वर्षों में वेब का उपयोग कैसे किया जाता है और हमारे उपकरण अभी भी बहुत पीछे हैं। हमारे लिए भाग्यशाली, भविष्य प्रकाश और आशा का एक प्रतीक है, और AngularJS भविष्य को वापस भविष्य में लाता है।

Answer 2

मैं पिछले दो वर्षों से एक बड़ी परियोजना पर Knockout.js (जो डेटा-बाइंडिंग अवधारणाओं के बारे में कोणीय के समान है) का उपयोग कर रहा हूं। संपूर्ण लाभ कार्यान्वयन के बजाय, मार्कअप में केवल कुछ फ़ंक्शन नाम रखने में मुख्य लाभ यह है कि कार्यान्वयन को मार्कअप को बदलने के बिना आसानी से बदला जा सकता है। खासकर यदि मार्कअप आपके द्वारा पूरी तरह से नियंत्रित नहीं है, जैसा कि हमारे मामले में था।

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

Answer 3

काफी अंतरराज्यीय अवलोकन और प्रश्न, और @ mortalapeman द्वारा एक अच्छा जवाब।

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

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

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

Answer 4

मैं हाल ही में कोणीय का अध्ययन कर रहा था और वही विचार था, क्या यह चिंता का उल्लंघन नहीं करता है? वे अपनी साइट पर दिए गए उदाहरण "चिंताओं को अलग करने का उल्लंघन करते हैं!" पिछले 10 वर्षों में एमवीवीएम और एमवीसी के साथ शामिल होने के बाद, मैं सोच रहा हूं कि कोणीय शीत संलयन के दिनों में एक कदम पीछे है। यह नहीं कि शीत संलयन और कोणीय मजबूत नहीं हैं, वे केवल खराब डिजाइन के लिए समर्थक हैं।

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

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

वर्षों में मेरा अनुभव यह है कि प्रोग्रामर पहले हैं 1) अच्छी तकनीक बनाने वाले पैटर्न को पहचानने से पहले नौकरी पाने के लिए जल्दी करें। 2) प्रत्येक प्रमुख संस्थान में बहुत सारे कोड हैं जिन्हें गंभीर पुन: फैक्टरिंग की आवश्यकता है 3) एक्स्टेंसिबल में समस्याएं कई सालों बाद नहीं देखी जाती हैं 4) पुन: उपकरण का प्रयास बहुत बड़ा है! यह सब नौकरी सुरक्षा के लिए अच्छी खबर है, फिर भी एक ही समय में, शुरुआत से ही इसे सही तरीके से क्यों न करें?

JQuery, जावास्क्रिप्ट और यहां तक ​​कि कोणीय भी उनकी जगह है, लेकिन वे ढांचे भी हैं जो उन लोगों के लिए खराब डिजाइन को प्रोत्साहित करते हैं। मैंने पाया है कि सभी प्रोग्रामिंग में एकमात्र सबसे महत्वपूर्ण पैटर्न "ऑब्जर्वर पैटर्न" है जिसे हम ईवेंट हैंडलर बनाने और ईवेंट बनाने की क्षमता में देखते हैं। तो decoupling भी सूची में बहुत अधिक हो जाता है। यदि आपके पास कोड है जो ईवेंट पर बड़ा है और ईवेंट हैंडलिंग संभावनाएं हैं, तो आप सही दिशा में आगे बढ़ रहे हैं। यदि आप कोड का पुन: उपयोग कर रहे हैं और चीजों को दोहराने के बारे में सख्त नहीं हैं तो आप अच्छी तरह से कर रहे हैं। अंत में यदि आप जुनून के साथ फिर से फैक्टरिंग कर रहे हैं और वास्तव में इंटरफ़ेस आधारित प्रोग्रामिंग तकनीकों की शक्ति को समझते हैं तो आप अच्छी तरह से कर रहे हैं। ओह हाँ एक और बात, अगर आपको पता है कि निर्भरता इंजेक्शन क्या है, तो आप प्रोग्रामर की सेना में 5 सितारा जनरल हैं। मार्च, अच्छे सैनिकों!