如何组织 JS 加载？答案

【问题标题】：How to organize JS loading?如何组织 JS 加载？
【发布时间】：2010-02-18 01:06:27
【问题描述】：

我有一个大型 JS 文件有很多功能的严肃项目，现在我有一些问题。

当然，我会将所有 js 文件放在一起并 gzip 压缩，但我有一个关于函数初始化的问题。现在我有很多很多简单的函数，没有任何类。我听说最好将我的代码分成许多类，我想这样做，并且在我的脚本中的页面生成步骤标记上，我在特定页面上需要哪些类。例如，我不需要在主页上使用 WYSIWYG 编辑器等等，所以我将使用我需要的 js 类数组创建特殊的 var。这是最佳做法吗？客户会获得性能和内存节省吗？
假设我有许多带有 onclick 操作的链接。更好的是：将它们保留为<a href="#" onclick="return smth();"> 或重写为<a href="javascript:void(0);"> 并在document.ready 部分创建jquery .bind？但是如果客户想在文档准备好之前点击一些东西怎么办？
点击某物后，我必须创建一个带有特定静态 html 的 div。将这些内容存储在哪里更好？在我班上的某个变量中？或者可能在某个模板中？

【问题讨论】：

【解决方案1】：

我通常使用命名空间来组织我的 JavaScript 以防止函数名称冲突，并进一步将每个对象添加到它自己的 .js 文件中以用于组织目的

    var MyObject = function() {
        return {
            method_1 : function() {
                // do stuff here
            },
            method_2 : function() {
                // do stuff here
            }
        };
    }();

    MyObject.method_1();
    MyObject.method_2();

然后我导入页面上需要的任何内容。在页面上使用一些额外的全局函数不会对性能产生显着影响。

有些人将 HTML 中的整个 onclick 变成了一场盛大的哲学辩论……对我来说，它很脏，但易于阅读且易于实施。绑定事件效果很好，可以将 JavaScript 与 HTML 完全分开，但如果许多开发人员维护的 HTML 变得非常草率，有时可能很难维护

在 JavaScript 中保留 HTML 位对我来说效果很好

【讨论】：

【解决方案2】：

您可能还对查看 Google Closure JavaScript 编译器感兴趣。

另外：如果您的 JS 大到足以影响性能，您实际上可能最终会从单独的文件中获得更好的性能，并根据您的页面最初需要的内容或按需加载（通过 jQuery getScript)。

您可能还想了解在 DOM 准备好之前您希望用户使用哪些类型的操作。

对于 JS 中的 HTML（反之亦然）。这取决于。您正在构建多少 HTML？我通常不会在 .html() 语句中放置超过一行的 HTML。如果它真的不止于此，我会考虑一个不同的解决方案（比如按需从另一个来源中提取它，或者将它放在某个位置，隐藏在页面中并将其拉过来）。

【讨论】：