标签：
官方文档 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 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() ... })
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 }; });
标签：
原文地址：http://www.cnblogs.com/hhjiang14/p/4334600.html
