javascript - 创建一个仅使用 document.write() 捆绑 js 和 css 文件的 js 文件是否存在危险？

Question

我正在为我公司的开发人员构建一个前端 UI 框架，用于构建内部网络应用程序。它由定制的 Bootstrap、jQuery、其他开源库、内部模块和样式表组成。用户环境完全是IE9，我的服务器是.NET 3.5。我正在托管共享文件。公司的开发团队会将链接放在他们的项目页面中，并将框架应用于他们的页面。

我想为他们提供实现此功能的最简单方法，即粘贴一行代码，为他们构建库。在按下 Ctrl + V 的那一刻，剪切和粘贴 30 行代码已经过时了，它让我无法控制，而且很不优雅。

失败的实验

我尝试使用 Head.js和 LazyLoad两者都使用插入脚本的最佳实践。但是它们中的每一个都导致内容在样式化之前显示或在脚本加载之前调用方法的条件。我放弃了这种方法。它太不稳定了。

一个简单的 document.write() 解决方案

周末，我想:为什么我不做一个名为“framework,js”的js文件，用一堆document.write()行按顺序添加脚本和链接文件。告诉开发人员把它放在头上，仅此而已。见鬼，我可以为 IE9 和移动设备添加必要的元标记。它是如此令人讨厌和简单......但它可能会起作用!

用户群位于内部网络上且规模有限。带宽不是问题。在我选择这个之前我会测试性能。我可以指导开发团队放置链接的位置。

知道这一点并提供它确实有效，我还有什么理由不应该这样做吗？

我唯一要探索的其他选择是在服务器上捆绑。我希望不必求助于此，因为我自己不拥有服务器并且我不是 .NET 开发人员。

Answer 1

您提出的方法非常适合您的情况。与更复杂的解决方案相比，它有几个优势，包括完全简单、完全可预测的执行顺序，以及与可能不适合异步加载的脚本的完全兼容性。与许多其他开发人员一样，我已在生产应用程序中多次使用它。

当然，其他解决方案也有其优势，但对于您正在做的事情，旧的 document.write() 并没有错。 .

听起来您有许多脚本和样式表，并且可能从一个公共(public)目录(或一个公共(public)根目录)加载它们。减少 framework.js 中的重复文件，你可能想定义两个函数，一个写一个<link> CSS 标签和另一个写 <script> 的标签JavaScript 的标记。所以骨架framework.js文件可能看起来像这样:

(function() {
    var scriptBase = 'js/';
    var styleBase = 'css/';

    function writeStyle( name ) {
        document.write(
            '<link rel="stylesheet" href="', styleBase, name, '">',
            '</link>'
        );
    }

    function writeScript( name ) {
        document.write(
            '<script src="', scriptBase, name, '">',
            '</script>'
        );
    }

    writeStyle( 'one.css' );
    writeStyle( 'two.css' );

    writeScript( 'one.js' );
    writeScript( 'two.js' );
})();

请注意，您不必对 </script> 进行任何特殊转义您可能会在使用 document.write() 的代码中看到的文本.仅当您将此代码直接放入 <script> 时才需要这样做HTML 文件中的标记。转义的目的是防止封闭 <script>标签不会被 </script> 关闭document.write() 内的文字称呼。由于您的代码位于外部 .js文件这不是问题:</script> 的存在此文件中的文本不会终止 .js文件。

要记住的另一点是所有 document.write()您在 .js 中进行的调用文件被插入文档之后 .js写入它们的文件。所以不要指望能够做到 document.write()里面framework.js然后 里面有其他代码 framework.js这取决于 .js你刚刚写的文件。所有这些.js文件(和 .css )在 framework.js 之后加载, 不与之交错。

当然，还有一个考虑因素是加载时间。如果您合并并缩小 CSS 和 JS 文件，您的页面可以加载得更快。但如果这些是内部网络应用程序，页面加载时间可能是您最不担心的:可靠性和可维护性可能更重要。在任何情况下，您都可以随时使用 document.write()立即启动并运行的解决方案，稍后仅在您需要的不太可能发生的情况下对其进行优化。