尝试将我所有的JS连接到一个文件，并需要一些JS框架/模式类型的建议 [英] Trying to concatenate all my JS into one file and needing some JS framework/pattern type advice

问题描述

为了防万一重要，我使用ASP.NET 3.5与VB.NET。我已经使用部分PostBack嵌套MasterPages和UpdatePanels。我的头部包括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 = {}; //全局命名空间
 
 SFAIC.common = {...}; // Shared properties 
 SFAIC.common.fn = {...}; //共享函数
 SFAIC.plugin = {
 
 qtip：$ .fn.qtip，
 validate：$ .fn.validate，
验证器：$ .fn .validator 
 
}; 
 SFAIC.init = function（）{...}; //全局初始化器
 
 $（document）.ready（function（）{SFAIC.init（）;}）; 
  

然后每个页面都有自己的对象字面意思，如：

  SFAIC.Main = {}; // Main.aspx 
 
 SFAIC.Main.someSection = {...}; // Some Section的属性
 SFAIC.Main.someSection.fn = {...}; // Some Section的函数
 SFAIC.Main.anotherSection = {...}; //另一个部分的属性
 SFAIC.Main.anotherSection.fn = {...}; //另一个部分的函数
 SFAIC.Main.init = function（）{...}; // Main.aspx的初始化
 
 $（document）.ready（function（）{SFAIC.Main.init（）;}）; 
  

解决方案

我建议您制作一个新对象对于每个页面/项目的部分和新功能。
但是，以这种方式添加的脚本越多，编辑器越难以管理整个。 Netbeans有一个功能，可以让您跳转到对象的部分，并帮助您管理。

示例：

  var lib = {}; //你的库
 
 //也许你更喜欢复数名称插件。没关系。 
 lib.plugin = {
 //在这里定义插件
}; 
 
 //也许你更喜欢复数名字助手。这也不错
 lib.helper = {
 //在这里定义你的助手
循环：function（）{
 //循环插件的代码
} 
}; 
 
 lib.account = {
 //你可以把一般的代码粘贴到所有的帐户页面
}; 
 
 lib.account.overview = function（）{
 //你可以粘贴特定于帐户概述页面的代码
 //也许你会使用循环插件来显示他们最新的帖子。 
 lib.plugin.cycle（）; 
 
}; 
 
 lib.account = {
 //你可以把一般的代码粘贴到所有的帐户页面
}; 
 
 lib.account.overview = function（）{
 //你可以粘贴特定于帐户概述页面的代码
 //也许你会使用循环插件来显示他们最新的帖子。 
 
 lib.plugin.cycle（）; 
 
}; 
  

然后在帐户概述页面上，您可以调用 lib.account.overview （）。

Just in case it matters, I use ASP.NET 3.5 with VB.NET. I have nested MasterPages and UpdatePanels with Partial PostBacks. I include Modernizr 1.7 with YepNopeJs/IE Shim in my head section. Right before the closing body tag, I include my jQuery 1.6, jQuery UI 1.8.12, and this script.js I'm trying to build.

I'm thinking of using something like:

SITE = {

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

    init      : function() { ... }

};

SITE.init();

UPDATE

Ok with Levi's advice, I came up with this solution:

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

Then each page would have its own object literal like:

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

解决方案

I recommend that you make a new object for section and a new function for each page/item. However, the more scripts you add in this way, the harder it gets to manage the whole in an editor. Netbeans has a feature that lets you jump to parts of the object and helps manage this.

Example:

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

};

Then on the Account Overview page you'd call lib.account.overview().

这篇关于尝试将我所有的JS连接到一个文件，并需要一些JS框架/模式类型的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！