什么是RequireJS?
http://www.requirejs.cn/home.html
https://github.com/jrburke/requirejs
一句话, 它是为了JS模块化而生,是代码逻辑封装的手段, 目的是为了减少代码复杂度,提高代码可维护性, 满足设计上要求的高内聚+低耦合。
为浏览器环境而生,提高js加载速度。
为什么要有RequireJS?
http://www.requirejs.cn/docs/why.html
遇到的问题
---- 翻译 ----
1、 web站点转变为 web应用
2、代码复杂度随着站点的变大而增长
3、组装(页面代码)更加困难
4、开发者需要分离js文件和模块
5、部署活动需要优化过的代码存储在一个文件中, 或者少些HTTP请求。
解决方案:
---- 翻译 ----
前端开发者需要一个满足如下条件的解决方案:
1、一些类似 include import require 等经典模块方法
2、有能力加载嵌套依赖
3、对于开发者易用, 同时也可以被(用于部署的)优化工具支持。
---- 模块化进化史 -----
原始
-在一个页面还很简单的时候, 一个同事添加了一个js函数 function xx
后由于新增需求, 另外一个同事处于另外目的, 添加了一个相同名称的函数 function xx, 内容实现不一样, 这样就悲剧了, 第一个同事实现的 函数被冲掉了, 因为它们都定义在 全局环境中。
IIFE == imediately invoked function expression 立刻执行函数表达式
组织规范要求, 每个人开发的相关内容做为一个模块, 必须放在一个IIFE的函数体中,
(fuction(){
funciton XX(){}
})();
这样两个同事开发代码都不会相互影响对方, 但是这样定义的函数, 不能再全局环境的其他代码中调用, 因为在IIFE中的函数只在其函数体中生效, 可以作为window一个属性开放出去,
但是其仍然有个缺点, 就是两个模块之间的依赖无法体现, 如果后面一个同事的开发模块, 依赖前一个同事的, 这样后面同事写的代码必须在 前一个同事代码 之后, 否则就会调用失败。
module时代
随着web页面内容越来越大, 前端代码越来越复杂,且有复杂的代码依赖关系。 就需要今天的主题事物出场。
AMD vs CommonJS
模块化标准包括 commonjs和requirejs, requireJS满足AMD标准, 为啥采用AMD?
因为主要是此标准为异步加载设计, 故适合浏览器远程加载若干模块的js文件。
而commonjs标准,加载文件为同步模式, 一个一个执行, 适合加载本地文件, nodejs实现满足此标准。
两个标准的详细描述见:
http://www.requirejs.org/docs/whyamd.html
怎么使用RequireJS?
http://requirejs.org/docs/api.html
定义模块,新建一个文件, 按照api规范定义模块实现, 模块返回为对象:
如果还有些定制逻辑,则有可以使用函数,作为模块实现作用域:
如果模块对其他模块有依赖:
模块也可以返回函数:
还可以自定义模块名称
DEMO
定义了两个模块, 和一个app, 依赖两个模块, 调用并执行:
https://github.com/fanqingsong/code-snippet/tree/master/web
one.js
two.js
app.js
demo.html
打印: