如何组织JS加载?

时间:2010-02-15 15:09:57

标签: javascript performance optimization

我有一个包含许多功能的大型JS文件的严肃项目,现在我对它有一些疑问。

  1. 当然,我会将所有js文件粘在一起并对其进行gzip,但我对函数初始化有疑问。现在我有许多很多简单的函数,没有任何类。我听说最好将我的代码分成很多类,我想这样做,并在我的脚本中的页面生成步骤标记,我需要在特定页面上的类。例如,我不需要在主页面上使用WYSIWYG编辑器,等等,所以我将使用我需要的js类数组创建特殊的var。这是最好的做法吗?客户会节省性能和内存吗?

  2. 假设我有许多与onclick操作的链接。更好的是:将它们保留为<a href="#" onclick="return smth();">或重写为<a href="javascript:void(0);">并在document.ready部分创建jquery .bind?但是,如果客户希望在文档准备好之前点击某些内容,该怎么办?

  3. 点击某些内容后,我必须使用特定的静态html创建一个div。存储此内容的位置更好?在我班上的一些var?或者也许在一些模板中?

2 个答案:

答案 0 :(得分:2)

我通常使用命名空间来组织我的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中的全部内容翻译成一场宏大的哲学辩论......对我来说,它很脏,但易于阅读和快速实施。绑定事件很有效,完全将JavaScript与HTML分开,但如果许多开发人员维护的HTML变得非常草率,有时很难维护

保持JavaScript中的HTML位对我来说很好用

答案 1 :(得分:0)

您可能也有兴趣查看Google Closure JavaScript编译器。

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

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

对于JS中的HTML(反之亦然)。这取决于。你建立了多少HTML?我通常不会在.html()语句中放置多行HTML。如果它真的不止于此,我会看一个不同的解决方案(比如将其从另一个源点播或者放在某处,隐藏在页面中并将其拉过来)。