requireJS实践

开始使用requireJS

1. 文件引入
   直接在页面上引入requireJS文件。
   requireJS改变了传统script标签引入模块的形式，有两个非常直观的改变

• 直接在head标签引入js文件，文件的执行并不阻塞页面渲染
• 使用require方法引入一个或多个js模块，使得引入模块更加清晰，更加简洁。

2. 基本使用方法

• require([arr])，使用require方法引入一个或者多个模块，这个方法可以在html页面中引入模块，也可以在js模块中使用这个方法引入其他模块。反正使用了requireJS，js文件就变成了一个一个的模块，引入变得非常直观。

3. 基本API
   require会定义三个变量：define，require，requirejs，其中require === requirejs。

• define(function(){moudle})
• require(arr,[callback]) 加载依赖模块，并执行加载完成后的回调函数
• 使用requir.config()方法来配置模块位置

require.config({
    paths:{
        'jquery':['http://libs.baidu.com/jquery.js'],
        'test':'js/test'
    }
})
//然后可以直接引用
require(['jquery','a'],function($){
    $(function(){
        //then,do something
    })
})
//paths可以批量配置模块位置，为模块资源取一个简洁的名字来进行调用，paths还有一个重要的功能就是，可以同一个名字可以设置多个路径，这样线上的CDN库没有加载成功，也可以使用本地的库

上面的例子可以看出来：
1. requirejs加载模块的时候不用写.js后缀，也不能写
2. callback函数为模块的输出变量，要在回调函数中使用它，必须要通过传参，如果模块没有输出变量，则没有，所以尽量将输出的模块写在前面，防止位置错乱引发误解。

4. 全局配置
   有时候我们希望某些模块能够全局使用，而不需要配置模块路径，我们可以使用erquire的全局配置

    //先创建一个config.js,放置我们的配置文件
    require.config({
        paths:{
            'jquery':'http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min'
            'test':'test'
        }
    })

然后在页面中调用requireJS的时候，加上data-main='config'即可以使用配置好的短命来加载模块了。

5.定义一个模块

    define(['jquery'],function($){
        var sayhello = {
            init:function(){
                $('body').text('hello wrold!');
            }
        }
        
        return module = sayhello;
    })

6.加载非规范模块

    require.config({
        shim:{
            'underscore':{
                exports:'_'
            },
            'backbone':{
                deps:['underscore','jquery'],
                //deps为依赖的模块
                exports:'Backbone'
                //exprots为输出的变量名
            }
        }
    })

6.使用插件
requireJs有一个text插件，可以异步加载一段文本，使用结合模板使用。

使用方法：

• 到github上下载require/text.js
• 引用的时候像下面那样

    define(["text!"],function(html){
        console.log(html)
    })