javascript高级模块化require.js的具体使用方法

RequireJS是一个非常小巧的javascript模块载入框架,是AMD(Asynchronous Module Definition,异步模块加载机制)规范最好的实现之一。最新版的requireJS压缩后只有14k,堪称非常轻量。它还同时可以和其他的框架协调工作,使用requireJS必将使我们的前端代码质量得以提升。

首先我们先来看一下一个普通的页面js加载

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://www.jb51.net/js/index02.js" ></script> </head> <body> <h1>this is a page.</h1> </body> </html>

运行结果:

javascript高级模块化require.js的具体使用方法

此时,如果我们不对弹出框做操作,页面就不会接着加载,就不会有页面内容,这并不是我们想要实现的结果。

下面我们用require.js进行操作:

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://www.jb51.net/js/require2.1.11.js"></script> <script type="text/javascript"> require(["js/index","js/index01"],function(){ console.log("当js加载成功后会执行的函数"); },function(){ console.log("当js加载失败后会执行的函数"); }); </script> </head> <body> </body> </html>

index.js

define(function(){ console.log("this is a test!"); function test(){ console.log("haha,i am a test!"); } test(); });

首先页面上不再导入test02.js,只是导入了requireJS,其次在javascript中我们使用require()方法,在其中传递了一个数组的参数,实参为我们要导入的js文件的【路径+文件名称。

此时的运行结果:

javascript高级模块化require.js的具体使用方法

 

javascript高级模块化require.js的具体使用方法

javascript高级模块化require.js的具体使用方法

可以看出,此时页面内容已经显现出来了。并不像前面我们传统的一样在等待js运行完成后页面再加载,而是页面加载完成后才运行js代码,这样在运行效率上就大大的提高了。

根据上面的代码,我们可以来分析requirejs的基本API:

requireJS会定义三个变量:define,require,requirejs

require==requirejs,一般使用require更简短。

define 用来定义一个模块

require 加载依赖模块(引用定义好的模块),并执行加载完后的回调函数

require有三个参数:

require(["js/index","js/index01"],function(){ console.log("当js加载成功后会执行的函数"); },function(){ console.log("当js加载失败后会执行的函数"); }); //第一个参数:定义require中的依赖,参数必须是数组形式,即使只有一个依赖,也必须使用数组形式传参。 //第二个参数:是一个回调函数,用来处理加载完毕后的逻辑,当所有模块加载完成后触发 //第三个参数:也是一个回调函数,用来处理模块加载失败后的情况。如上面代码,js中没有定义index01.js这个文件,所以出调用这个回调函数。

加载网络文件

之前我们加载的都是本地的js文件,但是,有些时候我们又需要加载网络上的文件,那又该怎么加载呢?下面我们就来介绍一下怎样加载网络上的js文件.

我们现在以加载一个jquery.js文件为例:

//百度cdn公共库jQuery地址: //jQuery官方地址: https://code.jquery.com/jquery-3.1.1.js //注意:网络上去取时不能加后缀,否则取不到 require.config({ paths : { //为网络上的库去一个名字:jquery "jquery" : ["https://code.jquery.com/jquery-3.1.1"] } }); // require(["jquery","js/test01","js/test02"],function(){ alert("页面加载成功~~"); },function(){ alert("页面加载失败~~") });

在取网络上的文件时注意:

1、config方法的参数是一个对象
2、paths的值也是一个对象
3、当我们为网络上的库取名字是任意,但是建议取有意义的名字,别人可以通过名称知道你的网络资源是什么资源
4、库的值是一个数组,意味着可以多个同时写,防止网络异常取不到
5、特别注意:网络资源路径不能带后缀名,否则取不到
6、我们也可以先让去网络中去取,如果取不到,再在本地取,减轻本地服务的压力(属于项目优化)。

require.config({ paths : { //这样配置,减轻本地服务器的压力 "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"] } }); // require(["jquery","js/test01","js/test02"],function(){ alert("页面加载成功~~"); },function(){ alert("页面加载失败~~") });

同样我们也可以将本地的配置到paths中:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wywdyx.html