创建一个只使用document.write(）捆绑js和css文件的js文件有危险吗

Is there a danger to creating a js file that simply uses document.write() to bundle js and css files?

本文关键字：js 文件 css 捆绑 有危险 document 一个 创建 write      更新时间：2023-09-26

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

我想为他们提供实现这一点的最简单方法，即粘贴一行代码，为他们构建库。剪切和粘贴30行代码在按下Ctrl+V的那一刻就过时了，这让我无法控制，简直不优雅。

失败的实验

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

一个简单的document.write（）解决方案

周末，我想：为什么我不制作一个名为"framework，js"的js文件，用一堆document.write（）行按顺序添加脚本和链接文件呢。告诉开发者把它放在头上，就这样。见鬼，我可以为IE9和移动设备添加必要的metatags。它是如此的肮脏和简单。。。但它可能会起作用！

用户群位于内部网络上，规模有限。带宽不是问题。在选择此选项之前，我将测试性能。我可以指导开发团队在哪里放置链接。

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

我唯一要探索的其他选择是在服务器上捆绑。我希望不用这样做，因为我自己没有服务器，也不是.NET开发人员。

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

当然，其他解决方案也有其优点，但就您所做的而言，好的旧document.write()没有错。

听起来您有很多脚本和样式表，并且可能是从公共目录（或公共根目录）加载它们。为了减少framework.js文件中的重复，您可能需要定义两个函数，一个为CSS编写<link>标记，另一个为JavaScript编写<script>标记。因此，一个骨架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' );
})();

请注意，您不必像在使用document.write()的代码中看到的那样对</script>文本进行任何特殊的转义。只有当您将此代码直接放入HTML文件中的<script>标记中时，这才是必要的。该转义的目的是防止document.write()调用内的</script>文本关闭封闭的<script>标记。由于您的代码在外部.js文件中，所以这不是问题：该文件中存在</script>文本不会终止.js文件。

需要记住的另一点是，在.js文件中进行的所有document.write()调用都会在写入它们的.js文件之后插入到文档中。因此，不要期望能够在framework.js中执行document.write()，然后在framework.js中执行其他代码，这取决于您刚刚编写的.js文件。所有这些.js文件（和.css）都是在framework.js之后加载的，而不是与之交织

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

相关文章：