فهم كيفية عمل نمط وحدة JS

Question

أحاول فهم أنماط وحدة JS المستخدمة مع jQuery. لقد قمت بتحرير هذا عدة مرات وستحاول أن ينتهي الأمر بممارسة جيدة لمستوى مهارتي (بضعة أشهر جديدة على jQuery).

لا يوجد سؤال مباشر في هذا المنشور. أهدف أكثر إلى التعليقات والمدخلات حول كيفية استخدام نمط الوحدة النمطية بشكل صحيح (مع jQuery) في موقع ويب واسع النطاق.

تحديث: لقد أضفت مجموعة من الأمثلة من أجل الحصول على نظرة عامة على جميع طرق كتابة الأشياء ، ومحاولة تغطية أي عيوب ..

/* 
Not all browsers works with console.log, so we want to make sure that
console.log is defined. This defines the consol.log and send the messages
into an alert.
*/
if(!window.console) console = {
  log: function(s) { 
    alert(s); // alert since we dont have the firebug console
  }
};

// Check if namespace is defined
if (typeof (CompanyName) === 'undefined') {
    CompanyName = {};
}

// Or if AppName under CompanyName...

if (typeof (CompanyName.AppName) === 'undefined') {
    CompanyName.AppName = {};
}

// Our namespace
CompanyName.AppName = (function ($) {

    // CHAINING
    var _first = function () {
        // Important to always start with "var"
    },

    _second = function () {
        // Chained (  ...},  ) so it doesnt need "var"
    },

    _third = "Just a var", // Variables just ends with ,

    _four = "Another var"; // Closing the chain with ;

    var _anotherFirst = function () {
        // Previous chain of var's was ended with ; so this var needed "var" in order to start.
    };

    g_globalVar = "I'm free!"; // When starting a var without "var", it becomes global.

    g_globalMethod = function () { 
        alert("I'm free too!"); // Global method.
    };

    g_chainedGlobalVarOne = "We are free!",
    g_chainedGlobalVarTwo = "We are free!";

    // Private Variables
    var _privateVar = "privateVar: accessed from within AppLaunch.Admin namespace";

    // Private Methods
    var _privateMethod = function () {
       log("privateMethod: accessed only from within AppLaunch.Admin");
    }; // Last variable in a chain must always end with ; before the return {}

    function log() {
        if (window.console && window.console.log)
            window.console.log('[AppName] ' + Array.prototype.join.call(arguments, ' '));
    };

    return {
        init: function () {

            // Calling private
            _privateMethod();

            // Calling Public
            this.myPublicMethod();

            // Also Calling Public
            CompanyName.AppName.myPublicMethod();

            // Calling Other namespace's Public Method (when exists)
            CompanyName.OtherNamespace.externalPublicMethod(); 
        },

        // Public
        myPublicMethod: function() {
            log("myPublicMethod");
        },
        // In a View (MVC), I could have a page called myPage where I want to init
        // some particular functions. myPage can be called just like init. 
        myPage: function() { 
            _second();
            _third();
        }

    }
})(jQuery); 

// Initialize
jQuery().ready(function() {
    CompanyName.AppName.init()
    CompanyName.AppName.myPublicMethod();
});  

محاولة فهم ما يحدث (لا تتردد في تقديم تصحيحات أو تفسيرات أفضل):

Company.AppName = (function ($) { ...

هنا يتم إنشاء Company.AppName. لقد قمت بتعيين ($) في الداخل حتى أتمكن من استخدام $ دون أن تتضارب مع أي مكتبات أخرى قد تستخدم $.

})(jQuery); 

على حد علمي ، يتم إرجاع الأساليب والمتغيرات إلى مساحة الاسم هنا ...}) () ؛ وإضافة jQuery Inside () سيخبرها أن $ تعني jQuery.

جار تهيئة

لست متأكدًا من أفضل الممارسات هنا ، لكنني سأضيف ما أعرفه حتى الآن.

التهيئة داخل ملف JS:

jQuery(function() { 
    AppLaunch.Admin.init();
});

التهيئة من ملف:

<script type="text/javascript">
// Shorthand for jQuery(document).ready(function() { ... }

jQuery(function($) { 
    AppLaunch.Admin.init($('#someSelector'));     
});
</script>

Answer 1

هناك العديد من الأماكن التي ستمنحك شرحًا عميقًا لنمط الوحدة النمطية ؛ استخدام jQuery من هذا المعيار.

هذا مجرد واحد من العديد تفسيرات نمط الوحدة النمطية هناك.