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

为了以防万一，我使用ASP.NET3.5和VB.NET。我有嵌套的母版页和带有部分回发的UpdatePanel。我的头部部分包括了带有YepNopeJs/IE垫片的Modernizer 1.7。在结束body标记之前，我包含了我的jQuery 1.6、jQuery UI 1.8.12和我试图构建的script.js

我正在考虑使用类似于：

SITE = {

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

    init      : function() { ... }

};

SITE.init();

更新

根据李维的建议，我提出了以下解决方案：

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(); });

---

用于生产：

使用closure、uglify或我在最后提到的包将所有代码打包成一个文件并发送

用于发展：

我建议您使用异步javascript加载程序，如

这意味着你有很多的模块，你特别声明了依赖性

例如，您将有一个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优化为一个文件时，您只需使用它们的脚本即可。这应该是您的project deploy系统的一部分。

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

};

---

然后在Account Overview页面上调用

lib.Account.Overview（）

有问题的网站有多大？这可能与答案有关。这是一个有点诡计的问题。这个网站的页面很小。就代码隐藏而言，它是巨大的。就客户端而言，每页的代码行数从几百行到上千行不等。我认为，对象文字是我想要的方式，可能是最实用的方式。我只是不知道将所有代码放入对象文本并基于页面执行的最佳方式。请注意，在jQuery中，

.fn

实际上意味着

。prototype

是一种在jQuery对象上定义方法的方式，而不是一个存储函数的框。如果您将它与

jQuery.fn

进行比较，可能会产生误导。是的，我对此感到困惑。我想要一个盒子来储存我的功能。是否有更好的方法或方法将原型与对象文字混合在一起？但这并不是我想要的。我已经为每个页面创建了一个js文件，我可以通过ContentPlaceholder包含该页面js文件，而无需加载程序。如果出于任何原因我想走装载机路线，我会使用Modernizer，它利用YepNopJs，所以如果我想的话，我可以使用它。但是，由于我不想再维护所有不同的js文件，我希望它们都在一个js文件中，这样我就可以在Visual Studio中使用intellisense，这就是为什么我要问我要问的东西。@Scott一个包含所有数据的巨大文件对我来说将是一场噩梦。在一个大的全局对象中设置我的所有方法/函数会鼓励太多的硬耦合。@Raynos-我只是按照Paul Irish等人的建议，为了跨浏览器优化，我们需要将js连接到一个plugins.js文件和一个script.js文件中。@Scott我同意这一点。你只需要使用一个自动构建工具，就像我链接的那样。你不能把所有内容都写在一个文件中。@Raynos：我在几点上不同意这种方法，但我确实要求给网站一个比例，好像它真的很大，然后我发布的方法有点毛茸茸的。每个人都有自己的长处和优点。假设我使用了验证jQuery插件和qtip2jQuery插件。两者都用

$.extend

连接到

$.fn

。因此，我可以访问它们

$.fn.validate

，

$.fn.validator

，或

$.fn.qtip

。创建

lib.plugin={qtip:$.fn.qtip，validate:$.fn.validate，validator:$.fn.validator}是否是最佳实践

我可以在哪里使用

lib.plugin.validator

，

lib.plugin.qtip

，或者我甚至不应该担心lib.plugin对象并使用

$.fn

路由？

lib.

条目所做的就是将它们包含在该页面中。你会继续像平常一样使用它们。此外，您可能希望在插件中使用未统一版本的脚本，因为它们可能会通过包含在巨人脚本中而进一步减少。我强烈建议您在使用此方法时使用一个好的编辑器。因为它可能会很长。我使用VS2008，很快我们就要迁移到VS2010了。我认为这是市场上最好的编辑。至于我的plugins.jsfordev，我使用所有插件的未统一版本。我有一个plugins.min.js，它有我在rc和生产模式中使用的打包或缩小版本。我想我的问题更多的是一种偏好，但我很好奇人们是否为了可读性而将$.fn.xxx包装到lib.plugin.xxx中，或者他们是否更喜欢只使用$.fn.xxx。当涉及到我的代码时，我是一个组织整洁的怪胎。我经常过度分析我认为的这些东西。任何生活在

$.fn.method

上的东西。。。不应直接调用etc。您应该调用

$（选择器）.method

。您应该避免直接访问或扩展它们。它的默认值位于

$.fn.qtip.defaults

，因此要修改它们，Craig建议

$.fn.qtip.defaults=$.extend（true，{}，$.fn.qtip.defaults，{…}）。或者，如果需要修改未在默认值中公开的属性，如zindex，则必须执行
$.fn.qtip.zindex=getMaxZInde