关于前端JS模块加载器实现的一些细节
最近工作需要,实现一个特定环境的模块加载方案,实现过程中有一些技术细节不解,便参考 了一些项目的api设计约定与实现,记录下来备忘。
本文不探讨为什么实现模块化,以及模块化相关的规范,直接考虑一些技术实现原理。
1.简单实现模块化
一开始我想如果我的代码只有一个文件,那几行不就实现了吗
main.js
var modules = {}
var define = function(id,factory){
moudles[id] = factory
}
var require = function(id){
return modules[id]
}
define("moduleA",{text:"I am text"})
var moduleA = require("moduleA");
console.log(moduleA)
main.html
<script src="main.js"></script>
2.拆多个文件
后来业务需求的增长,我的一个代码文件逐渐膨胀到了接近2w多行。这个时候每次改动文件找函数找半天啊,俺的编辑器也时不时的开始崩溃了,传到服务端的时候,也要等好久好久了。。。
于是我把文件拆成了3个:
1.module.js
var modules = {}
var define = function(id,factory){
moudles[id] = factory
}
var require = function(id){
return modules[id]
}
2.moduleA.js
define("moduleA",{text:"I am text"})
3.main.js
var A = require("moduleA")
console.log(A)
于是我在html中得这么写了
<script src="module.js"><script>
<script src="moduleA.js"><script>
<script src="main.js"><script>
后来了解到,我可以用构件工具gulp
的concat
和watch
模块,可以监听文件改动,自动生成大文件,以便在开发的时候可以按模块拆成多个文件,运行的时候却是在一个文件。详细可以了解相关资料。
3.按模块加载文件
上面提到用构件工具来实现打包成一个文件,这样做有个缺点,代码如果有错误,报错的行数无法与相应文件模块的行数相对应,debug困难。
这个时候貌似只有不依赖于构件工具,我们在代码中实现加载其他模块。 貌似也挺简单的。
我们得知道,script标签是可以用JS动态创建和加载的
var loadScript = function(src){
var script = document.createElement("script")
script.src = src
document.head.appendChild(script)
}
于是我们可以在main.js中这样去加载
loadScript("module.js")
loadScript("moduleA.js")
这样就可以在页面中只引入一个主文件,然后在主文件中引入其他模块文件了。
多了解一些我们会知道 loadScript
这样的代码加载方法,是并行加载非顺序执行的,有可能moduleA的代码执行的时候module还没有执行,这是就会报错 variable define is not defined
了。
4.控制文件加载顺序
script在加载过程中会有一些状态,支持设立回调函数比如 onload
、 onreadysteadychange
这样我们可以在当一个模块加载完成后加载另一个模块来控制文件加载顺序。
我们常用的jsonp技术便也大概是这样一个原理。
var loadScript = function(src,callback){
var script = document.createElement("script")
script.src = src
script.onload = callback
document.head.appendChild(script)
}
loadScript("module.js",function(){
loadScript("moduleA.js",function(){
var A = require("moduleA")
console.log(A)
})
})
这样的坏处便是,代码中要写层层回调,模块的加载顺序需要写代码的人自己来管理。
5.XHR加载代码
script标签可以设置src加载远程代码,还可以直接把代码写在标签内。
<script>
define("A","i am A")
</script>
于是我们可以通过XHR对象,加载远程代码文本,然后动态的插入进去,比如innerHTML 甚至,XHR有同步的加载方法,来让我们串行的加载代码,避免写重重回调。当然,同步的XHR请求性能很低
XHR有个硬伤就是受浏览器同源策略影响,不能方便的跨域。
6.实现高级API
有了上面的一些基础,我们就可以来封装一些高级的API了。
一般来说,我们只需要这样一个define(id,deps,factory)
,实现了模块的定义和加载就基本够用了。
define("moduleC",["moduleA","moduleB"],function(moduleA,moduleB){
console.log(moduleA,moduleB)
})
这样的define做了这么一些事情
- 将id 和 factory关联
- 用loadscript的方案,去递归的加载deps,保证该模块被依赖时,模块本身依赖的模块都加载完毕。
- 收集完毕后按照deps顺序将相关模块通过apply传递给factory
7.自动收集依赖
我们觉得每次去写一堆依赖,然后还要保证deps顺序和factory的变量顺序一致,一一对应着实有些蛋疼,这时候我们会想要把deps去掉,改成在factory里面写依赖。
moduleC.js
define("moduleC",function(require){
var moduleA = require("moduleA")
var moduleB = require("moduleB")
})
这时候需要用到JS的一个神奇的特性,function的toString方法可以拿到函数的源代码。 这样我们可以通过一些手段分析出 require 了哪些模块。可以看这里 https://github.com/seajs/seajs/issues/478
当然为了能够分析出require了哪些模块,我们要对require做一些约定,就是希望require有一些特定的标志,以便于我们能够通过代码文本静态的分析出require项。
比如说 不能够这样,详细见 https://github.com/seajs/seajs/issues/259
var req = require
req("moduleA")
然后呢,也不能用通用的压缩工具压缩,因为压缩工具会把require变量压缩。
8.定义匿名模块
有时候我们觉得文件名已经能够代表模块名字了,我们连定义模块名字都不想要了。
moduleC.js
define(function(){
var moduleA = require("moduleA")
var moduleB = require("moduleB")
return {
A : moduleA,
B : moduleB
};
})
当初看到这样的api用法时都震惊了,因为之前实现define的时候都会把id和factory相关联,这没ID怎么办?后来冷静下来,觉得ID一定是有的,只是有办法不通过函数参数传递。
果然,有一个document有一个对象叫做currentScript,可以获得当前正在执行的script的对象,于是moduleC.js在执行的时候,define是可以通过document.currentScript拿到src为moduleC.js的script对象的,进而可以提取出ID。
这里关于浏览器兼容性有一些细节:
- document.currentScript只有现代浏览器才支持。
- IE6-10会有一些黑魔法,利用浏览器单线程执行的特性,获取页面上所有的script标签,判断其readystate为
interactive
时,该script便是document.currentScript - 利用Error.stack,得到文件调用栈,来分析得到currentScript
写匿名模块方便是方便,但是会带来一些麻烦。
比如,不能直接打包成一个文件了,因为依赖于模块的文件名,这个很好理解了。
define(function(){
return 100
})
define(function(){
return 200
})
9.加载文本资源
甚是怀念在孢子工作时的那套代码结构与模块化方案,开发不需要依赖构建工具,模板直接写html文件,不用包装amd。 等等。。,模板直接写html文件是怎么做到的,尝试去看源码,基本看不懂,孢子源码太难读了。后来抓包才知道,原来是后端配合,在特定的目录名称下返回的html文件会自动包上define,黑魔法。。
当然也有其他方法,一般情况下就是用XHR,加载相应地文本,然后用eval设定执行上下文环境为global,来包装define。
10.参考:
- http://requirejs.org/docs/why.html
- https://github.com/seajs/seajs/issues/259
- http://www.cnblogs.com/rubylouvre/archive/2013/01/23/2872618.html
关于前端JS模块加载器实现的一些细节的更多相关文章
- 实现简单的 JS 模块加载器
实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
- JS模块加载器加载原理是怎么样的?
路人一: 原理一:id即路径 原则.通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) .这里的 'a'.'b' 都是 ModuleId.通过 id 和路径的 ...
- sea.js模块加载工具
seajs的使用 seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js') 1.安装 np ...
- js 简易模块加载器 示例分析
前端模块化 关注前端技术发展的各位亲们,肯定对模块化开发这个名词不陌生.随着前端工程越来越复杂,代码越来越多,模块化成了必不可免的趋势. 各种标准 由于javascript本身并没有制定相关标准(当然 ...
- 【模块化编程】理解requireJS-实现一个简单的模块加载器
在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...
- 构建服务端的AMD/CMD模块加载器
本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言: 在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...
- JavaScript AMD 模块加载器原理与实现
关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...
- js模块化加载器实现
背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些 ...
随机推荐
- CSS3火焰文字特效制作教程
原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
- Windows环境搭建与第一个C# Sample
Redis入门 - Windows环境搭建与第一个C# Sample 什么是Redis? Redis是一个开源.支持网络.基于内存.键值对存储数据库,使用ANSI C编写.从2013年5月开始,R ...
- 讲故事的人写的谈判手册——Leo锦书64
正如其名称所暗示这本书"谈判无处不在".从决定谈判的成功或失败的因素一个不同的观点,测量中详细给出的同一时间. 图书出版不错,这是阅读的样车.阅读收获压力较小的方式. 书能给读 ...
- datagridcolumn单元格怎么显示查询到的某个表的字段值(字段值可能为多个)
例如,在之前做的项目中,查询mhz_xckcr表,select出某个业务的现场勘察人信息,select出的现场勘察人姓名(可能有多个)要在前台datagrid的一个datagridcolmn单元格显示 ...
- 小贴士——提高PHP程序在NGINX代理服务器的性能
NGINX本身就是面向最大性能的代理服务器,因此在使用NGINX,并没有性能调整的配置工作.但是却有很多选项可用于定制NGINX的行为,利用底层硬件和操作系统. 下面将介绍用于提供PHP在NGINX的 ...
- mysql基础之基本数据类型
原文:mysql基础之基本数据类型 列类型学习 mysql三大列类型 整型 Tinyint/ smallint/ mediumint/int/ bigint(M) unsigned zerofill ...
- 在线试听功能(前端直接略过吧,适合javaEE后台开发的)
应用场景:录音试听,MP3试听... 比如为客户提供录音功能时.客户希望录音完成试听录音,然后下载等功能.直接上代码:关键是取得录音的在服务器的地址,如:url='http://localhost:8 ...
- 【Oracle】-【插入读取顺序】-插入读取之间的顺序关系
Oracle插入记录的顺序是否是读取的顺序? 通过一个简单的实验验证: SQL> create table t ( x int, a char(2000) default 'x', b char ...
- KMP 代码 暂存
#include <stdio.h> #include <string.h> ],B[]; ]; int n, m; void _next(){ ; ; next[] = ; ...
- 附加被分离DB
如何附加被分离的质疑数据库? 简介 有些时间,由于日志损坏等原因,导致了数据库质疑.如果此时你分离了数据库,那你会发现你无法再附加上数据库,那后果还是很严重的.因此本文提供了一种方式,可以使得当数 ...