हमने संगठित होने के लिए अब तक बहुत अच्छा काम किया है। हमारे HTML को टेम्पलेट में तोड़ना एक बड़ा कदम था। अब हम बोलने के लिए पानी को गंदा कर रहे हैं। जावास्क्रिप्ट में कार्यात्मक रूप से हमारे अलग-अलग बिट्स को विचारशील वर्गों में विभाजित किया गया है, जिससे चीजों को समझना और बनाए रखना आसान हो जाता है। मुझे पता है कि हम एक बहुत छोटे डेमो के साथ काम कर रहे हैं, लेकिन मुझे आशा है कि आप कल्पना कर सकते हैं कि कैसे एप्लिकेशन को अधिक जटिल और कोड की अधिक लाइनें मिलती हैं, यह संगठन अविश्वसनीय रूप से मूल्यवान है।
जावास्क्रिप्ट के पास कोई "राय" नहीं है क्योंकि यह संगठन के बारे में था। इसीलिए कुछ लोग इसे पसंद करते हैं और कुछ लोग इसमें खोया हुआ महसूस करते हैं। आप इसे कैसे व्यवस्थित करते हैं यह पूरी तरह आप पर निर्भर करता है। इस बात की भी संभावना है कि कुछ लोग वास्तव में चौखटे पर बैठते हैं, जो एक राय है या नहीं, एक संगठनात्मक संरचना प्रदान करते हैं। मसलन, बैकबोन। लेकिन यह एक और श्रृंखला है!
हमारे डेमो के लिए, हम बस एक ऑब्जेक्ट के चारों ओर व्यवस्थित करेंगे जो हम बस बनाते हैं।
var Movies = ( )यहां हम जो भी काम कर रहे हैं, वह हर चीज से संबंधित कुछ फिल्में पेज पर मिलती हैं, इसलिए हम इसे एक "चीज" मूवी के अंदर शामिल करेंगे। याद रखें कि हम जो कुछ भी कर रहे हैं वह संगठनात्मक रूप से हमारे लिए महत्वपूर्ण है। इसका लाभ केवल एक वैरिएबल को "वैश्विक दायरे" में डालने का है। अगर हमने वैश्विक दायरे में सब कुछ किया, तो यह गलती से चर (और फ़ंक्शंस और जो कुछ भी) घोषित किया गया है, वह कहीं और होगा।
एक वस्तु की तरह वास्तव में कुछ भी "नहीं" करते हैं। हमें "इसे बंद करने" की आवश्यकता होगी।
var Movies = ( init: function() ( ) ) Movies.init();Init नाम का एक फंक्शन होना एक मानक है, जो इस कोड को पढ़ने वाले किसी भी व्यक्ति को यह जानने की अनुमति देता है कि कोड के इस समूह के निष्पादित होने पर क्या होता है। कोड के इस समूह के साथ जो कुछ होता है, उसकी सामग्री की तालिका की तरह थोड़ा सा पढ़ना चाहिए। फिर हम अन्य कार्य (मूवी ऑब्जेक्ट के अधिक गुण) करते हैं जो उन चीजों को करते हैं जो हमें करने की आवश्यकता है, असतत विखंडू में। याद रखें हम जो कुछ भी चाहते हैं उसे सामान कह सकते हैं, जो कुछ भी हमारे लिए समझ में आता है।
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();बहुत स्पष्ट एह? आप नोटिस कर सकते हैं appendMovesToPageमें बुलाया नहीं है init। ऐसा इसलिए है क्योंकि जब तक हमारे पास इसे भेजने के लिए डेटा नहीं है, हम उसे कॉल नहीं कर सकते। वह डेटा एक अजाक्स कॉल से आएगा, जिसका अर्थ है कि हमें कॉलबैक की आवश्यकता है। तो getDataउस एक को बुलाकर खत्म करेंगे।
बाकी सब कुछ जो यहां भर जाएगा, बस कोड के बढ़ते बिट्स हैं जो हमने पहले से ही सही जगह पर लिखे हैं।
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
और हो गया।
आइए उन चार चिंताओं पर गौर करें जिन्हें हमने पहले रेखांकित किया था और देखें कि हमने उनके बारे में क्या किया।
- डेटा प्राप्त करना। हमने JSON को एक ऐसी फ़ाइल में स्थानांतरित कर दिया जिसे हम हिट कर सकते हैं
$.getJSON, क्योंकि यह संभव है कि हमें वास्तविक स्थिति में करने की आवश्यकता होगी। बस इसके अलावा, यह हमें इसके चारों ओर परीक्षण लिखने की अनुमति देगा। - तर्क प्रदर्शित करें। अब हमारे पास एक बहुत ही विशिष्ट फ़ंक्शन appendMoviesToPage है, जिसे तब कहा जाता है जब हम अपनी फिल्मों को पृष्ठ पर जोड़ने के लिए तैयार होते हैं। एकल-फ़ंक्शंस फ़ंक्शंस (फिर से) संगठन, समझ और स्थिरता के लिए महान हैं।
- घटना से निपटना। ईवेंट प्रतिनिधिमंडल का उपयोग करते हुए, हम अब इस "व्यावसायिक तर्क" को प्रदर्शन तर्क या टेम्पलेट के साथ नहीं मिला रहे हैं। हमें स्रोत आदेश निष्पादन के बारे में भी चिंता करने की आवश्यकता नहीं है, क्योंकि हम अंततः घटनाओं को संलग्न कर रहे हैं
document। हमारी कार्यक्षमता तब काम करेगी जब पेज पर टेम्पलेट को कैसे / कैसे जोड़ा जाए। - टालमटोल करना। पूरी तरह से पुस्तकालयों का उपयोग करने के लिए विशेष रूप से अस्थायी के लिए इस्तेमाल किया गया।
मैं उस जीत को बुलाऊंगा। यहाँ हम कहाँ समाप्त हुए:
CodePen पर क्रिस Coyier (@chriscoyier) द्वारा पेन BwbI देखें