requirejs笔记

最新推荐文章于 2024-04-21 05:30:19 发布

刀尖的舞者

最新推荐文章于 2024-04-21 05:30:19 发布

阅读量160

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h1hjikibbchj&title=requirejs%E7%AC%94%E8%AE%B0

版权

前端专栏收录该内容

280 篇文章 0 订阅

订阅专栏

1.RequireJS是一个工具库,主要用于客户端的模块管理.它可以让客户端的代码分成一个个模块.实现异步或动态加载,从而提高代码的性能和可维护性.它的模块管理遵循AMD规范(Asynchronous Module Definition).
2.基本思想:通过define方法,将代码定义为一个模块用require方法实现代码的模块加载.

3.将require.js嵌入网页,然后就能在网页中进行模块化编程了.
<script data-main="js/main" src="js/require.js"></script>
data-main属性:页面的入口js.路径main.js相对于页面
4.define方法:定义模块.(requireJS要求每个独立模块放在一个单独的文件里.)
   4.0:定义模块不依赖其他模块,是个独立模块.
   4.1:定义模块依赖其他模块,非独立模块.
   4.2:三个参数.

   独立模块:define({
       method1:function(){},
       method2:function(){}
   })
   或者:
   define(function(){
       return{
           method1:function(){},
           method2:function(){}
       }
   })
   建议使用后一种写法,这种自由度更高一些.
   define定义的模块可以返回任何值,不限于对象.

   非独立模块:
   define(["module1","module2"],function(m1,m2){

   })
   第一个参数是数组,它的成员是当前模块所依赖的模块.
   比如当前模块就是依赖于"module1.js","module2.js".只有先加载这两个模块,新模块才能正常运行.这个写法表示module1和module2模块就在当前目录.等同于['./module1','./module2'].
   第二个参数是一个函数,但前面的数组的所有成员加载成功后,他将被调用.它的参数与数组的成员一一对应.
   define(['module1','module2'],function(m1,m2){
       return {
           method:function(){
               m1.methodA();
               m2.methodB();
           }
       }
   });

   如果依赖额模块很多,参数与模块一一对应的写法非常麻烦.
   define(['dep1','dep2','dep3','dep4','dep5','dep6'...],
   function('dep1','dep2','dep3','dep4','dep5','dep6'...){

   });
   为了避免上面代码那样繁琐的写法.可以这样写:
   define(function(require){
       var dep1=require('dep1');
       var dep2=require('dep2');
       var dep3=require('dep3');
       var dep4=require('dep4');
       var dep5=require('dep5');
       var dep6=require('dep6');
       var dep7=require('dep7');
       .........
       .........
   });

   define([模块名称,][依赖模块],function(参数){

   });
   注意:requireJs会自动根据文件名(不含后缀名,即不含.js)来给定义的模块命名,如果你显示的给定义的一个模块命名了,那么在日后改动了文件名或模块名,requireJs将无法加载.因此:不要显示的定义模块名,让文件名成为默认的模块名,方便requireJs管理.

   define()实际运用的例子1:
   define(["math","grap"],function(math,graph){
       return{
           plot:function(x,y){
               return graph.drawPie(math.randomGrid(x,y));
           }
       }
   });

   define()实际运用的例子2:
       判断是否是IE而加载zepto或jQuery.
   define(('__proto__' in{} ?['zepto']:['jquery']),function($){
   return $;
   });

5.require方法:调用模块.
   require(['foo','bar'],function(foo,bar){
       foo.doSomething();
   });

   require方法的第一个参数,是一个表示依赖关系的数组.
   require([window.JSON?undefined:'util/json2'],function(JSON){
       JSON=JSON||window.JSON;
       console.log(JSON.parse('{"JSON":"HERE"}'));
   });
   上面代码:加载JSON模块时,首先判断浏览器是否原生支持JSON对象.如果是的,则将undefined传入回调函数,否则加载util目录下的json2模块.
   require方法也可以用在define方法内部.
   define(function(require){
       var otherModule=require("otherModule");
   });
   下面的例子显示了如何动态加载模板.
   define(function(require){
       var isReady=false,foobar;
       require(['foo','bar'],function(foo,bar){
           isReady=true;
           foobar=foo() bar();
       });

       return{
           isReady:isReady,
           foobar:foobar
       }
   });
   上面代码定义的模块,内部加载了foo和bar两个模块,在没有加载完成前,isReady属性为fale,加载完成后就变成了true.因此,可以根据isReady属性的值,决定下一步的动作.
   下面的例子是模块的输出结果是一个promise对象.
   define(['lib/Deferred'],function(Deferred){
       var defer=new Deferred();
       require(['lib/templates/?index.html','lib/data/?stats'],function(template,data){
           defer.resolve({template:template,data:data});
       });
       return defer.promise();
   });
   上面define方法返回一个promise对象,可以再改对象的then方法,指定下一步的动作.
   如果服务器端采用JSONP模式,则可以直接在require中调用,方法是指定JSONP中调用,方法是指定JSONP的callback参数define.

   require(['http://someapi.com/foo?callback=define'],function(data){
       console.log(data);
   });
   require方法允许添加第三个参数,错误处理的回调函数
   require(["backbone"],
           function(){Backbone}{
               return Backbone.View.extend(/*.....*/);
               },
           function(err){
               //....
               }
   )

   require对象还允许指定一个全局性的Error事件的监听函数.所有没有被上面的方法捕获的错误,都会被触发这个监听函数.
   requirejs.onError=function(err){
       //...
   }

   ==============AMD模式小结===========
   define和require这两个定义模块,调用模式的方法,合称AMD模式.它的模块定义的方法非常清晰,不会污染全局环境.能够清楚的显示依赖关系.
   AMD模式可以用于浏览器环境,并且允许非同步加载模块,也可以根据需要动态加载模块.

6.require方法本身也是一个对象,它带有一个config方法,用来配置require.js运行参数.
   require.config({
       paths:{
           jquery:[]
       }
   });

7.配置require.js:config方法
require.config({
   paths:{
       jquery:[
           '//cdnjs.cloudflart.com/ajax/libs/jquery/2.0.0/jquery.min.js',
           'lib/jquery'
       ],
       gys:'gys',
       people:'people'
   }
});

paths
   :参数指定各个模块的位置.这个位置可以是同一个服务器上的相对位置,也可以是外部网址.可以为每个模块定义多个位置,如果第一个位置加载失败,则加载第二个位置,上面的事例就表示如果cds加载失败,则加载服务器上的备用脚本.注意的是,指定本地路径时,可以省略文件最后的js后缀名.

require(['jquery'],function($){
   //......
});

上面代码加载jquery模块,因为jquery的路径已经在paths参数中定义了,所以就会到事先设定的位置下载.

baseUrl:
   baseUrl参数指定本地模块位置的基准目录,即本地模块的路径是相对于哪个目录的.该属性通常有require.js加载时的data-main属性指定.
shim:
   有些库不是AMD兼容的,这时就需要指定shim属性的值.shim可以理解成'垫片',用来帮助require.js加载非AMD规范的库.
require.config({
   paths:{
       'bockbone':'vendor/backbone',
       'underscore':'vendor/underscore'
   },
   shim:{
       'backbone':{
           deps:['underscore'],//被依赖
           exports:'backbone' //输出符号
       },
       'underscore':{
       exports:"_" //输出符号
       }
   }
});

上面backbone和underscore就是非AMD规范的库.shim指定他们的依赖关系(backbone依赖于underscore),以及输出符号(backbone为Backbone,underscore为"_").

8.插件
   require允许使用插件,加载各种格式的数据.
   define(['backbone','text!abc.html'],function(Backbone,abc){
       //.....
   });
   上面代码加载的第一个模块时backbone,第二个模块则是一个文本,用'text!'表示.该文本作为字符串,存在回调函数的abc变量中.

===================利用r.js打包项目=================
9.因为过多的模块亲求会降低网站的速度,这个时候就需要吧那些零散的项目合并起来.
有两种方式
   第一种通过cmd的命令行在node环境下打包处理
   第二种:造node环境下执行配置文件.
讲第二种:

原先的文件目录
   1
       js
           gys.js
           gysExt.js
           index.js
           news.js
           people.js
           peopleExt.js
           require.js
       build.js
       index.html
       news.html
       r.js

描述:index.js依赖gysExt.js; gysExt.js依赖gys.js
   news.js依赖于peopleExt.js;peopleExt.js依赖于people.js

   build.js是配置文件:
   代码如下:
   ({
      appDir:"./",
      baseUrl:"js",
      dir:"../2",
      paths:{
          jquery:'empty:'
      },
      modules:[
          {name:"index"},
          {name:"news"}
      ]
   })

在cmd下,切换到1目录下,执行命令:node r.js -o build.js
结过如下