基于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 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
js 数据类型判断的方法
Dec 03 Javascript
原生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正则
2006/07/07 PHP
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP的基本常识小结
2013/07/05 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
再探JavaScript作用域
2014/09/24 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
深入浅析Python字符编码
2015/11/12 Python
用Python设计一个经典小游戏
2017/05/15 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
python cs架构实现简单文件传输
2020/03/20 Python
python sorted函数原理解析及练习
2020/02/10 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
护理专业求职信
2014/06/15 职场文书