Question

万一重要，我使用ASP.NET 3.5和VB.NET。我已将MasterPages和UpdatePanels与Partial 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();

更新

根据Levi的建议，我提出了这个解决方案：

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

适用于制作：

使用像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即可。这应该是项目部署系统的一部分。

Answer 2

我建议您为每个页面/项目创建一个新对象以及一个新功能。 但是，以这种方式添加的脚本越多，在编辑器中管理整个脚本就越困难。 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()。

试图将我的所有JS连接到一个文件中，并需要一些JS框架/模式类型的建议

2 个答案: