问题背景

　　前端采用的 iframe + html 做后台管理系统。现在js、jquery插件非常多，每次页面都是引用就类似这样:

    <script src="../Scripts/jquery-1.7.1.js"></script>

    <script src="../Scripts/uploadify/jquery.uploadify.js"></script>

    <script src="../Scripts/uploadify/swfobject.js"></script>

    <link href="../Scripts/uploadify/uploadify.css" rel="stylesheet" />

　　有时候需要更新其中一个组件，为了避免客户端浏览器手动刷新，一般的做法是增加版本号，比如 xxx.js?v=1111。

或者说，需要删掉某个组件，引用某个组件。

在这2种情况下，都需要针对每个页面，增加 script 引用。每次新建一个html，就要把之前的页面的 script 引用都复制过来，有木有？

解决办法

　　现在有Require.js , sea.js ,labjs 等等各种高大上的框架。

　　以上框架中，楼主仅试过用lab.js解决这种问题，它可以很好的控制脚本的异步加载，以及脚本的依赖，然后可以在脚本加载完毕后，做初始化的操作。当时仅仅是做了一个Demo，一直过了很长时间，也没有使用，原因无它，如果希望能控制脚本的动态加载时，又希望像以前一样直接在页面上引用script，换句话来说，楼主要的不是重写脚本引用方式，而是在原有基础上稍作改善。

关键方法很简单，使用了 document.writeIn('...') 来加载。这种加载方式，是同步加载，就是它了。

　　具体思路则是，定义一个数组存放脚本以及css路径，建议使用绝对路径，这样不会因为页面所在的位置而导致脚本加载不上。

然后做了一点点小改进，同步加载js，异步加载css。同时支持设置版本号，这样可以轻松控制客户端的自动更新。大致实现代码如下：

　　在实际应用过程中，这个js脚本，是会经常发生变更，所以必须再通过 document.writeIn 加载这个脚本。首先可以以如下形式写在页面中

<script>

document.writeIn('...');

</script>

　　这样略微不方便啦。于是楼主又写了一个脚本，仅仅只有如上一行代码，就是用来控制加载前面定义通用的脚本组件。这个只有一行代码的脚本，是万年不变的，所有页面直接引用即可，由它来控制后面的脚本变化。

测试

　　上面说，脚本加载的形式是同步的，为了证明这一点，楼主不得不写一点简单的例子。看看下面的html代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    <input type="text" id="uid" value="111" />

</body>

</html>

<script src="Scripts/com/boot.js"></script>

<script>

    alert($("#uid").val());

</script>

　　而boot.js就是引导脚本，就是之前提到的一行代码：

/*引导加载所有的js文件*/document.writeln("<script src='/Scripts/com/bootallscript.js?v=" + Math.random() + "'><\/script>");

　　bootallscript.js就是最核心的了，复杂加载所有的js和css。

(function () {

    var base = '/Scripts/';

    var loader = {

        base: '/Scripts/',

        ver: 1,

        content: [ //定义需要加载的脚本

              'jquery-1.7.1.min.js'

        ],

        loadcss: function (cssUrl) {

            var link = document.createElement("link");

            link.rel = "stylesheet";

            link.type = "text/css";

            link.href = cssUrl;

            document.getElementsByTagName("head")[0].appendChild(link);

        },

        run: function () {

            for (var i in loader.content) {

                var c = loader.content[i];

                if (c.length <= 2) continue;

                var p = loader.base + c + "?v=" + loader.ver;;

                var type = c.substr(c.length - 2, c.length);

                if (type === 'js') { //同步加载js文件

                    document.writeln("<script src='" + p + "' ><\/script>");

                } else { //异步加载css文件

                    loader.loadcss(p);

                }

            }

        }

    };

    //加载js脚本

    loader.run();

})();

　　运行后会发现，页面在加载完成后，使用jQuery获取到了控件的值。这种方式和原来的直接脚本引用，差别不大吧。

　　说到这里，我们新建页面后，只需要引用 boot.js就能加载上所有的组件，而页面逻辑相关的js，也可以直接引用在boot.js下方，没有改变原来的脚本引用习惯，又能极大的节省了代码，完善对脚本的控制，这就是楼主想要的效果了。　　

　　写在最后，当然mvc对类似的问题有了解决方案，这里不探讨，因为讨论的是 前端 iframe+html 无 C# 。

　　示例下载

也说JS脚本加载控制的更多相关文章

  1. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  2. JS脚本加载与执行对性能的影响

    高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...

  3. 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  4. requere.js优化js脚本加载方案，使用篇。

    require.config({ paths: { "jquery": "jquery-3.2.1", 'index':"index" }} ...

  5. js文件加载太慢，JavaScript文件加载加速

    原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...

  6. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

  7. js动态加载脚本

    最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...

  8. JS 动态加载脚本的4种方法

    有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4 ...

  9. JS 动态加载脚本 执行回调

    JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...

随机推荐

  1. 「日常训练」「小专题·图论」 Frogger （1-1）

    题意 分析 变形的dijkstra. 分析题意之后补充. 代码 // Origin: // Theme: Graph Theory (Basic) // Date: 080518 // Author: ...

  2. Web负载均衡技术

    Web负载均衡(Load Balancing),简单地说就是给我们的服务器集群分配“工作任务”,而采用恰当的分配方式,对于保护处于后端的Web服务器来说,非常重要. 负载均衡的策略有很多,我们从简单的 ...

  3. font and face, 浅探Emacs字体选择机制及部分记录

    缘起 最近因为仰慕org-mode,从vim迁移到了Emacs.偶然发现org-mode中调出的calendar第一行居然没有对齐,排查一下发现是字体的问题.刚好也想改改Emacs的字体,于是我就开始 ...

  4. kaldi基于GMM的单音素模型 训练部分

    目录 1. gmm-init-mono 模型初始化 2. compile-train-graghs 训练图初始化 3. align-equal-compiled 特征文件均匀分割 4. gmm-acc ...

  5. Drools 7.4.1.Final参考手册（十四）集成Spring

    集成Spring Drools 6.0重要变更 Drools Spring集成经历了与Drools 6.0的变化完全一致的改造. 以下是一些主要的变化: T*推荐的Drools Spring的前缀已经 ...

  6. Linux yum安装MySQL5.7，及远程连接mysql(亲测有效！)

    一.安装配置MySQL的yum源 # 安装MySQL的yum源,下面是RHEL6系列的下载地址 rpm -Uvh http://dev.mysql.com/get/mysql-community-re ...

  7. Spring 学习笔记（八）—— 注解使用整合

    @Autowired  —— 自动装配 需先在配置文件中,配置一个org.springframework.beans.factory.annotation. AutowiredAnnotationBe ...

  8. 有关于PHP的基础知识

    (1) l  长字符串表示,必须放在“<<<heredoc”和 “heredoc;”之间.主要是<<<,其次是也可以不使用heredoc. l  “<< ...

  9. HDU 2131 Probability

    http://acm.hdu.edu.cn/showproblem.php?pid=2131 Problem Description Mickey is interested in probabili ...

  10. Laravel 5 如何实现网站在维护模式下允许指定 IP 用户访问（白名单）

    为了测试需要,有时候需要在网站处于维护模式下允许特定IP访问网站,在 Laravel 中,这可以通过为维护模式编写自定义中间件来实现. 默认情况下,Laravel 使用 CheckForMainten ...