requireJs笔记一

requireJs就是为了解决js依赖问题以及模块化而存在的，采用AMD写法，模块化的好处想必不用多说了，管理维护方便，二次开发和代码结构清晰，而且还可以让模块共享给多个项目等等。

入门篇：

1.和所有库一样，要使用必须要先去下载requireJs

2.在页面中引入requireJs,<script data-main="js/main.js" src="js/require.js"></script>  data-main属性是告诉requireJs那个文件是js入口，就是说要自动加载那个文件，还有一个作用就是默认设定了baseUrl的路径和mian文件同级，如果不设置这个属性baseUrl的默认设定了和引入requireJs这个HTML同级。

3.一切都是从mian文件开始的，先来定义一个模块

定义模块方法：define(function(){ //模块的内容 });//这是一个完全没有依赖的模块

定义一个依赖a.js文件的模块：define(['a'],function(a){//这个模块是依赖a模块，回调函数会在a加载完毕后才回执行，回调函数的参数a是指向a模块的});

例如add模块定义了一个相加的方法，add模块代码如下：

define(function(){

    var add=function(x,y){

         console.log(x+y);

    }

   return {

    add:add

  }

});

在main文件里面可以调用add模块里面的add方法，代码如下：

require(['add'],function($add){

   $add.add(3,4);

  }

//上面的代码会在加载完add后执行回调函数，$add只想add模块的return值，最后打印出7；

4.现在我们已经会使用define定义模块和require加载模块了，为了灵活和方便，每个库都会有一些配置，require也一样，接下来了解一下require的一些基本配置

1.baseUrl:指定本地模块的基准目录，就是模块路径是相对那个目录的，该属性通常有require加载时data-main属性指定，上面有说过，如果没有data-main的话默认是引入require那个HTML所在的目录，如果有data-main属性则和该属性指向的目录同一个目录。当然也可以手动在main文件中配置：

require.config({

  baseUrl:'js/lib' ,           //require 的 config方法就是设置配置的，该方法的参数是一个对象，对象的baseUrl属性则是设置基准目录的

  paths:{ //这个属性是用来配置没有直接放在baseUrl目录下面的js的，如果下面app.js直接放在js文件夹，基准目录是js/lib,经过下面的配置app可以直接指向app.js文件

  app:  '../app'   //设置paths的路径都是相对baseURl目录的，除非是‘/’开头或者含有http://开头的。

  },

 shim:{  //shim是用来处理那些非AMD定义的模块，如插件等的载入顺序的，为这些没有使用define来声明依赖关系设置浏览器全局变量注入型脚本做依赖和导出配置

   '../app': ['jquery']           //这句配置作用是，在加载js/app.js文件前必须要先加载js/lib/jquery模块。为app指明依赖关系

  }，//如果不用shim配置，在最新版本可以直接require(['要先加载的模块'],function(){ //会在前面的模块加载完才回执行这个回调函数})

 

map:{//map参数是用来解决同一个模块不同版本问题，比如不同版本的jq都是用jquery作为模块Id，但是在不同模块注入不同版本的jq，实现如下：

  ’../b':{ 

  'jquery':'jquery.1.9.1.js'                 //设置了js/b模块注入jquery模块是引入的是js/lib/  jquery.1.9.1.js版本

},

'../c':{

  ‘jquery':'jquery.1.7.js'                    //设置了js/c模块注入jquery模块是引入js/lib/jquery.1.7.js版本

 }

 },

config:{ //config是将需要的配置信息传给一个模块，这些配置往往是application级别的，需要一个手段将他们向下传递给模块。使用方法如下：

    ’../app':{  //这个配置的作用是给js/app模块传递一个对象，获取方法是：app代码，define(function(require,exports,module){ module.config().color;//这样就可以获取到配置的color值，三个参数是固定的，不能是其他字符串，require是获取其他模块的接口，exports是提供共享本模块方法的对外接口，module是指向本模块，例如：require['a'];获取a模块，exports.share=function(){};是把share方法共享给其他模块}

        color: 'blur',

        size:  'large'

    }

}

})

5.配置讲完了，接下来讲讲require函数的第三个参数，errbacks

require(['a'],function(a){/'/a模块注入成功后执行的回调函数},function(err){//a模块注入失败后执行的回调函数;可以用err.requireModules来获取模块名，如果多个模块，当模块加载失败一次就会执行一次err函数，比如a,b两个模块都加载失败，就会执行两次err函数});、

6.require的基础知识就讲完了，既然require是采用AMD规范，那我们不得不扯扯AMD规范的模块写法：

第一种写法：

define(function(){

   return{//这种写法不依赖任何模块}

})

第二种写法：

define(['aa'],function(aa){

  //依赖aa模块，但是没有return，即没有对外共享的方法

})

第三中写法：

define({   //这种写法是整个对象对外共享，可以通过注入该模块访问到name等信息

   name:'maoguiyou',

   age:'24'

})

第四种写法：

define('index',['a'],function(a){

  //这种写法是规定具体的模块名，这个模块名为index，但是这样并不方便，不建议这样用 

});

第五种写法：

模块包装

define(function(require,exports,moudle){

   //三个参数是固定的，不能是其他字符串

   //require是获取其他模块的的接口，比如获取a模块：require['a'];

  //exports是共享本模块的对外接口，比如共享模块的add方法给其他模块：exports.add=function(){//其他模块可以通过注入本模块后访问add方法}

 //module本模块的一个属性，比如上面说到的访问config,module.config().color 访问config的配置方法config，它可以有自己的属性

});

花了两个小时，终于总结完了基础篇，以上的只是个人捣鼓总结的结果，如果有不同意见或者错误欢迎留言指正交流