使用RequireJS并实现一个自己的模块加载器 (二)
2017 新年好 !
新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 。回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进牛奶了,赶紧拔掉电池,用风扇吹啊吹。强行开机,无线网卡坏掉,屏幕里面进牛奶,难看死啦 ~
鼠标也坏掉了,谁能赠送我一个鼠标啊 ..O...
中午吃完饭,就开始完善模块加载器了。到傍晚,差不多了,出去浪了一会儿 ~
my-Require.js
回顾
在 使用RequireJS 并实现一个自己的RequireJS(一) 中,回顾了 RequireJS 的用法,在这一篇,按照 require.js 的思路实现了一个自己的模块加载器 。
全局变量
首先,需要定义几个全局变量,用来保存已经加载的模块,尚未加载的模块,所有模块等全局信息。
var context = {
topModule: "", //顶层模块
waitings: [], // 尚未加载的模块
loadeds: [], // 已经加载的模块
baseUrl: "",
/**
* 每一个模块都有下面的几个属性
*
* moduleNmae 模块名称
* deps 模块依赖
* factory 模块工厂函数 .
* args 该模块的依赖模块的返回值
* returnValue 该魔铠工厂函数的返回值
*/
modules: [] // 所有模块集合
};
在 waitings
里面记录尚未加载的模块,但是已经插入到head
中。
loadeds
记录 已经加载完成的模块。
在每一个script 脚本插入的onload
的事件中,在waitings
里面删除模块名,在loadeds
里面添加,如果发现 waitings
为空,那么就开始递归执行工厂函数 。
加载 require 顶层模块
在 my-require.js 里面都是用 data-main
属性来启动 require
模块,所以先寻找 data-main
属性,并插入到 head
中 。
这里将 data-main
作为的路径作为 baseUrl ,也可以使用 requirejs.config 来配置
var data_main_src = document.querySelector("[data-main]").getAttribute('data-main');
// data-main 的形式为 app/main,这里 app 作为baseUrl
var lastIndex = data_main_src.lastIndexOf("/");
if (lastIndex === -1) {
context.baseUrl = "./";
} else {
context.baseUrl = data_main_src.subString(0, lastIndex);
}
// 创建顶层节点
var data_main_node = document.createElement('script');
data_main_node.async = true;
document.querySelector('head').appendChild(data_main_node);
data_main_node.src = data_main_src + ".js";
data_main_node.onload = function() {
// 将 顶层模块 从waitings 里面杀出,并添加到 loadeds 数组中。
removeByEle(context.waitings, context.topModule)
context.loadeds.push(context.topModule);
}
这里引出第一个 辅助函数 removeByEle
,这个函数用来在数组中删除元素
/**
* [数组根据元素删除元素]
* @param {[array]} arr [原数组]
* @param {[any]} ele [要去除的元素]
*/
function removeByEle(arr, ele) {
var index = arr.indexOf(ele);
if (index === -1) return;
arr.splice(index, 1);
}
定义 require 方法
之后,定义require 方法。
require 方法用来使用模块,也就是定义一个顶层模块,这个模块不需要被其他模块加载 。define 用来定义模块。
require 可以认为是特殊的 define
关于 require 和define 的不同,可以参见这个回答requirejs中define和require的定位以及使用区别?
/**
* [require 方法,使用一个模块]
* @param {[array]} deps [依赖数组]
* @param {[function]} factory [工厂函数]
*/
requirejs.require = function(deps, factory) {
/**
* 如果是 let module = require("module") 这种形式,那么就调用 use 方法。
*/
if (arguments.length === 1 && typeof deps === "string") {
return use(deps);
}
// 生成随机模块名,方法:
// callback+setTimeout("1");
let moduleNmae = "callback" + setTimeout("1");
context.topModule = moduleNmae;
context.waitings.push(moduleNmae);
// 生成一个模块配置
context.modules[moduleNmae] = {
moduleNmae: moduleNmae,
deps: deps,
factory: factory,
args: [],
returnValue: ""
}
// 递归遍历所有依赖,添加到 `head` 中,并设置 这个节点的一个属性`data-module-name`标识模块名。
deps.forEach(function(dep) {
let depPath = context.baseUrl + dep + ".js";
let scriptNode = document.createElement('script');
scriptNode.setAttribute("data-module-name", dep);
scriptNode.async = true;
scriptNode.src = depPath;
context.waitings.push(dep);
document.querySelector('head').appendChild(scriptNode);
scriptNode.onload = scriptOnload;
})
};
// 最后,把这个方法暴露给`window`
window.require = requirejs.require;
这里又引出一个函数, scriptOnload
,在script 节点加载完成后触发
`` javascript
/**
* [每一个脚本插入head中,都会执行这个事件 。这是事件完成两件事,
* 1. 如果是一个匿名模块加载,那么取得这个匿名模块,并完成模块命名,
* 2. 当节点加载完毕,判断 waitingss 是否为空,
* 如果不为空,返回,
* 如果为空,说明已经全部加载完毕,现在就可以执行所有的工厂函数]
* @param {[object]} e [事件对象]
*/
function scriptOnload(e) {
e = e || window.event;
let node = e.target;
let modeuleName = node.getAttribute('data-module-name');
tempModule.modeuleName = modeuleName;
context.modules[modeuleName] = tempModule;
removeByEle(context.waitings, modeuleName);
context.loadeds.push(modeuleName);
if (!context.waitings.length) {
exec(context.topModule);
}
}
> 由于在define中,我使用匿名模块 。那么在define 定义一个模块的时候,无法知道模块名 。所以先放在一个`临时模块`寄存。
> 在define 执行结束,会立即触发 `onload` 事件,那么 事件对象 `e` 就必然是这个define 正在定义的模块,就可以使用 ·`data-module-name` 取得真正
> 的模块名,此时进行替换就可以了 。
在看 define 如何定义一个模块
## 定义 define 方法
``` javascript
/**
* [define 和 require 做的工作几乎相同,
* 由于RequireJS 是更推崇匿名模块的,所以这里就没有做命名模块
*
* 实现匿名模块
* 需要在这里用一个临时变量作为 doulename 保存,define 函数执行完毕,就会触发onload 事件,这个事件拿到
* 的script节点对象必然就是这个节点,即将模块名该为正真的名字。]
* @param {[array]} deps [依赖数组]
* @param {[function]} factory [工厂函数]
*/
requirejs.define = function(deps, factory) {
// 注意这里使用一个全局临时模块来标识正在加载的模块,之后来 onload 中替换为正真的模块 。
tempModule = {
deps: deps,
args: [],
returnValue: "",
factory: factory
}
// 这里的逻辑和 require 一样,偷个懒,没有封装
deps.forEach(function(dep) {
var script = document.createElement("script");
script.setAttribute("data-module-name", dep);
script.async = true;
script.src = baseUrl + dep + ".js";
document.querySelector("head").appendChild(script);
script.onload = scriptNode;
context.waitings.push(dep);
});
};
window.define = requirejs.define;
执行回调
我们再回到 scriptOnload
函数,每个模块加载完成,就会在 waitings
里面去掉,然后检查 waitings
数组,如果为空,说明全部加载完,
就可以执行 exec
函数,在这里函数中,递归执行所有的回调 。
/**
* [所有模块加载完毕,递归执行工程函数 , 核心方法]
* @param {[string]} moduleNmae [模块名]
*/
function exec(moduleNmae) {
let module = context.modules[moduleNmae];
let deps = module.deps;
let args = [];
deps.forEach(function(dep) {
exec(dep);
args.push(context.modules[dep].returnValue);
});
module.args = args;
module.returnValue = context.modules[moduleNmae].factory.apply(context.modules[moduleNmae], args);
}
最后走到这里,就可以发现 my-require 的核心流程了。
先调用 require
函数和define
函数,将所有的依赖转化为script 节点插入到 dom
中,然后在 每一个 节点的 onload
事件中,将模块作为实体保存起来,并检查所有模块是否加载完成,如果加载完成,递归执行所有回调
。
补充
最后,补充两个方法
/**
* [ 当 形如 var module = require("module"); 这样时,就是用这个函数,最后再使用 require 重载起来,
* 由于这个函数开始执行,那么所有的模块一定都加载完毕了,此时可以不判断waitingss,直接执行 exec ]
* @param {[string]} 'moduleNmae' [模块名]
* @return {[object]} [模块工厂函数的返回值]
*/
function use(moduleNmae) {
let modeule = context.modules[modeuleName];
exec(modeuleName);
return modeule.returnValue;
}
/**
* 配置模块,这里只简单配置 baseUrl
*/
requirejs.config = function(config) {
this.context.baseUrl = config.baseUrl || baseUrl;
}
测试
昨天太懒啦,没有编写复杂的测试,就简单的写了写,
rect.js
'use strict';
// 这里也是一个需要改进的地方,需要判断,没有没有依赖模块
define([], function () {
return {
getArea: function (length) {
return length * length;
},
getPerimeter: function (length) {
return length * 4;
}
}
})
circle.js
'use strict';
define([], function () {
return {
getArea: function (lenth) {
return Math.PI * length * length;
},
getPerimeter: function (length) {
return length * 2 * Math.PI;
}
}
})
02.js
'use strict';
require(["circle","rect"], function(circle,rect) {
console.log("the area of a Circle having radius 5 is :" + rect.getArea(5));
console.log("the perimeter of a Rect having length 5 is :" + circle.getPerimeter(5));
})
index.html
<body>
<script src="../myrequire.js" data-main="02"></script>
</body>
结果
脚本都已经插入到 head 中了
OK
总结
这个图简单地表示了测试程序的流程。(鼠标还在路上,用触摸板画的,太丑了,囧 ...等以后画一个漂亮的换上 。)
这个模块加载器相比于 requirejs还有很多功能没有完成
- 没有实现预加载, 这里
let module = require("module")
只能寻找到已经加载的模块。 - 没有实现定义模块时命名
- 缺少很多配置项
但是,基本的功能已经实现了。
使用RequireJS并实现一个自己的模块加载器 (二)的更多相关文章
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- 【模块化编程】理解requireJS-实现一个简单的模块加载器
在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...
- 一个简单的AMD模块加载器
一个简单的AMD模块加载器 参考 https://github.com/JsAaron/NodeJs-Demo/tree/master/require PS Aaron大大的比我的完整 PS 这不是一 ...
- js 简易模块加载器 示例分析
前端模块化 关注前端技术发展的各位亲们,肯定对模块化开发这个名词不陌生.随着前端工程越来越复杂,代码越来越多,模块化成了必不可免的趋势. 各种标准 由于javascript本身并没有制定相关标准(当然 ...
- RequireJS 是一个JavaScript模块加载器
RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...
- SeaJS:一个适用于 Web 浏览器端的模块加载器
什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...
- 构建服务端的AMD/CMD模块加载器
本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言: 在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...
- JavaScript AMD 模块加载器原理与实现
关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...
随机推荐
- 高级类特性----接口(intertface)
接 口 有时必须从几个类中派生出一个子类,继承它们所有的属性和方法.但是,Java不支持多重继承.有了接口,就可以得到多重继承的效果. 接口(interface)是抽象方法和常量值的定义的集合. 从本 ...
- Extjs学习笔记--(一vs增加extjs智能感知)
1,编写class.js var classList=[ "Ext.layout.container.Absolute", "Ext.layout.container.A ...
- ZooKeeper(八)-- Curator实现分布式锁
1.pom.xml <dependencies> <dependency> <groupId>junit</groupId> <artifactI ...
- cocos2d-x游戏引擎核心之三——主循环和定时器
一.游戏主循环 在介绍游戏基本概念的时候,我们曾介绍了场景.层.精灵等游戏元素,但我们却故意避开了另一个同样重要的概念,那就是游戏主循环,这是因为 Cocos2d 已经为我们隐藏了游戏主循环的实现.读 ...
- 《C++ Primer Plus》10.2 抽象和类 学习笔记
10.2.1 类型是什么基本类型完成了下面的三项工作:* 决定数据对象需要的内存数量:* 决定如何解释内存中的位(long和float在内存中占用的位数相同,但是将它们转换为数值的方法不同):* 决定 ...
- Mybatis中的if test 标签
<if test='patrolResult != null and patrolResult != "" and patrolResult !="1"' ...
- php实现注册审核功能
本章主要实现注册之后审核通过的功能,共这几部分组成: 1. 创建数据库:mydb数据库的user表 注:isok判断是否通过审核,1为通过,0为未通过. 显示效果: 2.首先做注册界面:zhuce ...
- css3-巧用选择器 “:target”
今天(昨天)又发现一个知识盲区 css3的:target标签,之前学习的时候就是一眼扫过,说是认识了,但其实也就记了三分钟,合上书就全忘光了. 直到昨天,遇到一个有意思的题目,用css3新特性做一个类 ...
- Android ImageResizer:inSampleSize
import android.annotation.TargetApi; import android.content.Context; import android.content.res.Reso ...
- Java可视化JVM监控软件
jdk自带.jdk安装目录下 1.JConsole 选择 不安全 可用不多 2.VisualVM