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

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

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

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