也说JS脚本加载控制
2020-12-13 16:13
标签：style blog http color get 使用 前端采用的 iframe + html 做后台管理系统。现在js、jquery插件非常多，每次页面都是引用就类似这样: 有时候需要更新其中一个组件，为了避免客户端浏览器手动刷新，一般的做法是增加版本号，比如 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 加载这个脚本。首先可以以如下形式写在页面中 这样略微不方便啦。于是楼主又写了一个脚本，仅仅只有如上一行代码，就是用来控制加载前面定义通用的脚本组件。这个只有一行代码的脚本，是万年不变的，所有页面直接引用即可，由它来控制后面的脚本变化。 上面说，脚本加载的形式是同步的，为了证明这一点，楼主不得不写一点简单的例子。看看下面的html代码： 而boot.js就是引导脚本，就是之前提到的一行代码： bootallscript.js就是最核心的了，复杂加载所有的js和css。 运行后会发现，页面在加载完成后，使用jQuery获取到了控件的值。这种方式和原来的直接脚本引用，差别不大吧。 说到这里，我们新建页面后，只需要引用 boot.js就能加载上所有的组件，而页面逻辑相关的js，也可以直接引用在boot.js下方，没有改变原来的脚本引用习惯，又能极大的节省了代码，完善对脚本的控制，这就是楼主想要的效果了。 写在最后，当然mvc对类似的问题有了解决方案，这里不探讨，因为讨论的是 前端 iframe+html 无 C# 。 示例下载 也说JS脚本加载控制,搜素材,soscw.com 也说JS脚本加载控制 标签：style blog http color get 使用 原文地址：http://www.cnblogs.com/codealone/p/3798366.html问题背景
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" />
解决办法
script>
document.writeIn(‘...‘);
script>
测试
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>
/*引导加载所有的js文件*/document.writeln("
(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 continue;
var p = loader.base + c + "?v=" + loader.ver;;
var type = c.substr(c.length - 2, c.length);
if (type === ‘js‘) { //同步加载js文件
document.writeln("
下一篇：python基础--集合