javascript - 为 Javascript 模块启动代码

Question

我使用的大部分 javascript 都是 UI 代码 - 将附加功能附加到我页面的 HTML 框架并与各种 HTML 元素交互的代码。

总的来说，我赞成将 UI 代码分解成模块。

例如，如果我有将处理程序附加到实现轮播行为的后退/下一步按钮的代码，那么将该代码放在“轮播”模块中是有意义的。

问题是，我应该将在页面加载时运行的引导代码放在哪里，并实际决定将加载哪些模块以及加载哪些元素？

是否应该在JS文件中，一包含JS文件就执行？

还是应该放在 HTML 文件顶部(或底部)的脚本标记中？

或者应该没有特定的代码，但 JS 文件应该根据父元素的 ID/类来确定将处理程序等附加到哪些元素？

哪种方法最适合您？

Answer 1

我通常将每个模块分成不同的 .js文件。每个文件/模块都有自己的 $(document).ready() (jQuery 引导函数)正确加载。然后通过添加 <script> 来加载特定的文件/模块。适本地。

这类似于插件在流行的 JavaScript 库/框架中的工作方式，您需要做的就是包含它们并应用行为。

编辑

例如，Carousel (carousel.js) 模型看起来像这样:

(function(){

    function bindNext(){...}
    function bindPrev(){...}

    // jQuery bootstrap
    $(document).ready(function(){
        bindNext();
        bindPrev();
    });

})();

也许还有另一个模块(foo.js):

(function(){

    function foo(){...}
    function bar(){...}

    // jQuery bootstrap
    $(document).ready(function(){
        foo();
        bar();
    });

})();

这样，我所要做的就是添加这些文件，模块就会正常工作。不需要一个中心位置来破坏不同模块的所有行为，因为每个模块都定义了它的行为。