Javascript 模块化编程 --RequireJs
什么是模块化
模块就是实现特定功能的一组方法,常见的几种js写法
- 原始写法
function A() { } function B() { }
上面函数A（）和B（）组成一个模块，使用的时候直接调用就行了
缺点： “污染”了全局变量，模块成员之间没有直接的联系。
- 对象写法
var module= { count:1, A: function() { }, B: function() { } }
这种写法把变量count和函数A和 B 都封装到了module中，使用的时候直接调用，例如：
Module.A();
缺点：这种做法暴露了模块成员，内部的变量可以被外部改写，例如：
Module.count=5
- 立即执行函数写法
var modulel = (function() { var count = 5; var A = function() { console.log("function A"); }; var B = function() { console.log("function B"); }; return { A:A, B:B, count:count } })();
- 放大模式
如果一个模块很大，必须分成几个部分，则需要继承另外一个模块，则有必要使用“放大模式”
var commonUtil = (function (util) { util.m1 = function () { console.log("m1 function"); }; util.m2 = function () { console.log("m2 function"); }; util.count = 5; return util; })(commonUtil); console.log(commonUtil.m1()); console.log(commonUtil.count);
- 宽放大模式
var commonUtil = (function (util) { util.m1 = function () { console.log("m1 function"); }; util.m2 = function () { console.log("m2 function"); }; util.count = 5; return util; })(commonUtil || {}); console.log(commonUtil.m1()); console.log(commonUtil.count);
与“放大模式”相比，“宽放大模式”就是立即执行函数可以是空对象
为什么要用require.js
最早的时候，所有的javascript都是写在一个文件中，代码越来越多，则分成了多个，例如：
<script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> <script src="4.js"></script> <script src="5.js"></script> <script src="6.js"></script>
这样做的缺点：
１）加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就越长
２）必须保证加载的顺序，依赖最大的模块一定要放到最后加载
Require.js就是为了解决这两个问题：
１） 实现js文件的异步加载，避免网页失去响应
２） 管理模块之间的依赖性，便于代码的编写和维护
Require.js加载
首先要到官方网站下载最新版本http://requirejs.org/docs/download.html放到Scripts目录下
然后在页面加载，例如：
<script src="Scripts/require.js"></script>
加载这个文件也有可能造成网页失去响应，解决办法有两个，一是把它放在网页底部加载，另外一个是写成这样：
<script src="Scripts/require.js" defer async="true" ></script>
Async表示是异步加载，ie不支持这个属性，只支持defer，所以把defer也写上
加载require.js之后，则是加载我们自己的代码了，假如我们自己的代码文件是main.js,则需要写成这样
<script src="Scripts/require.js" data-main="Scripts/main.js"></script>
data-main属性的作用是指定网页程序的主模板,就是网页的入口代码，有点像控制台程序的main（）函数，所有的代码都是从这里开始运行
模块的加载
假如模块依赖’jquery’,’underscore’,’backbone’，则需要在require.config（）方法中对这些模块进行配置
我们可以把require.config()写在主模块main.js的头部，也可以新建一个require_config.js文件把这些配置写在这个文件中,然后在页面引用这个文件，例如：
(function () { var baseurl = "/Scripts/"; require.config({ paths: { "jquery": baseurl+"jquery", "underscore": baseurl+"underscore", "backbone": baseurl+"backbone", "index":baseurl+"lib/index" }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); })();
如果某个模块在另外的主机上，也可以指定网址，例如：
require.config({ paths: { "jquery":”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min”, } });
require.js加载的模块，必须按照AMD规范，用define()函数定义的模块。但有一部分函数库并不符合这种规范，这种模块则必须在require()加载前，用shim属性进行配置，shim属性是用来配置不兼容的模块。
例如：
shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'],
exports: 'Backbone' } }
其中
１） exports表示输出变量名，即在模块外部调用的名称
２） deps数组，表示该模块的依赖性
主模块的写法
require()函数接受两个参数，第一个参数是一个数组，表示所依赖的模块，第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数的形式传入该函数，而在回调函数中就可以使用这些模块了。
例如：主模块依赖jquery,underscore和backbone这三个模块，main.js就可以这样写：
require (['jquery', 'underscore', 'backbone'], function ($, _, Backbone) { //some code here }）；
require.js会先加载jQuery,underscore和backbone，然后再运行回调函数，主模块的代码就写在回调函数中
AMD模块的写法
require.js加载的模块，采用AMD规范，模块也必须按照AMD来写，就是模块必须采用特定的define函数来定义，例如math.js：
define(function() { var add = function(x, y) { return x + y; }; return add; });
然后在require_config.js的path中进行定义，例如：
(function () { var baseurl = "/Scripts/"; require.config({ paths: { "math":baseurl+"lib/math" }, }); })();
之后再在页面对这个math模块进行加载，如：
require(['math'], function(math) { console.log(math.add(3,5)); });
例如利用require.js模块化写一个简单的banckbone例子，index.htm代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的第一个backbone的例子</title>
</head>
<body>
<button id="check">新手报到</button>
<ul id="world-list">
</ul>
<script src="../../Scripts/require.js" data-main="../../Scripts/lib/index.js"></script>
<script src="../../Scripts/require_config.js"></script>
<script>
require(['index'], function(indexView) {
var app = indexView.AppView;
var AppView = new app;
});
</script>
</body>
</html>
require_config.js配置如下：
(function () { var baseurl = "/Scripts/"; require.config({ paths: { "jquery": baseurl+"jquery", "underscore": baseurl+"underscore", "backbone": baseurl+"backbone", "index":baseurl+"lib/index" }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); })();
index.js文件的代码如下：
define(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) { var listView = { World: Backbone.Model.extend({ name: null }), Worlds: Backbone.Collection.extend({ initialize: function(models, options) { this.bind("add", options.view.addOneWord); } }), AppView: Backbone.View.extend({ el: $("body"), initialize: function() { this.worlds = new listView.Worlds(null, { view: this }); }, events: { "click #check": "checkIn" }, checkIn: function() { var world_name = prompt("请问你是哪里人"); if (world_name == "") world_name = "未知"; var world = new listView.World({ name: world_name }); this.worlds.add(world); }, addOneWord: function (model) { $("#world-list").append("<li>我是来自：" + model.get("name") + "的人！</li>"); } }) }; return listView; });
define和require加载的区别
Define和require在依赖处理和回调执行上是一样的，但是define回调的函数需要有return语句返回模块对象，这样define定义的模块才能被其他模块调用；require回调函数不需要有return语句。所以说define和require都可应用来加载和使用模块，但是define可以用来定义模块，用define定义的模块必须要有返回值
