一个极为简单的requirejs实现
require和 sea的源码分析,我之前的博客有写过, 今天我想分享的是一个很简单的核心代码(不带注释和空行大概60行), 没有容错判断。
require.js
require函数实现用一句话概括:
依次加载require的模块,然后监测script的onload事件,判断所有模块加载成功,执行require的callback, 如果只带一个参数且不是数组,就是加载成功后return 模块。
//标记已经加载成功的个数
var REQ_TOTAL = 0;
//模块导出
window.exports = {};
//记录各个模块的顺序
var exp_arr = []; //判断是否数组
function isArray(param) {
return param instanceof Array;
} //require 真正实现
function require(arr, callback) { var req_list; if(isArray(arr)) {
req_list = arr;
} else {
req_list = [arr];
}
var req_len = req_list.length; //模块逐个加载
for(var i=0;i<req_len;i++) {
var req_item = req_list[i]; var $script = createScript(req_item, i); var $node = document.querySelector('head'); (function($script) {
//检测script 的onload事件
$script.onload = function() {
REQ_TOTAL++; var script_index = $script.getAttribute('index'); exp_arr[script_index] = exports; window.exports = {}; //所有链接加载成功后,执行callback
if(REQ_TOTAL == req_len) {
callback && callback.apply(exports, exp_arr); } } $node.appendChild($script);
})($script); } } //创建一个script标签
function createScript(src, index) {
var $script = document.createElement('script'); $script.setAttribute('src', src);
$script.setAttribute('index', index); return $script;
}
然后写了2个导出模块的js文件, 只写了最简单的exports实现
define.js
exports.define = {
topic: 'my export',
desc: 'this is other way to define ',
sayHello: function() {
console.log('topic ' + this.topic + this.desc);
}
}
define2.js
exports.define = {
name: 'xm',
age: 22,
info: function() {
console.log('topic ' + this.name + this.age);
}
}
然后测试demo很简单
//测试demo
require(['../res/define.js', '../res/define2.js'], function(def, def2) {
def.define.sayHello(); def2.define.info();
});
demo地址 :https://skyweaver213.github.io/requirejs-demo/example/dev/demo.html
github地址:https://github.com/skyweaver213/requirejs-demo
打开console,看到如下结果
一个极为简单的requirejs实现的更多相关文章
- 一个极为简单的方法实现本地(离线)yum安装rpm包
首先,我要关心的问题仍然是如何离线或者本地yum安装rpm包?这其中的关键当然是获取rpm包到本地,这其中的麻烦事是去解析依赖关系.然而,我发现一个极为简单的方法可以不用操心rpm包依赖关系,不多不少 ...
- [.NET] 打造一个很简单的文档转换器 - 使用组件 Spire.Office
打造一个很简单的文档转换器 - 使用组件 Spire.Office [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6024827.html 序 之前,& ...
- IoC原理-使用反射/Emit来实现一个最简单的IoC容器
从Unity到Spring.Net,到Ninject,几年来陆陆续续用过几个IoC框架.虽然会用,但也没有一直仔细的研究过IoC实现的过程.最近花了点时间,下了Ninject的源码,研究了一番,颇有收 ...
- 【最简单IOC容器实现】实现一个最简单的IOC容器
前面DebugLZQ的两篇博文: 浅谈IOC--说清楚IOC是什么 IoC Container Benchmark - Performance comparison 在浅谈IOC--说清楚IOC是什么 ...
- 一个js简单的日历显示效果的函数
用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格table生成,分成两个部分. 第一个部分:就是前面的第一排,我用一行<t ...
- [编译] 1、第一个makefile简单例子
前言 本篇用一个最简单的例子引入makefile,教你编写第一个makefile 正文 在Download/aa文件夹下有a.c和makefile文件 litao@litao:~/Downloads/ ...
- Windows下用Codeblocks建立一个最简单的DLL动态链接库
转自:http://blog.csdn.net/wangwei_cq/article/details/8187576 来源:http://hi.baidu.com/hellosim/item/9ae4 ...
- 用qpython3写一个最简单的发送短信的程序
到目前为止并没有多少手机应用是用python开发的,不过qpython可以作为一个不错的玩具推荐给大家来玩. 写一个最简单的发送短信的程序,代码如下: #-*-coding:utf8;-*- #qpy ...
- linux搭建一个配置简单的nginx反向代理服务器 2个tomcat
1.我们只要实现访问nginx服务器能跳转到不同的服务器即可,我本地测试是这样的, 在nginx服务器里面搭建了2个tomcat,2个tomcat端口分别是8080和8081,当我输入我nginx服务 ...
随机推荐
- QT隐含共享类 QSharedData QSharedDataPointer
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/davidsu33/article/details/28857391 QT中非常多类都实现了隐含共享比 ...
- apache 配置跨域访问
在httpd.conf找到 去掉# LoadModule headers_module modules/mod_headers.so 然后在 独立域名配置 加入 Header set Access- ...
- ASP.NET整体运行机制+asp.net请求管道+页面生命周期+MVC整体运行机制原理图
在网上找的,个人感觉很好的
- 【洛谷P2324】[SCOI2005]骑士精神
骑士精神 题目链接 #include<iostream> #include<cstdio> using namespace std; int t,MAXD,sx,sy; ][] ...
- eclipse 安装/卸载插件
1.通过Help>>Install New Soft 之后弹出对话框,可以通过“Add”按钮添加已经有的插件的(zip等)或者输入安装地址,之后按照要求即可.2.对于安装失败的插件,再次进 ...
- HDU 1216 Assistance Required(暴力打表)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1216 Assistance Required Time Limit: 2000/1000 MS (Ja ...
- 数据库——MySQL——权限管理
关于MySQL的权限管理,可以理解为是MySQL运行你做的事情.比如MySQL允许你执行select操作那么你就不能用update操作.如果你让你在某台机器上连接MySQL,那么你就不能在这个机器以外 ...
- Python常用模块之os和sys
1.OS常用方法 os.access(path, mode) # 检验权限模式 os.getcwd() #获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirn ...
- [HAOI2010]软件安装(树形背包,tarjan缩点)
题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最大). 但是 ...
- BZOJ2754: [SCOI2012]喵星球上的点名(AC自动机)
Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 2816 Solved: 1246[Submit][Status][Discuss] Descript ...