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插件所需的任何params作为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 partials就是其中的一个例子。一个组件可能是“幻灯片放映”，但取决于其位于i上的页面可能需要使用不同的值来调整其行为，例如要显示的不同图像集，不同大小的图像或不同的标题等。这种“多样性”在服务器“已知”的参数中，由服务器来理解上下文以从服务器端数据存储中提取参数值并将它们写入JS调用。

理想情况下，我希望尽量减少写出相同“基本”JS的次数，并在底部执行一次，原因如下： 1.减少页面重量 2.提高生成的HTML的可读性 3.将HTML文件中的javascript代码（即使它们只是调用）移动到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和页面上面的代码。其余的脚本在底部动态加载。

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

1 个答案: