requireJS的学习
官方文档 http://www.requirejs.cn/
参考链接 http://www.w3cschool.cc/w3cnote/requirejs-tutorial-1.html http://www.ruanyifeng.com/blog/2012/11/require_js.html
http://www.zhihu.com/question/20351507
进入主题：
一 前奏， 让我们看一下为什么引入requireJs
JS不是一种模块化编程语言，因此呢，我们用一堆函数去实现具有特定功能的模块
function f1(){ //... }
function f2(){ //.... }
这是我们新手或者传统的做法，但是会有很多问题啦，首先，这么多函数变量，很明显污染了全局变量，说不定会和其他模块中的变量冲突呢。其次，他们之前的关系很不明确，js严格的读取顺序，多个文件互相依赖，依赖性最小的文件必须放在最前面，否则代码会报错。最后，多个js加载，若采用同步模式，无疑会影响浏览器的性能。
① 对于前者，我们有采用多层命名空间的嵌套，把模块定义为对象，这样新的命名空间解决了冲突问题
var mod = new Object({ a:0; f1:function(){} f2:function(){} });
这个做法不是很好，因为对象里面的属性我们可以随意更改，不安全
然后有了立即执行函数的方法
var mod = (function（）{ a:0; var f1=function(){} var f2=function(){} return{ f1:f1; f2:f2; } })（）;
关于模块的知识 请看http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
③看一下加载对网页性能的影响
index.html <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<span>body</span>
</body>
</html> a.is
(function(){
function fun1(){
alert("it works");
} fun1();
})()
CMD 规范在这里：https://github.com/seajs/seajs/issues/242
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。
还有不少⋯⋯
这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。
目前这些规范的实现都能达成浏览器端模块化开发的目的。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
}) // AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。
3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。
4. 还有一些细节差异，具体看这个规范的定义就好，就不多说了。
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
require(["a"]);
</script>
</head>
<body>
<span>body</span>
</body>
</html> a.js
define(function(){
function fun1(){
alert("it works");
} fun1();
})
<script src="js/require.js" defer async="true" ></script>（IE支持defer 没有async）
<script src="js/require.js" data-main="js/main"></script> （入口模块main.js）
define(['myLib'], function(myLib){ // define([依赖的模块]，定义模块)
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){// require（[依赖的模块]， 定义函数
// some code here
});
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});
index.html
<html>
<head>
<title>hi test!</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<script type="text/javascript" src="a.js"></script>
<script src="js/require.js" data-main="js/main" defer async="true" ></script>
</body>
</html> main.js // main.js
require.config({
paths: {
"math": "math"
}
});
require(['math'], function (math){
alert(math.add(1,1));
}); math.js // math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
requireJS的学习的更多相关文章
- gulp + angular + requirejs 简单学习
一.安装gulp(已经安装了node环境) npm install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...
- 前端JS框架系列之requireJS基础学习
1 背景 伴随着项目功能的不断扩充,客户体验的不断完善,实现交互逻辑的JS代码变得越来越多.起初,为了管理JS代码,我们把JS从页面中解放出来独立成文件,接着又把相似的交互代码提取到公共的JS页面中. ...
- requireJS入门学习
前言 最近网上.群里各种随便看,随便学.暑期实习还没找到,昨天开题过了,好好学习吧.最近一直看到前端的ADM,CMD规范,然后网上各种找资料看,看了好几个牛人的博客,写的很好,然后自我感觉了解了点,介 ...
- 透彻掌握Promise的使用，读这篇就够了
透彻掌握Promise的使用,读这篇就够了 Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻.这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现. ...
- 前端基础进阶（十三）：透彻掌握Promise的使用，读这篇就够了
Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻.这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现. 在实际的使用当中,有非常多的应用场景我们不能 ...
- 【requireJS源码学习01】了解整个requireJS的结构
前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整 ...
- 【requireJS源码学习03】细究requireJS的加载流程
前言 这个星期折腾了一周,中间没有什么时间学习,周末又干了些其它事情,这个时候正好有时间,我们一起来继续学习requireJS吧 还是那句话,小钗觉得requireJS本身还是有点难度的,估计完全吸收 ...
- 【requireJS源码学习02】data-main加载的实现
前言 经过昨天的学习,我们大概了解到了requireJS的主要结构,这里先大概的回顾一下 首先从总体结构来说,require这里分为三块: ① newContext之前变量声明或者一些工具函数 ② n ...
- 开始学习requirejs+easyui的使用.
开始学习requirejs+easyui的使用. 目录结构: |-project |-easyui01 |-js |-main.js |-index.html |-libs libs目录下放入的是ea ...
随机推荐
- Mockjs详细使用说明
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 在我们的生产实际中,后端的接口往往是 ...
- tcp的半连接与完全连接队列（二）
队列及参数 server端的半连接队列(syn队列) 在三次握手协议中,服务器维护一个半连接队列,该队列为每个客户端的SYN包开设一个条目(服务端在接收到SYN包的时候,就已经创建了request_s ...
- GridLayout(网格布局)
常用属性: 排列对齐: ①设置组件的排列方式: android:orientation="" vertical(竖直,默认)或者horizontal(水平) ②设置组件的 ...
- 快速创建jquery插件
介绍 什么是插件? 插件我们见得很多了,比如浏览器上我们会安装一些去除广告的插件.美化页面的插件等等. 在前端,我们也常常写一些jquery插件来使用.来添加我们常常写的一些功能,方便使用. 为什么要 ...
- Sublime Text格式化HTML JS CSS代码
Sublime Text是开发Hybrid应用的神器,但是有时候对糟糕的代码格式很懊恼,尤其是团队成员比较多,并且代码风格不是很统一的时候.幸好有可用的格式化插件,比较好用的就是HTML-CSS-JS ...
- Linux Bird
o / : 2GB o /boot: 200MB o /usr : 4GB o /var : 2GB o /tmp : 1GB o swap : 1GB o /home: 5GB,并且使用 LVM 模 ...
- Java 之 Serializable 序列化和反序列化的概念,作用的通俗易懂的解释
遇到这个 Java Serializable 序列化这个接口,我们可能会有如下的问题a,什么叫序列化和反序列化b,作用.为啥要实现这个 Serializable 接口,也就是为啥要序列化c,seria ...
- 初步学习XML的基本代码
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- promise之nodejsQ的详细用法总结
这里主要讲node.js中Q的各种用法及说明总结,不详细介绍promise及原理.关于promise介绍可以查看我的另一篇文章: https://www.cnblogs.com/yzeng/p/976 ...
- 部署Cube报错，用户登录失败；280000
在创建SSAS项目过程中,创建数据源.数据源视图.多维数据集.纬度等一切都没有问题.但是在“进程”这一步的时候,发现总是报错,提示如下. OLE DB 错误: OLE DB 或 ODBC 错误 : 用 ...