问题背景

　　前端采用的 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. [转][赞]Android开发者必知的开发资源

    英文原文:Bongzimo  翻译: ImportNew-黄小非 随着Android平台市场份额的持续猛增 ,越来越多的开发者开始投入Android应用程序的开发大潮.如果您是一位2013年刚刚入行的 ...

  2. Python 3基础教程24-读取csv文件

    本文来介绍用Python读取csv文件.什么是csv(Comma-Separated Values),也叫逗号分割值,如果你安装了excel,默认会用excel打开csv文件. 1. 我们先制作一个c ...

  3. 2016弱校联盟十一专场10.3 We don't wanna work!

    能把 not working now 写成 not working hard now 还查一晚上也是没谁了 我的做法是维护两个set 分别是前20% 和后80% #include<iostrea ...

  4. Python全栈 MongoDB 数据库（数据的查找）

      非关系型数据库和关系型数据库的区别? 不是以关系模型构建的,结构自由 非关系型数据库不保证数据一致性 非关系型数据库可以在处理高并发和海量数据时弥补关系数据库的不足 非关系型数据库在技术上没有关系 ...

  5. linux下 su 与 su - 的区别和使用

    Linux下su与su -命令的区别   在启动服务器ntpd服务时遇到一个问题 使用 su root 切换到root用户后,不可以使用service命令: 使用 su - 后,就可以使用servic ...

  6. NO5——素数筛选

    #include <stdio.h> int main() { ]={}; ;i<=;i++) a[i]=; ;i<=;i++) if(a[i]) ;j+=i) a[j]=; ...

  7. Week1 Team Homework #1 from Z.XML-对于学长项目《shield star》的思考和看法

    试用了一下学长黄杨等人开发的<shield star>游戏.                      其实作为一个学弟,我对cocos2d-x引擎还算是比较了解,所以对于这样一款很“典型 ...

  8. Unity3D - UGUI实现Tab键切换输入框、按钮（按Tab键切换高亮显示的UI）

    1.在Hierarchy面板创建能被选中的UI(Button.InputField等). 2.在Canvas上创建C#脚本 TabCutPichon. 3.编写脚本. using System.Col ...

  9. BZOJ4347 POI2016Nim z utrudnieniem（博弈+动态规划）

    由nim游戏的结论,显然等价于去掉一些数使剩下的数异或和为0. 暴力的dp比较显然,设f[i][j][k]为前i堆移走j堆(模意义下)后异或和为k的方案数.注意到总石子数量不超过1e7,按ai从小到大 ...

  10. vim配置入门，到豪华版vim配置

    这几天一直研究vim的配置,许多版本总是不尽如人意,网上确实有许多优秀的文章值得参考,我的博客后面会贴上具有参考价值的博客链接,本文的将手把手教你配置一个功能详尽的vim. 首先你要明白的是linux ...