Question

我正在为我公司的开发人员构建一个前端UI框架，用于构建内部Web应用程序。它由自定义的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()没有错。

听起来你有很多脚本和样式表，可能是从公共目录（或公共根目录）加载它们。为了减少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' );
})();

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

要记住的另一点是，document.write()文件中的所有.js调用都会在 .js文件之后插入到文档中写下他们。因此，不要期望能够在document.write()内framework.js内进行framework.js，然后在 .js内使用依赖于.js文件的其他代码你刚写的。所有这些.css个文件（和framework.js）都会在document.write()之后加载，而不会与之交错。

当然，还有一个考虑因素是加载时间。如果组合并缩小CSS和JS文件，您的页面加载速度会更快。但如果这些是内部网络应用程序，页面加载时间可能是您最不担心的：可靠性和可维护性可能更重要。在任何情况下，您始终可以使用{{1}}解决方案立即启动并运行，稍后只在您需要的情况下进行优化。

是否存在创建仅使用document.write（）捆绑js和css文件的js文件的危险？

1 个答案: