requirejs

requireJS

官方网站:http://www.requirejs.org

1.安装

npm install --save requirejs

2.使用步骤

• 2.1引包

  <!--在index.html中引入require.js文件并指定主入口模块-->
  <script data-main="./lib/main.js" src="./node_modules/requirejs/require.js"></script>

• 2.2 主模块
  ```js
  /*在主模块中:

  • rquirejs第一个参数是一个数组,
  • 传递依赖的模块回调函数的参数是前面模块所暴露的接口对象
  • */
    requirejs(['./lib/abc.js'],function(aModule){

  console.log(aModule);//Object {name: "模块a"}
  });
  ```

• 2.3 定义一个模块

  //定义一个没有依赖的模块
  define(function(){
      //通过return 的形式向外暴露接口对象
      return {
          name:'sa',
          text:function(){
              sonsole.log("hahah");
          }
      }
  });

• 2.4 定义有依赖的模块

  //参数一:模块名,必须与模块文件名保持一致
  //参数二:本模块所依赖的模块
  //参数三:回调函数,回调函数的参数与依赖模块相对应,模块暴露的数据接口
  define(['./c'],function(cModule){
      return {
          name:'bb',
          text:function(){
              console.log('bbbbb');
          }
      }
  })

• 2.5 定义一个而又依赖的模块,并且模块有自己的名字

  js
//名字在打包的时候使用,
//在加载的时候需要按照名字去加载
define('c',['./c'],function(cModule){
return {
name:'bb',
text:function(){
console.log('bbbbb');
}
}
})


  取的名字必须与加载文件的名字相一致

• 2.6 在主模块文件中配置基础路径

  > 配置了基础路径,那所有的模块标示都会基于这个路径去查找
  ```js
  requirejs.config({
      baseUrl:'./js'//相对于index.html
  
  });
  ```
  > 注意:第三包不要出现在项目之外
  

• 2.7 在模块中引入jQuery

  requirejs(['./lib/abc.js', './lib/jq.js'], function (aModule, jqModule) {
      //jq.js模块引用了jQuery
      console.log(aModule);//Object {name: "模块a"}
      console.log(jqModule);//undefined???
  });

  /*这个模块依赖jQuery模块*/
  /*jquery.js与当前文件在同一个路径下,此时路径是相对于本文件还是相对于index.html??*/
  define('jquery',['./jquery.js'],function($){
     return $(function(){
         console.log("jQuery执行了");
         return "jQuery执行了";
     })
  });

来自为知笔记(Wiz)