जावास्क्रिप्ट क्लाइंट कोड के लिए वैकल्पिक "वास्तुशिल्प" दृष्टिकोण?

Question

आपका जावास्क्रिप्ट कोड कैसे व्यवस्थित किया जाता है? क्या यह एमवीसी जैसे पैटर्न का पालन करता है, या कुछ और?

मैं कुछ समय के लिए एक साइड प्रोजेक्ट पर काम कर रहा हूं, और आगे मुझे मिलता है, मेरा वेबपृष्ठ एक पूर्ण-विशेषीकृत एप्लिकेशन में बदल गया है। अभी, मैं jQuery के साथ चिपक रहा हूं, हालांकि, पृष्ठ पर तर्क उस बिंदु पर बढ़ रहा है जहां कुछ संगठन, या मैं इसे कहने की हिम्मत करता हूं, "वास्तुकला" की आवश्यकता है। मेरा पहला दृष्टिकोण "MVC-ish" है:

• 'मॉडल' एक JSON पेड़ कि सहायकों
• दृश्य डोम प्लस वर्गों है कि यह tweak
• के साथ बढ़ाया जाता नियंत्रक वस्तु है जहां मैं घटनाओं को संभालने और दृश्य या मॉडल मैनिपुलेशन

मुझे बहुत दिलचस्पी है, हालांकि, अन्य लोगों ने कितने महत्वपूर्ण जावास्क्रिप्ट ऐप्स बनाए हैं। मैं "यहाँ javaScript + < सामान्य वेब सेवा-y thingy >" GWT, या अन्य सर्वर उन्मुख दृष्टिकोण में कोई दिलचस्पी नहीं है ... बस के दृष्टिकोण में

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

Answer 1

.. लेकिन जावास्क्रिप्ट में कई पहलू हैं जो ओओ हैं।

इस पर विचार करें:

var Vehicle = jQuery.Class.create({ 
    init: function(name) { this.name = name; } 
}); 

var Car = Vehicle.extend({ 
    fillGas: function(){ 
     this.gas = 100; 
    } 
}); 

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

यह विशेष रूप से उपयोगी होता है जब आपके पास घटकों/सर्वर नियंत्रण होते हैं जिनके पास अपनी स्क्रिप्ट निष्पादित होती है, लेकिन जब आपके पास एक ही पृष्ठ पर कई उदाहरण हो सकते हैं। यह राज्य को अलग रखता है।

Answer 2

100% सुनिश्चित नहीं है कि आप यहां क्या मतलब रखते हैं, लेकिन मैं कहूंगा कि पिछले 6 वर्षों से एएसपी.नेट करने के बाद, मेरे वेब पेज अब सर्वर द्वारा मूल पृष्ठ प्रतिपादन के बाद जावास्क्रिप्ट द्वारा संचालित होते हैं। मैं सब कुछ के लिए JSON का उपयोग करता हूं (अब लगभग 3 वर्षों से रहा है) और मेरे क्लाइंट-साइड जरूरतों के लिए MochiKit का उपयोग करें।

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

Answer 3

मोचीकिट बहुत अच्छा है - और जहां तक ​​जेएस लाइब्रेरी जाते हैं, तब तक मेरा पहला प्यार, बोलने वाला था। लेकिन मैंने पाया कि मोचीकिट के पास बहुत ही अभिव्यक्तिपूर्ण वाक्यविन्यास है, लेकिन यह मेरे लिए लगभग उतना सहज महसूस नहीं कर रहा था क्योंकि प्रोटोटाइप/स्क्रिप्टैकुलर या jQuery ने मेरे लिए किया था।

मुझे लगता है कि अगर आपको पाइथन पता है या पसंद है, तो MochiKit आपके लिए एक अच्छा टूल है।

Answer 4

आपके उत्तरों के लिए कृपया सभी को धन्यवाद। कुछ समय बाद, मैं अब तक जो कुछ सीखा है उसे पोस्ट करना चाहता हूं।

अब तक, मैं JQuery UI, Scriptaculous, MochiKit की तरह एक बहुत बड़े अंतर दृष्टिकोण Ext की तरह कुछ का उपयोग कर, और दूसरों को, आदि

Ext साथ

देखते हैं, एचटीएमएल सिर्फ एक प्लेसहोल्डर है - यूआई यहाँ जाता है। तब से, सब कुछ जावास्क्रिप्ट में वर्णित है। डीओएम बातचीत एक और (शायद मजबूत) एपीआई परत के तहत कम हो जाती है।

अन्य किट के साथ, मैं खुद को कुछ HTML डिज़ाइन करके शुरू कर रहा हूं, और फिर डीओएम को सीधे स्नैज़ी प्रभावों से बढ़ा रहा हूं, या यहां फॉर्म इनपुट को प्रतिस्थापित कर रहा हूं।

प्रमुख मतभेद होने लगते हैं क्योंकि मुझे इवेंट हैंडलिंग इत्यादि से निपटने की ज़रूरत है। मॉड्यूल को एक-दूसरे से "बात करने" की ज़रूरत है, मुझे खुद को डोम से दूर कदम उठाने की जरूरत है, इसे टुकड़ों में दूर करना।

मुझे लगता है कि इनमें से कई पुस्तकालयों में कुछ रोचक मॉड्यूलरेशन तकनीक भी शामिल हैं। एक्स्ट वेबसाइट पर एक बहुत स्पष्ट विवरण दिया गया है, जिसमें a fancy way to "protect" your code with modules शामिल है।

एक नया खिलाड़ी जिसे मैंने पूरी तरह से मूल्यांकन किया है Sproutcore है। यह दृष्टिकोण में विस्तार की तरह लगता है, जहां डोम छुपा हुआ है, और आप ज्यादातर परियोजना के एपीआई से निपटना चाहते हैं।

Answer 5

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

मैंने थोड़ी देर पहले एक प्रयास देखा जहां किसी ने जावास्क्रिप्ट में डेटा मॉडलिंग के लिए एक ढांचा बनाया, जिस तरह से SQLite एप्लिकेशन से संबंधित है। यह मॉडल की तरह था। चयन ("उत्पाद") और Model.update ("उत्पाद", "कुछ डेटा ...")। यह मूल रूप से एक ऑब्जेक्ट नोटेशन था जिसमें वर्तमान पृष्ठ की स्थिति का प्रबंधन करने के लिए डेटा का एक गुच्छा था। हालांकि, जिस मिनट को आप ताज़ा करते हैं, वह सब डेटा खो जाता है। मैं शायद वाक्यविन्यास पर बंद हूं, लेकिन आप बिंदु प्राप्त करते हैं।

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

Answer 6

बस एक त्वरित स्पष्टीकरण।

जीडब्ल्यूटी ऐप्स लिखना पूरी तरह से व्यवहार्य है जो सर्वर उन्मुख नहीं हैं। मुझे लगता है कि सर्वर-ओरिएंटेड से आपका मतलब है जीडब्ल्यूटी आरपीसी जिसे जावा आधारित बैक-एंड की आवश्यकता है।

मैंने जीडब्ल्यूटी ऐप्स लिखे हैं जो अकेले ग्राहक पक्ष पर "एमवीसी-आईएसएच" हैं।

• मॉडल एक ऑब्जेक्ट ग्राफ था। यद्यपि आप Java में कोड को रनटाइम पर रखते हैं, ऑब्जेक्ट्स जावास्क्रिप्ट में हैं, क्लाइंट या सर्वर-साइड में किसी भी JVM की आवश्यकता नहीं है।जीडब्ल्यूटी पूरी तरह से पार्सिंग और हेरफेर समर्थन के साथ जेएसओएन का भी समर्थन करता है। आप JSON webservices से आसानी से कनेक्ट कर सकते हैं, JSON मैशप उदाहरण के लिए 2 देखें।
• देखें मानक जीडब्ल्यूटी विजेट्स (साथ ही हमारे कुछ संयुक्त विजेट्स) से बना था
• नियंत्रक परत को पर्यवेक्षक पैटर्न के माध्यम से दृश्य से अलग से अलग किया गया था।

यदि आपकी "दृढ़ता से टाइप की गई" पृष्ठभूमि जावा या इसी तरह की भाषा के साथ है, तो मुझे लगता है कि आपको बड़ी परियोजनाओं के लिए गंभीरता से जीडब्ल्यूटी पर विचार करना चाहिए। छोटी परियोजनाओं के लिए मैं आमतौर पर jQuery पसंद करते हैं। आने वाले GWTQuery जो जीडब्ल्यूटी 1.5 के साथ काम करता है, वह बदल सकता है हालांकि jQuery के लिए प्लगइन की बहुतायत के कारण निकट भविष्य में नहीं।

Answer 7

जावास्क्रिप्टएमवीसी बड़े पैमाने पर जेएस एप्लिकेशन के आयोजन और विकास के लिए एक शानदार विकल्प है।

आर्किटेक्चर डिज़ाइन बहुत अच्छी तरह से सोचा गया। वहाँ 4 चीजें आप कभी जावास्क्रिप्ट के साथ क्या कर रहे हैं:

1. जवाब एक घटना
2. अनुरोध डाटा को/हेरफेर सेवा (अजाक्स)
3. ajax जवाबी कार्रवाई के लिए डोमेन विशिष्ट जानकारी जोड़ें।
4. अद्यतन डोम

JMVC मॉडल, देखें, नियंत्रक पैटर्न में इन विभाजित होता है।

पहला, और शायद सबसे महत्वपूर्ण लाभ, नियंत्रक है। नियंत्रक घटना प्रतिनिधिमंडल का उपयोग करते हैं, इसलिए घटनाओं को जोड़ने की बजाय, आप बस अपने पृष्ठ के लिए नियम बनाते हैं। नियंत्रक के काम के दायरे को सीमित करने के लिए वे नियंत्रक के नाम का भी उपयोग करते हैं। यह आपके कोड को निर्धारिती बनाता है, जिसका अर्थ है कि यदि आप किसी '#todos' तत्व में कोई ईवेंट देखते हैं, तो आपको पता है कि एक टोडोस नियंत्रक होना चाहिए।

$.Controller.extend('TodosController',{ 
    'click' : function(el, ev){ ... }, 
    '.delete mouseover': function(el, ev){ ...} 
    '.drag draginit' : function(el, ev, drag){ ...} 
}) 

अगला मॉडल आता है। जेएमवीसी एक शक्तिशाली वर्ग और मूल मॉडल प्रदान करता है जो आपको अजाक्स कार्यक्षमता (# 2) को त्वरित रूप से व्यवस्थित करने और डोमेन विशिष्ट कार्यक्षमता (# 3) के साथ डेटा को लपेटने देता है। पूर्ण होने पर, आप अपने नियंत्रक से मॉडल का उपयोग कर सकते हैं जैसे:

Todo.findAll ({after: new date()}, myCallbackFunction);

अंत में, एक बार आपके टोडोस वापस आते हैं, तो आपको उन्हें प्रदर्शित करना होगा (# 4)। यह वह जगह है जहां आप जेएमवीसी के दृश्य का उपयोग करते हैं।

'.show click' : function(el, ev){ 
    Todo.findAll({after: new Date()}, this.callback('list')); 
}, 
list : function(todos){ 
    $('#todos').html(this.view(todos)); 
} 

में 'विचारों/सब/list.ejs'

<% for(var i =0; i < this.length; i++){ %> 
    <label><%= this[i].description %></label> 
<%}%> 

JMVC वास्तुकला तुलना में बहुत अधिक प्रदान करता है।

• कोड जनरेटर
• एकीकृत ब्राउज़र, सेलेनियम, और राइनो परीक्षण
• प्रलेखन
• स्क्रिप्ट संपीड़न
• रिपोर्ट करने में त्रुटि

: यह कभी साथ विकास चक्र के हिस्से में आप में मदद करता है