4

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

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

失败的实验

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

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

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

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

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

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

4

1 回答 1

5

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

当然，其他解决方案也有它们的优势，但是对于你正在做的事情来说，good old 没有任何问题document.write()。

听起来您有许多脚本和样式表，并且可能从公共目录（或公共根目录）加载它们。为了减少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插入到文档中。所以不要指望能够做一个里面，然后里面有其他代码，这取决于你刚刚写的文件。所有这些文件（和）都在 之后加载，而不是与它交错。.jsdocument.write()framework.js framework.js.js.js.cssframework.js

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

于 2013-08-05T06:36:40.710 回答