前言
了解了一下require的一些基本用法
风萧萧
require有什么用呢
抄袭的,嘿嘿
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。
1、require.js可以防止js阻塞页面的渲染
2、在调用js的时候,也许我有一点点模块的想法,写了不少js模块,有了require,就不必一个一个的在页面中加载,写一堆的引入script标签了
3、模块,如果js文件特别长,维护起来找都是个麻烦
好处还是多多的
然后我就用了一下下
使用
基本api
require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短
define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块,并执行加载完后的回调函数
1、基本用法
首先是在页面头部引入require.js
<script src="require.js"></script>
我们先写一个假设map.js,里面放我们的一些地图需要的js代码
ok,首先我们定义一下map.js这个模块,用define,如下
define(function(){
这里面写我们需要写的map.js代码
})
接着我们就可以在页面中调用了
<script>
require(['map']);
</script>
ok,完毕,map中的代码就会执行出来了,那怎么才知道加载出来了呢,刚好,require给了我们一个参数callback就是用来处理加载完毕的逻辑的
<script>
require(['map'],function(){
alert('我加载完了');
});
</script>
那如果我们想加载网上的链接或者类库呢,比如说我一般jquery都是引入的cdn的链接,怎么办,有办法,看代码
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
}
})
require(["jquery","map"],function($){
$(function(){
alert("load finished");
})
})
require.config就是用来配置require的,也可以理解成是给模块起名字的,如图中,jquery就可以直接写jquery了,同时path也可以加载本地的库
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"map" : "map"
}
})
这样一来,如果链接没有加载成功,就会去调用本地的jquery,有没有发现在回调函数中的 参数,没错,它就是依赖于模块的输出变量,为什么是 ,用jquery习惯的,哈哈,也可以改其他的名字,假如有多个模块需要写入,就可以根据模块的数量来定义输出变量,看代码
require(["jquery","map"],function($,map){
$(function(){
alert("load finished");
})
})
如果不写,就相当于这个模块没有输出变量,所以尽量有输出变量的模块写在前面,防止顺序出错
全局配置
模块多了是不是还得在页面写一堆,要是模块里面的函数很多都写在页面是不是不好,那要是有很多页面呢,每个页面都需要配置一下吗,requireJS提供了一个主数据的功能,我们首先创建一个main.js,页面中的引入就需要改变一下,如下
<script data-main="main" src="require.js"></script>
加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名。
data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main=”js/main”设定后,我们在使用require([‘jquery’])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了。
这样一来,我们可以把配置以及require引用模块而代码写在main.js里面,页面就只需要一句引入script标签就可以了,不管多少代码,多少模块,一次性搞定,是不是很方便。
第三方模块
通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim,shim解释起来也比较难理解,shim直接翻译为”垫”,其实也是有这层意思的
require.config({
shim: {
"underscore" : {
exports : "ex";
}
}
})
require(["underscore"], function(ex){
_.each([1,2,3], alert);
})
插件形式的非AMD模块,我们经常会用到jquery插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件”垫”到jquery中:
require.config({
shim: {
"underscore" : {
exports : "ex";
},
"jquery.form" : {
deps : ["jquery"]
}
}
})
也可以简写为:
require.config({
shim: {
"underscore" : {
exports : "ex";
},
"jquery.form" : ["jquery"]
}
})
配置完成之后我们就可以这么引入模块了
require.config(["jquery", "jquery.form"], function($){
$(function(){
$("#form").ajaxSubmit({...});
})
})
最后,还有个小知识点,有时候我们会因为服务器的原因遇到版本不更新的问题,不忙,我们在配置中可以加上版本号urlArgs: ‘ver= ‘,,如下
requirejs.config({
shim: {
},
paths:{
},
urlArgs: 'ver=4.8',
});
收工~