之所以学习RequireJS,肯定对 模块化有一定的理解。这里有几篇学习 RequireJS的文章,推荐给大家去学习。

  1. Javascript模块化编程(一):模块的写法
  2. Javascript模块化编程(二):AMD规范
  3. Javascript模块化编程(三):require.js的用法 【require的使用,paths,baseUrl,shim 以及 deps,exports】
  4. ~~~~~~~~~~~~~上面这三篇是阮一峰老师的文章,【简单易懂】~~~~~~~~~~~~~~~~
  5. 但是对 requirejs 讲的内容,感觉少了点东西
  6. 快速理解RequireJs 【看后面作者遇到的坑,以及 shim 中的 init 方法】

总结:【只需要了解几个属性就可以用起来啦】【源码】github 源码

    1. 参数1:依赖的模块,数组形式,

      参数2:回调函数,参数:跟每个 依赖模块exports的对象顺序是一致的

      require(['module1','module2'],function(){
      //TODO:
      })
require.config({
baseUrl:' ' ,
paths:{ ' jquery' : 'lib/jquery' },
shim:{ }
})
  1. 什么叫AMD规范,如何编写AMD规范的脚本
    1. define([依赖的模块],function(){
          //TODO: 自己想写的方法,或者属性,但是要对外输出,则需要有一个 return, return 出来的,其他模块可以拿来用
      })

详细:【相对详细一点,哈】

学习了上面的几篇文章之后,尝试做了一个实践了一下,来理解如何使用RequireJS,其实真的不难。

  1. RequireJS是基于AMD来实现的
    1. 什么事AMD,是什么CommonJS?
    2. CommonJS 【针对服务端】
      1. Node作为一个服务端语言,如果没有模块化的化,根本没办法进行复杂性的编程。
      2. So,NodeJS就参照了 CommonJS规范实现了 模块系统
      3. CommonJS中 有一个全局方法 require,来加载模块

    3. AMD 【有了服务端的,当前也要有前端的】
      1. 为什么不用CommonJS,而还需要去选AMD呢?
        1. 因为CommonJS不适用于浏览器端,因为JS脚本,来自服务端,请求脚本到浏览器需要时间,如果等待加载完,在执行下一步,那么整个页面渲染就卡住了,应用就停住了。
        2. So,浏览器端不能用  同步加载 , 而要用 异步加载。
      2. AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"
      3. 异步加载AMD
        1. 异步加载模块的话,那么就存在一个问题了,如果像CommonJS只有一个参数,那么肯定是不行的,因为怎么知道它什么时候加载完啊。
        2. So, 浏览器端,还需要一个  回调函数
        3. 这边有两个参数,第一个参数是一个数组,表示依赖的模块回调函数参数,跟依赖模块的数组顺序必须是一致的。
  2. 每次加载模块,总要输入相对路径,或者绝对路径,长长的一大串,坑爹啊,如果多个地方调用了,那后期文件修改了位置,那岂不是修改到吐?
    1. So,paths 就是必须的,跟模块取一个别名
  3. 啥,你说你的JS模块文件,都是 某个指定的路径下?  baseUrl 就出来了
  4. 我要是早期脚本,不是按照AMD来写的,那肿么办呢?  shim 属性
    1. 符合AMD规范的,可以直接requirejs 进来使用,但是不符合 AMD规范的,则需要配置 shim 属性和shim中的 exports属性
    2. 如果不符合AMD规范的,还依赖其他控件,需要配置 shim属性里面的 deps 属性

【模块化】 RequireJS入门教程总结与推荐的更多相关文章

  1. Node入门教程(6)第五章:node 模块化(上)模块化演进

    node 模块化 JS 诞生的时候,仅仅是为了实现网页表单的本地校验和简单的 dom 操作处理.所以并没有模块化的规范设计. 项目小的时候,我们可以通过命名空间.局部作用域.自执行函数等手段实现变量不 ...

  2. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  3. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  4. 推荐 VS2010入门教程—鸡啄米

    http://www.jizhuomi.com/catalog.asp?tags=VS2010 推荐 VS2010入门教程—鸡啄米,真的非常使用和经典!

  5. 《Delphi XE6 android 编程入门教程》推荐

    近5.6年已经没有看见关于delphi的新技术的书出来了(看来在国内delphi的使用量确实很低了), 高勇同学最近出了一本<Delphi XE6 android 编程入门教程>,上周刚拿 ...

  6. React JS快速入门教程

    翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...

  7. RequireJS 入门指南

    RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...

  8. SeaJS入门教程系列之使用SeaJS(二)

    SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...

  9. 《JavaScript语言入门教程》记录整理:面向对象

    目录 面向对象编程 实例对象与 new 命令 this关键字 对象的继承 Object对象的方法 严格模式(strict mode) 本系列基于阮一峰老师的<JavaScrip语言入门教程> ...

随机推荐

  1. api.execScript

    在指定 window 或者 frame 中执行脚本,对于 frameGroup 里面的 frame 也有效,若 name 和 frameName 都未指定,则在当前 window 中执行脚本,具体执行 ...

  2. wpf中应该使用c#四种定时器中的DispatcherTimer

    c#中有四种定时器 1:System.Threading.Timer 使用: private System.Threading.Timer timerClose; timerClose = new S ...

  3. 使用引用类型变量来访问所引用对象的属性和方法时,Java 虚拟机绑定规则

    通过引用类型变量来访问所引用对象的属性和方法时,Java 虚拟机将采用以下绑定规则: 实例方法与引用变量实际引用的对象的方法进行绑定,这种绑定属于动态绑定,因为是在运行时由 Java 虚拟机动态决定的 ...

  4. JVM垃圾回收器之G1(Garbage First)--new

    相比CMS收集器有两个显著的改进: (1). G1收集器是基于“标记-整理”算法实现的收集器,不会产生空间碎片 (2). 它可以精确地控制停顿,能让使用者明确指定在一个长度为M毫秒的时间片段内,消耗在 ...

  5. 【c++错误】类的语法错误 error c2533:constructors not allowed a return type(构造函数不允许返回一个类型)

    今天编写类的程序的时候不小心把类后的分号忘写了,就出现上面的错误提示. 顺便复习下类的正确格式: class 类名 { public: //习惯上将公有类型放在前面,便于阅读 ……(外部接口) pro ...

  6. ios 九宫格

    #define kViewW 40 //宽度 #define kViewH 61 //高度 #define kColCount 4 //共几列 CGFloat marginX = (self.view ...

  7. Git Client 管理:项目文件的获取和提交(实用篇)

    Git 服务器 可搭在云端如:coding.net.GitHub.TFS等,只要可以使用Git就可以. 示例: Git Client 安装相关程序,顺序如下: 1.安装Git-2.14.2.3-64- ...

  8. C# 获取客户端信息 /asp.net/WebService/WebForm

    Request.Browser.MajorVersion.ToString();//获取客户端浏览器的(主)版本号Request.Browser.Version.ToString();   //获取客 ...

  9. 【Python】Java程序员学习Python(八)— 基本类型的基本运算

    这一篇待写,毕竟基本运算都是通用的.

  10. requirejs中Shims使用说明

    RequireJS中如果使用AMD规范,在使用的过程中没有太多的问题,如果加载非AMD规范的JS文件,就需要使用Require中的shim. require.config({ paths:{ jque ...