Понимание того, как работает шаблон модуля JS - PullRequest
Новая
       38

Понимание того, как работает шаблон модуля JS

24 голосов
/ 30 ноября 2010

Я пытаюсь понять шаблоны модулей 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 внутри (), он скажет, что $ означает jQuery.

Инициализация

Я не уверен, что лучше здесь практиковаться, но я добавлю то, что знаю до сих пор.

Инициализация в файле js: 

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

Инициализация из файла: 

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

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

1 Ответ

12 голосов
/ 02 декабря 2010

Есть много мест, которые дадут вам подробное объяснение шаблона модуля;jQuery использует его довольно стандартно.

Это только одно из многих объяснений шаблонов модулей .

...