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的内部实现是一个线程池,所有提交的异步任务都会在这个线程池中的工作线 ...
随机推荐
- 关于jquery文件上传插件 uploadify 3.1的使用
要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要 ...
- C++之易混淆知识点四---虚函数与虚继承
C++面向对象中,虚函数与虚继承是两个完全不同的概念. 一.虚函数 C++程序中只要类中含有虚拟函数,编译程序都会为此类生成一个对应的虚拟函数跳转表(vtbl),该虚拟函数跳转表是一个又若干个虚拟函数 ...
- ES6 | ES6新语法 在编码实践中的应用
本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了 ...
- DataBaseFactory基础了解
<add name="Connection str" connectionString="data source=.;pwd=12;uid=sa;database ...
- Python学习——爬虫篇
requests 使用requests进行爬取 下面是我编写的第一个爬虫的脚本 import requests # 导入reques ...
- HDU 1213 How Many Tables【并查集】
解题思路:和畅通工程类似,问最后还剩下几个不连通的区域. How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...
- MySQL ERROR 1366(HY000) Incorrect string value
有以下两张表: mysql> show tables; +---------------+ | Tables_in_old | +---------------+ | book | | pres ...
- HDU 1005 Number Sequence(找规律)
链接:传送门 题意:略 思路:f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7 -> f(n) = (A * f(n-1)%7 + B * f(n-1)%7) ...
- layui select change
<select lay-filter="test"></select> layui.use([ 'form'], function() { var form ...
- php中mysqli 处理查询结果集总结
在PHP开发中,我们经常会与数据库打交道.我们都知道,一般的数据处理操作流程为 接收表单数据 数据入库 //连接数据库 $link = mysqli_connect("my_host&quo ...