javascript - 使用组件化模块将 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. 避免更复杂的组件将多个事件绑定(bind)到同一元素的情况。例如:

$(".slideshow").init('<%= param %>')将绑定(bind)事件添加到 .slideshow元素，如果我调用 $(".slideshow").init('<%= param %>')多次，多个事件将绑定(bind)到该 DOM 元素。 (我认为绑定(bind)是这样工作的，如果不是实时或委托(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 和页面中上面的代码。其余的脚本在底部动态加载。