RequireJS初探
什么是RequireJS?
/* ---
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
IE 6+ .......... 兼容 ✔
Firefox 2+ ..... 兼容 ✔
Safari 3.2+ .... 兼容 ✔
Chrome 3+ ...... 兼容 ✔
Opera 10+ ...... 兼容 ✔--- */
http://www.requirejs.cn/home.html
https://github.com/jrburke/requirejs
一句话, 它是为了JS模块化而生,是代码逻辑封装的手段, 目的是为了减少代码复杂度,提高代码可维护性, 满足设计上要求的高内聚+低耦合。
为浏览器环境而生,提高js加载速度。
为什么要有RequireJS?
http://www.requirejs.cn/docs/why.html
遇到的问题
- Web sites are turning into Web apps
- Code complexity grows as the site gets bigger
- Assembly gets harder
- Developer wants discrete JS files/modules
- Deployment wants optimized code in just one or a few HTTP calls
---- 翻译 ----
1、 web站点转变为 web应用
2、代码复杂度随着站点的变大而增长
3、组装(页面代码)更加困难
4、开发者需要分离js文件和模块
5、部署活动需要优化过的代码存储在一个文件中, 或者少些HTTP请求。
解决方案:
Front-end developers need a solution with:
- Some sort of #include/import/require
- ability to load nested dependencies
- ease of use for developer but then backed by an optimization tool that helps deployment
---- 翻译 ----
前端开发者需要一个满足如下条件的解决方案:
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规范定义模块实现, 模块返回为对象:
//Inside file my/shirt.js:
define({
color: "black",
size: "unisize"
});
如果还有些定制逻辑,则有可以使用函数,作为模块实现作用域:
//my/shirt.js now does setup work
//before returning its module definition.
define(function () {
//Do setup work here return {
color: "black",
size: "unisize"
}
});
如果模块对其他模块有依赖:
//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
模块也可以返回函数:
//A module definition inside foo/title.js. It uses
//my/cart and my/inventory modules from before,
//but since foo/title.js is in a different directory than
//the "my" modules, it uses the "my" in the module dependency
//name to find them. The "my" part of the name can be mapped
//to any directory, but by default, it is assumed to be a
//sibling to the "foo" directory.
define(["my/cart", "my/inventory"],
function(cart, inventory) {
//return a function to define "foo/title".
//It gets or sets the window title.
return function(title) {
return title ? (window.title = title) :
inventory.storeName + ' ' + cart.name;
}
}
);
还可以自定义模块名称
//Explicitly defines the "foo/title" module:
define("foo/title",
["my/cart", "my/inventory"],
function(cart, inventory) {
//Define foo/title object in here.
}
);
DEMO
定义了两个模块, 和一个app, 依赖两个模块, 调用并执行:
https://github.com/fanqingsong/code-snippet/tree/master/web
one.js
//Inside one.js:
define(function() {
return function(title) {
return console.log('one module called');
}
}
);
two.js
//Inside two.js:
define(function() {
return function(title) {
return console.log('two module called');
}
}
);
app.js
requirejs.config({
//By default load any module IDs from ./
baseUrl: './',
});// Start the main app logic.
requirejs(['one', 'two'],
function (one, two) {
one();
two();
});
demo.html
<html>
<head>
<!--This sets the baseUrl to the "scripts" directory, and
loads a script that will have a module ID of 'main'-->
<script data-main="./app.js" src="./require.js"></script>
<style></style>
</head>
<body>
<h1>hello world!</h1>
</body>
</html>
打印:
最新文章
- SQL SERVER 通用分页存储过程,两种用法任你选
- javascript高级程序设计 读书笔记2
- Mysql备份系列(1)--备份方案总结性梳理
- HDU 4063 Aircraft --几何,最短路
- [原]AngularJS iframe打开不同域的内容时报错误
- Matplotlib不显示图形
- MEMS加速度计工作原理
- 去掉word中向下的箭头^l----->;^p
- mac下搭建cordova开发环境
- 【转】java调用存储过程和函数
- Frogger POJ - 2253
- springMVC导出word模板
- CVE-2018-8120 分析
- 封装的通过微信JS-SDK实现自定义分享到朋友圈或者朋友的ES6类!
- C++ 之sizeof运算符
- jvm详情——5、选择合适的垃圾收集算法
- SpringBoot数据库集成-Mybatis
- Guitar Pro 添加装饰音
- JDK1.8源码逐字逐句带你理解LinkedHashMap底层
- 【SoapUI】比较Json response
热门文章
- php isset() empty() 区别, 判断 变量存在与否神器
- VirtualBox网络配置
- A Realistic Evaluation of Memory Hardware Errors and Software System Susceptibility
- (转)Linux下安装Matlab2014及破解
- 蓝牙BLE LINK LAYER剖析(一) -- status and channel
- mysql binlog恢复
- percona
- php mongodb类
- 【C51】单片机独立按键与矩阵按键
- php---将数组转化为数组对象