zoukankan      html  css  js  c++  java
  • require.js按需加载使用简介


    一、为什么要用require.js?

    最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。

      <script src="1.js"></script>
      <script src="2.js"></script>
      <script src="3.js"></script>
      <script src="4.js"></script>
      <script src="5.js"></script>
      <script src="6.js"></script>

    这段代码依次加载多个js文件。

    这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

    require.js的诞生,就是为了解决这两个问题:

      

      (1)实现js文件的异步加载,避免网页失去响应;

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

    二、require.js的加载(index.html或是product.html中的代码)

    使用require.js的第一步,是先去官方网站下载最新版本。

    下载后,假定把它放在js子目录下面,就可以加载了。

      <script src="js/require.js"></script>

    有人可能会想到,加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:

      <script src="js/require.js" defer async="true" ></script>

    async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

    加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。那么,只需要写成下面这样就行了:

      <script src="js/require.js" data-main="js/main"></script>

    data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。

    三、模块的加载(main.js文件中的代码)


    一种则是直接配置目录(baseUrl 要求所有的js文件都放在同一个文件夹目录下,如这里都放在js文件下)。

      require.config({

        baseUrl: "js",

                      <!-- baseUrl,它的作用就是,以它作为基础路径,在这个路径之下,查找文件。我是将所有.js文件都放在js文件夹下的。
                               所以,在require([])或者define([])的依赖数组列表中,写上依赖的文件路径:如require(['jquery','lunbo','car'],function($,l,c){ })

                        -->

              });

         require(['jquery', 'car', 'lunbo',/*依赖的文件路径*/], function ($, car, l,/*依赖模块返回的对象或数组*/){

                 // some code here

                       //调用依赖模块中的属性或方法

       })

    二种则是配置路径(paths 路径可以是绝对路径,相对路径,或是远程路径,不要求js文件都放同一个文件夹里面)

      require.config({

             

      paths: {

       <!-- paths的作用呢?就是将一些常用的js文件,换成通用的名字。
    例如jquery-1.8.2.min.js,我们不可能每次调用它时,都写这一啪啦吧,
    所以为了方便,就将jquery替代jquery-1.8.2.min.js咯(给路径起别名),以后我们就可以直接使用jquery(别名)了,快捷方便。 -->

          "jquery": ["jquery","https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"],

                     "car":"car",

                     "lunbo":"lunbo",

                     "erro":"erro",

                     "glass":"../放大镜",

                      "preloading":"../图片预加载"

                    
          

        }

      });

     require(['jquery', 'glass', 'lunbo','preloading'/*依赖的文件别名*/], function ($, gla, l,prelo/*依赖模块返回的对象或数组*/){

                 // some code here

                        //调用依赖模块中的属性或方法

       })

    三种则是一二两种的结合

        require.config({

               baseUrl:'js',

               paths:{

                  "glass":"../放大镜",

                  "preloading":"../图片预加载"

            }

     })

       require(['jquery','car','lunbo','glass','preloading'],function($,car,l,gla,prelo){//回调函数中的参数一 一对应依赖模块返回的对象或函数

                              l.move();//lunbo.js模块返回的是对象

                              car();//car.js模块返回的是函数

            

      })

    五、标准模块的定义(define())  
    1 :模块必须采用特定的define()函数来定义

    如:lunbo.js文件中的代码

    define(['jquery'],function($){

    return{
             "move":function(){
                          $("#a").html("lunbo中执行的代码");
                       

                  }

            }

    })

    如:car.js文件中的代码

    define(['jquery','lunbo'],function($,l){

           return  function  shoping(){

                       console.log("car中执行的代码")

                       l.move()//lunbo.js模块返回的是对象

          }

    })

    <!--
    define!它的作用是,定义一个js模块,供其他模块或者require使用。
    它引用其他js的模块的方法和require差不多,都是将需要的js文件引入,然后参数一一对应。
    大家需要要注意的是,define里定义的方法或者变量,其他模块是访问不到的,
    所以,你如果想其他模块也能访问,就应该返回(return)对象或者函数都可以。
    在这里,我return的是一个对象,提供init供其他模块调用。
    -->


    六 非标准化的模块(erro.js中的代码)

    定义的模块不使用define()函数定义的  都是非标准模块

    如:function sucess(){

            console.log("非标准模块中执行的代码")

    }

    //非标准模块中定义的函数 ,由于没有以函数或是对象的形式返回,所以在其他的模块中无法访问

    //如果想访问非标准模块中的函数 就必须在require.config()中进行配置

    如:   require.config({

              baseUrl:'js',

              paths:{

                     'glass':"../放大镜",

                    "preloading":"../图片与加载"

             },

           shim{

                   "erro":{//需要配置的模块名称

                            exports:'sucess'//非标准模块的函数名

                    }

            }

    })

     require(['erro'],function(er){

                er();//erro.js返回的是当个函数

       })

    定义的模块不使用define()函数定义的  都是非标准模块

    如:function sucess(){

            console.log("非标准模块中执行的代码1")

    }

        function madol(){

            console.log("非标准模块中执行的代码2")

      }

    //非标准模块中定义的函数 ,由于没有以函数或是对象的形式返回,所以在其他的模块中无法访问

    //如果想访问非标准模块中的函数 就必须在require.config()中进行配置

    如:   require.config({

              baseUrl:'js',

              paths:{

                     'glass':"../放大镜",

                    "preloading":"../图片与加载"

             },

           shim{

                   "erro":{//需要配置的模块名称

                           init:function(){

                                      return {             //配置多个非标准模块的函数名

                                                su:sucess,//注意此时的函数名不用引号 

                                                mo:madol

                                                }

                                 }

                          }

                 }

    })

     require(['erro'],function(er){

                er.su();//erro.js返回的是对象

                er.mo();

       })



  • 相关阅读:
    从Oracle提供两种cube产品说开
    Sql Server DWBI的几个学习资料
    Unload Oracle data into text file
    初学Java的几个tips
    我常用的Oracle知识点汇总
    benefits by using svn
    如何在windows上使用putty来显示远端linux的桌面
    building commercial website using Microsoft tech stack
    Understand Thread and Lock
    Update google calendar by sunbird
  • 原文地址:https://www.cnblogs.com/huangshikun/p/7018275.html
Copyright © 2011-2022 走看看