>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

RequireJs的使用详解

- 编辑:美洲杯在线投注 -

RequireJs的使用详解

篮球世界杯在线投注,一、为什么使用RequireJS?

一、为什么使用RequireJS?

  <script src="a.js"></script>
  <script src="b.js"></script>
  <script src="c.js"></script>

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

上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多,网页失去响应的时间就会越长;另外各文件的依赖关系很难管理。

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

RequireJs的作用:

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

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

上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多,网页失去响应的时间就会越长;另外各文件的依赖关系很难管理。

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

RequireJs的作用:

(3)定义了一个作用域来避免全局名称空间污染。

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

二、require.js的加载

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

1.从官网下载最新版本的require,放在js目录下,使用script引入页面:

  (3)定义了一个作用域来避免全局名称空间污染。

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

二、require.js的加载

为了不阻塞页面渲染,可以把它放在HTML的最底部或改为如下方式:

1.从官网下载最新版本的require,放在js目录下,使用script引入页面:

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

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

async属性表明该文件需异步加载(defer属性兼容IE)。

   为了不阻塞页面渲染,可以把它放在HTML的最底部或改为如下方式:

2.加载页面逻辑代码:

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

假定代码文件是main.js,也放在js目录下,则用如下几种方式引入:

  async属性表明该文件需异步加载(defer属性兼容IE)。

方式1:

2.加载页面逻辑代码:

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

假定代码文件是main.js,也放在js目录下,则用如下几种方式引入:

data-main属性指定网页程序的主入口,这个文件会第一个被requirejs加载。requirejs默认所依赖的资源都是js,所以可以把main.js简写成main。

  方式1:

方式2:

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

在加载require.js后,通过requirejs加载config配置文件(如有),最后加载主模块:

data-main属性指定网页程序的主入口,这个文件会第一个被requirejs加载。requirejs默认所依赖的资源都是js,所以可以把main.js简写成main。

require([‘configUrl'],function () { //config.js必须通过requirejs加载才能注册
 require([moduleAName],function(moduelA){
 //逻辑代码
 })
});

  方式2:

三、主模块的写法

  在加载require.js后,通过requirejs加载config配置文件(如有),最后加载主模块:

// main.js
  require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
  });
require([‘configUrl’],function () {        //config.js必须通过requirejs加载才能注册
      require([moduleAName],function(moduelA){
      //逻辑代码
      })
});

require()函数接受两个参数,第一个参数是一个数组,表示当前模块所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该回调函数,从而在回调函数内部就可以使用这些模块(被依赖的模块有return的值)。

三、主模块的写法

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有当前面依赖的模块全部下载并执行对应的回调之后,才会运行。

// main.js
  require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
  });

四、模块的配置

require()函数接受两个参数,第一个参数是一个数组,表示当前模块所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该回调函数,从而在回调函数内部就可以使用这些模块(被依赖的模块有return的值)。

require.config()方法可以定义模块的路径,并以短模块名的形式进行依赖的定义。该方法可以写在每个主模块(main.js)的前面,配合主模块一起使用。

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有当前面依赖的模块全部下载并执行对应的回调之后,才会运行。

参数是一个对象,这个对象的paths属性指定各个模块的加载路径。paths可以配置多个路径,如果远程cdn库没有加载成功,则加载本地的库。

四、模块的配置

如果不定义模块的配置,则在主模块中的依赖需要写完整路径。

require.config()方法可以定义模块的路径,并以短模块名的形式进行依赖的定义。该方法可以写在每个主模块(main.js)的前面,配合主模块一起使用。

在每个页面按需配置路径:

参数是一个对象,这个对象的paths属性指定各个模块的加载路径。paths可以配置多个路径,如果远程cdn库没有加载成功,则加载本地的库。

require.config({  //注册模块的配置,供后面的代码使用
    baseUrl: '/js/', 
 paths: {
   "jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...other code; 
 fixHeight.init();
});

如果不定义模块的配置,则在主模块中的依赖需要写完整路径。

或者将config配置作为一个单独的js文件,然后

在每个页面按需配置路径:

require([“configJsUrl”],function(){  //需要在main文件中通过require先异步加载模块配置
 require([‘ModuleName'],function(Name){
 …other code
 })
})

 

为了避免每个页面都要嵌套require,还可以用如下方式:

  require.config({              //注册模块的配置,供后面的代码使用
    baseUrl: '/js/',    
       paths: {
         "jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
           "fixheight": "login/fixheight"
       }
   });
   require(['jquery', 'fixheight'], function ($, fixHeight) {
        ...other code;   
        fixHeight.init();
});        

先创建单独的config.js文件:

 

require.config({ //注册模块的配置,供后面的代码使用
 baseUrl: "/js/app/", //其他依赖都是对于此位置的相对路径
 // 路径配置
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “模块短名”:”相对于baseUrl的路径地址,省略模块文件的后缀.js”
 },
 // 非AMD模式编写的类库需要重新配置
 shim: {
 underscore: {
  exports:'_'
 },
 backbone(短模块名仍需要定义路径): {
  exports: 'Backbone',      //类库输出的变量名,表明这个模块被外部调用时的名称
  deps:['jquery','underscore'] //该模块的依赖
 }
 },
 urlArgs: "bust="   document.getElementById('publishDate').attributes['value'].value  //js资源的参数,控制版本刷新缓存
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码,会依次加载需要的模块

 或者将config配置作为一个单独的js文件,然后

本文由计算机教程发布,转载请注明来源:RequireJs的使用详解