基于Require.js使用方法(总结)


Posted in Javascript onOctober 26, 2017

一、为什么要使用require.js

首先一个页面如果在加载多个js文件的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

require.js,就是为了解决这两个问题:

1. 实现js文件的异步加载,避免网页失去响应;
2. 管理模块之间的依赖性,便于代码的编写和维护。

二、require.js的加载

第一步,去官网下载最新版本,直接放到页面进行加载

<script src="js/require.js"></script>

加载这个文件可能会导致网页失去响应,可以将它放到页面的底部加载,也可以这样写

<script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

加载require.js以后,下一步就要加载我们自己的代码了,也就是入口,可以叫主模块,如果文件名叫main.js,写成下面这样就可以了:

<script src="js/require.js" data-main="js/main"></script>  .js后缀可以省略

三、主模块的写法

如果主模块依赖于jQuery可以这样写

require(['jquery'], function ($){ 
 alert($); 
});

四、require.config()方法

require.config({ 
paths: { 


"jquery": "jquery.min", 


"underscore": "underscore.min", 


"backbone": "backbone.min"

} 
});

上面的代码给出了三个模块的文件名,路径默认与main.js在同一个目录(js子目录)。如果这些模块在其他目录,比如js/lib目录,则有两种写法。

• 一种是逐一指定路径

require.config({ 
paths: { 


"jquery": "lib/jquery.min", 


"underscore": "lib/underscore.min", 


"backbone": "lib/backbone.min"

} 
});

• 另一种则是直接改变基目录(baseUrl)。

require.config({ 
baseUrl: "js/lib", 

paths: { 


"jquery": "jquery.min", 


"underscor: "underscore.min", 


"backbone": "backbone.min" 

} 
});

• 如果某个模块在另一台主机上,也可以直接指定它的网址,比如

require.config({ 
paths: { 


"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

} 
});

五、AMD模块的写法

require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。

具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

// math.js 
define(function (){ 
var add = function (x,y){ 


return x+y; 

}; 

return { 


add: add 

}; 
});

加载方法如下:

// main.js 
require(['math'], function (math){ 
alert(math.add(1,1)); 
});

如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。

define(['myLib'], function(myLib){ 
function foo(){ 


myLib.doSomething(); 

} 

return {  //返回模块中的函数 


foo : foo 

}; 
});

当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

六、加载非规范的模块(shim的使用方式)

// app.js 
 function sayHello(name){ 
  alert('Hi '+name); 
}
// main.js 
require.config({ 
shim: { 


'app': { //这个键名为要载入的目标文件的文件名,不能随便命名。 



exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称 


} 

} 
}); 
 
require(['app'], function(sayHello) { 
 alert(sayHello()) 
})

导出一个函数,意味着我们得到了一个javaScript类

但是如果在my.js中写了很多function,整合成一个function有点麻烦,想直接导出?方法如下:

// app.js 
function sayHi(name){ 
 alert('Hi '+name); 
} 
function sayHello(name){ 
 alert('Hiello '+name); 
}
// main.js 
require.config({ 


shim: { 



app: { 




init: function() { //这里使用init将2个接口返回 





return { 






sayHi: sayHi, 






sayHello: sayHello 





} 




} 



} 


} 

}); 
 

require(['app'], function(a) { 


a.sayHi('zhangsan'); 


a.sayHello('lisi'); 

});

shim的有序导入

require.config({ 
 
 shim: { 
  'jquery.ui.core': ['jquery'], //表示在jquery导入之后导入 
 
 'jquery.ui.widget': ['jquery'], 
 
 'jquery.ui.mouse': ['jquery'], 
 
 'jquery.ui.slider':['jquery'] 
   }, 
 paths : {  
  jquery : 'jquery-2.1.1/jquery',  
  domReady : 'require-2.1.11/domReady',  
  'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',  
  'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',  
  'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',  
  'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider' 
  } 

});  
 

require(['jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'], function($) {    
 
$("#slider" ).slider({    
 
 value:0,   
 
 min: 0,   
  
max: 4,   
  
step: 1,   
  
slide: function( event, ui ) {}  
  
 });  

 });

以上这篇基于Require.js使用方法(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
vue计算属性及使用详解
Apr 02 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
详解JavaScript 作用域
Jul 14 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
原生javascript实现文件异步上传的实例讲解
Oct 26 #Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 #Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 #Javascript
js插件实现图片滑动验证码
Sep 29 #Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 #Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 #Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 #Javascript
You might like
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python素数筛选法浅析
2018/03/19 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python构造函数init实例方法解析
2020/01/19 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
应用化学专业本科生求职信
2013/09/29 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书