जावास्क्रिप्ट में कोड संगठन के आसपास आमतौर पर स्वीकृत सर्वोत्तम प्रथाओं [बंद]

Question

जावास्क्रिप्ट चौखटे की तरह jQuery ग्राहक पक्ष वेब अनुप्रयोगों अमीर और अधिक कार्यात्मक बनाने के लिए, मैं एक समस्या नोटिस शुरू कर दिया है ...

दुनिया में आप इसे कैसे व्यवस्थित रखते हैं?

• अपने सभी हैंडलर को एक स्थान पर रखें और सभी घटनाओं के लिए फ़ंक्शन लिखें?
• अपनी सभी कार्यक्षमता को लपेटने के लिए फ़ंक्शन / कक्षाएं बनाएं?
• पागलों की तरह लिखें और उम्मीद है कि यह सबसे अच्छा के लिए बाहर काम करता है?
• छोड़ देना और एक नया कैरियर प्राप्त करना है?

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

वहाँ अपने .js फ़ाइलों को अपने आवेदन के बाकी के रूप में अच्छा और साफ रखने के लिए सबसे अच्छा तरीका पर कोई सामान्य सिफारिशें हैं ? या यह सिर्फ आईडीई का मामला है? वहाँ एक बेहतर विकल्प है?

---

संपादित करें

यह प्रश्न कोड संगठन के बारे में अधिक था और न कि फ़ाइल संगठन के लिए। मर्जिंग फ़ाइलों या विभाजन सामग्री के आसपास कुछ बहुत अच्छे उदाहरण हैं।

मेरा प्रश्न है: अपने वास्तविक कोड को व्यवस्थित करने के लिए वर्तमान में स्वीकृत सर्वोत्तम अभ्यास तरीका क्या है? पृष्ठ तत्वों के साथ बातचीत करने और एक दूसरे के साथ संघर्ष नहीं करने वाले पुन: प्रयोज्य कोड बनाने के लिए आपका तरीका या यहां तक ​​कि अनुशंसित तरीका क्या है?

कुछ लोगों ने नामस्थान सूचीबद्ध किए हैं जो एक अच्छा विचार है। कुछ अन्य तरीके क्या हैं, विशेष रूप से पृष्ठ पर तत्वों से निपटने और कोड को व्यवस्थित और साफ रखने के लिए?

Comments

कोई व्यक्ति जो वास्तव में कोड संगठन के बारे में बोलने के लिए समय लेता है, न कि "बस" वह कौन सा टूल का उपयोग करता है जो अपनी JS फ़ाइलों को संक्षिप्त और संपीड़ित करता है: stackoverflow.com/questions/16736483/…

— Adrien Be

Answer 1

यह बहुत अच्छा होगा यदि जावास्क्रिप्ट में नामस्थान बनाए गए थे, लेकिन मुझे लगता है कि डस्टिन डियाज़ जैसी चीजों का आयोजन यहाँ मुझे बहुत मदद करता है।

var DED = (function() {

    var private_var;

    function private_method()
    {
        // do stuff here
    }

    return {
        method_1 : function()
            {
                // do stuff here
            },
        method_2 : function()
            {
                // do stuff here
            }
    };
})();

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

Comments

मैं आमतौर पर "क्रॉकफ़ोर्ड तरीका" के रूप में संदर्भित करता हूं। +1 मुझ से

— मैट ब्रिग्स

आप थोड़ा आगे भी जा सकते हैं। इस लिंक को देखें: Wait-till-i.com/2007/08/22/…

— MKroehnert

@MattBriggs अन्यथा कहा जाता है module patternऔर यह पर आधारित है IIFE pattern।

— बी

क्या आपको किसी तरह कक्षाएं निर्यात करने की आवश्यकता नहीं है? ऐसे मॉड्यूल के बाहर से कोई वस्तु कैसे बनती है? या createNewSomething()रिटर्न ऑब्जेक्ट में कोई विधि होनी चाहिए , इसलिए ऑब्जेक्ट निर्माण पूरी तरह से मॉड्यूल के भीतर होता है? हम्म ... मैं उम्मीद करूंगा कि कक्षाएं (निर्माता) बाहर से दृश्यमान हैं।

— रोब्स

@robsch उनका उदाहरण किसी भी पैरामीटर को नहीं लेता है, लेकिन सबसे अधिक होगा। यह कैसे किया जाता है, इसके लिए यहां मेरा उदाहरण देखें (टाइपस्क्रिप्ट, लेकिन 99% समान): repl.it/@fatso83/Module-Pattern-in-TypeScript

— oligofren

Answer 2

मैं HTML के साथ किसी भी जावास्क्रिप्ट को शामिल करने से बचने की कोशिश करता हूं। सभी कोड कक्षाओं में एन्क्रिप्ट किए गए हैं और प्रत्येक वर्ग अपनी फ़ाइल में है। विकास के लिए, मेरे पास प्रत्येक js फ़ाइल को शामिल करने के लिए अलग <script> टैग हैं, लेकिन वे HTTP अनुरोधों के ओवरहेड को कम करने के लिए उत्पादन के लिए एक बड़े पैकेज में विलय हो जाते हैं।

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

// file: survey.js
$(document).ready(function() {
  var jS = $('#surveycontainer');
  var jB = $('#dimscreencontainer');
  var d = new DimScreen({container: jB});
  var s = new Survey({container: jS, DimScreen: d});
  s.show();
});

मुझे पठनीयता के लिए नामकरण सम्मेलन भी महत्वपूर्ण लगता है। उदाहरण के लिए: मैं सभी jQuery उदाहरणों के लिए 'j' प्रस्तुत करता हूं।

उपरोक्त उदाहरण में, डिमस्क्रीन नामक एक वर्ग है। (मान लें कि यह स्क्रीन को धीमा कर देता है और एक अलर्ट बॉक्स को पॉप अप करता है।) इसमें एक दिव्य तत्व की आवश्यकता होती है, जो स्क्रीन को कवर करने के लिए बड़ा हो सकता है, और फिर एक अलर्ट बॉक्स जोड़ सकता है, इसलिए मैं एक jQuery ऑब्जेक्ट में पास होता हूं। jQuery में एक प्लग-इन अवधारणा है, लेकिन यह सीमित लग रहा था (जैसे उदाहरण लगातार नहीं हैं और एक्सेस नहीं किया जा सकता है) कोई वास्तविक उल्टा नहीं है। तो DimScreen वर्ग एक मानक जावास्क्रिप्ट वर्ग होगा जो सिर्फ jQuery का उपयोग करने के लिए होता है।

// file: dimscreen.js
function DimScreen(opts) { 
   this.jB = opts.container;
   // ...
}; // need the semi-colon for minimizing!


DimScreen.prototype.draw = function(msg) {
  var me = this;
  me.jB.addClass('fullscreen').append('<div>'+msg+'</div>');
  //...
};

मैं इस दृष्टिकोण का उपयोग कर कुछ काफी जटिल appliations बनाया है।

Comments

मुझे लगता है कि $एक चर नाम उपसर्ग के रूप में उपयोग करना अधिक सामान्य अभ्यास है, लेकिन मैं गलत हो सकता है। इसलिए, $s = $('...')इसके बजाय jS = $('...'), मैं वरीयता की बात करता हूं। हालांकि दिलचस्प है, क्योंकि हंगेरियन नोटेशन को एक कोड गंध माना जाता है। यह अजीब है कि मेरे कुछ सी जावास्क्रिप्ट कोड कन्वेंशन / प्राथमिकताएँ मेरे सी # / जावा कोडिंग कन्वेंशनों के लिए कितनी भिन्न हैं।

— जेमीबारो

@ जैमी इस मामले में एक कोड गंध नहीं है, यह कुछ मामलों में से एक है जहां हंगेरियन अच्छा है । आप पढ़ने के लिए चाहते हो सकता है इस ।

— दान अब्रामोव

@DanAbramov लिंक के लिए धन्यवाद। मुझे वास्तव में जोएल के सभी ब्लॉग पढ़ने चाहिए, वह चीजों को इतनी अच्छी तरह से समझाता है। निश्चित रूप से उसके पास प्रसिद्धि / प्रतिष्ठा की हकदार है। मैं Systems Hungarianएक कोड गंध के Apps Hungarianरूप में और अब से एक अभ्यास के रूप में

— संदर्भित करूंगा

मुझे लगता है कि सी # दुनिया में, इसके उपयोग को बढ़ावा देने के लिए एक बढ़िया लेख भी हो सकता है var, अब मैं इसके बारे में सोचता हूं। उपयोग करने के विरूद्ध अधिकांश तर्क वह varहै जहाँ से जो लौटाया जाता है उसके 'प्रकार' के बारे में निश्चित नहीं होगा, लेकिन मुझे लगता है कि इस तर्क के बदले जो वापस लौटा है उसका 'वर्ग' नहीं जानना चाहिए। यदि एप्लिकेशन हंगेरियन का उपयोग कर रहे हैं, तो आपको उस चिंता का सामना नहीं करना चाहिए ... दिलचस्प।

— जैमीब्रो

@ मार्नेन: मैं आपकी बात देखता हूं, लेकिन यह प्रोग्रामर के लिए एक गाइड के रूप में बेकार नहीं है। $ उपसर्ग मुझे याद दिलाता है कि मेरे कोड को बाद में पढ़ने पर यह क्या होता है, और इस प्रकार त्वरित समझ में मदद करता है।

— सीन

Answer 3

आप विकास के लिए अलग-अलग फ़ाइलों में अपनी स्क्रिप्ट को तोड़ सकते हैं, फिर एक "रिलीज़" संस्करण बना सकते हैं, जहां आप उन सभी को एक साथ रटना और उस पर YUI कंप्रेसर या कुछ इसी तरह चलाते हैं ।

Comments

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

— DOK

@ डॉक संकलन में अप्रयुक्त सामान का छांटना शामिल होना चाहिए।

— ऐहल्के

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

— जेमीबारो

Answer 4

पहले पदों मैं की एक प्रतिलिपि बनाई से प्रेरित होकर Rakefile और विक्रेता निर्देशिका के साथ वितरित WysiHat (एक आरटीई बदलाव का उल्लेख) और कोड की जाँच के साथ शामिल करने के लिए कुछ सुधार किए हैं JSLint और साथ minification YUI कंप्रेसर ।

यह विचार है कि Sprockets का उपयोग (WysiHat से) एक ही फाइल में कई JavaScripts को मर्ज करने के लिए, JSLint के साथ मर्ज किए गए फ़ाइल के सिंटैक्स की जाँच करें और वितरण से पहले YUI कंप्रेसर के साथ इसे छोटा करें।

आवश्यक शर्तें

• जावा रनटाइम
• माणिक और रेक रत्न
• आपको पता होना चाहिए कि क्लासपैथ में जार को कैसे रखा जाए

अब करते हैं

1. राइनो डाउनलोड करें और अपने वर्गपथ पर JAR ("js.jar") डालें
2. YUI कंप्रेसर डाउनलोड करें और अपने वर्गपथ में JAR (बिल्ड / युकोमप्रेसर-एक्सज़ेज़) डालें
3. WysiHat डाउनलोड करें और "विक्रेता" निर्देशिका को अपने जावास्क्रिप्ट प्रोजेक्ट के रूट पर कॉपी करें
4. राइनो के लिए JSLint डाउनलोड करें और इसे "विक्रेता" निर्देशिका के अंदर रखें

अब जावास्क्रिप्ट प्रोजेक्ट के रूट डायरेक्टरी में "Rakefile" नामक एक फाइल बनाएं और उसमें निम्न सामग्री जोड़ें:

require 'rake'

ROOT            = File.expand_path(File.dirname(__FILE__))
OUTPUT_MERGED   = "final.js"
OUTPUT_MINIFIED = "final.min.js"

task :default => :check

desc "Merges the JavaScript sources."
task :merge do
  require File.join(ROOT, "vendor", "sprockets")

  environment  = Sprockets::Environment.new(".")
  preprocessor = Sprockets::Preprocessor.new(environment)

  %w(main.js).each do |filename|
    pathname = environment.find(filename)
    preprocessor.require(pathname.source_file)
  end

  output = preprocessor.output_file
  File.open(File.join(ROOT, OUTPUT_MERGED), 'w') { |f| f.write(output) }
end

desc "Check the JavaScript source with JSLint."
task :check => [:merge] do
  jslint_path = File.join(ROOT, "vendor", "jslint.js")

  sh 'java', 'org.mozilla.javascript.tools.shell.Main',
    jslint_path, OUTPUT_MERGED
end

desc "Minifies the JavaScript source."
task :minify => [:merge] do
  sh 'java', 'com.yahoo.platform.yui.compressor.Bootstrap', '-v',
    OUTPUT_MERGED, '-o', OUTPUT_MINIFIED
end

यदि आपने सब कुछ सही ढंग से किया है, तो आपको अपने कंसोल में निम्नलिखित कमांड का उपयोग करने में सक्षम होना चाहिए:

• rake merge - विभिन्न जावास्क्रिप्ट फ़ाइलों को एक में मिलाने के लिए
• rake check- अपने कोड के सिंटैक्स की जांच करने के लिए (यह डिफ़ॉल्ट कार्य है, इसलिए आप बस टाइप कर सकते हैं rake)
• rake minify - अपने जेएस कोड का छोटा संस्करण तैयार करने के लिए

स्रोत विलय पर

Sprockets का उपयोग करते हुए, जावास्क्रिप्ट प्री-प्रोसेसर आप requireअन्य जावास्क्रिप्ट फ़ाइलों को शामिल (या ) कर सकते हैं । प्रारंभिक फ़ाइल से अन्य स्क्रिप्ट शामिल करने के लिए निम्न सिंटैक्स का उपयोग करें ("main.js" नाम दिया गया है, लेकिन आप इसे Rakefile में बदल सकते हैं):

(function() {
//= require "subdir/jsfile.js"
//= require "anotherfile.js"

    // some code that depends on included files
    // note that all included files can be in the same private scope
})();

और तब...

स्वचालित इकाई परीक्षण को सेट करने के लिए WysiHat के साथ प्रदान की गई Rakefile पर एक नज़र डालें। अच्छी सामग्री :)

और अब जवाब के लिए

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

समस्या के प्रति मेरा दृष्टिकोण उतना ही ऑब्जेक्ट-ओरिएंटेड मॉडलिंग करना है जितना कि मैं कर सकता हूं और विभिन्न फाइलों में कार्यान्वयन को अलग कर सकता हूं। फिर हैंडलर जितना संभव हो उतना छोटा होना चाहिए। Listसिंगलटन के साथ उदाहरण भी अच्छा है।

और नाम स्थान ... अच्छी तरह से गहरी वस्तु संरचना द्वारा उनका अनुकरण किया जा सकता है।

if (typeof org === 'undefined') {
    var org = {};
}

if (!org.hasOwnProperty('example')) {
    org.example = {};
}

org.example.AnotherObject = function () {
    // constructor body
};

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

Answer 5

कोड संगठन को सम्मेलनों और प्रलेखन मानकों को अपनाने की आवश्यकता है:
1. एक भौतिक फ़ाइल के लिए नाम कोड;

Exc = {};

2. इन नामस्थान जावास्क्रिप्ट में समूह कक्षाएं;
3. वास्तविक दुनिया की वस्तुओं का प्रतिनिधित्व करने के लिए प्रोटोटाइप या संबंधित फ़ंक्शन या कक्षाएं सेट करें;

Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};
Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    ...
};

4. कोड में सुधार करने के लिए सम्मेलनों को सेट करें। उदाहरण के लिए, किसी वस्तु प्रकार के अपने वर्गीय गुण में उसके सभी आंतरिक कार्यों या विधियों को समूहित करें।

Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    this.internal = {
        widthEstimates: function (tips) {
            ...
        }
        formatTips: function () {
            ...
        }
    };
    ...
};

5. नामस्थान, वर्गों, विधियों और चर का प्रलेखन करें। जहाँ आवश्यक भी कुछ कोड (कुछ FIs और Fors) पर चर्चा करते हैं, वे आमतौर पर कोड के महत्वपूर्ण तर्क को लागू करते हैं)।

/**
  * Namespace <i> Example </i> created to group other namespaces of the "Example".  
  */
Exc = {};
/**
  * Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
  */
Exc.ui = {};

/**
  * Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
  * @ Param {String} mask - mask validation of input data.
  */
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};

/**
  * Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
  * @ Param {String} id - id of the HTML element.
  * @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
  */
  Exc.ui.domTips = function (id, tips) {
    this.domID = id;
    this.tips = tips;
    ...
};

ये सिर्फ कुछ सुझाव दिए गए हैं, लेकिन है कि बहुत कोड के आयोजन में मदद की है। याद रखें आपको सफल होने के लिए अनुशासन होना चाहिए!

Answer 6

अच्छे OO डिज़ाइन प्रिंसिपल और डिज़ाइन पैटर्न का अनुसरण करने से आपके कोड को बनाए रखने और समझने में आसानी होती है। लेकिन मैंने हाल ही में खोजा सबसे अच्छी चीजों में से एक सिग्नल और स्लॉट उर्फ ​​प्रकाशित / सदस्यता हैं। Http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html पर नज़र डालें एक सरल jQuery कार्यान्वयन के लिए ।

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

मुझे लगता है कि Dojo (और प्रोटोटाइप?) में इस तकनीक का एक अंतर्निहित संस्करण है।

यह भी देखें कि सिग्नल और स्लॉट क्या हैं?

Comments

मैंने इसे jQuery में किया है। JS में एक अंतर्निहित ईवेंट मॉडल है, इसलिए आपको वास्तव में बहुत अधिक फ्रेमवर्क समर्थन की आवश्यकता नहीं है।

— मार्नेन लाईबो-कोसर

Answer 7

मैं अपने पिछले जॉब में जावास्क्रिप्ट जेएसड्यूल पैटर्न को एक्सट्रीम जेएस एप्लिकेशन पर सफलतापूर्वक लागू करने में सक्षम था । यह अच्छी तरह से समझाया कोड बनाने के लिए एक सरल तरीका प्रदान किया।

Answer 8

डोजो में पहले दिन से मॉड्यूल सिस्टम था। वास्तव में इसे दोजो की आधारशिला माना जाता है, गोंद जो इसे एक साथ रखता है:

• dojo.require - आधिकारिक डॉक्टर ।
• Dojo.declare, dojo.require और dojo.provide को समझना ।
• डोजो का परिचय ।

मॉड्यूल Dojo का उपयोग करना निम्नलिखित उद्देश्यों को प्राप्त करता है:

• Dojo कोड और कस्टम कोड के लिए नाम स्थान ( dojo.declare()) - वैश्विक स्थान, अन्य पुस्तकालयों के साथ सह-अस्तित्व और उपयोगकर्ता के गैर-Dojo-जागरूक कोड को प्रदूषित नहीं करते हैं।
• मॉड्यूल को सिंक्रोनाइज़ या असिंक्रोनस रूप से नाम ( dojo.require()) द्वारा लोड किया जा रहा है ।
• कस्टम एक एकल फ़ाइल या अन्योन्याश्रित फ़ाइलों (तथाकथित परतों) का एक समूह बनाने के लिए मॉड्यूल निर्भरता का विश्लेषण करके बनाता है जिसमें केवल आपके वेब एप्लिकेशन की आवश्यकता होती है। कस्टम बिल्ड में Dojo मॉड्यूल और ग्राहक-आपूर्ति वाले मॉड्यूल शामिल हो सकते हैं।
• Dojo और उपयोगकर्ता के कोड के लिए पारदर्शी CDN- आधारित पहुँच। AOL और Google दोनों ही इस अंदाज़ में Dojo को आगे बढ़ाते हैं, लेकिन कुछ ग्राहक अपने कस्टम वेब एप्लिकेशन के लिए भी ऐसा करते हैं।

Answer 9

की जाँच करें JavasciptMVC ।

आप ऐसा कर सकते हैं :

• अपने कोड को मॉडल, व्यू और कंट्रोलर लेयर्स में विभाजित करें।

• सभी कोड को एक एकल उत्पादन फ़ाइल में संपीड़ित करें

• ऑटो-जनरेट कोड

• इकाई परीक्षण बनाएं और चलाएं

• और बहुत अधिक...

सबसे अच्छा, यह jQuery का उपयोग करता है, इसलिए आप अन्य jQuery प्लग इन का भी लाभ उठा सकते हैं।

Comments

हाँ, मैंने jmvc का उपयोग किया है और यह बहुत अच्छा है - डॉक्स बेहतर हो सकता है

— 14

Answer 10

मेरे बॉस अभी भी उस समय की बात करते हैं जब उन्होंने मॉड्यूलर कोड (सी भाषा) लिखा था, और शिकायत करते हैं कि आजकल कोड कितना भद्दा है! यह कहा जाता है कि प्रोग्रामर किसी भी फ्रेमवर्क में असेंबली लिख सकते हैं। कोड संगठन को दूर करने के लिए हमेशा एक रणनीति होती है। मूल समस्या उन लोगों के साथ है जो जावा स्क्रिप्ट को एक खिलौना मानते हैं और इसे कभी भी सीखने की कोशिश नहीं करते हैं।

मेरे मामले में, मैं एक उचित init_screen () के साथ एक UI थीम या एप्लिकेशन स्क्रीन के आधार पर js फाइलें लिखता हूं। उचित आईडी नामकरण सम्मेलन का उपयोग करते हुए, मैं यह सुनिश्चित करता हूं कि रूट तत्व स्तर पर कोई नाम स्थान संघर्ष नहीं हैं। Unobstrusive window.load () में, मैं टॉप लेवल आईडी के आधार पर चीजों को टाई करता हूं।

मैं सभी निजी विधियों को छिपाने के लिए जावा स्क्रिप्ट क्लोजर और पैटर्न का कड़ाई से उपयोग करता हूं। ऐसा करने के बाद, कभी भी परस्पर विरोधी गुणों / फ़ंक्शन परिभाषाओं / परिवर्तनशील परिभाषाओं की समस्या का सामना नहीं करना पड़ा। हालांकि, एक टीम के साथ काम करते समय एक ही कठोरता को लागू करना अक्सर मुश्किल होता है।

Answer 11

मुझे आश्चर्य है कि किसी ने MVC फ्रेमवर्क का उल्लेख नहीं किया है। मैं अपने कोड को संशोधित करने और डिकूप करने के लिए Backbone.js का उपयोग कर रहा हूं, और यह अमूल्य है।

वहाँ इस तरह के ढांचे के काफी कुछ वहाँ से बाहर हैं, और उनमें से ज्यादातर बहुत छोटे हैं। मेरी व्यक्तिगत राय है कि यदि आप आकर्षक UI सामान के लिए jQuery की सिर्फ एक दो पंक्तियों से अधिक लिखने जा रहे हैं, या एक समृद्ध Ajax आवेदन चाहते हैं, तो एक MVC फ्रेमवर्क आपके जीवन को बहुत आसान बना देगा।

Answer 12

"पागलों की तरह लिखें और बस उम्मीद है कि यह सबसे अच्छा काम करता है?", मैंने इस तरह की एक परियोजना देखी है जिसे सिर्फ 2 डेवलपर्स द्वारा विकसित और बनाए रखा गया था, बहुत सारे जावास्क्रिप्ट कोड के साथ एक विशाल अनुप्रयोग। इसके शीर्ष पर हर संभावित jquery फ़ंक्शन के लिए अलग-अलग शॉर्टकट थे, जिनके बारे में आप सोच सकते हैं। मैंने सुझाव दिया कि वे कोड को प्लगइन्स के रूप में व्यवस्थित करते हैं, क्योंकि यह वर्ग, मॉड्यूल, नेमस्पेस ... और पूरे ब्रह्मांड के बराबर jquery है। लेकिन चीजें बहुत खराब हो गईं, अब उन्होंने प्रोजेक्ट में उपयोग किए गए कोड की 3 लाइनों के हर संयोजन की जगह प्लगइन्स लिखना शुरू कर दिया। Personaly मुझे लगता है कि jQuery शैतान है और इसे बहुत सारे जावास्क्रिप्ट के साथ परियोजनाओं पर उपयोग नहीं किया जाना चाहिए क्योंकि यह आपको आलसी होने के लिए प्रोत्साहित करता है और किसी भी तरह से कोड को व्यवस्थित करने के बारे में नहीं सोचता है। मैंने 40 जिव्ड फ़ंक्शन (I) के साथ एक पंक्ति की तुलना में जावास्क्रिप्ट की 100 पंक्तियाँ पढ़ीं मैं मजाक नहीं कर रहा हूं)। आम धारणा के विपरीत जावास्क्रिप्ट कोड को नामस्थान और कक्षाओं के समकक्ष व्यवस्थित करना बहुत आसान है। यही YUI और Dojo करते हैं। आप अपनी मर्जी से आसानी से रोल कर सकते हैं। मुझे YUI का दृष्टिकोण बहुत बेहतर और कुशल लगता है। लेकिन आपको सामान्य रूप से YUI नामकरण सम्मेलनों की भरपाई के लिए स्निपेट्स के समर्थन के साथ एक अच्छे संपादक की आवश्यकता है यदि आप कुछ भी उपयोगी लिखना चाहते हैं।

Comments

मैं आपके साथ वास्तव में लंबे, जंजीर कमांड के बारे में सहमत हूं, लेकिन jQuery के सबसे अच्छे हिस्सों में से एक यह है कि यह सभी जावास्क्रिप्ट को HTML से बाहर रखता है। आप अपने तत्वों के लिए इवेंट संचालकों को "तत्वों" के बिना IDs या अपने तत्वों पर <जो कुछ भी हो> जोड़ने के लिए सेटअप कर सकते हैं। हमेशा की तरह, किसी भी उपकरण का अधिक उपयोग बुरा है ...

— ह्यूगोवरे

मैंने jQuery में विशाल, सुव्यवस्थित परियोजनाओं पर काम किया है। मुझे नहीं पता कि आपको क्यों लगता है कि यह संगठन के रास्ते में है।

— मारन लाइबो-कोसर

Answer 13

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

Comments

अच्छी टिप्पणी है कुंजी - मुझे खुशी है कि आपने कहा कि मुझे ऐसा नहीं करना था। मैं लगातार नामकरण परंपराओं को जोड़ूंगा, चर और amp के लिए आसानी से समझने योग्य संगठन रणनीति के कुछ प्रकार; फ़ंक्शंस, और जैसा कि आपने उल्लेख किया है, कक्षाओं बनाम एकल के विवेकपूर्ण उपयोग।

— मैट लोहकैंप

यदि आपको टिप्पणियों की आवश्यकता है, तो आपका कोड आमतौर पर पर्याप्त रूप से पठनीय नहीं है। कोड लिखने के लिए प्रयास करें जिसमें टिप्पणियों की आवश्यकता न हो।

— मर्नेन लाईबो-कोसर 14'11

इसके अलावा, यदि आपको यूएमएल और राज्य आरेखों की आवश्यकता है, तो संभवतः इसका मतलब है कि कोड से आपकी वास्तुकला पर्याप्त नहीं है। Downvoting।

— मार्नेन लाईबो-कोसर

@ मार्नेन लिखित परियोजनाओं में WHY का वर्णन करने के लिए टिप्पणियां शामिल हैं, जरूरी नहीं कि क्या हो। कोड पहले ही WHAT का वर्णन करता है, लेकिन अक्सर आपको WHY का वर्णन करने के लिए कुछ चाहिए। Upvoting।

— साइपर

@Cypher अच्छी तरह से लिखी गई परियोजनाओं में पर्याप्त कोड स्पष्ट है कि आप आमतौर पर "क्यों" बता सकते हैं, न कि केवल "क्या"। मुझे "क्यों" बताने के लिए एक टिप्पणी पर भरोसा नहीं होगा, क्योंकि मुझे कोई गारंटी नहीं है कि यह कोड के साथ सिंक में है। कोड डॉक्यूमेंट को ही दें।

— मार्नेन लाईबो-कोसर

Answer 14

अपने पिछले प्रोजेक्ट में -Viajeros.com- मैंने कई तकनीकों के संयोजन का उपयोग किया है। मुझे नहीं पता कि वेब ऐप को कैसे व्यवस्थित किया जाए - वायाजेरोस अच्छी तरह से परिभाषित वर्गों वाले यात्रियों के लिए एक सोशल नेटवर्किंग साइट है, इसलिए प्रत्येक क्षेत्र के लिए कोड को अलग करना आसान है।

मैं साइट सेक्शन के अनुसार मॉड्यूल के नेमस्पेस सिमुलेशन और आलसी लोडिंग का उपयोग करता हूं। प्रत्येक पृष्ठ लोड पर मैं "vjr" ऑब्जेक्ट घोषित करता हूं, और हमेशा इसे (vjr.base.js) सामान्य कार्यों का एक सेट लोड करता हूं। फिर प्रत्येक HTML पृष्ठ यह तय करता है कि एक सरल के साथ कौन से मॉड्यूल की आवश्यकता है:

vjr.Required = ["vjr.gallery", "vjr.comments", "vjr.favorites"];

Vjr.base.js सर्वर से प्रत्येक एक gzipped हो जाता है और उन्हें निष्पादित करता है।

vjr.include(vjr.Required);
vjr.include = function(moduleList) {
  if (!moduleList) return false;
  for (var i = 0; i < moduleList.length; i++) {
    if (moduleList[i]) {
      $.ajax({
        type: "GET", url: vjr.module2fileName(moduleList[i]), dataType: "script"
      });
    }
  }
};

हर "मॉड्यूल" में यह संरचना होती है:

vjr.comments = {}

vjr.comments.submitComment = function() { // do stuff }
vjr.comments.validateComment = function() { // do stuff }

// Handlers
vjr.comments.setUpUI = function() {
    // Assign handlers to screen elements
}

vjr.comments.init = function () {
  // initialize stuff
    vjr.comments.setUpUI();
}

$(document).ready(vjr.comments.init);

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

Answer 15

Jquery केंद्रित नामस्थान तरीके में अपना कोड व्यवस्थित करना निम्न प्रकार से हो सकता है ... और अन्य जावास्क्रिप्ट एपीआई जैसे प्रोटोटाइप, एक्सट्रीम के साथ टकराव नहीं होगा।

<script src="jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

var AcmeJQ = jQuery.noConflict(true);
var Acme = {fn: function(){}};

(function($){

    Acme.sayHi = function()
    {
        console.log('Hello');
    };

    Acme.sayBye = function()
    {
        console.log('Good Bye');
    };
})(AcmeJQ);

// Usage
//          Acme.sayHi();
// or
// <a href="#" onclick="Acme.sayHi();">Say Hello</a>


</script>

उम्मीद है की यह मदद करेगा।

Comments

यह मुझे थोड़ा माल-पंथ के रूप में प्रभावित करता है। jQuery.fnके लिए एक सूचक है jQuery.prototype, क्योंकि $()वास्तव में jQuery निर्माता समारोह का एक नया उदाहरण देता है। JQuery के लिए एक 'प्लगइन' जोड़ने का मतलब है बस अपने प्रोटोटाइप का विस्तार। लेकिन आप जो कर रहे हैं, वह नहीं है, और एक ही काम को पूरा करने के क्लीनर तरीके हैं।

— एडम लाससेक 27'11

मेरा मानना ​​है कि वह केवल स्थिर कार्य बना रहा है। मुझे याद है कि यह jQuery के डॉक्स में देख रहा है कि स्थैतिक कार्यों को घोषित करने का यह तरीका स्वीकार्य है

— एलेक्स हेड

Answer 16

OO + MVC के अच्छे प्रिंसिपल निश्चित रूप से एक जटिल जावास्क्रिप्ट ऐप के प्रबंधन के लिए एक लंबा रास्ता तय करेंगे।

मूल रूप से मैं अपने ऐप और जावास्क्रिप्ट को निम्न परिचित डिज़ाइन में व्यवस्थित कर रहा हूं (जो मेरे डेस्कटॉप प्रोग्रामिंग दिनों से वेब 2.0 तक वापस मौजूद है)

छवि पर संख्यात्मक मान के लिए विवरण:

1. विजेट मेरे आवेदन के विचारों का प्रतिनिधित्व करते हैं। यह एक्स्टेंसिबल होना चाहिए और बड़े करीने से बनाए गए अच्छे पृथक्करण से अलग होना चाहिए जो MVC स्पैगेटी कोड में मेरे विजेट को बदलने के बजाय प्राप्त करने की कोशिश करता है (सीधे HTML में जावास्क्रिप्ट के एक बड़े ब्लॉक को डालने के वेब ऐप के बराबर)। प्रत्येक विजेट अन्य विगेट्स द्वारा उत्पन्न घटना को सुनकर दूसरों के माध्यम से संवाद करता है, इस प्रकार विगेट्स के बीच मजबूत युग्मन को कम करता है जो असहनीय कोड को जन्म दे सकता है (स्क्रिप्ट टैग में वैश्विक कार्यों की ओर इशारा करते हुए हर जगह ऑनक्लिक जोड़ने का दिन याद रखें? उरग ...)
2. ऑब्जेक्ट मॉडल जो उस डेटा का प्रतिनिधित्व करता है जिसे मैं विजेट में पॉपुलेट करना चाहता हूं और सर्वर के आगे-पीछे गुजर रहा हूं। डेटा को उसके मॉडल में एनकैप्सुलेट करने से एप्लिकेशन डेटा फॉर्मेट एग्नोस्टिक्स बन जाता है। उदाहरण के लिए: स्वाभाविक रूप से जावास्क्रिप्ट में, इन ऑब्जेक्ट मॉडल को ज्यादातर JSON में क्रमबद्ध और deserialized किया जाता है, अगर किसी तरह सर्वर संचार के लिए XML का उपयोग कर रहा है, तो मुझे केवल बदलने की आवश्यकता है क्रमांकन / deserialization परत को बदल रहा है और जरूरी नहीं कि सभी विजेट वर्गों को बदलने की आवश्यकता है ।
3. नियंत्रक कक्षाएं जो सर्वर + के लिए व्यावसायिक तर्क और संचार का प्रबंधन करती हैं। यह परत सर्वर पर संचार प्रोटोकॉल को नियंत्रित करती है और आवश्यक डेटा को ऑब्जेक्ट मॉडल में डालती है
4. कक्षाओं को उनके संगत नामस्थानों में बड़े करीने से लपेटा जाता है। मुझे यकीन है कि हम सभी जानते हैं कि जावास्क्रिप्ट में वैश्विक नाम स्थान कितना बुरा हो सकता है।

अतीत में, मैं फ़ाइलों को अपने स्वयं के js में अलग कर दूंगा और जावास्क्रिप्ट में OO सिद्धांत बनाने के लिए सामान्य अभ्यास का उपयोग करूंगा। समस्या जो मुझे जल्द ही मिली कि JS OO को लिखने के कई तरीके हैं और जरूरी नहीं कि सभी टीम के सदस्यों का दृष्टिकोण एक जैसा हो। चूंकि टीम बड़ी हो गई (मेरे मामले में 15 से अधिक लोग), यह जटिल हो जाता है क्योंकि ऑब्जेक्ट ओरिएंटेड जावास्क्रिप्ट के लिए कोई मानक दृष्टिकोण नहीं है। उसी समय मैं अपनी खुद की रूपरेखा नहीं लिखना चाहता हूं और कुछ काम दोहरा रहा हूं जो मुझे यकीन है कि मैं हल किए हुए लोगों की तुलना में अधिक चालाक हूं।

jQuery जावास्क्रिप्ट फ्रेमवर्क के रूप में अविश्वसनीय रूप से अच्छा है और मुझे यह पसंद है, हालांकि, जैसा कि परियोजना बड़ी हो जाती है, मुझे स्पष्ट रूप से अपने वेब ऐप के लिए अतिरिक्त संरचना की आवश्यकता है ताकि विशेष रूप से OO अभ्यास को मानकीकृत किया जा सके। खुद के लिए, कई प्रयोगों के बाद, मुझे लगता है कि YUI3 बेस और विजेट ( http://yuilibrary.com/yui/docs/wid//) और http://yuilibrary.com/yui/docs/base/index.html ) बुनियादी ढांचा प्रदान करता है वास्तव में मुझे क्या चाहिए। कुछ कारण हैं कि मैं उनका उपयोग क्यों करता हूं।

1. यह नेमस्पेस सपोर्ट प्रदान करता है। अपने कोड के OO और स्वच्छ संगठन के लिए एक वास्तविक आवश्यकता
2. यह वर्गों और वस्तुओं की धारणा का समर्थन करता है
3. यह आपकी कक्षा में उदाहरण चर जोड़ने के लिए एक मानकीकृत साधन देता है
4. यह बड़े पैमाने पर वर्ग विस्तार का समर्थन करता है
5. यह कंस्ट्रक्टर और विध्वंसक प्रदान करता है
6. यह रेंडरिंग और इवेंट बाइंडिंग प्रदान करता है
7. इसमें बेस विजेट फ्रेमवर्क है
8. प्रत्येक विजेट अब मानक ईवेंट आधारित मॉडल का उपयोग करके एक दूसरे से संवाद करने में सक्षम है
9. सबसे महत्वपूर्ण बात, यह सभी इंजीनियरों को जावास्क्रिप्ट विकास के लिए एक OO Standard देता है

कई विचारों के विपरीत, मुझे जरूरी नहीं कि jQuery और YUI3 के बीच चयन करना है। ये दोनों शांतिपूर्वक सह अस्तित्व में हो सकते हैं। जबकि YUI3 मेरे जटिल वेब ऐप के लिए आवश्यक OO टेम्प्लेट प्रदान करता है, jQuery अभी भी JS Abstraction का उपयोग करने के लिए मेरी टीम को आसानी से प्रदान करता है जो हम सभी को प्यार और परिचित हैं।

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

विजेट ईवेंट आधारित मॉडल का उपयोग करके एक दूसरे के साथ संवाद कर सकता है और घटना को सुन सकता है और पूर्वनिर्धारित इंटरफ़ेस के आधार पर आवश्यक कार्य कर सकता है। सीधे शब्दों में कहें तो JS के लिए OO + MVC स्ट्रक्चर लगाना मेरे लिए खुशी की बात है।

बस एक अस्वीकरण, मैं याहू के लिए काम नहीं करते! और बस एक वास्तुकार जो मूल प्रश्न से उत्पन्न एक ही मुद्दे का सामना करने की कोशिश कर रहा है। मुझे लगता है कि अगर किसी को ओओ के समकक्ष ढांचा मिल जाए, तो यह भी काम करेगा। मुख्य रूप से, यह प्रश्न अन्य तकनीकों पर भी लागू होता है। हमारे प्रोग्रामिंग दिनों को अधिक प्रबंधनीय बनाने के लिए OO सिद्धांतों + MVC के साथ आए सभी लोगों के लिए भगवान का शुक्र है।

Answer 17

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

Answer 18

कुछ दिनों पहले, 37Signals पर लोगों ने एक ट्वेंटी के साथ RTE कंट्रोल जारी किया । उन्होंने एक पुस्तकालय बनाया जो एक प्रकार के प्री-प्रोसेसर कमांड का उपयोग करके जावास्क्रिप्ट फाइल को बंडल करता है।

मैं अपनी JS फ़ाइलों को अलग करने के बाद से इसका उपयोग कर रहा हूं और फिर अंत में उन्हें एक के रूप में मर्ज करता हूं। इस तरह मैं चिंताओं को अलग कर सकता हूं और अंत में, केवल एक फ़ाइल है जो पाइप के माध्यम से जाती है (gzipped, कोई कम नहीं)।

अपने टेम्प्लेट में, जांचें कि क्या आप विकास मोड में हैं, और अलग-अलग फ़ाइलों को शामिल करें, और यदि उत्पादन में हैं, तो अंतिम एक को शामिल करें (जिसे आपको खुद "निर्माण" करना होगा)।

Comments

getsprockets.org सीधा लिंक है

— मैट गार्डनर

Answer 19

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

$(function(){
    //Preload header images
    $('a.rollover').preload();

    //Create new datagrid
    var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});

var datagrid = {
    init: function(w, url, style){
        //Rendering code goes here for style / width
        //code etc

        //Fetch data in
        $.get(url, {}, function(data){
            data = data.split('\n');
            for(var i=0; i < data.length; i++){
                //fetching data
            }
        })
    },
    refresh: function(deep){
        //more functions etc.
    }
};

Answer 20

बड़े jQuery अनुप्रयोगों को व्यवस्थित करने के लिए वंशानुक्रम पैटर्न का उपयोग करें।

Comments

मैं इसका उपयोग करना शुरू कर रहा हूं, यहां तक ​​कि बहुत कम / बुनियादी चीजों के लिए भी, और यह वास्तव में कोड को साफ और लचीला रखने में मदद करता है। यह सरल क्लाइंट-साइड JS जोड़तोड़ के लिए भी उपयोग करने लायक है।

— चेतन

यह मुझे पसंद है, और मेरे अनुप्रयोगों में उपयोग करता है।

— एंड्रियास

Answer 21

मुझे लगता है कि इस संबंध में, शायद, DDD (डोमेन-चालित डिजाइन)। मैं जिस एप्लिकेशन पर काम कर रहा हूं, हालांकि एक औपचारिक एपीआई की कमी है, वह सर्वर-साइड कोड (क्लास / फ़ाइल नाम, आदि) के माध्यम से ऐसे संकेत देता है। इसके साथ सशस्त्र, मैंने संपूर्ण समस्या डोमेन के लिए एक शीर्ष-स्तरीय ऑब्जेक्ट कंटेनर के रूप में बनाया; उसके बाद, मैंने जहाँ आवश्यक हो वहाँ नामस्थान जोड़े:

var App;
(function()
{
    App = new Domain( 'test' );

    function Domain( id )
    {
        this.id = id;
        this.echo = function echo( s )
        {
            alert( s );
        }
        return this;
    }
})();

// separate file
(function(Domain)
{
    Domain.Console = new Console();

    function Console()
    {
        this.Log = function Log( s )
        {
            console.log( s );
        }
        return this;
    }
})(App);

// implementation
App.Console.Log('foo');

Answer 22

जावास्क्रिप्ट संगठन के लिए निम्नलिखित का उपयोग कर रहा है

1. आपके सभी जावास्क्रिप्ट के लिए फ़ोल्डर
2. पृष्ठ स्तर जावास्क्रिप्ट को पृष्ठ के समान नाम के साथ अपनी स्वयं की फ़ाइल मिलती है। ProductDetail.aspx ProductDetail.js होगा
3. लाइब्रेरी फ़ाइलों के लिए जावास्क्रिप्ट फ़ोल्डर के अंदर मेरे पास एक काम करने योग्य फ़ोल्डर है
4. एक संबंधित फ़ोल्डर में संबंधित लाइब्रेरी फ़ंक्शंस रखें, जिसे आप अपने पूरे एप्लिकेशन में उपयोग करना चाहते हैं।
5. अजाक्स एकमात्र जावास्क्रिप्ट है जिसे मैं जावास्क्रिप्ट फ़ोल्डर के बाहर ले जाता हूं और इसे खुद का फ़ोल्डर मिल जाता है। फिर मैं दो उप फ़ोल्डर क्लाइंट और सर्वर जोड़ता हूं
6. क्लाइंट फ़ोल्डर को सभी .js फाइलें मिलती हैं जबकि सर्वर फ़ोल्डर में सभी सर्वर साइड फाइलें मिलती हैं।

Comments

फ़ाइल संगठन के लिए अच्छा है। मैं कोड के साथ ऐसा करता हूं। लेकिन अंत में मैं एक में अपना कोड संकलित करता हूं ... चलो dll कहते हैं। आपको जावास्क्रिप्ट के साथ भी ज़रूरत है या आप प्रति पृष्ठ 15 js फ़ाइलों का अनुरोध करेंगे।

— graffic

प्रति पृष्ठ 15 JS फ़ाइलों के अनुरोध के साथ कुछ भी गलत नहीं है। आपका ब्राउज़र उन्हें बाद के अनुरोधों के लिए वैसे भी कैश कर देगा।

— मर्नेन लाईबो-कोसर

@ MarnenLaibow-Koser एक पृष्ठ पर 15 जेएस फ़ाइलों के अनुरोध के साथ एकमात्र मुद्दा यह है कि कितने HTTP अनुरोधों को ब्राउज़र एक समय में संभाल सकता है। इसलिए उन्हें एक फ़ाइल में बंडल करना ब्राउज़र को एक ही समय में अन्य आवश्यक फ़ाइलों का अनुरोध करने की अनुमति देता है।

— इवाब्रोबेड

यह सच है, लेकिन हिट के पहले जोड़े के बाद, वे ब्राउज़र के कैश में होंगे, इसलिए उन्हें HTTP कनेक्शन की आवश्यकता नहीं होगी।

— मर्नेन लाईबो-कोसर

Answer 23

मैं इस छोटी सी चीज का उपयोग कर रहा हूं। यह आपको JS और HTML दोनों टेम्पलेट के लिए 'निर्देश' शामिल करता है। यह गंदगी को पूरी तरह से खत्म कर देता है।

https://github.com/gaperton/include.js/

$.include({
    html: "my_template.html" // include template from file...
})
.define( function( _ ){ // define module...
    _.exports = function widget( $this, a_data, a_events ){ // exporting function...
        _.html.renderTo( $this, a_data ); // which expands template inside of $this.

        $this.find( "#ok").click( a_events.on_click ); // throw event up to the caller...
        $this.find( "#refresh").click( function(){
            widget( $this, a_data, a_events ); // ...and update ourself. Yep, in that easy way.
        });
    }
});

Answer 24

आप jquery mx (javascriptMVC में प्रयुक्त) का उपयोग कर सकते हैं, जो स्क्रिप्ट का एक सेट है जो आपको मॉडल, दृश्य और नियंत्रक का उपयोग करने की अनुमति देता है। मैंने इसे एक परियोजना में उपयोग किया है और मुझे संपीड़न के कारण न्यूनतम स्क्रिप्ट आकार के साथ संरचित जावास्क्रिप्ट बनाने में मदद की है। यह एक नियंत्रक उदाहरण है:

$.Controller.extend('Todos',{
  ".todo mouseover" : function( el, ev ) {
   el.css("backgroundColor","red")
  },
  ".todo mouseout" : function( el, ev ) {
   el.css("backgroundColor","")
  },
  ".create click" : function() {
   this.find("ol").append("<li class='todo'>New Todo</li>"); 
  }
})

new Todos($('#todos'));

यदि आप दृश्य और मॉडल भागों में रुचि नहीं रखते हैं, तो आप केवल jquerymx के नियंत्रक पक्ष का उपयोग कर सकते हैं ।

Answer 25

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

अंतिम परिणाम एक छोटा (लगभग 1KB) ढांचा था जो ऑब्जेक्ट को शाब्दिक रूप से jQuery में बदल देता है। वाक्यविन्यास को स्कैन करना नेत्रहीन रूप से आसान है, और यदि आपका जेएस वास्तव में बहुत बड़ा हो जाता है, तो आप चयनकर्ताओं द्वारा उपयोग की गई चीजों, भरी हुई फ़ाइलों, आश्रित कार्यों, आदि को खोजने के लिए पुन: प्रयोज्य प्रश्न लिख सकते हैं।

यहाँ एक छोटी रूपरेखा पोस्ट करना अव्यावहारिक है, इसलिए मैंने उदाहरणों के साथ एक ब्लॉग पोस्ट लिखा (मेरा पहला। यह एक साहसिक कार्य था)! आपका स्वागत है।

किसी भी अन्य लोगों के लिए यहां कुछ मिनटों के लिए इसे देख लें, मैं प्रतिक्रिया की बहुत सराहना करूंगा!

फ़ायरफ़ॉक्स की सिफारिश की गई क्योंकि यह ऑब्जेक्ट क्वेरी उदाहरण के लिए स्रोत () का समर्थन करता है।

चीयर्स!

एडम

Answer 26

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

Behaviour.register({ 
    'a.delete-post': function(element) {
        element.observe('click', function(event) { ... });
    },

    'a.anotherlink': function(element) {
        element.observe('click', function(event) { ... });
    }

});

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

Comments

क्या यह वही है जिसकी आपको तलाश थी? koders.com/javascript/…

— DOK

हाँ, यह एक है! :) लगता है कि लिंक के पीछे कोड की तुलना में मैं जिस संस्करण से प्रेरित था, उससे काफी नया है। आपके प्रयास के लिए धन्यवाद!

— एरॉन रोटेटेवेल

Answer 27

आप उल्लेख नहीं करते कि आपकी सर्वर-साइड भाषा क्या है। या, अधिक प्रासंगिक रूप से, आप किस फ्रेमवर्क का उपयोग कर रहे हैं - यदि कोई हो - सर्वर-साइड पर।

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

अंत-पृष्ठों के लिए जिन्हें अपने स्वयं के जेएस का उत्सर्जन करना है, मैं आमतौर पर पाता हूं कि उत्पन्न मार्कअप में एक तार्किक संरचना है। इस तरह के स्थानीयकृत जेएस को अक्सर ऐसी संरचना के प्रारंभ और / या अंत में इकट्ठा किया जा सकता है।

ध्यान दें कि इसमें से कोई भी आपको कुशल जावास्क्रिप्ट लिखने से नहीं रोकता है! :-)

Answer 28

आलसी लोड कोड आपको मांग पर चाहिए। Google अपने google.loader के साथ कुछ ऐसा करता है