问题背景

　　前端采用的 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. javascript数据相关处理，序列化反序列化，数据编码与解码

    对象序列化简而言之,将对象转为字符串.在数据的传输过程中,经常会使用到对象序列化. javascript中常用的对象序列化:JSON.stringify(); javascript中常用的对象反序列化 ...

  2. url解读

    我刚刚学习的时候,我抓到包不知道哪个是协议.哪个是是服务器地址.哪个是端口号...不知道有没有老铁遇到跟我一样的. 接口:http://172.168.12.0:8888/old/login.do 解 ...

  3. 第三篇 Postman之 Tests（后置处理器，断言）

    第二篇里讲了手动设置全局变量及局部变量的方法,但是这有一个缺点,就是每次测试之前,都需要获取相关变量值,手动再填写更新到对应的全局变量或者局部变量里,这对于想进行自动化执行的人或者懒人就不太友好了,本 ...

  4. 深挖 NGUI 基础 之UICamera (二)

    一.UI Camera作用 UICamera需要挂载在摄像机上才能发挥作用 UICamera仅负责 发送NGUI 事件 到 脚本所附加的摄像机中看得到的对象,比如我自定义了NGUI层(在Inspect ...

  5. Mysql性能优化四：分库，分区，分表，你们如何做？

    分库分区分表概念 分区 就是把一张表的数据分成N个区块,在逻辑上看最终只是一张表,但底层是由N个物理区块组成的 分表 就是把一张数据量很大的表按一定的规则分解成N个具有独立存储空间的实体表.系统读写时 ...

  6. Web负载均衡技术

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

  7. [USACO18DEC]Cowpatibility(容斥 or bitset优化暴力)

    题面 题意: 给出n个五元组(一个五元组的五个数互不相同),我们称两个五元组不和谐,当且仅当任意元素都不相同,求有多少对五元组不和谐. \(Solution:\) 很容易想到 Ans = 总共对数-和 ...

  8. 软件工程项目组Z.XML会议记录 2013/11/27

    软件工程项目组Z.XML会议记录 [例会时间]2013年11月27日星期三21:00-22:00 [例会形式]小组讨论 [例会地点]学生公寓3号楼会客厅 [例会主持]罗凡 [会议记录]罗凡 会议整体流 ...

  9. # ML学习小笔记—Gradien Descent

    关于本课程的相关资料http://speech.ee.ntu.edu.tw/~tlkagk/courses_ML17.html 根据前面所为,当我们得到Loss方程的时候,我们希望求得最优的Loss方 ...

  10. 5for Java

    ① 从字符串“耿丹计算机Java20170320”中提取日期 public class Xx1 { /** * @param args */ public static void main(Strin ...