本文介绍了require.js的具体使用方法,分享给大家,也给自己留个笔记。
Require.js:
RequireJS是一个非常小巧的javascript模块载入框架,是AMD(Asynchronous Module Definition,异步模块加载机制)规范最好的实现之一。最新版的requireJS压缩后只有14k,堪称非常轻量。它还同时可以和其他的框架协调工作,使用requireJS必将使我们的前端代码质量得以提升。
首先我们先来看一下一个普通的页面js加载
运行结果:
此时,如果我们不对弹出框做操作,页面就不会接着加载,就不会有页面内容,这并不是我们想要实现的结果。
下面我们用require.js进行操作:
index.html
index.js
首先页面上不再导入test02.js,只是导入了requireJS,其次在javascript中我们使用require()方法,在其中传递了一个数组的参数,实参为我们要导入的js文件的【路径+文件名称。
此时的运行结果:
可以看出,此时页面内容已经显现出来了。并不像前面我们传统的一样在等待js运行完成后页面再加载,而是页面加载完成后才运行js代码,这样在运行效率上就大大的提高了。
根据上面的代码,我们可以来分析requirejs的基本API:
requireJS会定义三个变量:define,require,requirejs
- require==requirejs,一般使用require更简短。
- define 用来定义一个模块
- require 加载依赖模块(引用定义好的模块),并执行加载完后的回调函数
require有三个参数:
加载网络文件
之前我们加载的都是本地的js文件,但是,有些时候我们又需要加载网络上的文件,那又该怎么加载呢?下面我们就来介绍一下怎样加载网络上的js文件.
我们现在以加载一个jquery.js文件为例:
//
require(["jquery","js/test01","js/test02"],function(){
alert("页面加载成功~~");
},function(){
alert("页面加载失败~~")
});
在取网络上的文件时注意:
1、config方法的参数是一个对象 2、paths的值也是一个对象 3、当我们为网络上的库取名字是任意,但是建议取有意义的名字,别人可以通过名称知道你的网络资源是什么资源 4、库的值是一个数组,意味着可以多个同时写,防止网络异常取不到 5、特别注意:网络资源路径不能带后缀名,否则取不到 6、我们也可以先让去网络中去取,如果取不到,再在本地取,减轻本地服务的压力(属于项目优化)。
同样我们也可以将本地的配置到paths中:
//
require(["jquery","test01","test02"],function(){
alert("页面加载失败~~")
});
上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫”主数据”的功能,我们首先创建一个main.js:
然后再页面中使用下面的方式来使用requirejs:
将所有的配置和导入js都放在了main.js中,这样在页面只要这样一个标签就行了。
代码演示如下:
});