Requirejs简单介绍
具体详情请进入官网查阅：http://requirejs.org
一、什么是Requirejs
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。
二、为什么使用Requirejs
不使用Requirejs之前，我们在开发前端代码时会碰到如下情况：
2.1 代码臃肿
如果页面逻辑较为复杂，需要引入多个js文件，这样会导致页面显得比较臃肿
2.2 控制加载顺序
js文件之间如果存在依赖关系，我们得手动控制js文件的加载顺序。
2.3 全局污染
js开发中，难免会存在相同的代码，我们可以通过面向对象的思想，将这部分代码抽离出来，放在新的js文件中。但是这种方式会出现全局污染的问题。
使用Requirejs可以解决上述的问题
三、Requirejs的好处
3.1 异步加载
异步加载js文件，只需手动配置js文件的依赖关系，无需控制加载顺序。
3.2 模块化开发
一个js文件就是一个模块，将公共代码做成一个模块。需要用到时，引入该模块，避免全局污染
四、使用Requirejs
4.1 基础概念
Requirejs模块化开发中，通过define对模块进行定义,通过require进行对模块的引用。
4.2 案例
项目目录结构
// 名称：utils.js
// 功能：定义模块，模块名称默认为js文件名称
define(function() {
return {
sayHello : function() {
alert("hello requirejs");
}
}
});
// 名称：main.js
// 功能：引用模块
// 路径说明：默认以main.js所在目录为requirejs导入js文件的默认目录
require(["app/utils"],function(utils) {
utils.sayHello();
});
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Requirejs</title>
</head>
<body>
<!-- 引入requirejs文件，以main.js为函数入口 -->
<script data-main="main.js" type="text/javascript" src="require.js"></script>
</body>
</html>
在html页面中，我们只引入了require.js文件，但是浏览器却加载了3个js文件。
因为，main.js作为函数调用的入口，而main.js代码中调用utils模块的sayHello方法。因此浏览器就加载了3个js文件
五、Requirejs常用配置参数
配置参数需要用到requirejs.config()方法。
1.baseUrl：设置默认路径。
// 修改main.js内容：
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
});
require(["utils"],function(utils) {// 将app/utils改成了utils
utils.sayHello();
});
2.paths：设置模块名称和js文件路径
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
paths : {
// 下边key : value 表示 模块名称 : 模块路径
// 定义模块路径，浏览器不会加载js文件
// 因为app是默认目录，因此此处需要../ 再进入到lib获取js文件
"jquery" : "../lib/jquery-2.1.4.min"
}
});
require(["utils","jquery"],function(utils,$) {// 引入jquery模块，浏览器会加载js文件
console.log($)
utils.sayHello();
});
3.shim：设置js文件依赖关系
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
paths : {
// 下边key : value 表示 模块名称 : 模块路径
// 定义模块路径，浏览器不会加载js文件
// 因为app是默认目录，因此此处需要../ 再进入到lib获取js文件
"jquery" : "../lib/jquery-2.1.4.min",
"bootstrap": "../lib/bootstrap-3.2.0.min"
},
shim : {
"bootstrap" : {
deps : ["jquery"]// bootstrap模块依赖jquery模块
}
}
});
require(["utils","bootstrap"],function(utils) {// 引入bootstrap模块
utils.sayHello();
});
先加载jquery文件再加载bootstrap文件
特殊情况1
如果js文件不是通过定义define（AMD规范）编写，如：
// utils.js文件中
function sayHello() {
alert("hello requirejs");
}
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
paths : {
// 下边key : value 表示 模块名称 : 模块路径
// 定义模块路径，浏览器不会加载js文件
// 因为app是默认目录，因此此处需要../ 再进入到lib获取js文件
"jquery" : "../lib/jquery-2.1.4.min"
},
shim : {
"utils": {
exports : "sayHello" // 将utils.js中的sayHello函数作为模块暴露出来
}
}
});
require(["utils"],function(sayHello) {// 引入的模块是一个函数
sayHello();
});
特殊情况2
非AMD规范且js文件中存在多个function函数，如：
// utils.js文件中
function sayHello() {
alert("hello requirejs");
}
function sayGoodBye() {
alert("goodbye");
}
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
paths : {
// 下边key : value 表示 模块名称 : 模块路径
// 定义模块路径，浏览器不会加载js文件
// 因为app是默认目录，因此此处需要../ 再进入到lib获取js文件
"jquery" : "../lib/jquery-2.1.4.min"
},
shim : {
"utils": {
// exports : "sayHello"
init : function() {
return {
sayHello : sayHello, // 将utils.js中的sayHello函数转成{}对象中的sayHello方法，注意此处不能加引号
sayGoodBye : sayGoodBye // 同理
}
}
}
}
});
require(["utils"],function(utils) {// 引入的模块是一个对象
utils.sayGoodBye();
});
4.map：相同的js文件，但不同的版本。可以使用该参数做映射一起使用。
应用场景： 系统升级，js文件也跟着版本升级，但是又担心js文件升级版本会导致以前的功能失效，需要2个版本的js文件都存在
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
map : {
"app/api" : {
"jquery" : "../lib/jquery-2.1.4.min"
},
"app/api2" : {
"jquery" : "../lib/jquery-3.0.0.min"
}
}
});
app/api中的模块使用2.1.4版本的文件，app/api2中的模块使用3.0.0版本的文件
5.waitSeconds：加载js文件等待时间，默认7秒。设置为0，禁止等待超时
6.urlArgs：请求js文件url后添加动态参数
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
paths : {
// 下边key : value 表示 模块名称 : 模块路径
// 定义模块路径，浏览器不会加载js文件
// 因为app是默认目录，因此此处需要../ 再进入到lib获取js文件
"jquery" : "../lib/jquery-2.1.4.min"
},
urlArgs: "_=" + (new Date()).getTime(),
});
require(["utils"],function(utils) {// 引入的模块是对象
utils.sayGoodBye();
});
六、Requirejs插件
css插件
异步加载css样式表
下载地址: https://github.com/guybedford/require-css
requirejs.config({
baseUrl: 'app', // 以app目录作为requirejs加载js文件的默认目录
paths : {
// 下边key : value 表示 模块名称 : 模块路径
// 定义模块路径，浏览器不会加载js文件
// 因为app是默认目录，因此此处需要../ 再进入到lib获取js文件
"jquery" : "../lib/jquery-2.1.4.min",
"bootstrap":"../lib/bootstrap-3.2.0",
"css":"../lib/css"
},
shim : {
"bootstrap" : {
"deps" : ["jquery","css!../css/bootstrap.min.css"] // 通过css插件引入css文件，css!固定写法，后边紧接着依赖css文件的路径
}
}
});
require(["utils","bootstrap"],function(utils) {
utils.sayHello();
});
七、补充
requirejs通过define定义模块写法：
7.1 不依赖其他模块
define(function() {
return {
sayHello : function() {
alert("hello requirejs");
}
}
});
7.2 依赖其他模块
define(["jquery"],function($) {
return {
sayHello : function() {
alert("hello requirejs");
},
checkNumber : function(num) {
alert($.isNumeric(num));
}
}
});
Requirejs简单介绍的更多相关文章
- [原创]关于mybatis中一级缓存和二级缓存的简单介绍
关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...
- 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍
一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...
- 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍
一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...
- yii2的权限管理系统RBAC简单介绍
这里有几个概念 权限: 指用户是否可以执行哪些操作,如:编辑.发布.查看回帖 角色 比如:VIP用户组, 高级会员组,中级会员组,初级会员组 VIP用户组:发帖.回帖.删帖.浏览权限 高级会员组:发帖 ...
- angular1.x的简单介绍(二)
首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...
- Linux的简单介绍和常用命令的介绍
Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...
- iOS-iOS开发简单介绍
概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...
- iOS开发多线程篇—多线程简单介绍
iOS开发多线程篇—多线程简单介绍 一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcod ...
- iOS开发UI篇—UITabBarController简单介绍
iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...
随机推荐
- python:input()和raw_input()
1.input() 接受各种合法类型的输入,比如输入字符串,则需要使用双引号,否则报错. input()会自动判断类型,比如输入的是 1.1,则返回的类型是float. 示例: 2.raw_input ...
- poj3068
题解: 最小费用最大流 每一次找最短的 代码: #include<cstdio> #include<cmath> #include<cstring> #includ ...
- 联想北研实习生面试-嵌入式Linux研发工程师
8月中旬暑假去联想北研参加了实习生面试,面试职位是嵌入式Linux研发工程师.投完简历第二天,主管回复我邮件,意思是说随时来面试,到北研时候给他打个电话就行.于是我回复条短信表示感谢,并约好时间第二天 ...
- HashMap resize方法的理解（一）
对于oldTable中存储的为15.7.4.5.8.1,长度为8的一个数组中,存储位置如下 0 1 2 3 4 5 6 7 8 1 4 5 15 7 当扩容到一倍后,对于新的位置的选择通过e.hash ...
- JS中关于把函数作为另一函数的参数的几点小总结
//JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*funct ...
- request参数获取的几种方式
经常用到Request.QueryString[""]和Request.Form[""]来获取参数值. 今天照常用,ajax方式向后台传参,先用的Request ...
- 我也说说Emacs吧(7) - lisp基础
lisp基础 Lisp是仅次于Fortran的第二古老的著名计算机语言. Lisp从一开始就与众不同的一点在于,它是基于S-表达式的语言.也就是说,代码和数据是用同一种方式表达出来的. S-表达式,我 ...
- css实现加载中的效果
那天闲着,学习了一下样式效果,自己实现了一个简单的加载中的效果 废话不多说,开始吧!! 一.实现一个圆环 要实现圆环,首先我们需要知道盒模型里面border的本质,先来看一个效果吧 从上面 ...
- linux c++ 多线程心得
好久没写多线程了,工作好几年也没怎么大规模的写过多线程,都是成形的架构里写业务逻辑.偶尔自己写了下,各种踩坑... 1.string 不是线程安全的 一个特例是std::string.在一些STL的实 ...
- 那些年提交AppStore审核踩过的坑
此文刚刚上了CocoaChina的首页:那些年提交AppStore审核踩过的坑 欢迎围观,谢谢大家支持. //add by 云峰小罗,2016.08.04 做iOS开发近5年了,每次提交版本时不可谓 ...