从易到难,写一个JavaScript加载器之一

先上代码:

 1 (function(global) {
 2   var createScript, insertScript, makeLoadQueue;
 3   createScript = function(src) {
 4     var script;
 5     script = document.createElement('SCRIPT');
 6     script.src = "" + src + ".js";
 7     return script;
 8   };
 9   insertScript = function(scriptQueue) {
10     var script;
11     script = scriptQueue.shift();
12     if (script != null) {
13       document.head.appendChild(script);
14       return script.onload = function() {
15         return insertScript(scriptQueue);
16       };
17     } else {
18       return false;
19     }
20   };
21   makeLoadQueue = function(loadList) {
22     var loadQueue;
23     loadQueue = [];
24     loadList.forEach(function(src) {
25       return loadQueue.push(createScript(src));
26     });
27     return loadQueue;
28   };
29   return global.jsLoader = {
30     load: function(loadList) {
31       var queue;
32       queue = [];
33       queue = makeLoadQueue(loadList);
34       return insertScript(queue);
35     }
36   };
37 })(window);

这个实例,展示了通过一个预制的清单文件 loadlist.js,来按照顺序同步加载script脚本文件

直接引用的方式:

<!-- jQuery 2.1.4 -->
<script src="lib/admin-lte/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="lib/admin-lte/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="lib/admin-lte/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!--angular-->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<!--不带watchers的数据绑定指令-->
<script src="//cdn.bootcss.com/angular-bindonce/0.3.1/bindonce.min.js"></script>

使用这个库的方式:

<script src="public/jsLoader/jsLoader.js"></script>
<script src="loadList.js"></script>

loadList:

(function (global) {var loadList = ['lib/admin-lte/plugins/jQuery/jQuery-2.1.4.min','lib/admin-lte/bootstrap/js/bootstrap.min','lib/admin-lte/plugins/iCheck/icheck.min','lib/angular/angular.min','lib/angular-ui-router/angular-ui-router.min','lib/angular-animate/angular-animate.min','//cdn.bootcss.com/angular-bindonce/0.3.1/bindonce.min',//main'app']global.jsLoader.load(loadList);
})(window);

对比html中的引入,改进了 代码的可读性和项目的可维护性了,并通过动态创建script,以非阻塞方式加载了js.

下一篇文章则改进这个库,使之能够同样的方式并行加载css

转载于:https://www.cnblogs.com/jackyKin/p/4684220.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256945.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于怎么怎么把 unsingned char 数据转换为 Opencv 的Mat类型,并且吧图像显示出来

1、定义 unsignde char* A; 2、定义cv::Mat B(cv::Size(800,500),CV_8U) 3、使用c语言的 memcpy(B.data, A&#xff0c;800*500)//将A指针的数据复制到B中的数据内存&#xff0c;并且给出内存大小 4最后unsignde char 类型数据就会被转化为Mat类型&#xff0c;并且可以显示出…

学习笔记(31):Python网络编程并发编程-定时器

立即学习:https://edu.csdn.net/course/play/24458/296448?utm_sourceblogtoedu 定时器&#xff1a;threading.Timer 1.概念&#xff1a;定时器就是实现过多久去执行什么事情 2.相关函数 1&#xff09;Timer(self,interval,function,args()) interval:定时的时间 functio…

vs2012 与 win7 不兼容的问题

我用的是win7 64位系统&#xff0c;所以安装位置那里是“C:\Program Files (x86)”&#xff0c;多了个(x86)。 百度搜索到园子里的师兄给的解决办法http://www.cnblogs.com/mumuliang/archive/2013/08/20/3270628.html 装这个补丁&#xff1a; Update for Microsoft Visual Stu…

Scrum方法论(四)

本文转自桂素伟51CTO博客&#xff0c;原文链接&#xff1a; http://blog.51cto.com/axzxs/1358371&#xff0c;如需转载请自行联系原作者

atoi(),函数,将字符串转为整形数字

C 库函数 int atoi(const char *str) 把参数 str 所指向的字符串转换为一个整数&#xff08;类型为 int 型&#xff09;。 测试用例&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h>int main() {int val;char str[20];strcpy(str, …

学习笔记(32):Python网络编程并发编程-线程queue

立即学习:https://edu.csdn.net/course/play/24458/296449?utm_sourceblogtoedu 线程queue 一&#xff1a;Queue先进先出 1.queue.Queue(n):创建一个最大容量为n的队列 2.queue.Queue(n).put():添加元素 3.queue.Queue(n).get():取元素 4.put()和get(),默认阻塞状态为True&am…

第一天,仔细学习了下:common.inc.php(Discuz6.1.0核心文件)01

<?php /* April 18,2012 discuz二次开发学习 author:xuqin 不能为了完成任务去做一件事&#xff0c;要举一反三&#xff0c;融会贯通的去学习。 */ error_reporting(0); /* * error_reporting(0); //抑制所有的出错信息 * error_reporting(E_ALL);//显示所有的出错信息 …

acdream 1023 xor按位思考

思路&#xff1a;记答案为ans&#xff0c;统计出数列A和B在某二进制某一位上有多少个1&#xff0c;如果个数相同&#xff0c;则ans那一位上为0&#xff08;因为题目要求最小的满足条件的值&#xff09;&#xff0c;如果不一样&#xff08;则需要考虑那一位上异或个1&#xff09…

system的相关用法

system()—执行shell命令也就是向dos发送一条指令。 相关函数&#xff1a;fork, execve, waitpid, popen头文件&#xff1a;#include <stdlib.h>定义函数&#xff1a;int system(const char * string); system("pause")可以实现冻结屏幕&#xff0c;便于观察…

学习笔记(33):Python网络编程并发编程-进程池线程池

立即学习:https://edu.csdn.net/course/play/24458/296451?utm_sourceblogtoedu 进程池与线程池&#xff1a; 一般应用在网站上&#xff0c;进程池或线程池最大的数量一般需要尽可能地大但是不要超出服务器的承载范围 1.进程池&#xff1a; 1)concurrent.futures.ProcessP…

gulp配置实现修改js、css、html自动刷新

写在前面&#xff1a; 本配置支持es6、less、react 1.首先 给出初始的目录结构 给出执行gulp后的目录结构 给出执行gulp --p后的目录结构 2.package.json里是一个写入。文件描述了npm包的相关配置信息&#xff08;作者、简介、包依赖等&#xff09;和所需模块。 {"name&qu…

作为程序员之正则表达式

目录 正则表达式基础语法标准字符集合自定义的字符集合多行、单行模式高级语法选择符和分组反向引用预搜索/零宽断言例子匹配邮箱正则表达式 基础语法 标准字符集合 \D 和[^\d]意思一样&#xff0c;就是与 \d 相反 REG意义\ddigital表示 0 到 9 之间任意的一个数字\wworld表示任…

javascript 的dateObj.getTime() 在为C#的获取方式

publicstringGetTime() { Int64 retval 0; DateTime st newDateTime(1970, 1, 1); TimeSpan t (DateTime.Now.ToUniversalTime() -st); retval (Int64)(t.TotalMilliseconds 0.5); returnretval.ToString(); } 在Net中的实际测试代码 MSScriptControl.Scri…

学习笔记(34):Python网络编程并发编程-异步调用与回调机制

立即学习:https://edu.csdn.net/course/play/24458/296452?utm_sourceblogtoedu 1.知识点&#xff1a;&#xff08;详细见代码注释&#xff09; 1&#xff09;同步调用&#xff1a; res1 pool.submit(ju,john1).result() 2&#xff09;异步调用 pool.submit(ju,john1) 3…

c和c++的结构体使用

一&#xff1a;结构体其实有两种初始化方式 1、直接把多有的变量在其内部通过形参传入到结构体中&#xff0c;结构体定义在程序的最开头是个全局变量&#xff1b;这个时候参数已经传入进来&#xff0c;在本文件中都可以直接使用该结构体的所有成员变量 2、先定义&#xff0c;…

python第三方库安装的各种方法(全网最全,最简单易懂)

使用镜像&#xff1a; pip install virtualenv -i https://pypi.douban.com/simple 国内源&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple module_name 或 pip install -i https://pypi.douban.com/simple module_name 国内的镜像源来加速 pip inst…

Jmeter服务器监控插件使用

Jmeter服务器监控插件使用 Jmeter-Plugins支持CPU、Memory、Swap、Disk和Network的监控&#xff0c;在测试过程中更加方便进行结果收集和统计分析。 一、准备工作&#xff1a; 1、下载Jmeter-Plugins插件&#xff0c;下载Server端ServerAgent插件&#xff1b; 2、解压Jmeter-Pl…

以后遇见 visual studio的调试bug出错,直接查询错误代码;高效解决调试问题

1、例如遇到&#xff1a; 严重性 代码 说明 项目 文件 行 错误 LNK2005 "void __cdecl readFileList(class std::basic_string<char,struct std::char_traits<char>, class std::allocator<char> >,class std::vector<class s…

数据库导入导出命令

Oracle数据导入导出imp/exp 功能&#xff1a;Oracle数据导入导出imp/exp就相当与oracle数据还原与备份。 大多情况都可以用Oracle数据导入导出完成数据的备份和还原&#xff08;不会造成数据的丢失&#xff09;。 Oracle有个好处&#xff0c;虽然你的电脑不是服务器&#xff0c…

CCNA系列课程(4)交换技术

第四节课 交换技术杜飞2009-06-28咱们今天来看一下局域网交换技术&#xff0c;也称为层2交换技术&#xff0c;内容主要包括层2交换的工作原理、网络环路、如何利用Spanning-Tree Protocol 来解决网络环路、VLAN及VTP技术&#xff0c;闲话少说&#xff0c;书归正传。我们在…