requireJS的优点
- 防止js加载阻塞页面渲染
- 使用程序调用的方式加载js
require会定义三个变量:define,require,requirejs,其中require === requirejs,
一般使用require更简短
- define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块,并执行加载完后的回调函数
加载文件
之前的例子中加载模块都是本地js,但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库为例:
require.config({ paths : { "jquery" : ["https://cdn.bootcss.com/jquery/3.3.1/jquery"] } }) require(["jquery","js/a"],function($){ $(function(){ alert("load finished"); }) })
注意:
require(["jquery","js/a"]中加载本地js文件如果失败 直接写本地js文件的名字 例如:test.js
通过define函数定义了一个模块,然后再页面中使用来加载该模块(注意require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义),require API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑
require.config
是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,本地的js我们也可以这样配置require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"], "a" : "js/a" } }) require(["jquery","a"],function($){ $(function(){ alert("load finished"); }) })
通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如下
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a" : "js/a" } }) require(["jquery","a"],function($){ $(function(){ alert("load finished"); }) })