使用组件化模块将 JS 保持在页面底部的最佳实践

Question

我正在寻找将 JavaScript 保存在外部 JS 文件/页面底部的最佳实践/设计模式。我遇到了一个问题，我的页面是由多个组件构建的，每个组件都依赖一个 jquery 组件，该组件需要传递给它的多个参数。

例如在 JSP 中

<div class="component-a">
   <div id="js-slideshow-<%= slide-id %>" class="js-slideshow"></div>
</div>
<script>$('#js-slideshow-<%= slide-id %>').initslideshow({'path':<%= path %>});</script>

问题是我的标记现在有标签，并且有很多重复代码。理想情况下，我会将所有这些 JS 调用分解为一个包含在页面底部的 JS 文件。

我最初的想法是加载 jquery 插件所需的任何参数作为 data-* 属性。

类似

JSP

<div class="component-a">
   <div data-path="<%= path %>" class="js-slideshow"></div>
</div>

JS 文件

<script>
$(".js-slideshow").each(function() { 
   $(this).initslideshow('path': $(this).attr('data-path'));
});
</script>

即使调用需要服务器需要提供的数据/上下文并且可能只能从组件的上下文中获得，是否还有其他好的模式可以将 JavaScript 分离到 JS 文件中？

---

说明：

这只是将常见的表示元素分解为单独的文件的做法。 Ruby on Rails 部分就是一个例子。 一个组件可能是“幻灯片”，但根据它所在的页面，我可能希望使用不同的值来调整其行为，例如要显示的不同图像集、不同大小的图像或不同的标题等。这种“多样性”在服务器“已知”的参数中，由服务器了解上下文以从服务器端数据存储中提取参数值并将它们写入 JS 调用。

理想情况下，我想尽量减少写出相同“基础”JS 的次数并在底部执行一次，原因如下： 1.减少页面重量 2. 增加生成的 HTML 的可读性 3. 将 javascript 代码（即使它们只是调用）从 HTML 文件移动到 JS 文件 - 这是代码和数据的干净分离 4.允许缓存更多数据（可以缓存JS文件，其他页面请求不需要下载额外的页面权重） 5. 避免更复杂的组件有多个事件绑定到同一个元素的场景。例如：

$(".slideshow").init('<%= param %>') 向.slideshow 元素添加绑定事件，如果我多次调用$(".slideshow").init('<%= param %>')，多个事件将绑定到该DOM 元素。 （我认为 bind 就是这样工作的，如果不是 live 或 delegate 的话）。 我可以通过在唯一命名的元素上调用 init 来解决它，但这需要为每个幻灯片 DOM 元素添加唯一的 id，这似乎没有必要。

在开发方面，我很可能会为每个组件创建一个单独的 JS 文件，但会在构建过程中将它们打包到一个文件中。

Answer 1

所以您的意思是您网站的各个部分都包含在具有自己的 HTML 和 JS 的“模块”中，当您总结所有内容时，它们只是处于中间状态？

我建议您将脚本路径作为变量或data-* 并在底部有一个加载器稍后进行延迟加载。

喜欢说：

<div class="component" data-source="path_to_script">
    your module HTML

然后在你的页面底部，在你的`之前，你有一些脚本：

<script>
    $(function(){

        //loader script
        (function loader(){

            //loop through all components
            $('.component').each(function(){

                //get the path and load script
                var scriptUrl = $(this).data('source');
                $.getScript(scriptUrl);

                //or if params
                var params = $(this).data('params'); //may be in JSON string perhaps?
                //parse JSON here
                $(this).initSlideshow(params);                    

            });
        }());
    });
</script>

最后，你有一个干净的页面。至少，您需要 jQuery 和页面中的上述代码。其余脚本在底部动态加载。