"捆绑;仅适用于HTML/JS的解决方案

"Bundling" solution for HTML/JS only?

本文关键字：JS HTML 解决方案 适用于 quot 捆绑      更新时间：2024-06-02

我相信有人会告诉我为什么这是一个糟糕的想法，但它可能比我们已经做的要好。因此，我们所有的插件都被复制/粘贴到了Master.js脚本中，这对于更新或排序来说是一场噩梦。大多数插件都被缩小了（这很好），但我真的很想从.net/c#.aspx中获得捆绑的想法，并实现一些类似的东西来消除这个Master.js文件。复制/粘贴新脚本通常会冻结项目，其中几乎所有内容都已过时——所以这是我的疯狂科学：

在Master.js中，创建一个包含所有使用的脚本的数组：

var scripts = [
    'jquery-1.10.2.min.js', // jQuery v1.10.2 | 2005 (https://code.jquery.com/)
    'jquery-migrate-1.2.1.min.js', // jQuery Migrate v1.2.1 | 2005 (https://code.jquery.com/)
    'jquery-ui.min.js', // jQuery UI v1.10.3 | 2014-09-14 (https://code.jquery.com/)
    'bootstrap.min.js', // Bootstrap v3.1.0 | 2014 (http://getbootstrap.com)
];

并创建一个循环将脚本添加到页面：

for (var i = 0; i < scripts.length; i++) {
    var link = 'MainJS/' + scripts[i];
    LoadJsCssFilePortal(link, 'js');
};
function LoadJsCssFilePortal(filename, filetype, callback) {
    // if filename is a external JavaScript file
    if (filetype == "js") {
        var fileref = document.createElement('script');
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", filename);
    };
    if (typeof fileref != "undefined") {
        // add this script to the document
        document.getElementsByTagName("head")[0].appendChild(fileref);
    };

};

我还有功能

function LoadAndRunPortalJS(url, callback) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState) {  //IE
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  //Others
            script.onload = function () {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);

};

它有一个内置回调，被称为这样的

LoadAndRunPortalJS(link, function () {
    // when done load next
});

问题是脚本在之前没有完成加载

  1. 循环中的下一个增量
  2. 页面上依赖Master.js的其他脚本

通常，可以使用jquery延迟对象来强制执行脚本的顺序/完成，因此这可能在加载第一个脚本（jquery）i>0之后使用，但这并不能解决脚本在master之外运行的问题。

这是脚本加载程序/打包程序的领域。您可能会考虑使用RequireJS，即开箱即用解决方案的Webpack。如果你仍然想自己滚动，请继续阅读。

我会用这种更有弹性的结构来替换你的文件名数组

var manifest = [
    {key: 'jquery', file: 'jquery-1.10.2.min.js'}
    ...
}

这应该可以处理任何未来可能弹出的版本控制问题。数组结构还保留了您的加载顺序（不建议使用这样的方法）。

在页面加载时，只会加载上面描述的清单。您想要调用的任何on load函数都必须延迟，直到加载脚本为止。我建议使用类似于广告经理（例如，谷歌广告）处理它的方法

var onBootloaderInit = [/* array of functions */];
....
onBootloaderInit.push(
    function() {
        /* Code inside can now use jQuery or the likes */
    }
);

加载完成后，您现在只需遍历onBootloaderInit数组，并执行每个函数。

要确保脚本按照您需要的顺序加载，并等待已排队的脚本，请使用脚本加载程序（例如LABjs）。

$LAB.script('<path to jQuery>').wait(function() {
    /* Code that depends on jQuery */
});
相关文章：