脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-requireJS(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 一、关于requirejs
requirejs是一个用于异步加载js模块的框架
二、HOW TO USE
首先先去官网下载requirejs.js下来,再在自己的项目中引入
1 <script tyPE="text/javascript" src="../requirejs.js" data-main="../main"></script>
注意到data-main这个属性,简单的理解就是一个入口函数,用来启动脚本的加载过程。
tip:为了使这个文件加载时候不失去响应,你可以选择将它放在网页底部加载,还有另外一个办法就是写成下面这样
1 <script type="text/javascript" src="../requirejs.js" data-main="../main" async="true" defer></script>
async这个属性表明它要异步加载,避免失去响应,另外defer是为了兼容IE浏览器(IE不支持async这个属性),所以完整的把两个都写上。
三、简单的例子
假设js/a.js中的代码如下:
1 VAR info = "hello world"//简单的定义了一个变量
然后在mian.js中用requirejs加载它,如下所示
1 require(["../a.js"],function(a){
2 alert(info);//弹出hello world
3 })
然后再查看浏览器的开发者工具下,可以看到已经加载了
可以看到require接受3个参数(示例中为2个),第一个参数为标识的id(建议忽略);第二个参数为一个字符型的数组,为要加载的js模块;第三个参数为回调函数,
当js模块注入加载完成后,此函数就会被调用,其中函数的参数,依次顺序对应第二个参数中字符串数组的值。
tip:第二个参数中字符串数组中允许不同的值,当字符串是以“.js”结尾的(例如上面中的js/a.js)或者是以“/”开头,又或者直接是一个完整的url(
包含URL协议,如"http:"、"https:"),则会被requirejs认为用户是直接加载一个js模块。
否则,当字符串是类似”my/module”的时候,它会认为这是一个模块,并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件(后面将介绍)
四、配置
现在我们来换一种写法,我们使用require.config来对模块的加载行为自定义,其中参数是一个对象
1 require.config({
2 paths:{
3 jquery:"jquery-1.10.2.min",
4 a:"a"
5 }
6 });
7
8 require(["jquery","a"],function($,a){
9 alert($().jquery); //1.10.2
10 alert(info); //hello world
11 });
简单的理解就是参数对象中的path属性用来设置路径的。
由于requirejs是以相对于baseurl属性(示例中没有给出)地址来加载所以的代码的。其中baseUrl是为require.config的参数(参数为对象)里一个属性。
如果没有显式指定config及data-main,则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。
此时,RequireJS默认假定所有的依赖资源都是js脚本,因此无需在module ID上再加".js"后缀(即上面的jquery-1.10.2.min不用写成jquery-1.10.2.min.js
写上会报错(Uncaught Error: Script error for: jquery)。
五、用define自定义模块
1 //b.js
2
3 define(["jquery"],function($){
4 return {
5 dom:function(){
7 alert("shabi")
8 },
9 abc:"8888888"
10 };
11 })
12
13 //main.js
14
15 require.config({
16 paths:{
17 jquery:"jquery-1.10.2.min",
18 a:"a",
19 b:"b"
20 }
21 });
22
23 require(["jquery","a","b"],function($,a,b){
24 alert($().jquery); //1.10.2
25 alert(info); //hello world
26 b.dom(); // 改写了页面的html文字,弹出shiba
27 alert(b.abc); //8888888
28 console.LOG(b.abc); //控制台输出8888888
29 });
页面代码为:<p id="p1">aaa</p>
上面演示了如何自定义模块包含了值对,函数式(存在依赖的函数式定义),可依据需要自己定义,另外,我们也可以再返回之前做一些其他的事情。
六、其他一些配置属性
baseUrl:用于设置基目录(如上面的例子可以设置baseUrl:"../",代码一样不变)
config(直接看下面的例子
13
14 //main.js
15
16 require.config({
17 baseUrl:"../",
18 paths:{
19 a:"a",
20 },
21 config:{
22 "a":{
23 message:"liucunjie"
24 }
25 }
26 });
27
28 require(["a"],function(a){
29 a.ms() // 控制台下输出liucunjie
30 });
其中在mian.js配置中,指明config中是哪个模块(上面的例子是a.js模块)
然后在a.js文件代码书写
1 define(["module"],function(module){
2 return{
3 ms:function(){
4 var mess = module.config().message;
5 console.log(mess);
6 }
7 }
8 })
引入module,然后用Module.config()来获取。
七、加载非规范(amD)的模块
理论上,requirejs加载的模块必须是符合AMD规范的,或者是用define()函数定义的模块
如今,很多主流的库都符合AMD规范,但是也有很多库并不符合,这时就需要在配置里设置shim属性
例如backbone这个库,没有采用AMD规范编写
1 require.config({
2 shim:{
3 'underscore':{
4 exports:'_'
5 },
6 'backbone':{
7 deps:['underscore','jquery'],
8 exports:'Backbone'
9 }
10 }
11 });
其中deps数组为表明其依赖,exports(输出的变量名)则为这个模块外部调用时的名称。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! @L_360_3@,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-requireJS(一)全部内容,希望文章能够帮你解决javascript代码实例教程-requireJS(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。