javascript - 如何避免在站点范围的 javascript 文件顶部有大量条件实例化？

Question

我有一个在整个应用程序中使用的 JS 文件。它的顶部看起来像这样：

$(document).ready( function() {
    if( $('#element-a').length ) {
        var featureA = new ElementAFeature( $('#element-a') );
    }

    if( $('#element-b').length ) {
        var featureB = new ElementBFeature( $('#element-b') );
    }

    // repeat ad nauseam for elements C thru Z etc etc
});

// actual objects and logic go here

它有效，但它有点丑陋。没有在不同页面上运行不同的脚本，有没有办法整理这个？

Answer 1

在每个页面做这样的事情

window.MYAPP = window.MYAPP || {};
window.MYAPP.element = $("page-element");
window.MYAPP.feature = new ElementXFeature(window.MYAPP.element);

然后修改你的初始化脚本

$(document).ready( function() {
   var feature = window.MYAPP.feature;
   //Use feature here.
});

如果您正在为每个页面编写大量特定的初始化代码，您可能需要考虑同时拥有一个全局 init 方法并为每个页面定义一个本地方法，并从全局 init 传递所需的任何上下文。

window.MYAPP.initMethod = function(context) {}

//in global init
if (typeof window.MYAPP.initMethod === "function") {
    window.MYAPP.initMethod({ pageSpecificSetting : 0});
}