使用RequireJS库加载JavaScript模块的实例教程

标签:网站展示    日期:2018-02-08 10:28    录入:天恒娱乐平台注册    浏览:

  

[RequireJS,JavaScript,js,加载]使用RequireJS库加载JavaScript模块的实例教程

  

js通过script标签的默认加载方式是同步的,即第一个script标签内的js加载完成后,才开始加载第二个,以此类推,直至js文件全部加载完毕。且js的依赖关系必须通过script的顺序才能确保;而在js加载期间,浏览器将停止响应,这大大影响了用户体验,基于此,很多解决js以来和加载的方案出现,require js就是其中之一。

  

  

requirejs加载的模块,一般为符合AMD标准的模块,即用define定义,用ruturn返回暴露方法、变量的模块;requirejs也可以加载飞AMD标准的模块,但比较麻烦,这次不涉及。

  

  

require加载js主涉及以下方面:  

  
      
  • script 标签data-main属性声明requirejs加载的入口模块,async="true"(非ie) 和defer(ie)标签表明异步加载。
  •   
  • require.config配置模块对应的路径
  •   
  • require声明依赖关系
  •   
  

html demo  

  
  
  天恒娱乐  
  
  
  

main.js  
  

  
  
  require.config({  //声明模块的位置  paths: {  "jquery":"libs/jquery"  "login" : "libs/login"  }  //或使用baseUrl指定所有模块的路径  baseUrl: "js/libs"  });  //使用require加载模块,第一个参数为数组,即要加载的模块,将按数组顺序加载;第二个为回调函数,在全部加载完成后执行。

  require(['jquery','login'],function($,Login){  alert("jquery and login module load success!");  Login.do_login();  //some else  });  

  
  

符合amd的login module定义  

  
  
  //依赖jquery的定义  define(['jquery'],function($){  // some definations  function do_login(){  $.post('/sessions/create',{uname:$("#uname").val(),  password:$("#password").val()},function(data){  //some  });  return {do_login:do_login};  }  });  //不依赖其他模块的定义  define(function(){  //some definations  return {xx:xx};  });  
  
  

rails没有应用js加载器,一方面是新版本的rails的asset pipe会将所有的js文件打包为一个js文件,没有多个js加载的状态,另一方面turbolink使用褒贬参半的所谓pjax技术,默认链接改为ajax方式,只获取html的bod部分,head部分不变动,使js的加载只在第一次打开网站时进行。

  

  

  
  案例一: 加载 JavaScript 文件  

  
  
  require(["./js/a.js", "./js/b.js"], function() {  myFunctionA();  myFunctionB();  });  
  
  

require 方法里的这个字符串数组参数可以允许不同的值,当字符串是以”.js”结尾,或者以”/”开头,或者就是一个 URL 时,RequireJS 会认为用户是在直接加载一个 JavaScript 文件,否则,当字符串是类似”my/module”的时候,它会认为这是一个模块,并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件。配置的部分会在稍后详细介绍。

  

  

这里要指出的是,RequireJS 默认情况下并没有保证 myFunctionA 和 myFunctionB 一定是在页面加载完成以后执行的,在有需要保证页面加载以后执行脚本时,RequireJS 提供了一个独立的 domReady 模块,需要去 RequireJS 官方网站下载这个模块,它并没有包含在 RequireJS 中。有了 domReady 模块,案例一 的代码稍做修改加上对 domReady 的依赖就可以了。

  

  

案例二: 页面加载后执行 JavaScript  

  
  
  require(["domReady!", "./js/a.js", "./js/b.js"], function() {  myFunctionA();  myFunctionB();  });  
  
  

执行案例二的代码后,通过 Firebug 可以看到 RequireJS 会在当前的页面上插入为 a.js 和 b.js 分别声明了一个 < script> 标签,用于异步方式下载 JavaScript 文件。async 属性目前绝大部分浏览器已经支持,它表明了这个 < script> 标签中的 js 文件不会阻塞其他页面内容的下载。

  

  

案例三:RequireJS 插入的 < script>  

  
  
  
  
  

使用 RequireJS 来定义 JavaScript 模块  

  

这里的 JavaScript 模块与传统的 JavaScript 代码不一样的地方在于它无须访问全局的变量。模块化的设计使得 JavaScript 代码在需要访问”全局变量”的时候,都可以通过依赖关系,把这些”全局变量”作为参数传递到模块的实现体里,在实现中就避免了访问或者声明全局的变量或者函数,有效的避免大量而且复杂的命名空间管理。

★★★小编:天恒娱乐 整理文章,欢迎大家转载 ★★★
上一篇:jQuery入门之层次选择器实例简析
下一篇:没有了