初识requirejs(一)

看到现在各大网站都在使用amd规范(e.g: requirejs)或者cmd规范(e.g: seajs)来进行代码的模块化开发，于是自己也想尝试着用用。在阅读了requirejs和seajs的api以及小小的试用了一番之后，觉得还是依赖前置(requirejs)的写法比较适合自己。

requirejs是一个javascript文件和模块加载器，不仅能用在浏览器端，同样也能用在诸如nodejs的服务器端，浏览器兼容性为IE 6+，Firefox 2+，Safari 3.2+，Chrome 3+，Opera 10+，所以大可放心使用。

 

1. 目录结构

这是我写demo用的目录结构，简单的把类库代码与模块代码区分在两个目录下

 

2. 引入requirejs

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

data-main相当于该app的入口，是继requirejs之后最先加载到的js文件，所以main.js中需要添加一些配置信息，定义模块路径以及未使用amd规范编写的模块等，下面就介绍这些配置参数。

 

require.config({
    baseUrl: "static/scripts/src/",
    paths: {
        'jquery': "vendor/jquery/jquery",
        'jquery.email': "plugin/jquery.email",
        'aaa': "moudle/aaa/aaa",
        'bbb': "moudle/bbb/bbb",
        'ccc': "moudle/ccc/ccc"
    },
    shim: {
　　　　 'jquery': {
　　　　　　　exports: "$"
　　　　  },
　　 　　'jquery.email': {
            deps: ["jquery"],
            exports: "jQuery.fn.email"
        }
    }
})

 

 

3. baseUrl 和 paths

baseUrl就是字面意思，一个基本路径，配合paths一起使用。

paths为一个对象，key部分保存的是模块的名字，value部分保存的是模块的路径，那么问题来了，模块的路径究竟怎么算？

如果就按照上面的代码来看，模块路径是baseUrl + paths.aaa或者bbb，路径的最后是默认加.js，所以切记最后不要再写.js了，否则会出现aaa.js.js的情况!!!

那么问题又来了，如果我没有配置baseUrl参数，模块的路径又是怎么算的呢？是根据data-main入口js所在的目录来定位的。

 

4. shim

shim参数是用来为那些没有使用define来声明依赖关系且比较传统的"browser globals"(这个是官方api的说法，requirejs中文网翻译为“浏览器全局变量注入”，我的理解是没有被命名空间包裹的库的代码？)的脚本做依赖和导出配置，最常见的比如jQuery的插件们，backbone.js及underscore.js。

jQuery在1.7之前是不支持amd的，所以也需要配置shim。

shim还有另外一种形态：

shim: {
　　 　　'jquery.email':  ["jquery"]
    }

如果不用定义exports，那就直接用上面这种形式，直接名字+依赖就可以。

 

5. 定义模块 define

define(['jquery'], function($) {
    return {
        changeHtml: function() {
            $('.moudle_aaa').html("我是模块A")
        }
    }
})

定义模块使用define方法，define方法有三个参数，第一个参数为字符串，是模块的名字，如果不定义则默认为该js文件的名字。

第二个参数为数组，是该模块需要依赖的模块名称的集合，用逗号隔开比如:["jquery", "backbone"]。

第三个就是模块的逻辑代码了，function参数中的$就对应之前依赖的jquery，如果依赖其他模块，也类似这么使用。return中为暴露的接口。

 

6. require

reuqire方法包含两个参数，第一个参数同define方法的第二个参数一样是依赖数组，第二个参数类似define方法的第三个参数，但是不用return预留接口。

所以require方法的用处是放在data-main主入口里，负责处理业务代码，比如启动一个模块功能。

require(['aaa', 'bbb', 'ccc'], function(moudleA, moudleB, moudleC) {
    moudleA.changeHtml()
    moudleB.changeHtml()
    moudleC.changeHtml()
    moudleC.emailInit()
})

 

 

7. urlArgs

该配置项用于处理缓存问题，看图说话：

require.config({
    baseUrl: "static/scripts/src/",
    paths: {
        'jquery': "vendor/jquery/jquery",
        'jquery.email': "plugin/jquery.email",
        'aaa': "moudle/aaa/aaa",
        'bbb': "moudle/bbb/bbb",
        'ccc': "moudle/ccc/ccc"
    },
    urlArgs: "v=" +  (new Date()).getTime(),
    shim: {
        'jquery.email': {
            deps: ["jquery"],
            exports: "jQuery.fn.hEmail"
        }
    }
})

 

 

看图应该都能明白urlArgs的作用了吧，但是每次都让用户去获取最新的js明显不靠谱，所以这个参数在开发环境还是有用的，发布到生产环境之前记得删除这个参数哦。

demo下载

 

这些是requirejs最基础的功能，但是一般使用已经绰绰有余了，之后再介绍其他功能。