zoukankan      html  css  js  c++  java
  • 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文件。
  • 相关阅读:
    简易的sniffer程序
    ubuntu 13.10 Rhythmbox不能播放mp3 和中文乱码的问题
    5.单行函数,多行函数,字符函数,数字函数,日期函数,数据类型转换,数字和字符串转换,通用函数(case和decode)
    Java设计模式-单例模式
    WordPress的用户系统总结
    STM8S EEPROM 操作
    简化ui文件转换写法
    大型网站架构之应用服务器集群化
    大型网站架构之分布式缓存
    大型网站架构之JAVA中间件
  • 原文地址:https://www.cnblogs.com/emory/p/5229099.html
Copyright © 2011-2022 走看看