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>
打印:
RequireJS初探的更多相关文章
- requirejs、backbone.js配置
requirejs初探 参考资料官网:http://requirejs.org中文译文:http://makingmobile.org/docs/tools/requirejs-api-zh reuq ...
- requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...
- RequireJS源码初探
前两天跟着叶小钗的博客,看了下RequireJS的源码,大体了解了其中的执行过程.不过在何时进行依赖项的加载,以及具体的代码在何处执行,还没有搞透彻,奈何能力不够,只能先记录一下了. RequireJ ...
- RequireJS 2.0初探
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- 使用 RequireJS 优化 Web 应用前端
基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...
- 初探百度F.I.S — 由工具到解决方案
1. 前言 阅兵放假三天,我哪儿也没去,宅着看了一些东东:git命令行.svn命令以及下面的主角——百度FIS.对看过的git.svn的命令也做了一些总结,请参见:<git命令学习笔记>和 ...
- (转)初探Backbone
(转)http://www.cnblogs.com/yexiaochai/archive/2013/07/27/3219402.html 初探Backbone 前言 Backbone简介 模型 模型和 ...
随机推荐
- python 操作excel 使用笔记
写入excel, 保存的过程中需要注意,保存格式xls后缀,如果用xlsx会报错 def set_style(name,height,bold=False): """&q ...
- thread、operation、GCD
// ViewController.m #import "ViewController.h" @interface ViewController () { //任务队列,能够自动管 ...
- 数据库CRUD操作:C:create创建(添加)、R:read读取、U:update:修改、D:delete删除;高级查询
1.注释语法:--,#2.后缀是.sql的文件是数据库查询文件3.保存查询4.在数据库里面 列有个名字叫字段 行有个名字叫记录5.一条数据即为表的一行 CRUD操作:create 创建(添加)re ...
- Inno Setup入门(十)——操作注册表 & 自启程序
http://379910987.blog.163.com/blog/static/3352379720110259414788/ 有些程序需要随系统启动,或者需要建立某些文件关联等问题,这些都是通过 ...
- c语言学习上的思考与心得
由于这段时间在c语言的学习中,表现的很努力并且完成作业态度认真,所以得到了老师奖励的小黄衫. 以下是我对于c语言的学习感受与心得. 学习感受与心得 我选择计算机的这个专业,是因为我对计算机的学习很有兴 ...
- 删除本地git版本库中受版本控制的文件
git乱码解决方案汇总 乱码原因 搜索一番,发现git文件名.log乱码,是普遍问题,这其中有编码的原因,也有跨平台的原因.主要原因是Windows 系统中的Git对中文文件名采用不同的编码保存所致 ...
- 【Java 基础篇】【第九课】继承
继承就是为了提高代码的复用率. 利用继承,我们可以避免代码的重复.让Woman类继承自Human类,Woman类就自动拥有了Human类中所有public成员的功能.我们用extends关键字表示继承 ...
- java编程技巧
欢迎提出建议指出错误互相交流. 1.统计对象数量,比如统计一共发射了多少颗子弹. public class Bullet { public static int count = 0; public B ...
- 文件操作_菜单<代码>
info文件中的内容为: { "河北省": {"石家庄": {"无极县":"", "高邑县":&qu ...
- 浅谈Java回调机制
像许多网上介绍回调机制的文章一样,我这里也以一个现实的例子开头:假设你公司的总经理出差前需要你帮他办件事情,这件事情你需要花些时间去做,这时候总经理肯定不能守着你做完再出差吧,于是就他告诉你他的手机号 ...