ठीक है तो वहाँ एक आखिरी जगह हम रीसेट समारोह है जो हमारे कोड के बहुत शुरुआत में है का उपयोग कर सकते है।
पेज बहुत पहले समय क्या हम ऐसा करने के लिए हम यादृच्छिक रंग जो तुम तो किया है कि हम उन नए यादृच्छिक रंग हम पहले से ही यहाँ है, जिसमें से एक रंग लेने की जरूरत लेने की जरूरत है जरूरत लोड करता है।
और फिर हम तो हम अपने रीसेट समारोह है कि क्योंकि यह मूल रूप से क्या करता है का उपयोग कर सकते पृष्ठ पर प्रत्येक वर्ग के लिए एक रंग प्रदान करने की जरूरत है।
और मैं वास्तव में सिर्फ बहुत शुरुआत init नामक स्थान पर एक समारोह चल रहा द्वारा चीजों को साफ करने के लिए जा रहा हूँ और जो मौजूद नहीं है।
और हमारे init समारोह के अंदर हम सब कुछ जब पेज लोड चलाने की जरूरत है कि डाल करने के लिए जा रहे हैं।
इसलिए हम समारोह init होगा।
और फिर हमारे शुद्ध समारोह के अंदर पहली बात यह है कि हम क्या कर सकते हैं आगे जाना है और हमारे मोड बटन श्रोताओं में जोड़ने के लिए है।
वास्तव में यह सिर्फ चीजों को साफ करने के लिए।
तो यह सिर्फ कहीं नहीं के बीच में खाक छानने नहीं है।
तो यह इस ठीक से इंडेंट होगा।
तो यह हमारे मोड बटन घटना श्रोताओं है और मैं यहाँ इस कोड को हड़पने के लिए जा रहा हूँ।
और क्या करता है यह प्रत्येक वर्ग है जो हम अभी से छुटकारा मिल सकता का रंग बदलता है।
हम तो यह है कि जब आप क्लिक हम अभी भी इस तर्क के सभी की जरूरत है यह एक छोटा सा साफ कर सकते हैं क्योंकि हम प्रत्येक वर्ग के लिए है कि रीसेट इस्तेमाल करेंगे और फिर यह भी कहते हैं klick श्रोताओं है कि अब और क्या करने की जरूरत नहीं है।
हम संदेश प्रदर्शन बदलते रहे हैं हम रीसेट बटन रंग बदल बदल रहे हैं।
तो मैं सिर्फ हमारे init समारोह में इस को कॉपी करने के लिए जा रहा हूँ क्योंकि हम यह भी है कि शुरुआत में चला जब पेज लोड इतनी अच्छी तरह से और यह अच्छी तरह के रूप में अच्छी तरह से किया चाहते हैं।
और फिर बहुत पिछले बात एक बार हम बटन मोड बटन के लिए और चौराहों के लिए तो हम सिर्फ स्क्रीन जो रीसेट समारोह चल रहा मतलब है रीसेट करना चाहते हैं और क्या रीसेट करना होगा यहाँ घटना संचालकों की स्थापना की है, यह वास्तव में हमारे रंग उत्पन्न होगा तो हम सिर्फ रंग अपरिभाषित या शुरू में एक खाली सरणी होना पड़ सकता है।
मैं बस के साथ शुरू करेंगे।
खैर, हम इसे एक खाली सरणी पहले दे दूँगा।
और फिर हम क्या कर सकते उठाया रंग सेट कर दिया जाता है बस कोई मूल्य नहीं के साथ एक चर हो सकता है और है कि बचाने के लिए और चीजों को एक छोटा सा क्लीनर बनाने के लिए।
मैं यहाँ नीचे इतना है कि शीर्ष हमारे पास तीन चर है कि चीजों का चयन नहीं कर रहे हैं मेरी चयनकर्ताओं को स्थानांतरित करने के लिए जा रहा हूँ।
और फिर हम चर कि पेज पर विभिन्न तत्वों का चयन कर रहे हैं।
ठीक।
तो फिर क्या बहुत शुरुआत करने के लिए होता है।
हम Init समारोह में कहा कि इस कोड के सभी यहाँ चलाने के लिए जा रहा है चलाते हैं।
और उस कोड हमारे मोड बटन श्रोताओं की स्थापना करने जा रहा है और यह हमारे वर्ग श्रोताओं की स्थापना करने जा रहा है और फिर हम जो उठाता रंग यह उन रंगों के बाहर एक यादृच्छिक रंग यह यह पाठ सामग्री और यह सब बदलता पिक्स रीसेट चलाते हैं।
और हम इस लाइन से छुटकारा मिल सकता है क्योंकि हम Init समारोह जो रीसेट बुला रहा है के अंदर अब यह कर रहे हैं।
तो चलो यकीन है कि यह काम करता है इससे पहले कि हम आगे बढ़ने से बनाते हैं।
हम चुनाव के लिए खोलने से ताज़ा ..
त्रुटियाँ नहीं।
और तुम मैं पृष्ठ ताज़ा और उस कोड के सभी कि init समारोह में चलाया जा रहा है देख सकते हैं।
और वहाँ के अंदर यह है कि सब कुछ हम देखते हैं resetting है।
इसलिए हमारे श्रोताओं को सही ढंग से स्थापित कर रहे हैं।
हम सही संदेश मिलता है।
चलो फिर से खेलते हैं।
सब कुछ काम कर रहा है बस ठीक है।
चलो यह आसान मोड खेलते हैं।
हम वहाँ चलें।
चलो फिर से एक बार और खेलते हैं।
महान।
तो यह ठीक काम करता है।
एक और परिवर्तन हम कर सकता है जो इस समारोह यहीं है और अब यह एक छोटे से थोड़ा लंबा है और कुछ लोगों को लगता है कि मैं के साथ काम किया है कि कितने समय तक कार्य होना चाहिए के बारे में वास्तव में सख्त नियम है कि नहीं है।
कुछ लोगों का कहना है कि अगर अपने कोड अब से 10 लाइनों आप इसे अपने आप ही समारोह में विभाजित करने की जरूरत है।
इसलिए हम चाहते हैं कि यहां क्या कर सकता है।
यह अपनी खुद की एक समारोह तो हम यहाँ ऐसा कर सकता है कि यह सब एक विधा बटन श्रोताओं की स्थापना की है करता है हो सकता है।
या फिर बस मोड बटन लेखन के कॉल यह मोड बटन की स्थापना की और उसके बाद हम यहाँ नीचे है कि समारोह की घोषणा करेंगे समारोह मोड बटन स्थापित करते हैं।
और यहाँ के अंदर हम सिर्फ इतना है कि कोड है जो फिर एक मांगपत्र ठीक से सिर्फ शुरुआत में एक बार चला जाएगा पेस्ट करेंगे।
हम मोड बटन श्रोताओं की स्थापना की और हम यहाँ एक ही बात कर सकते हैं।
इस कोड को कॉपी और हम इस एक वर्ग श्रोताओं सेट अप का एक नाम दे सकते हैं या हम सिर्फ यह है कि फोन की तरह चौकों की स्थापना की और फिर हम एक समारोह की स्थापना लिख ​​देंगे दूँगा।
और मैं देख रहा हूँ मैं एक पूंजी का उपयोग नहीं किया तो आप देखते हैं।
इसलिए मुझे लगता है कि यहाँ सेट अप वर्गों पर ध्यान देने की जरूरत है और हमें यकीन है कि हमारे कोड उसी तरह काम करता है कि बनाती हूँ।
तो अब हमारे init वास्तव में अच्छा और साफ है।
यह मोड बटन सेट यह चौकों सेट और यह सब कुछ है कि हम देखते रीसेट करता है।
के ताज़ा करने के लिए कोशिश करते हैं।
ऐसा लगता है कि यह काम हमारे वर्ग अभी भी बस ठीक काम करते हैं।
यदि हम उन्हें ताज़ा अधिक हमारे मोड बटन अभी भी रूप में अच्छी तरह बस ठीक काम करते हैं।
तो यह सब बहुत अच्छा है और यह पसंद है सब कुछ ठीक काम कर रहा है लग रहा है।
यही कारण है कि जहां तक ​​हम अब के लिए refactor के पास ले जाएगा।
लेकिन मैं आपको कुछ चीजें है कि हम भविष्य वीडियो में सुधार करना चाहते हैं जाएगा दिखाएगा।
एक बार जब हम इसके साथ जावास्क्रिप्ट के बारे में थोड़ा और अधिक और मिल अधिक आरामदायक जानने के लिए हम कुछ डिजाइन पैटर्न के बारे में बात करेंगे और डिजाइन पैटर्न मूल रूप से अपने कोड संरचना तो हम इस कोड हो सकता है के तरीके हैं।
यह उसी तरह एक ही तर्क काम करता है एक ही खेल बनाने के लिए और 10 अलग अलग लोगों के 10 अलग-अलग तरीकों से इसे लिख सकता है और यह बस के बारे में क्या कार्यों हम सवारी या चर के नाम नहीं है।
यह कैसे हम सामान्य रूप में बातें और सरल एक या सबसे आम लोगों में से एक मॉड्यूल डिजाइन पैटर्न कहा जाता है संरचना के बारे में भी है।
और क्या है कि इसका मतलब है तो हम इस खाक छानने की तरह किसी भी चर है कि एक वस्तु के अंदर नहीं हैं की जरूरत नहीं है कि हम वस्तुओं में गुणों का एक गुच्छा जोड़ सकते हैं।
हम किसी भी कार्य करता है कि खिड़की वस्तु पर इस तरह से अपने दम पर कर रहे हैं बस जरूरत नहीं है।
बल्कि हम उन्हें अपने इस उद्देश्य के लिए जोड़ें।
तो यह कुछ इस तरह से आप एक खेल वस्तु हो सकता है देखना होगा।
और फिर हम खेल डॉट लिख सकता है और हम इसे का एक हिस्सा कर देंगे।
खेल डॉट init एक समारोह है और हम अभी तक वहाँ इस कोड की नकल है और हम हर एक समारोह के लिए यह करना होगा हर एक संपत्ति चर और फिर अंत में हम सिर्फ खेल चला जाएगा।
और इसके पीछे तर्क थोड़ा और अधिक जटिल है।
लघु संस्करण यह मदद करता है कि हमें संरचित और चीजों को संगठित रखने के लिए है।
और यह भी नामस्थान टक्करों जो मैं वस्तु वीडियो में से एक में पहले ही उल्लेख करने से बचने में मदद करता है।
इसलिए मैं इस पूरे Refactor के माध्यम से जाना नहीं होगा।
क्या हमारे पास काफी अच्छा है।
यह बस ठीक काम करता है।
लेकिन जैसा कि आप एक डेवलपर के रूप में विकसित करने के लिए जारी रखने के लिए और आप अधिक से अधिक जानने चीजें आप एक बार जब आप और अधिक आराम पाने के लिए ध्यान देना होगा की एक जावास्क्रिप्ट डिजाइन पैटर्न है और इस पर लिखा किताबें हैं।
वहाँ निबंध और ब्लॉग्स और इतने सारे वीडियो है और वहाँ सिर्फ अपने जावास्क्रिप्ट संरचना के बारे में पूरे पाठ्यक्रम वास्तव में ऑनलाइन।
तो यह है कि ध्यान केंद्रित नहीं है।
और मैं अभी भी वास्तव में सिर्फ सामग्री पर कोड एचटीएमएल जावास्क्रिप्ट सी तर्क और संरचना का आकलन बाद में आ सकते हैं ध्यान केंद्रित करना चाहते हैं।