require.js模块化整理

本文是对自己JS学习的一个总结和一些碎片化学习的整理，主要是关于模块化的以及require.js。后面可能会写个小插件的或者源码阅读的博文。

如果有同学不幸看到本人的这篇博文，对此实属抱歉。你可以去看原著，我这里只是自己的整理。

文章参照阮一峰老师的博文：Javascript模块化编程（三）：require.js的用法
（注：原著真的很清楚详细，如果你看不懂有两种可能：zs不够或层次未到。我也是时隔了很久再看才觉有味的。）

模块化：
1. 原始表达方式：

function  m1(){

}
function m2(){

}
m1()
m2()

上面定义了两个模块，m1和m2，写法很直接，但是缺陷在于模块间的依耐关系不明确，也容易造成全局变量的污染问题。

2.对象表达方式：

var moudle=new Object({
    xx:21,
    m1: function () {

    },
    m2: function () {

    }
})

把模块封在对象中，缺陷在于内部属性的暴露问题，例如更改内部属性xx的值问题。

3.立即执行方式：

;(function () {

})()

这种方式经常见，它解决了对象表达方式的缺陷。

模块化规范问题：
如上述所列，定义模块化的方式很多，为了开发的统一性，产生模块化开发的规范：CommonJS（Node的模块化依次实施），AMD，CMD。
为什么会有三种模块化规范？不同的模块化规范针对两端（服务器端和浏览器端），即服务器端和浏览器端的特性不一，例浏览器端的模块化加载需要异步加载。

AMD：”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD的模块加载方式：

require([module], callback);

第一个参数为需要加载的模块数组，第二个是回调函数。
而博客标题的require.js是依AMD规范实施的一个库。

个人理解require.js的意义：
网站大了需要加载的模块数量变多，模块之间的依赖关系变得复杂，如何正确加载？如何不影响网站的加载（减缓响应时间）？
注意：异步加载

require.js的使用：
1：引入
用script标签引入，但是require.js引入发生错误呢？
所以==》

<script src="js/require.js" defer async="true" >script>

说明：defer和 async：强调异步加载方式引入，defer是IE专用（浏览器有两种，一种叫IE，一种叫其它）。
2：主模块的引入

<script src="js/require.js" data-main="js/main">script>

说明：data-main用来强调主模块是main（或者你写成js/main.js）。主模块就是整个主体的入口，与其它模块相依。相当于我们C的main函数这种。
3.主模块的书写
例子的前提是main模块现在依赖于’jquery’, ‘underscore’, ‘backbone’这三个模块。

　require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　　　// some code here
　　});

4.require.config()方法（写在主模块的最上面）

require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

这里需要记录的是，paths的意义就是指各个模块的加载路径。上面的写法默认各模块和主模块在同一级目录下。你也可以用下面的方式替代

require.config({
　　　　//baseUrl指定模块目录
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

5.define()定义模块
require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。
6.加载非规范的模块
不是所有的模块都是AMD规范，require,js依旧可以加载

require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

shim参数用来配置不符AMD规范的模块，underscore和backbone是两个模块，其中的参数属性exports表示该模块向外暴露的引用方式，例如jQuery的$
deps表示该模块的依赖。

6.其它
require.js还提供一系列插件，实现一些特定的功能。