requirejs入门

之前用一个模板，仿bootstrap ace写的一个管理系统的模板，需要一定的requirejs知识储备，因为当时就简单的看了一下以便看懂代码，并没有系统的学习，所以最近就有点忘了，特拉出来总结一下下~顺便推荐一下阮老师讲requirejs的博客：Javascript模块化编程（三）：require.js的用法。个人很喜欢阮老师的博客，推荐~
RequireJS的目标是鼓励代码的模块化，它使用了不同于传统scirpt标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。（摘自官网）

• 加载requirejs
  首先应该先去官网下载最新版的requirejs，并载入至html页面

<script src="js/require.js"></script>

之后，我们要新建一个js页面用来编写主模块，因为主模块含各种配置，则我起名为config.js。
主模块是整个网页的入口代码。它有点像C语言的main()函数，所有代码都从这儿开始运行。引用方法是将其路径写入data-main，如下：

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

• 主模块的写法

主模块若不依赖任何模块，则可以直接写js代码，单这样就没必要用requirejs了，所以，主模块一般是依赖其他模块的，这时就要使用AMD规范定义的的require()函数。require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。如下代码，主模块依赖于jquery，且jquery为和config.js在同一目录下的名为jquery.js的文件

require(['jquery'], function (){
    //回调函数
　　})

• 模块的加载
  以上方法加载模块限定太多，当模块过多时就不是特别方便，此时我们就要用require.config()方法，对模块的加载行为进行自定义。require.config()就写在主模块（config.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。默认的基目录是和config.js所在的目录，一般使用baseUrl直接改变基目录（我的基目录为根目录下的lib文件），则我的config.js头部为

require.config({
    baseUrl: 'lib',
    paths: {
        text: "requirejs/text",
        css: "requirejs/css",
        jquery: "jQuery/jquery-1.11.3.min",
        bootstrap: "bootstrap/js/bootstrap.min",
        datePicker: 'datepicker/js/datepicker',
        colorBox: 'colorbox/js/jquery.colorbox-min',
        fileUpload: 'imgUpload/js/fileinput.min',
        editor: 'LineControl/js/editor',
        file_zh: 'imgUpload/js/fileinput_locale_zh',
        validator:'bootstrapValidator/js/bootstrap3-validation',
        validator_zh: 'bootstrapValidator/js/language/zh_CN',
        tree: 'jquery-ztree/js/jquery.ztree.core-3.5.min',
        eya: 'eyas/base',
        page :'eyas/jquery-page',
        treeTable :'jquery-treeTable/js/jquery.treeTable'
    }});

当然，路径页可以直接指定网址，但是如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。（摘自阮老师博客，这个优化工具我没用过）

• AMD模块的写法
  require.js加载的模块采用AMD规范，模块必须按照AMD的规定来写，就是模块必须采用特定的define()函数来定义，然后用require()方法加载。（如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。）

//mall.js
　define(['bootstrap'], function(res){
　//代码块
　　});

require(['mall'], function (goods){
//代码块
　　});

• 加载非规范模块
  因为requirejs加载模块时必须是AMD的规定写，但是往往我们使用的一些插件不是用AMD规范写的，这时候我们则需要require.config()的shim属性来配置不兼容的模块，使其可以在requirejs中正常使用。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。其中，deps不仅可以配置依赖的模块，还可以配置插件如：css插件，一下是我的requirejs的完整config配置。

require.config({
    baseUrl: 'lib',
    paths: {
        text: "requirejs/text",
        css: "requirejs/css",
        jquery: "jQuery/jquery-1.11.3.min",
        bootstrap: "bootstrap/js/bootstrap.min",
        datePicker: 'datepicker/js/datepicker',
        colorBox: 'colorbox/js/jquery.colorbox-min',
        fileUpload: 'imgUpload/js/fileinput.min',
        editor: 'LineControl/js/editor',
        file_zh: 'imgUpload/js/fileinput_locale_zh',
        validator:'bootstrapValidator/js/bootstrap3-validation',
        validator_zh: 'bootstrapValidator/js/language/zh_CN',
        tree: 'jquery-ztree/js/jquery.ztree.core-3.5.min',
        eya: 'eyas/base',
        page :'eyas/jquery-page',
        treeTable :'jquery-treeTable/js/jquery.treeTable'
    },
    shim: {
        eya: {
            deps: ['']
        },
        bootstrap: {
            deps: ["css!../lib/bootstrap/css/bootstrap.min.css",'css!../css/base.css']
        },
        colorBox: {
            deps: ["css!../lib/colorbox/css/colorbox.css"]
        },
        fileUpload: {
            deps: ['css!../lib/imgUpload/css/fileinput.min.css']
        },
        datePicker: {
            deps: ["css!../lib/datepicker/css/datepicker.css"]
        },
        file_zh: {
            deps: ['fileUpload']
        },
        editor: {
            deps: ["css!../lib/LineControl/css/editor.css",'css!../lib/LineControl/css/font-awesome.min.css']
        },
        validator_zh:{
            deps: ['validator']
        },
        tree:{
            deps: ["css!../lib/jquery-ztree/css/zTreeStyle.css"]
        },
        treeTable:{
            deps: ["css!../lib/jquery-treeTable/themes/default/treeTable.css","css!../lib/jquery-treeTable/themes/vsStyle/treeTable.css"]
        }
    }
});

• requirejs的插件机制
  requireJ核心只是个加载器，通过动态创建script标签来加载模块化的JS文件。但只有js是无法满足我们的需求的，于是就有了requirejs的插件机制，插件和要加载的模块之间使用!分割。如上述的css插件，常用的还有text插件。

  text插件可以用来加载一个非JS文件的内容，如：HTML片段，CSS片段。 可以从 http://requirejs.org/docs/download.html#text 下载text插件，可以放到RequireJS的plugins目录下。

  • require.js文件在module/require/2.1.8/require.js
  • text.js文件在module/requirejs/2.1.8/plugins/text.js
    那么就可以通过下面的方式来使用：

  require(["module/require/2.1.8/plugins/text.js!html/a.html"], function(content){
      console.log(content)
  })

  其中module和html是平行的目录，并且是配置baseUrl的目录下。 这样通过text插件就可以拿到 html/a.html 的内容了，实际上text插件是通过ajax取获取内容的。 (摘自推酷)