requireJS实现原理分析
下面requireJS实现的基本思路 项目地址https://github.com/WangMaoling/require
var require = (function(){
//框架版本基本信息
var __BASEINFO__ = {
__VERSION__ : "1.0.1",
__AUTHORS__ : "WANGMAOLING",
__GIT__ : "... "
};
// 设置默认路径
var __DEFAULTS__ = {
// 配置个常量 module_script 里面为用户自定义的js 把用户写的给包起来
__EXPORTS__ : "(function(){var exports;{{module_script}};return exports;})();",
main : "index.js",//默认入口文件
path : "./node_module/"//默认路径
};
var __PROTOTYPE__ = {
// 获取版本信息
version : function(){
return this.__VERSION__;
},
// 单独写个函数写文件路径,为了日后改起来方便
file : function(module){
// 改变this指向的方法
return this.path+module+"/"+this.main;
},
load : function(module){
//ajax 请求js内容 并想办法吧内容包装到闭包里面return出去,这样避免全局污染
// (function(){var exports;{{module_script}}return exports;})();
var oAjax = null;
var _this = this;
var _exports_ = null;//定义导出的对象,给个空
var url = this.file(module);
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
oAjax.onreadystatechange = function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
// 把module_script 替换为相应过来的文件内容
var _module_ = _this.__EXPORTS__.replace("{{module_script}}",oAjax.responseText);
_exports_ = eval(_module_);//执行以下 获取执行结果
// console.log(_exports_);
}
}
}
// oAjax.open('GET', url, true);true 表示 ajax为异步请求,这里这样会报错,因为当页面请求返回时
//_exports_还明没有响应过来 所以会返回null,所以要变成同步,一个执行完接着在执行
oAjax.open('GET', url, false);
oAjax.send();
// console.log(_exports_);
return _exports_;//返回执行后的结果,当调用 load 的时候就会返回结果
// this.path+module+"/"+this.main;
// console.log(this.file(module));
}
};
//整个放在闭包里面,因为其他插件也有的有require 万一有冲突 只需改变最外面的名字即可;
var __require = function(module){
//调用load 改变this指向 写call方法只是为了加强理解 下面也可以 __require.load(module) 这样写
// 当调用 __require的时候也就调用了 load 把结果返回出去
return __require.load.call(__require,module);
// console.log(this.path);
}
// 配置require全局参数
__require.config = function(options){
this.extend(options);
// console.log(this.path);
}
// 扩展require函数对象的功能 或许有多个参数传进来 这里用了arguments
__require.extend = function(){
for(var i=0;i<arguments.length;i++){
var obj = arguments[i];
for(var prop in obj){
this[prop] = obj[prop];
}
}
}
// 继承扩展 通过extend方法吧下面两个方法里面的属性方法 全部赋给了require
__require.extend(__BASEINFO__,__DEFAULTS__,__PROTOTYPE__);
return __require;
})();
requireJS实现原理分析的更多相关文章
- browserify运行原理分析
目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的script脚本中引入所用js就可以了. 但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以n ...
- Handler系列之原理分析
上一节我们讲解了Handler的基本使用方法,也是平时大家用到的最多的使用方式.那么本节让我们来学习一下Handler的工作原理吧!!! 我们知道Android中我们只能在ui线程(主线程)更新ui信 ...
- Java NIO使用及原理分析(1-4)(转)
转载的原文章也找不到!从以下博客中找到http://blog.csdn.net/wuxianglong/article/details/6604817 转载自:李会军•宁静致远 最近由于工作关系要做一 ...
- 原子类java.util.concurrent.atomic.*原理分析
原子类java.util.concurrent.atomic.*原理分析 在并发编程下,原子操作类的应用可以说是无处不在的.为解决线程安全的读写提供了很大的便利. 原子类保证原子的两个关键的点就是:可 ...
- Android中Input型输入设备驱动原理分析(一)
转自:http://blog.csdn.net/eilianlau/article/details/6969361 话说Android中Event输入设备驱动原理分析还不如说Linux输入子系统呢,反 ...
- 转载:AbstractQueuedSynchronizer的介绍和原理分析
简介 提供了一个基于FIFO队列,可以用于构建锁或者其他相关同步装置的基础框架.该同步器(以下简称同步器)利用了一个int来表示状态,期望它能够成为实现大部分同步需求的基础.使用的方法是继承,子类通过 ...
- Camel运行原理分析
Camel运行原理分析 以一个简单的例子说明一下camel的运行原理,例子本身很简单,目的就是将一个目录下的文件搬运到另一个文件夹,处理器只是将文件(限于文本文件)的内容打印到控制台,首先代码如下: ...
- NOR Flash擦写和原理分析
NOR Flash擦写和原理分析 1. NOR FLASH 的简单介绍 NOR FLASH 是很常见的一种存储芯片,数据掉电不会丢失.NOR FLASH支持Execute On Chip,即程序可以直 ...
- 使用AsyncTask异步更新UI界面及原理分析
概述: AsyncTask是在Android SDK 1.5之后推出的一个方便编写后台线程与UI线程交互的辅助类.AsyncTask的内部实现是一个线程池,所有提交的异步任务都会在这个线程池中的工作线 ...
随机推荐
- Laravel-事件简单使用
Laravel-事件简单使用 标签(空格分隔): php, laravel 注册事件和监听器 生成事件和监听器:php artisan event:generate key => 事件 valu ...
- BZOJ 3729 splay维护DFS序+博弈论
思路: 这像是 阶梯Nim之类的东西 我们 直接把sg函数 设成mod(L+1)的 一棵子树 向下的奇数层上的石子xor起来 就是答案 有加点和改值的操作 就splay维护一下 //By Sirius ...
- Swagger中添加Token验证
1.该连接链接到api中基本的swagge功能:http://www.cnblogs.com/hhhh2010/p/5234016.html 2.在swagger中使用验证(这里使用密码验证模式)ht ...
- HTML5 CSS3面试题
一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...
- 多线程与MySQL(十)
1.1 多线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...
- Element-ui组件--pagination分页的使用
一般在写前端页面时,经常会遇到分页这样的效果,element-ui中便有这样的插件,用vue框架使用的很方便,在此做一总结: <template> <div class=" ...
- ndis6 how to drop packets
In ndis6 how to drop packets? in FilterSendNetBufferLists: FILTER_RELEASE_LOCK(&pFilter->Lock ...
- 快速搭建golden gate环境
准备操作系统用户和文件系统 准备安装和运行用户(操作系统用户) 建议使用Oracle用户 也可使用新建用户,但需做以下配置 该用户必须加入到oinstall组 该用户使用与oracle相同的profi ...
- struts2中各个jar包的具体作用
-----------------------------------struts2的核心包-------------------------------------- struts2-core-2. ...
- CDR入门教程-CorelDRAW排版教程
CorelDRAW是一个绘制矢量图,排版的软件.今天给大家带来一片教程就是关于排版的.大家快来试试吧. CDR下载:http://pan.baidu.com/s/1cD4buQ 步骤一:新建一个A4文 ...