Javascript模块化编程-require.js[3]

很多情况下,JS都是放到一个或者多个文件里,只要加载这些文件就可以了。

但是对于一些小型项目而言,这种写法是没有任何问题的。

但是对于某些大型网站,JS的量是很大的,如果还采用这种方式,网站时常在加载时,出现假死的现象。

为了解决这个问题,require.js应运而生。

1、require.js的核心

      1、实现js文件异步加载,避免网站失去响应。

      2、管理模块之间的依赖性,便于代码的编写和维护。

2、require.js的加载

     在网页加载require.js时,需要实现如下写法:

          <script src="js/require.js" defer async="true" data-main="js/jsname"></script>

          defer兼容IE。

          async=“true”兼容其它常规浏览器。

          data-main属性的作用:加载当前网页的主模块。

3、主模块的写法

     主模块即当前网页的主程序。

     主模块依赖其它模块,此时,需要AMD规范定义require()函数。

     Eg:

         require(['moduleA','moduleB','moduleC',function(moduleA,moudleB,moduleC){

                   //...

                   }]);

   第一个参数:所依赖的各个模块的全局名称。

   第二个参数:回调函数,当前模块加载成功后,该函数将被调用。加载模块会以参数的形式传入改函数。

4、模块的配置

     require.config()方法,实现了对模块加载行为的自定义。require.config()定义在主模块的头部。

     Eg:

         require.config({

               paths:{

                         "jquery":"juqery.min",

                         ...

                       }

         });

    如果子模块在主模块的同级目录的子目录下,那写法为:

     Eg:

         require.config({

               paths:{

                         "jquery":"lib/juqery.min",

                         ...

                       }

         });

        或

        

         require.config({

                    baseUrl:"js/lib",

                    paths:{

                         "jquery":"lib/juqery.min",

                         ...

                       }

         });

        require.js要求,每个模块是一个单独的js文件。如果加载多个模块时,此时需要发出多次http请求,那么加载速度方面就会大大折扣。

        require.js提供了一个优化工具,当模块部署完毕后,可以用这个工具将多个模块合并在一个文件中。

5、AMD模块写法

     require.js加载的模块,采用AMD规范。

     定义模块,需要采用特定的define()函数来定义,以test.js为例。

     定义不依赖其它模块的写法:

        define(function(){

            var fn1=function(obj){

                return obj;            

            };

           return{

              op:fn1

           };

         });

    定义依赖其它模块的写法:

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

           function test(){

               //...

           }

           return {

              ta:test

           };

       });

     主模块或者别的模块调用的写法:

      require(['test'],function(test){

          //...

      });

6、非AMD规范模块写法

     理论上,require.js加载模块,必须按照AMD规范、必须用define()函数定义模块。

     例如:JQuery等。,现实环境中,也会出现非AMD规范的模块,require.js也实现了对非AMD规范的模块的兼容。

     实现对非AMD模块的兼容,需要用require.config()进行配置,定义他们的特征。

     Eg:

         jQuery插件可以这样定义:

         require.config({

              shim:{

                   'jQuery.scroll':{

                         deps:['jQuery'],

                         exports:'jQuery.fn.scroll'

                    }

               }

         });

         deps,模块的依赖。

         exports,输出的变量名,别的模块调用这个模块时的名称。

7、require.js插件

     require.js还提供了一些插件

     json和mdown插件。

     domready插件,可以让回调函数在也页面DOM结构加载完成后再运行。

     Eg:

        require(['domready!'],function(doc){

                //...

        });

    text和image插件,允许require.js加载文本和图片文件。

    define(

      ['text!review.txt','image!cat.jpg'],

      function(review,cat){

          console.log(review);

          document.body.appendChild(cat);

     }

    );

 

【上一章节】  【下一章节】

posted @ 2015-09-06 11:58  fang_beny  阅读(209)  评论(0编辑  收藏  举报