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




jquery asp.net-mvc (2)

मैं वर्तमान में एक मध्यम / बड़े पैमाने पर डेटा-आधारित 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);
}

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

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

अद्यतन करें

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


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

उदाहरण के लिए: पृष्ठ 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

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

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

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


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

टिप 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);

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






kendo-ui