Попытка объединить все мои JS в один файл и нуждается в некотором совете по JS framework / pattern

Question

На всякий случай, я использую ASP.NET 3.5 с VB.NET. Я вложил MasterPages и UpdatePanels с частичным PostBacks. Я включаю Modernizr 1.7 с YepNopeJs / IE Shim в мой головной раздел. Прямо перед закрывающим тегом body я включаю свой jQuery 1.6, jQuery UI 1.8.12 и этот script.js, который я пытаюсь собрать.

Я подумываю использовать что-то вроде:

SITE = {

    PAGES     : { ... },
    VARS      : { ... },
    HELPERS   : { ... },
    PLUGINS   : { ... },

    init      : function() { ... }

};

SITE.init();

UPDATE

Хорошо, с советом Леви, я придумал это решение:

var SFAIC = {};                                   // Global namespace

SFAIC.common = { ... };                           // Shared properties
SFAIC.common.fn = { ... };                        // Shared functions
SFAIC.plugin = {

    qtip: $.fn.qtip,
    validate: $.fn.validate,
    validator: $.fn.validator

};
SFAIC.init = function() { ... };                  // Global initializer

$(document).ready(function() { SFAIC.init(); });

Тогда каждая страница будет иметь свой собственный литерал объекта, такой как:

SFAIC.Main = {};                                  // Main.aspx 

SFAIC.Main.someSection = { ... };                 // Some Section's properties
SFAIC.Main.someSection.fn = { ... };              // Some Section's functions
SFAIC.Main.anotherSection = { ... };              // Another Section's properties
SFAIC.Main.anotherSection.fn = { ... };           // Another Section's functions
SFAIC.Main.init = function() { ... };             // Main.aspx's intializer

$(document).ready(function() { SFAIC.Main.init(); });

Answer 1

Я рекомендую вам создать новый объект для раздела и новую функцию для каждой страницы / элемента. Однако, чем больше сценариев вы добавите таким образом, тем сложнее будет управлять целым вредактор.В Netbeans есть функция, позволяющая переходить к частям объекта и помогающая управлять этим.

Пример:

var lib = {}; // your library

//maybe you like the plural name plugins better. That's fine.
lib.plugin = {
    //define plugins here
};

//maybe you like the plural name helpers better. That's fine too.
lib.helper = {
    //define your helpers here
    cycle: function() {
        //code for the cycle plug-in
    }
};

lib.account = {
    //you could stick code that is general to all account pages here
};

lib.account.overview = function() {
    //you could stick code that is specific to the account overview page here
    //maybe you'd use the cycle plug-in to show their latest posts.
    lib.plugin.cycle();

};

lib.account = {
    //you could stick code that is general to all account pages here
};

lib.account.overview = function() {
    //you could stick code that is specific to the account overview page here
    //maybe you'd use the cycle plug-in to show their latest posts.

    lib.plugin.cycle();

};

Затем на странице обзора учетной записи вы вызываете lib.account.overview().

Answer 2

Для производства:

Используйте пакет, такой как closure, uglify или тот, который я упоминал в конце, чтобы упаковать весь ваш код в один файл и отправить его.

Для разработки:

Я бы рекомендовал для структуры использовать асинхронный загрузчик javascript, такой как

require.js.

Это означает, что у вас есть много модулей, и вы конкретно указываете зависимости.

Например, у вас есть один main.js

// main.js

require([
    "jquery.js",
    "jquery.ui.js", 
    ...
], function() {
    // if the correct location is "mysite.com/foo/" then url will be "foo"
    var url = window.location.pathname.match(/\/(\w+)\//)[1] || "mainpage";
    require(url + ".js", function(pageObj) {
        // ...
    });
});

// foo.js

define({
    pageStuff: ...
});

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

Когда дело доходит до оптимизации всего JavaScript в одном файле, вы просто используете их builder . Это должно быть частью вашей системы развертывания проекта.