问题背景

　　前端采用的 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. ThinkPHP5项目目录规划实践

    ThinkPHP5安装后(或者下载后的压缩文件解压后)可以看到下面的目录结构: tp5├─application     应用目录 ├─extend          扩展类库目录(可定义) ├─pu ...

  2. Flask 学习笔记（二）：RESTful API

    概括 URL:需要操作的对象,也就是资源 HTTP method:我要对该对象做什么(POST 增.DELETE 删.GET 查.PUT 和 PATCH 改) HTTP status code:操作的 ...

  3. w命令集合

    startx:在命令行模式下输入会进入图形界面 exit:注销Linux(以login shell登录会注销账号,以non-login shell登录会退出终端) data:显示日期和时间 data ...

  4. c# mysql blob数据类型

    1.采用stream流形式写入: #region 数据流转换成blob类型数据写入数据库 static public bool StreamToBlob(ref Stream stream, Odbc ...

  5. [翻译] ASP.NET Core 简介

    ASP.NET Core 简介 原文地址:Introduction to ASP.NET Core         译文地址:asp.net core 简介           翻译:ganqiyin ...

  6. DELPHI控件属性事件说明

    常用DELPHI控件属性事件设置说明 常用DELPHI控件属性设置说明目录TForm Class TPanel组件 TToolBar Class TToolButton Class TTimer Cl ...

  7. SQLAlchemy技术文档（中文版）（上）

    在学习SQLAlchemy的过程中,好多时候需要查官方Tutorial,发现网上并没有完整的中文版,于是利用这两天空余时间粗略翻译了一下. 翻译效果很差....但也算是强迫自己通读一遍Tutorial ...

  8. iBatis的基本使用

    项目结构: 依赖jar: 数据库依赖: CREATE TABLE `person` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) NOT NULL, PRIMA ...

  9. 【bzoj1797】[Ahoi2009]Mincut 最小割 网络流最小割+Tarjan

    题目描述 给定一张图,对于每一条边询问:(1)是否存在割断该边的s-t最小割 (2)是否所有s-t最小割都割断该边 输入 第一行有4个正整数,依次为N,M,s和t.第2行到第(M+1)行每行3个正 整 ...

  10. BZOJ4567 SCOI2016背单词（trie+贪心）

    倒过来变成查询前缀.考虑怎么排序.第一条代价n*n就相当于inf,说明一个单词的所有前缀都要排在它前面.那么串的依赖关系就是trie的结构.二三条说明代价是Σidi-idfa,那么显然最后的编号应该是 ...