Javascript 每个脚本块调用初始化函数

我制作了一个小脚本，使我在部分页面中的JS初始化更加容易。 它只需搜索所有的

数据onload

属性，并在加载时执行其中定义的函数。 还有一些其他功能。当通过AJAX调用加载特定的局部视图时，

数据onload

也会自动调用

无论如何，语法如下所示：

<div class="some-partial-html-stuff">
    <button>[...]</button>
</div>

<script data-onload="partialInit">

    function partialInit()
    {
       // executes onload and on-ajax-load stuff for this Partial Page
        $('.some-partial-html-stuff button').doSomething();
     }

    function otherFunctions()
    {
        // [...]
    }

</script>

<div data-feature="featureName"></div>

---

当我做这样的事情时，我称之为特性。标签如下所示：

<div class="some-partial-html-stuff">
    <button>[...]</button>
</div>

<script data-onload="partialInit">

    function partialInit()
    {
       // executes onload and on-ajax-load stuff for this Partial Page
        $('.some-partial-html-stuff button').doSomething();
     }

    function otherFunctions()
    {
        // [...]
    }

</script>

<div data-feature="featureName"></div>

现在，您需要异步加载JS文件，并在加载后调用其init函数：

for (var i=0, j=features.length; i<j; i++){
    var feature = features[i];
    $.ajax({
        url: "path/to/js/" + feature + ".js",
        dataType: "script",
        async: false,
        success: function () {
            App.features[feature].init();
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

在执行所有这些操作之前，请记住确保App.features是一个数组，希望位于main.js文件的顶部。我在应用程序中保留了其他功能，如帮助程序和实用程序，因此我通常会使用以下内容启动：

var App = {
    utilities: {},
    features: {},
    helpers: {},
    constants: {}
};

---

现在，您可以只使用数据特性标记来标记DOM对象，功能将根据需要自动添加，从而在特定JavaScript和特定DOM之间保持良好的联系，但无需将JS内联到实际DOM旁边。它还可以使这些“简介”在需要在其他地方使用时可重复使用，从而降低应用程序的维护开销。

Err。。。为什么要这样动态加载JavaScript？JS中的构建块是函数，如果您想以更大的规模组织事情，请查看模块模式——或者在您的案例中更简单——模块加载程序。我使用的是Knockout.JS，这些是属于同一部分页面中html的相对较小的脚本。由于维护的原因，我喜欢将脚本和相应的html尽可能地放在一起。我必须承认，我对模块加载器并不十分熟悉。但我的理解是，它们更多的是用于导入.js文件，而不是在加载dom时执行初始化操作？这并不完全是我想要的答案，但仍然非常有趣！问题是，目前我确实希望JavaScript与html保持一致。这些片段是非常紧密耦合的一次性片段，因为它们通常是Knockout.js的特定ViewModels。所以我现在不想太频繁地蹦蹦跳跳：）因为这些都是非常具体的一次性的，我不想考虑这个东西的命名。所以我想知道是否有一种方法可以说，总是在当前脚本块中执行

init（）。因此，我不必将其命名为
page1Init
，
controlXInit
，等等。您将遇到的问题是范围界定。由于所有的init函数都在同一个作用域中，因此对init的每个赋值都会清除以前的赋值。如果可能的话，最好将每个init设置为一个自调用函数，即
init=function（）{//do stuff}（）
，这样每个init函数都会调用自己，然后在运行后立即从作用域中清除自己。尽管这可能不可能，这取决于何时需要init运行。true:）需要在dom加载和某些全局init之后调用，因此在这种情况下不起作用。我希望他们会是一些奇怪的javascript忍者把戏，我可以用它。在你的全局初始化中，你可以做
window.inits=[]
，然后代替声明
var init=function（）{//dostuff}
declare
window.inits[window.inits.length]=function（）{//dostuff}
然后在加载页面时，在
窗口上循环。inits
数组并调用每个数组。
var App = {
    utilities: {},
    features: {},
    helpers: {},
    constants: {}
};