一个极为简单的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服务 ...
随机推荐
- 3676: [Apio2014]回文串
3676: [Apio2014]回文串 Time Limit: 20 Sec Memory Limit: 128 MB Submit: 1740 Solved: 744 [Submit][Status ...
- (第五场)J plan 【贪心】
题目链接:https://www.nowcoder.com/acm/contest/143/J 题目描述 There are n students going to travel. And hotel ...
- Android学习笔记_39_tween动画的实现(Animation和Frame)
一.Animation动画的实现及特点: 1.Tween动画,通过对 View 的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果. 动画效果的定义可以采用XML来做也 ...
- CSU-ACM2018暑假集训比赛1
A:https://www.cnblogs.com/yinbiao/p/9365127.html B:https://www.cnblogs.com/yinbiao/p/9365171.html C: ...
- LeetCode11.盛最多水的容器 JavaScript
给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...
- Python 学习笔记(七)Python字符串(一)
字符串 字符串或串(String)是由数字.字母.下划线组成的一串字符,用双引号或单引号包裹的为字符串 1 >>> "hello world" 2 'hello ...
- RMAN备份与恢复(三)--备份相关概念
(1)备份对象 可以使用RMAN进行的备份对象如下: --整个数据库:备份所有的数据文件和控制文件: --数据文件:备份指定的一个或多个数据文件: --表空间:备份指定的一个或多个表空间: --归档重 ...
- order by 排序
[order by] 排序 asc 升序(从小到大),desc降序(从打到小) 语法: select 列名 from 表 where 条件 order by 列1,列2 asc或d ...
- c#总结最近的几项重要代码
java的代码就不说了,毕竟不是我的主业. 1.c#数据库连接池Hikari. (1)动态加载各类数据库驱动 (2)支持简单配置文件 (3)支持按照名称多数据库调用 (4)使用简洁 单数据库使用: H ...
- c#一种存储结构解决动态平衡问题
不说其他了,最近为了实现这么一个场景了而提取的一种结构.我们把一种数据缓存,比如开辟的存储Buffer,或者连接池.放置在一个结构中.很多时候这有一个共同的特点,我们的业务在一段时间会急剧增长,我们开 ...