首先，我们先来简单说一下，require.js的原理：

　　　　1、载入模块


　　　　2、通过模块名解析出模块信息，以及计算出URL


　　　　3、通过创建SCRIPT的形式把模块加载到页面中。


　　　　4、判断被加载的脚本，如果发现它有依赖就去加载依赖模块。如果不依赖其它模块，就直接执行factory方法

　　　　
5、等所有脚本都被加载完毕就执行加载完成之后的回调函数。

　　从今天起，我们跟着我们简单的例子，通过跟踪代码，来了解require.js的源码。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <!-- 引入require.js -->

     <script data-main="./test.js" src="./require.js"></script>

     </script>

     <script>

     require(['a', 'b'], function(a, b) {

         a.printA();

         b.printB();

     });

     </script>

 </head>

 <body>

 </body>

 </html>

　　执行网页时，如果需要使用require.js作为模块加载器时，我们首先需要引入require.js。

 <!-- 引入require.js -->

 <script data-main="./test.js" src="./require.js"></script>
 // a.js

 define(function() {

     return {

         printA: console.log("I am A")

     }

 });

 // b.js

 define(function() {

     return {

         printB: console.log("I am B")

     }

 });

　　打开require.js文件我们可以发现，文件中首先定义了三个全局变量，之后便是一个自执行函数。因此在加载require.js文件时，自动执行自执行函数中的内容。

 var requirejs, require, define;

 (function(global, setTimeout) {

     // 此处省略...

 }(this, (typeof setTimeout === 'undefined' ? undefined : setTimeout)));

　　首先我们，可以将require.js分为三个部分，

　　　　1）定义全局变量和帮助函数

　　　　2）模块加载核心部分

　　　　3）定义require和define两个方法，以及项目入口。

　　如果我们使用跟踪代码的话，会发现文件一直都在定义变量和方法，一直执行到req({});这个语句调用req方法，传入一个空对象作为参数，用于创建一个默认上下文。现在我们跟踪代码，简单了解如何创建一个默认上下文。执行下面这段代码

 req = requirejs = function(deps, callback, errback, optional) {

     // 此时传入的参数时空对象

     //Find the right context, use default

     var context, config,

         contextName = defContextName; // 默认上下文名为_

     // Determine if have config object in the call.

     // 此时传入一个空对象作为配置对象

     if (!isArray(deps) && typeof deps !== 'string') {

         // deps is a config object

         config = deps;

         if (isArray(callback)) {

             // Adjust args if there are dependencies

             deps = callback;

             callback = errback;

             errback = optional;

         } else {

             deps = [];

         }

     }

     // config为空对象，没有设置context属性，因此不设置上下文名

     if (config && config.context) {

         contextName = config.context;

     }

     // getOwn函数：帮助函数，用于获取对象中对应属性的值，此时返回值为undefined

     context = getOwn(contexts, contextName);

     if (!context) {

         /*

             s = req.s = {

                 contexts: contexts,

                 newContext: newContext

             };

         */

         // 初始化时，执行下面这段代码，调用req.s中的newContext方法创建默认上下文

         // newContext方法时require.js的核心，此时我们只需要了解，它创建了一个默认上下文

         // 并且这个函数，只执行一次，之后的上下文，都是通过闭包，在闭包中，修改默认上下文的信息

         // 保存自己的上下文信息

         context = contexts[contextName] = req.s.newContext(contextName);

     }

     // 此时config为空对象，执行configure方法几乎没什么作用

     if (config) {

         context.configure(config);

     }

     // 跟踪代码可以发现调用context.require=>context.makeRequire()=>localRequire

     // context.require = context.makeRequire();

     // function localRequire(deps, callback, errback)

     // 返回一个localRequire

     return context.require(deps, callback, errback);

 };

　　到这里，以及完成了context初始化。

　　然后继续执行require({});下面的语句

 // 重置列出的函数

 //Exports some context-sensitive methods on global require.

 each([

     'toUrl',

     'undef',

     'defined',

     'specified'

 ], function(prop) {

     //Reference from contexts instead of early binding to default context,

     //so that during builds, the latest instance of the default context

     //with its config gets used.

     req[prop] = function() {

         var ctx = contexts[defContextName];

         return ctx.require[prop].apply(ctx, arguments);

     };

 });

 // 获取添加脚本的父亲节点

 if (isBrowser) {

     head = s.head = document.getElementsByTagName('head')[0];

     //If BASE tag is in play, using appendChild is a problem for IE6.

     //When that browser dies, this can be removed. Details in this jQuery bug:

     //http://dev.jquery.com/ticket/2709

     baseElement = document.getElementsByTagName('base')[0];

     if (baseElement) {

         head = s.head = baseElement.parentNode;

     }

 }

　　以上仅仅是创建了默认上下文，并进行简单的处理。

require.js 源码解读——配置默认上下文的更多相关文章

  1. js便签笔记（10） - 分享：json2.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  2. js便签笔记（10） - 分享：json.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  3. fastclick.js源码解读分析

    阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生 ...

  4. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...

  5. prototype.js 源码解读（02）

    如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype ...

  6. Mybatis源码解读-配置加载和Mapper的生成

    问题 Mybatis四大对象的创建顺序? Mybatis插件的执行顺序? 工程创建 环境:Mybatis(3.5.9) mybatis-demo,参考官方文档 简单示例 这里只放出main方法的示例, ...

  7. prototype.js 源码解读（01）

    prototype.js是一个设计的非常优雅且很有实用价值的js基础类库,其源码非常值得研究.研究它的源码不仅能提升个人水平,而且对你打下坚实的js基础也很有帮助.因本人技术水平有限,该解读仅供参考. ...

  8. Require.js 源码分析

    本文将简单介绍下个人对require.js的源码分析,简单分析实现原理 一.require加载资源的流程 require中,根据AMD(Asynchronous Module Definition)的 ...

  9. json2.js源码解读记录

    相关内容:json详细用法.js语法.unicode.正则   json特点--最简单.最小巧的经典js库.   json作者:道克拉斯.克劳福德(Douglas Crockford)--js大牛 出 ...

随机推荐

  1. canvas绘制圆形进度条（或显示当前已浏览网页百分比）

    使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...

  2. mybatis入门-第一个程序

    今天,我们就一起来完成mybatis的第一个小demo,使用mybatis对我们的数据库进行一个小小的操作. 需求 根据用户id查询用户的信息. 环境搭建 java环境:jdk1.7版本 开发工具:e ...

  3. matlab和C语言的break及continue测试

    break和continue语句 有两个附加语句可以控制while和for循环:break和continue语句.break语句可以中止循环的执行和跳到end后面的第一句执行,而continue只中止 ...

  4. Gulp自动构建Web前端程序

    这两天在一个朋友在项目上碰到了一个这样的问题,在运营过程中,用户在浏览器上对某个表单进行数据提交时,需要引入新的平台接口数据的业务,通过评估,开发团队马上修改了相关后台代码和部分的前端脚本代码,通过简 ...

  5. 2013~2014年度 NOIP~GDOI总结

    滚回去撸一年中考撸完之后就迎来了NOIP2013（话说初赛差点被坑了有木有= =）想想当年10月还是那样的天真的去了广州，结果就被虐成翔的回来了= =只做了三道签到题的渣渣就是弱= =DAY1T2死活 ...

  6. UU农场平台开发 UU农场拆复利系统

    UU农场平台开发 UU农场拆复利系统今年比较新的一款游戏,类似于QQ农场,但又加入了很多新型的互联网理财模式!UU农场平台开发 UU农场拆复利系统.UU农场开发.UU农场游戏平台开发.UU农场平台开发 ...

  7. 启动APEX

    --  查看数据库参数 SQL>  select * from nls_database_parameters; -- 查看数据库基本信息 SQL>  select * from v$da ...

  8. AR入门系列-03-在unity中将调试好的Vuforia项目导出为APK

    先设置build settings 选中Android后点击Player Settings Product Name设置安装后的Android程序的名字 Bundle Identifier 设置apk ...

  9. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

  10. linux中添加环境变量（python为例）

    最近想用Django搭建个人博客,之前学了些python基础语法,准备边学习Django边实战操作.自己有一个阿里云服务器,用的centOS,自带的是python2.7版本,我直接安装了python3 ...