【模块化】 RequireJS入门教程总结与推荐
之所以学习RequireJS,肯定对 模块化有一定的理解。这里有几篇学习 RequireJS的文章,推荐给大家去学习。
- Javascript模块化编程(一):模块的写法
- Javascript模块化编程(二):AMD规范
- Javascript模块化编程(三):require.js的用法 【require的使用,paths,baseUrl,shim 以及 deps,exports】
- ~~~~~~~~~~~~~上面这三篇是阮一峰老师的文章,【简单易懂】~~~~~~~~~~~~~~~~
- 但是对 requirejs 讲的内容,感觉少了点东西
- 快速理解RequireJs 【看后面作者遇到的坑,以及 shim 中的 init 方法】
总结:【只需要了解几个属性就可以用起来啦】【源码】github 源码
参数1:依赖的模块,数组形式,
参数2:回调函数,参数:跟每个 依赖模块exports的对象顺序是一致的
require(['module1','module2'],function(){
//TODO:
})
require.config({
baseUrl:' ' ,
paths:{ ' jquery' : 'lib/jquery' },
shim:{ }
})
- 什么叫AMD规范,如何编写AMD规范的脚本
- define([依赖的模块],function(){
//TODO: 自己想写的方法,或者属性,但是要对外输出,则需要有一个 return, return 出来的,其他模块可以拿来用
})
- define([依赖的模块],function(){
详细:【相对详细一点,哈】
学习了上面的几篇文章之后,尝试做了一个实践了一下,来理解如何使用RequireJS,其实真的不难。
- RequireJS是基于AMD来实现的
- 什么事AMD,是什么CommonJS?
- CommonJS 【针对服务端】
- Node作为一个服务端语言,如果没有模块化的化,根本没办法进行复杂性的编程。
- So,NodeJS就参照了 CommonJS规范实现了 模块系统
CommonJS中 有一个全局方法 require,来加载模块

- AMD 【有了服务端的,当前也要有前端的】
- 为什么不用CommonJS,而还需要去选AMD呢?
- 因为CommonJS不适用于浏览器端,因为JS脚本,来自服务端,请求脚本到浏览器需要时间,如果等待加载完,在执行下一步,那么整个页面渲染就卡住了,应用就停住了。
- So,浏览器端不能用 同步加载 , 而要用 异步加载。
- AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"
- 异步加载AMD
- 异步加载模块的话,那么就存在一个问题了,如果像CommonJS只有一个参数,那么肯定是不行的,因为怎么知道它什么时候加载完啊。
- So, 浏览器端,还需要一个 回调函数

- 这边有两个参数,第一个参数是一个数组,表示依赖的模块,回调函数的参数,跟依赖模块的数组顺序必须是一致的。
- 为什么不用CommonJS,而还需要去选AMD呢?
- 每次加载模块,总要输入相对路径,或者绝对路径,长长的一大串,坑爹啊,如果多个地方调用了,那后期文件修改了位置,那岂不是修改到吐?
- So,paths 就是必须的,跟模块取一个别名。

- So,paths 就是必须的,跟模块取一个别名。
- 啥,你说你的JS模块文件,都是 某个指定的路径下? baseUrl 就出来了
- 我要是早期脚本,不是按照AMD来写的,那肿么办呢? shim 属性
- 符合AMD规范的,可以直接requirejs 进来使用,但是不符合 AMD规范的,则需要配置 shim 属性和shim中的 exports属性
- 如果不符合AMD规范的,还依赖其他控件,需要配置 shim属性里面的 deps 属性

【模块化】 RequireJS入门教程总结与推荐的更多相关文章
- Node入门教程(6)第五章:node 模块化(上)模块化演进
node 模块化 JS 诞生的时候,仅仅是为了实现网页表单的本地校验和简单的 dom 操作处理.所以并没有模块化的规范设计. 项目小的时候,我们可以通过命名空间.局部作用域.自执行函数等手段实现变量不 ...
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 推荐 VS2010入门教程—鸡啄米
http://www.jizhuomi.com/catalog.asp?tags=VS2010 推荐 VS2010入门教程—鸡啄米,真的非常使用和经典!
- 《Delphi XE6 android 编程入门教程》推荐
近5.6年已经没有看见关于delphi的新技术的书出来了(看来在国内delphi的使用量确实很低了), 高勇同学最近出了一本<Delphi XE6 android 编程入门教程>,上周刚拿 ...
- React JS快速入门教程
翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...
- RequireJS 入门指南
RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...
- SeaJS入门教程系列之使用SeaJS(二)
SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...
- 《JavaScript语言入门教程》记录整理:面向对象
目录 面向对象编程 实例对象与 new 命令 this关键字 对象的继承 Object对象的方法 严格模式(strict mode) 本系列基于阮一峰老师的<JavaScrip语言入门教程> ...
随机推荐
- spring定时任务(@Scheduled注解)
(一)在xml里加入task的命名空间 xmlns:task="http://www.springframework.org/schema/task" http://www.spr ...
- out参数ref参数params 可变参数
1.我们在主函数中调用其他函数,我们管主函数为调用者,其他函数为被调用者. 如果被调用者,想要得到调用者的值:传参 使用静态字段来模拟全局变量 在方法外类里写字段 public static _na ...
- [javaSE] 类型转换(1加1等于几)
打印 ‘a’+1,输出98,解释:’a’是char类型占2个8bit,1是int类型占4个,’a’字符会被自动强制转换为int类型对应ascii码表97 打印’1’+1,输出 50,解释:’1’是ch ...
- java 对CSV 文件的读取与生成
CSV文件是以逗号分隔值的文件格式,一般用WORDPAD或记事本(NOTE),EXCEL打开.CSV(逗号分隔值)是一种用来存储数据的纯文本文件,通常都是用于存放电子表格或数据的一种文件格式,对于CS ...
- 关于在web端运行项目,eclipse报PermGen space错误
之前在网上也查到过许多解决的方法,但可能因为本人脸黑........也修改过eclipse文件目录中的相关配置文件,并没有得到相应的帮助,因此把自己的改正方法分享下: window-->pref ...
- @valid注解
今天发现一个非常好用的注解直接上代码: 实体类domain: @Column(name = "NAME") @NotNull @Size(min = 2,max = 50) pri ...
- js小练习
1.题目:某班的成绩出来了,现在老师要把班级的成绩打印出来. 效果如下:xxx年xx月x日 星期x--班级总分为:81 格式要求:1.显示打印的日期.格式为类似“xxxx年xx月xx日 星期x”的当 ...
- vscode 代码跳转之PHP篇
1.安装插件:PHP IntelliSense 2.配置:"php.executablePath": "C:\\php\\php.exe", 但是目前有问题,跨 ...
- ASP.NET SignalR-B.S/C.S 相互打通DEMO
ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信. 什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知 ...
- 爬虫必备—scrapy-redis(分布式爬虫)
转载自:http://www.cnblogs.com/wupeiqi/articles/6912807.html scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单 ...
