这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要对实现一个简单的 js 加载器的步骤进行介绍 -- 主要可以分为解析路径、下载模块、解析模块依赖、解析模块四个步骤。需要的朋友来看下吧
在 es6 之前,js 不像其他语言自带成熟的模块化功能,页面只能靠插入一个个 script 标签来引入自己的或第三方的脚本,并且容易带来命名冲突的问题。js 社区做了很多努力,在当时的运行环境中,实现 "模块" 的效果。
通用的 js 模块化标准有 CommonJS 与 AMD,前者运用于 node 环境,后者在浏览器环境中由 Require.js 等实现。此外还有国内的开源项目 Sea.js,遵循 CMD 规范。(目前随着 es6 的普及已经停止维护,不论是 AMD 还是 CMD,都将是一段历史了)
浏览器端 js 加载器
实现一个简单的 js 加载器并不复杂,主要可以分为解析路径、下载模块、解析模块依赖、解析模块四个步骤。
首先定义一下模块。在各种规范中,通常一个 js 文件即表示一个模块。那么,我们可以在模块文件中,构造一个闭包,并传出一个对象,作为模块的导出:
- define(factory() {
- var x = {
- a: 1
- };
- return x;
- });
define 函数接收一个工厂函数参数,浏览器执行该脚本时,define 函数执行 factory,并把它的 return 值存储在加载器的模块对象 modules 里。
如何标识一个模块呢?可以用文件的 uri,它是唯一标识,是天然的 id。
文件路径 path 有几种形式:
因此,需要一个 resolvePath 函数来将不同形式的 path 解析成 uri,参照当前页面的文件路径来解析。
接着,假设我们需要引用 a.js 与 b.js 两个模块,并设置了需要 a 与 b 才能执行的回调函数 f。我们希望加载器去拉取 a 与 b,当 a 与 b 都加载完成后,从 modules 里取出 a 与 b 作为参数传给 f,执行下一步操作。这里可以用观察者模式(即订阅 / 发布模式)实现,创建一个 eventProxy,订阅加载 a 与加载 b 事件;define 函数执行到最后,已经把导出挂载 modules 里之后,emit 一个本模块加载完成的事件,eventProxy 收到后检查 a 与 b 是否都加载完成,如果完成,就传参给 f 执行回调。
同理,eventProxy 也可以实现模块依赖加载
- // a.js
- define([ 'c.js', 'd.js' ], factory (c, d) {
- var x = c + d;
- return x;
- });
define 函数的第一个参数可以传入一个依赖数组,表示 a 模块依赖 c 与 d。define 执行时,告诉 eventProxy 订阅 c 与 d 加载事件,加载好了就执行回调函数 f 存储 a 的导出,并 emit 事件 a 已加载。
浏览器端加载脚本的原始方法是插入一个 script 标签,指定 src 之后,浏览器开始下载该脚本。
那么加载器中的模块加载可以用 dom 操作实现,插入一个 script 标签并指定 src,此时该模块为下载中状态。
PS:浏览器中,动态插入 script 标签与初次加载页面 dom 时的 script 加载方式不同:
初次加载页面,浏览器会从上到下顺序解析 dom,碰到 script 标签时,下载脚本并阻塞 dom 解析,等到该脚本下载、执行完毕后再继续解析之后的 dom(现代浏览器做了 preload 优化,会预先下载好多个脚本,但执行顺序与它们在 dom 中顺序一致,执行时阻塞其他 dom 解析)
动态插入 script,
- var a = document.createElement('script'); a.src='xxx'; document.body.appendChild(a);
浏览器会在该脚本下载完成后执行,过程是异步的。
下载完成后执行上述的操作,解析依赖 -> 加载依赖 -> 解析本模块 -> 加载完成 -> 执行回调。
模块下载完成后,如何在解析它时知道它的 uri 呢?有两种发发,一种是用 srcipt.onload 获取 this 对象的 src 属性;一种是在 define 函数中采用 document.currentScript.src。
实现基本的功能比较简单,代码不到 200 行:
- var zmm = {
- _modules: {},
- _configs: {
- // 用于拼接相对路径
- basePath: (function(path) {
- if (path.charAt(path.length - 1) === '/') {
- path = path.substr(0, path.length - 1);
- }
- return path.substr(path.indexOf(location.host) + location.host.length + 1);
- })(location.href),
- // 用于拼接相对根路径
- host: location.protocol + '//' + location.host + '/'
- }
- };
- zmm.hasModule = function(_uri) {
- // 判断是否已有该模块,不论加载中或已加载好
- return this._modules.hasOwnProperty(_uri);
- };
- zmm.isModuleLoaded = function(_uri) {
- // 判断该模块是否已加载好
- return !! this._modules[_uri];
- };
- zmm.pushModule = function(_uri) {
- // 新模块占坑,但此时还未加载完成,表示加载中;防止重复加载
- if (!this._modules.hasOwnProperty(_uri)) {
- this._modules[_uri] = null;
- }
- };
- zmm.installModule = function(_uri, mod) {
- this._modules[_uri] = mod;
- };
- zmm.load = function(uris) {
- var i, nsc;
- for (i = 0; i < uris.length; i++) {
- if (!this.hasModule(uris[i])) {
- this.pushModule(uris[i]);
- // 开始加载
- var nsc = document.createElement('script');
- nsc.src = uri;
- document.body.appendChild(nsc);
- }
- }
- };
- zmm.resolvePath = function(path) {
- // 返回绝对路径
- var res = '',
- paths = [],
- resPaths;
- if (path.match(/.*:\/\/.*/)) {
- // 绝对路径
- res = path.match(/.*:\/\/.*?\//)[0]; // 协议+域名
- path = path.substr(res.length);
- } else if (path.charAt(0) === '/') {
- // 相对根路径 /开头
- res = this._configs.host;
- path = path.substr(1);
- } else {
- // 相对路径 ./或../开头或直接文件名
- res = this._configs.host;
- resPaths = this._configs.basePath.split('/');
- }
- resPaths = resPaths || [];
- paths = path.split('/');
- for (var i = 0; i < paths.length; i++) {
- if (paths[i] === '..') {
- resPaths.pop();
- } else if (paths[i] === '.') {
- // do nothing
- } else {
- resPaths.push(paths[i]);
- }
- }
- res += resPaths.join('/');
- return res;
- };
- var define = zmm.define = function(dependPaths, fac) {
- var _uri = document.currentScript.src;
- if (zmm.isModuleLoaded(_uri)) {
- return;
- }
- var factory, depPaths, uris = [];
- if (arguments.length === 1) {
- factory = arguments[0];
- // 挂载到模块组中
- zmm.installModule(_uri, factory());
- // 告诉proxy该模块已装载好
- zmm.proxy.emit(_uri);
- } else {
- // 有依赖的情况
- factory = arguments[1];
- // 装载完成的回调函数
- zmm.use(arguments[0],
- function() {
- zmm.installModule(_uri, factory.apply(null, arguments));
- zmm.proxy.emit(_uri);
- });
- }
- };
- zmm.use = function(paths, callback) {
- if (!Array.isArray(paths)) {
- paths = [paths];
- }
- var uris = [],
- i;
- for (i = 0; i < paths.length; i++) {
- uris.push(this.resolvePath(paths[i]));
- }
- // 先注册事件,再加载
- this.proxy.watch(uris, callback);
- this.load(uris);
- };
- zmm.proxy = function() {
- var proxy = {};
- var taskId = 0;
- var taskList = {};
- var execute = function(task) {
- var uris = task.uris,
- callback = task.callback;
- for (var i = 0,
- arr = []; i < uris.length; i++) {
- arr.push(zmm._modules[uris[i]]);
- }
- callback.apply(null, arr);
- };
- var deal_loaded = function(_uri) {
- var i, k, task, sum;
- // 当一个模块加载完成时,遍历当前任务栈
- for (k in taskList) {
- if (!taskList.hasOwnProperty(k)) {
- continue;
- }
- task = taskList[k];
- if (task.uris.indexOf(_uri) > -1) {
- // 查看这个任务中的模块是否都已加载好
- for (i = 0, sum = 0; i < task.uris.length; i++) {
- if (zmm.isModuleLoaded(task.uris[i])) {
- sum++;
- }
- }
- if (sum === task.uris.length) {
- // 都加载完成 删除任务
- delete(taskList[k]);
- execute(task);
- }
- }
- }
- };
- proxy.watch = function(uris, callback) {
- // 先检查一遍是否都加载好了
- for (var i = 0,
- sum = 0; i < uris.length; i++) {
- if (zmm.isModuleLoaded(uris[i])) {
- sum++;
- }
- }
- if (sum === uris.length) {
- execute({
- uris: uris,
- callback: callback
- });
- } else {
- // 订阅新加载任务
- var task = {
- uris: uris,
- callback: callback
- };
- taskList['' + taskId] = task;
- taskId++;
- }
- };
- proxy.emit = function(_uri) {
- console.log(_uri + ' is loaded!');
- deal_loaded(_uri);
- };
- return proxy;
- } ();
循环依赖问题
"循环加载" 指的是,a 脚本的执行依赖 b 脚本,而 b 脚本的执行又依赖 a 脚本。这是一种应该尽量避免的设计。
浏览器端
用上面的 zmm 工具加载模块 a:
- // main.html
- zmm.use('/a.js',
- function() {...
- });
- // a.js
- define('/b.js',
- function(b) {
- var a = 1;
- a = b + 1;
- return a;
- });
- // b.js
- define('/a.js',
- function(a) {
- var b = a + 1;
- return b;
- });
就会陷入 a 等待 b 加载完成、b 等待 a 加载完成的死锁状态。sea.js 碰到这种情况也是死锁,也许是默认这种行为不应该出现。
seajs 里可以通过 require.async 来缓解循环依赖的问题,但必须改写 a.js:
- // a.js
- define('./js/a',
- function(require, exports, module) {
- var a = 1;
- require.async('./b',
- function(b) {
- a = b + 1;
- module.exports = a; //a= 3
- });
- module.exports = a; // a= 1
- });
- // b.js
- define('./js/b',
- function(require, exports, module) {
- var a = require('./a');
- var b = a + 1;
- module.exports = b;
- });
- // main.html
- seajs.use('./js/a',
- function(a) {
- console.log(a); // 1
- });
但这么做 a 就必须先知道 b 会依赖自己,且 use 中输出的是 b 还没加载时 a 的值,use 并不知道 a 的值之后还会改变。
在浏览器端,似乎没有很好的解决方案。node 模块加载碰到的循环依赖问题则小得多。
node/CommonJS
CommonJS 模块的重要特性是加载时执行,即脚本代码在 require 的时候,就会全部执行。CommonJS 的做法是,一旦出现某个模块被 "循环加载",就只输出已经执行的部分,还未执行的部分不会输出。
- // a.js
- var a = 1;
- module.exports = a;
- var b = require('./b');
- a = b + 1;
- module.exports = a;
- // b.js
- var a = require('./a');
- var b = a + 1;
- module.exports = b;
- // main.js
- var a = require('./a');
- console.log(a); //3
上面 main.js 的代码中,先加载模块 a,执行 require 函数,此时内存中已经挂了一个模块 a,它的 exports 为一个空对象 a.exports={};接着执行 a.js 中的代码;执行 var b = require('./b'); 之前,a.exports=1,接着执行 require(b);b.js 被执行时,拿到的是 a.exports=1,b 加载完成后,执行权回到 a.js;最后 a 模块的输出为 3。
CommonJS 与浏览器端的加载器有着实现上的差异。node 加载的模块都是在本地,执行的是同步的加载过程,即按依赖关系依次加载,执行到加载语句就去加载另一个模块,加载完了再回到函数调用点继续执行;浏览器端加载 scripts 由于天生限制,只能采取异步加载,执行回调来实现。
ES6
ES6 模块的运行机制与 CommonJS 不一样,它遇到模块加载命令 import 时,不会去执行模块,而是只生成一个引用。等到真的需要用到时,再到模块里面去取值。因此,ES6 模块是动态引用,不存在缓存值的问题,而且模块里面的变量,绑定其所在的模块。
这导致 ES6 处理 "循环加载" 与 CommonJS 有本质的不同。ES6 根本不会关心是否发生了 "循环加载",只是生成一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
来看一个例子:
- // even.js
- import {
- odd
- }
- from './odd';
- export
- var counter = 0;
- export
- function even(n) {
- counter++;
- return n == 0 || odd(n - 1);
- }
- // odd.js
- import {
- even
- }
- from './even';
- export
- function odd(n) {
- return n != 0 && even(n - 1);
- }
- // main.js
- import * as m from './even.js';
- m.even(10); // true; m.counter = 6
上面代码中,even.js 里面的函数 even 有一个参数 n,只要不等于 0,就会减去 1,传入加载的 odd()。odd.js 也会做类似作。
上面代码中,参数 n 从 10 变为 0 的过程中,foo() 一共会执行 6 次,所以变量 counter 等于 6。第二次调用 even()时,参数 n 从 20 变为 0,foo() 一共会执行 11 次,加上前面的 6 次,所以变量 counter 等于 17。
而这个例子要是改写成 CommonJS,就根本无法执行,会报错。
- // even.js
- var odd = require('./odd');
- var counter = 0;
- exports.counter = counter;
- exports.even = function(n) {
- counter++;
- return n == 0 || odd(n - 1);
- }
- // odd.js
- var even = require('./even').even;
- module.exports = function(n) {
- return n != 0 && even(n - 1);
- }
- // main.js
- var m = require('./even');
- m.even(10); // TypeError: even is not a function
上面代码中,even.js 加载 odd.js,而 odd.js 又去加载 even.js,形成 "循环加载"。这时,执行引擎就会输出 even.js 已经执行的部分(不存在任何结果),所以在 odd.js 之中,变量 even 等于 null,等到后面调用 even(n-1) 就会报错。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0517/329818.html