(一)requireJs 的整体结构: requireJS 源码 前192行,是一些 变量的声明,工具函数的实现 以及 对 三个全局变量(requirejs,require,define)若被占用后的具体处理.     从 194行到 1674行,整整 1480行,是 实例化上下文 函数 newContext() . 在 在req({ } ) 调用时执行 newContext函数,而且只会执行一次. 从1690行开始,便是对外API  require/requirejs/define  的具体实…

引言 俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究了一天前端模块化的问题,先是大概了解了下模块化的标准规范,然后了解了一下 RequireJs 的语法和使用方法,最后研究了下 RequireJs 的设计模式和源码,所以想记录一下相关的心得,剖析一下模块加载的原理. 一.认识 RequireJs 在开始之前,我们需要了解前端模块化,本文不讨论有关前端…

上一篇 requirejs源码分析: requirejs 方法–1. 主入口  中的return context.require(deps, callback, errback);  调用的是makeRequire方法中的localRequire   function localRequire(deps, callback, errback) {     var id, map, requireMod;     if (options.enableBuildCallback && call…

写在前面: 最近做的一个项目,用的require和backbone,对两者的使用已经很熟悉了,但是一直都有好奇他们怎么实现的,一直寻思着读读源码.现在项目结束,终于有机会好好研究一下. 本文重要解读requirejs的源码,backbone源码分析将会随后给出. 行文思路: requirejs 基本介绍 requirejs使用后的几个好奇 requirejs源码解读 requirejs基本介绍 由于篇幅有限,这里不会详解requirejs的使用和api,建议读者朋友自己去用几次,再详读api.…

前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整体框架结构,顺便看看之前的简单demo RequireJS学习笔记 程序入口 源码阅读仍然有一定门槛,通看的做法不适合我等素质的选手,所以还是得由入口开始,requireJS的入口便是引入时候指定的data-main <script src="require.js" type=&qu…

前言 经过昨天的学习,我们大概了解到了requireJS的主要结构,这里先大概的回顾一下 首先从总体结构来说,require这里分为三块: ① newContext之前变量声明或者一些工具函数 ② newContext大家伙 ③ 解析script标签抽出data-main,并提供几个对外接口 从流程上讲,大概发生了这些事情: ① script标签引入requireJS后,便会初始化一些变量以及函数,并不干实际的事情 ② 在主干结构第三步之前会使用req({})调用(并且只会调用一次)newCon…

前两天跟着叶小钗的博客,看了下RequireJS的源码,大体了解了其中的执行过程.不过在何时进行依赖项的加载,以及具体的代码在何处执行,还没有搞透彻,奈何能力不够,只能先记录一下了. RequireJS的初探 看源码从头开始看,肯定是不切实际的.按照叶小钗的方法,是从data-main开始的,所以我们也从那里开始把! 首先,页面会有一段js标签,会去加载requirejs: <script data-main="test.js" src="lib/require.js&…

1. 没有设置baseUrl(一般我们都会设置baseurl)        在没有设置baseUrl时, 默认  baseurl: "./"        当指定data-main时.  <script src="require.js" data-main="js/main.js"></script>. 将从data-main提取目录路径作为 baseurl,这里就是js/.  所有这里需要注意这里不能分成两个<s…

该方法是 主要的入口点 也是最常用的方法. req = requirejs = function (deps, callback, errback, optional) { //Find the right context, use default        var context, config,            contextName = defContextName; //这里判断当前的require是否为config请求        //deps不是数组   和    字符串…

shim处理的源码: //Merge shim                 if (cfg.shim) {                     eachProp(cfg.shim, function (value, id) {                         //shim 为数组类型, 很少用.                         //一般为 对象类型                         //Normalize the structure     …