问题背景

　　前端采用的 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. 怎样安装PyCharm

    在地址栏输入http://www.jetbrains.com/pycharm/ 打开PyCharm官网 http://idea.lanyus.com/

  2. Django打造大型企业官网

    第1章 Django预热 1-为什么需要虚拟环境 2-virtualenv创建虚拟环境 3-virtualenvwrapper使用 4-URL组成部分讲解 5-课程准备工作 6-Django介绍 第2 ...

  3. Prometheus 普罗米修斯监控

    周末在家无聊 看新闻 看到关于监控的东西 拿来玩玩 试一下 感觉还蛮有意思 特此记录一下 这里只介绍客户端的配置 1:首先在POM中添加依赖 <dependency> <groupI ...

  4. 官方文档 恢复备份指南八 RMAN Backup Concepts

    本章内容 Consistent and Inconsistent RMAN Backups Online Backups and Backup Mode Backup Sets Image Copie ...

  5. ng2模板语法/内置指令速查表

    https://www.angular.cn/docs/ts/latest/guide/cheatsheet.html

  6. 【Python】python中的装饰器——@

    对装饰器本来就一知半解的,今天终于弄清楚了,Python中的装饰器是对装饰者模式的很好运用,简化到骨子里了. python中为什么需要装饰器,看这里:http://www.cnblogs.com/hu ...

  7. Android EditText 限制输入字符

    今天为简单的登录界面的输入框(用户名.密码框,验证码),均为EditText框,做输入限制,不能有空格,不能有一些特殊字符,不多说,直接上代码: /** * 禁止EditText输入空格 * * @p ...

  8. vuex中获取的数据使用v-model绑定出问题

    get selectedProp() { return this.$store.state.selectedProp; } 获取的数据selectedProp直接绑定在表单元素上会有错,因为不能直接对 ...

  9. vue2.0中动画

    #vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...

  10. 【bzoj4070】[Apio2015]雅加达的摩天楼 set+堆优化Dijkstra

    题目描述 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N−1.除了这 N 座摩天楼外,雅加达市没有其他摩天楼. 有 M 只叫做 “doge” 的神秘生物 ...