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的内部实现是一个线程池,所有提交的异步任务都会在这个线程池中的工作线 ...
随机推荐
- hdoj--2122--Ice_cream’s world III(克鲁斯卡尔)
Ice_cream's world III Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- Java-MyBatis-杂项: MyBatis 中 in 的用法2
ylbtech-Java-MyBatis-杂项: MyBatis 中 in 的用法2 1.返回顶部 1. 一.简介 在SQL语法中如果我们想使用in的话直接可以像如下一样使用: select * fr ...
- Docker私服仓库Harbor安装
Harbor安装那里还是很简单,就是在Docker Login那里掉坑里去了,搞半天,写博客的时候,又重新安装了一遍 1.准备两台服务器 centos7 harbor 10.19.46.15 clie ...
- 36.QT地图
widget.h #ifndef MAPWIDGET_H #define MAPWIDGET_H #include <QGraphicsView> #include <QLabel& ...
- Kylin基础教程(二)
近期先把Kylin教程整理完毕,后续根据大家需求(可能会发起投票),整理其他技术栈知识教程. OK,那么接上一篇文章,感性认知了Kylin之后,我们先来看一下如何部署Kylin吧. 序号也依然沿用上一 ...
- vue-router 设置默认路由
加入 {path: '/', redirect: 'ratings'},vue 1.0版本版本使用go,但是在2.0中是用router.go(‘/ratings’);会一直刷新
- Django框架详解之url
Django基本命令 下载Django pip3 install django 创建一个django project django-admin.py startproject cms 当前目录下会生成 ...
- Pyhton学习——Day34
# 任何语言都会发生多线程,会出现不同步的问题,同步锁.死锁.递归锁# 异步: 多任务, 多个任务之间执行没有先后顺序,可以同时运行,执行的先后顺序不会有什么影响,存在的多条运行主线# 同步: 多任务 ...
- WePy--记录使用过程中的一些坑
讲真, 官方文档还是要好好看, 都是细节啊... 1- 使用wepy框架中封装好的小程序api <wepy 对小程序的API进行Promise处理> ①: 首先需要声明 开启使用we ...
- Node.js 指南(迁移到安全的Buffer构造函数)
迁移到安全的Buffer构造函数 移植到Buffer.from()/Buffer.alloc() API. 概述 本指南介绍了如何迁移到安全的Buffer构造函数方法,迁移修复了以下弃用警告: 由于安 ...