javascript जावास्क्रिप्ट कोड संगठन डेटा चालित आवेदन




jquery asp.net-mvc (3)

संगठन और पैटर्न अच्छा लगता है, लेकिन मेरे पास कुछ सुझाव हैं:

टिप 1:

अपने मॉड्यूल के भीतर विशिष्ट वैश्विक वैरिएबल सेट करने के बजाय, शायद आप ऑब्जेक्ट को इसके बजाय वापस कर सकते हैं। तो ऐसा करने के बजाय:

;(function () {
"use strict";

    function Ticket(settings) {
        console.log("ticket created", settings);
    }
    ...
    window.Ticket = Ticket;
}()); 

आप ऐसा करेंगे:

;window.Ticket = (function () {
"use strict";

    function Ticket(settings) {
        console.log("ticket created", settings);
    }
    ...
    return Ticket;
}()); 

इसके लिए आपका मॉड्यूल कोड ले जाने और इसके लिए एक अलग वैश्विक वैरिएबल नाम देने में सक्षम होना चाहिए। यदि कोई नाम संघर्ष है, तो आप इसे MyTicket या जो भी वास्तव में मॉड्यूल के आंतरिक कोड को बदलते हैं, उसका नाम बदल सकते हैं।

टिप 2:

टिप 1 को भूल जाएं, वैश्विक चर सिंक प्रत्येक ऑब्जेक्ट प्रकार के लिए एक अलग ग्लोबल वैरिएबल बनाने के बजाय, ऑब्जेक्ट मैनेजर बनाने के लिए और अपने सभी ऑब्जेक्ट्स को प्रबंधित करने के लिए एक ग्लोबल वैरिएबल का उपयोग क्यों न करें:

window.myCompany = (function () {
    function ObjectManager(modules) {
        this.modules = modules || {};
    }

    ObjectManager.prototype.getInstance = function(type, settings) {
        if (!type || !this.modules.hasOwnProperty(type)) {
            throw "Unrecognized object type:";
        }
        return new this.modules[type](settings);
    };

    ObjectManager.prototype.addObjectType = function(type, object) {
        if (!type) {
            throw "Type is required";
        }
        if(!object) {
            throw "Object is required";
        }
        this.modules[type] = object;
    };

    return new ObjectManager();
}());

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

;(function () {
"use strict";

    function Ticket(settings) {
        console.log("ticket created", settings);
    }
    ...
    window.myCompany.addObjectType("Ticket", Ticket);
}()); 

अब आप इस तरह हर एक ऑब्जेक्ट प्रकार के लिए आसानी से उदाहरण पा सकते हैं:

var settings = {test: true};
var ticket = window.myCompany.getInstance("Ticket", settings);

और आपके पास केवल एक वैश्विक वैरिएबल है जिसके बारे में चिंता करें।

मैं वर्तमान में एक मध्यम / बड़े पैमाने पर डेटा-आधारित asp.net MVC अनुप्रयोग के फ्रंट-एंड पर काम कर रहा हूं और मुझे सही कोड-संगठन / डिज़ाइन पैटर्न का पालन करने के बारे में कुछ संदेह है वेब एप्लिकेशन रेज़र टेम्प्लेट के साथ परिभाषित कई केंडो यूआई एमवीसी विजेट्स वाले कई पृष्ठों द्वारा किया जाता है।

केंडो से अपरिचित व्यक्तियों के लिए, रेजर सिंटैक्स को जावास्क्रिप्ट में निम्न स्निपेट के रूप में अनुवादित किया गया है:

मैंने अपने स्क्रिप्ट फ़ोल्डर में दो मुख्य फ़ोल्डरों को परिभाषित किया है, और मैंने अपने जेएस फाइलों का अनुसरण किया है जैसा कि अनुपालन:

  • साझा किया गया / इसमें साझा जेएस फाइलें शामिल हैं- file1.js -file2.js

  • पृष्ठों // एक फ़ाइल प्रति पृष्ठ

    • page1.js
    • page2.js
    • ...
    • Ticket.js // पृष्ठ 4 :)

प्रत्येक जेएस फ़ाइल निम्न पैटर्न के साथ परिभाषित एक अलग मॉड्यूल है:
नोट : init फ़ंक्शन के init प्रत्येक कॉलबैक फ़ंक्शन को विंडो ईवेंट में और कभी-कभी एक $(document).ready(function(){}) पंजीकृत किया जाता है $(document).ready(function(){}) ब्लॉक।

;(function () {
    "use strict";

    function Ticket(settings) {
        this.currentPageUrls = settings.currentPageUrls;
        this.currentPageMessages = settings.currentPageMessages;
        this.currentPageEnums = settings.currentPageEnums;
        this.currentPageParameters = settings.currentPageParameters;         


        this.gridManager = new window.gridManager(); //usage of shared modules

        this.init();
    }

    Ticket.prototype.init = function () {           

            $("form").on("submit", function () {
                $(".window-content-sandbox").addClass("k-loading");
            });

            ...
    }    

    Ticket.prototype.onRequestStart = function (e) {

        ...
    }

    //private functions definition
    function private(a, b, c){

    }

    window.Ticket = Ticket;
}());   

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

HTML / जावास्क्रिप्ट

@(Html.Kendo().DropDownList()
      .Name("Users")
      .DataValueField("Id")
      .DataTextField("Username")
      .DataSource(d => d.Read(r => r.Action("UsersAsJson", "User"))
                        .Events(e => e.RequestStart("onRequestStart"))))



var settings = {};

var ticket = new window.Ticket(settings);

function onRequestStart(e){
    ticket.onRequestStart(e);
}

मुझे लगता है कि मेरे डिज़ाइन पैटर्न अन्य फ्रंट-एंड डिलीवॉपर के लिए अनुकूल नहीं हो सकते हैं क्योंकि मैं ज्यादातर जावास्क्रिप्ट मॉड्यूल को लागू नहीं करने का विकल्प चुनता हूं क्योंकि जेक्जरी प्लगइन

सबसे पहले , क्या मैं सब कुछ गलत तरीके से कर रहा हूं?
दूसरा , क्या मेरा डिजाइन पैटर्न जावास्क्रिप्ट परीक्षण-फ्रेमवर्क के लिए उपयुक्त है?
तीसरा , जो कि जक्विरी प्लगइन्स के लिए आवश्यक हैं?

अद्यतन करें

ऊपर रेज़र वाक्यविन्यास द्वारा जावास्क्रिप्ट आउटपुट जोड़ा गया।


फ़ोल्डर संरचना

कार्यक्षमता (साझा) और मॉड्यूल (मॉड्यूलर दृष्टिकोण) के संदर्भ में, विकास या अनुप्रयोग कोड को HTML में मुठभेड़ कर सकते हैं। आपके समाधान पर एक सरल ctrl + f सभी संभव परिवर्तन उत्पन्न करना चाहिए। वर्षों से इस अनुभव से मैं व्यक्तिगत रूप से इसे विभाजित करना पसंद करता हूं:

  • ऐप (एप्लिकेशन कोड)
    • वर्ग (पुन: प्रयोज्य)
    • मॉड्यूल (सिंगलटन)
  • lib (पैकेज प्रबंधक / कर्कट / घूंट / ...)
    • jquery (उचित लाइब्रेरी नाम / अनमिनाइएटेड डिस्ट फाइल या रूट फ़ाइल)
    • केन्डो

फ़ाइल नाम

क्या कुछ करता है और एक आँख की झपकी में इसे पुन: उपयोग करने में सक्षम होने का प्रतिनिधित्व करना जो आपके विकास का समय कट जाएगा उचित नाम चुनना मूल्य है क्योंकि मुझे यकीन है कि आप जानते हैं मेरी फ़ाइल नाम हमेशा नाम- namespace साथ आमतौर पर शॉर्ट में शुरू होता है जिसके बाद पुन: प्रयोज्य "खोज" शब्द होता है:

  • एप्लिकेशन / प्रोटोटाइप
    • ns.calendar.js (एकाधिक कॉन्फ़िगरेशन)
    • ns.maps.js (संयोजन या एकल उपयोग)
    • ns.places.js (फ़ॉर्म या मैप ऐड-ऑन)
    • ns.validation.js (कई रूप और सामान्य हैंडलिंग)
  • एप्लिकेशन / एकमात्र
    • ns.cookiebox.js (एकल विन्यास)
    • ns.socialmedia.js (एकल विन्यास)
    • ns.dom.js (डोम सुधार, ग्लोबल रीसाइज इवेंट्स, छोटे विजेट्स, के लिए एक स्थान प्रदान करता है ...)

जोड़ने के लिए, जिसे आपने साझा किया है, वह कार्यशीलता है जिसका मतलब वैश्विक होना है एक महान उदाहरण अंडरस्कोर लाइब्रेरी का उपयोग करना होगा। या अपने पूरे प्रोजेक्ट्स => एनएसएफएन.जेएस के पुन: उपयोग करने के लिए अपने आप पर फ़ंक्शंस का एक संग्रह (डिवाइस का पता लगाने, थ्रॉटल, सामान्य में सहायक) बनायें क्योंकि आप उन्हें अपने नामस्थान में केवल एक बार जोड़ते हैं, इसे सिंगलटन के रूप में भी बनाया जाता है और इसमें जोड़ा जा सकता है मॉड्यूल फ़ोल्डर या सीधे ऐप रूट में।

अंतिम रूट के रूप में एक अतिरिक्त लोडर फाइल जिसे एट रूट में नियंत्रण के अपने बिंदु => ns.load.js को किकस्टार्ट करें। प्रोटोटाइप और मॉड्यूल को बाइंड करने के लिए इस फाइल में एक डोम तैयार घटना है।

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

फ़ाइल संरचना

ईमानदारी से मुझे @TxRegex का टिप 1 सबसे ज्यादा उत्तर देता है, नाम स्थान को बाइंड करने के लिए एक छोटे से अतिरिक्त के साथ और इसे फ़ाइल से फ़ाइल के रूप में इसे लोड होने पर पास करें।

कोर सिद्धांत: IIFE विंडो ऑब्जेक्ट के लिए बाध्य

window.NameSpace = (function($, ns){
    'strict'
    function private(){}
    var x;
    ns.SearchTerm = {};
    return ns;
}(window.jQuery, window.NameSpace || {}));

अधिक उदाहरण कोड के लिए मैं अपने गिटब खाते को इंगित करना चाहता हूं।

bundling

उत्पादन रिलीज़ के लिए async पर head में लोड किए गए लिपि से ऐप के लिए एक एकल बंडल और मिनिफाइड फ़ाइल प्राप्त करने का प्रयास करें। विकास और डीबग उद्देश्यों के लिए defer पर अलग और अनमिनाइटेड स्क्रिप्ट फ़ाइलें का उपयोग करें। यदि आप ऐसा करते हैं तो आपको संपूर्ण प्रोजेक्ट में वैश्विक निर्भरताओं के साथ इनलाइन स्क्रिप्ट से बचना चाहिए।

  • जेएस / बीबी / ** / *। जेएस का पथ (आमतौर पर अनुक्रमिक आदेश रखने के लिए अलग किया गया है)
  • जेएस / एप / एनएस.लोड.जेएस के लिए पथ
  • जेएस / एप / एनएसएफएन.जेएस के लिए पथ
  • जे एस / एप / ** / *। जेएस के लिए पथ (ऑटो अपडेट बंडल)

आउटपुट => ns.bundle.js => ns.bundle.min.js

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

एक और पोस्ट में इसके बारे में अधिक जानकारी

निष्कर्ष

सबसे पहले, क्या मैं सब कुछ गलत तरीके से कर रहा हूं?

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

दूसरा, क्या मेरा डिजाइन पैटर्न जावास्क्रिप्ट परीक्षण-फ्रेमवर्क के लिए उपयुक्त है?

  • केंडो के उदाहरणों के अलावा, आप परीक्षण उद्देश्यों के लिए एक परत जोड़ सकते हैं। याद रखें अगर jQuery आपकी निर्भरता इनलाइन है, तो आपको इसे लोड हो रहा है ब्लॉक को रेंडर करना होगा। अन्यथा => jQuery is undefined
  • यदि आप इनलाइन स्क्रिप्ट को नियंत्रित नहीं कर सकते हैं, तो बंडल से केंडो डिपॉजिन्सज़ को बहिष्कृत करें। एक </body> बंडल समाधान पर जाएं

तीसरा, जो कि जक्विरी प्लगइन्स के लिए आवश्यक हैं?

  • मॉड्यूलर दृष्टिकोण
  • कई उदाहरणों के लिए कॉन्फ़िगर योग्य दृष्टिकोण (टिप: आपके तर्क से सभी स्ट्रिंग्स को ले जाने के लिए, देखें कि कैसेडो ऑब्जेक्ट लिटरल्स का उपयोग करता है)
  • पैकेज प्रबंधक "सोने" से "कबाड़" को अलग करने के लिए
  • जेस्क से एससीएसएस और सीएसएस को अलग करने के लिए कंटेंट / गुलप / ... सेटअप
  • डेटा-विशेषता बाध्यकारी प्राप्त करने का प्रयास करें, इसलिए सभी लिखे जाने के बाद, आप HTML के माध्यम से नए उदाहरणों को कॉन्फ़िगर करते हैं

एक बार लिखें, आसानी से जहां आवश्यक हो और बहुत सारे कॉन्फ़िगर करें!


आप अपनी फ़ाइलों को अलग-अलग घटकों में अलग करने का प्रयास कर सकते हैं, क्योंकि प्रत्येक घटक के पास एक फ़ोल्डर है।

उदाहरण के लिए: पृष्ठ 1 आयत के बारे में है ताकि आप उस फ़ोल्डर के भीतर एक फ़ोल्डर कॉल आयत बनाते हैं जिसमें आप 3 फ़ाइलें rectangle.component.html, rectangle.component.css, rectangle.component.js (परीक्षण के लिए वैकल्पिक rectangle.spec.js) बनाते हैं।

app
└───rectangle
        rectangle.component.css
        rectangle.component.html
        rectangle.component.js

इसलिए यदि किसी आयत में कुछ ख़राब हो जाता है तो आपको पता है कि समस्या कहाँ है

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

आशा है कि यह आपको मदद करने में मदद करता है अगर आपको अधिक सहायता चाहिए







kendo-ui