JavaScript学习笔记 (八)—— require

  require.js
1、是什么?
 
     对js文件进行管理,模块加载器
     RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载
 
2、为什么?
 
     多个js文件依次加载时,浏览器会停止网页渲染,并且js文件存在依赖关系,要保证加载顺序(如依赖性越大的放在后面)会很复杂,而用require可以对js文件进行模块化管理、加载,实现js文件的异步加载,避免网页失去响应,管理模块间的依赖性,也便于代码的编写与维护。
 
3、怎么用?
 
    ① <script data-main=“js/main”  src=“js/require.js" ></script> 
        //下载一个require.js文件,将文件放于js子目录中。 
       data-main 属性作用是指定网页程序主模块,即 启动文件 ,这个文件会第一个被require.js下载,可将main.js简写成main。
 
    ② define方法:定义模块(分两种情况:a、定义独立模块-即不依赖其他模块;b、定义非独立模块)
         a、独立模块
        define(function( ){
            return {
            method1:function( ){ };
            method2:function( ){ }; 
     } ; 
    });   //define定义的模块可以返回任何值,不限于对象。
 
        b、非独立模块
      define ([‘module1’,’module2’],function(module1,module2 ) {
            return {
            method:function( ){
                  module1.methodA( );
                  module2.methodB( );
             }
      };
    });   //代码表示新模块返回一个对象,对象的method方法是外部调用的接口,method方法内部调用module1模块的methodA方法和module2模块的methodB方法。
   ps:  回调函数必须返回一个对象,这个对象即对应的模块。
  
 若依赖模块非常多,可这样写:
   define(function(require){
       var dep1 = require(‘dep1'),
             dep2 = require(‘dep2’),
             dep3 = require(‘dep3’),
    ………...
     
});
    ③ require方法:调用模块
       主模块依赖于其他模块,这时需要用AMD规范定义的require()函数:
        //main.js
        require([‘moduleA',‘moduleB’,‘moduleC’],function(moduleA,moduleB,moduleC){
         //业务代码
     });
        第一个参数是表示依赖关系的数组,第二个参数是回调函数,当前面的模块加载成功后,将被调用
 
 
AMD小结 : 
         define和require这两个定义模块、调用模块的方法,合称为AMD模式。它的模块定义的方法非常清晰,不会污染全局环境,能够清楚地显示依赖关系。
         AMD模式可以用于浏览器环境,并且允许非同步加载模块,也可以根据需要动态加载模块。
 

 
④ 配置  require.config( )写于主模块main.js的头部,参数就是一个对象。config方法的参数对象主要有:
    a、paths:指定各个模块的位置。
      require.config({
         paths:{
         “jquery”:"jquery.min”,
             “underscore”:"underscore.min”,
             “backbone”:“backbone.min"
   }
  });
    b、baseUrl:指定本地模块位置的基准目录。
     require.config({
           baseUrl : js/lib
});
    c、shim:用来加载非AMD规范的库
      require.config({
          paths:{
             “backbone”:”vendor/backbone”,
             “underscore”:”vendor/underscore"
    },
        shim:{
          “backbone”:{
             deps: [“underscore”],
             exports:”backbone"
         }  ,
          “ underscore”:{
             exports:”_"
       }  
    }
});
//代码中的backbone和underscore就是非AMD规范的库。shim指定它们的依赖关系(backbone依赖于underscore),以及输出符号(backbone为“Backbone”,underscore为“_”)。
    ⑤    require.js 插件
   
 domready 插件— 可以让回调函数在页面DOM结构加载完成后再运行
    require([‘domready!’],function(doc){
        //called once the DOM is ready
} );
text 和 image  插件 —允许require.js 加载文本和图片文件。
    define([
       ' text!review.txt',
       ‘image!cat.jpg' 
        ],
       function(review.cat){
          console.log(review);
          document.body.appendChild(cat);
}
);
类似的插件还有json和mdown,用于加载json文件和markdown文件。
原文地址:https://www.cnblogs.com/emory/p/5229099.html