requirejs的使用和快速理解
样例来自https://www.jianshu.com/p/b8a6824c8e07
requirejs有以下功能
- 声明不同js文件之间的依赖
- 可以按需、并行、延时载入js库
- 可以让我们的代码以模块化的方式组织
- 初看起来并不复杂。
创建以下目录
在HTML中，添加<script>标签：<script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
<title>Require Demo 1</title>
</head>
<body>
<div>
<h1>Require Demo 1 -- usage of Require()</h1>
<button id="contentBtn">Click me</button>
<p id="messagebox"></p>
</div>
<script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script>
</body>
</html>
requirejs对外暴露的变量其实就三个,requirejs,require,define。这其中requirejs 只是require的一个别名，目的是如果页面中有require其它实现了，你还是能通过使用requirejs来使用requireJS API的(本文中没有相关冲突，所以还是使用require)。
我们可以看到在script标签中我们加载了require.js，其中有一个data-main，他是在require.js加载完成后通过回调的方法去加载data-main里的js
这是我们的main.js
// js/script/main.js
require.config(
{
paths: {//一个模块ID和路径的映射，这样在后续的所有函数中就可以直接通过模块ID来引入依赖，而不用再多次引入依赖多次输入路径带来的麻烦。
jquery: '../lib/jquery-1.11.1',
chw_desc:'desc',
chw_alertdesc:'alertdesc',
chw_alert:'alert'
},
// shim:{
// 'alert': {exports: 'f'}
// }
}
);
require(['jquery'],function ($) {
$(document).on('click','#contentBtn',function(){
$('#messagebox').html('You have access Jquery by using require()');
require(['desc'],function(chw){
alert('desc: '+JSON.stringify(chw));
});
// require(['chw_alertdesc'],function(t){
// alert('alertdest: '+JSON.stringify(t));
// });
// require(['alert'],function(chw){
// chw();
// });
});
});
1.首先看最基础的decs.js（没有任何依赖）
他的require函数接受的第一个参数是所依赖模块的一个数组，即要想执行我的回调函数，你必须加载完desc.js这个文件，如果你有如本例子中设置了模块ID和路径的映射，那你在传入依赖的时候就可以使用模块ID来代替路径（我可以换成require(['chw_desc'],function(chw){})），如果没有配置模块ID你当然也可以通过路径来引进对应的模块。接着是传入回调函数，当引入的依赖加载完毕后，这个回调函数就会被触发。如果你传入的依赖有注入变量（函数）,然后在回调函数中需要用到，你就需要按照顺序在回调函数的参数中添加别名，在本例子中可以通过别名$来使用jQuery的相关API(你也可以换成其他的符号比如‘G’,'F'等等)。
看看desc.js代码，没有任何依赖，desc.js他定义了一个模块，define(name, deps, callback)第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是定义模块的主函数，主函数和require的回调函数一样，同样是在依赖加载完以后再调用执行。第一参数不是很必要，因为如果哪一天我将这个文件转移到其他目录下，那我就得在这这里再修改一次模块名。
define(function(){
return{
desc:'this js will be request only if it is needed',
};
})
2.在看看alertdesc,js(依赖于desc.js)
define(['desc'],function(){
return{
desc:'this js will be request only if it is needed',
};
})
同样在require函数里面可以写成 require(['alertdesc'],function(t){})
3. alert.js. (加载非规范的模块没使用define定义模块)
function f() {
alert("hahah");
}
require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性，他就是将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用。
shim:{
'alert': {exports: 'f'}
}
由于我这个模块没有依赖，所以没必要写deps，上面的代码表示的是在'alert'（在相对路径下的alert.js文件中），把f函数暴露出来成为全局可用，那当我们的代码依赖于 alert 模块的时候，就可以拿到这个 f 函数的引用了。注意的是require(['alert'],function(chw){}});不能换成require(['chw_alert'],function(chw){}});因为在你暴露变量的时候你是暴露给模块名为'alert'，所以对于其他的模块并不是全局可用，如果要换成chw_alert，那么shim中应该这样写shim:{'chw_alert':{exports:'f'}}
requirejs的使用和快速理解的更多相关文章
- 【转】快速理解Kafka分布式消息队列框架
from:http://blog.csdn.net/colorant/article/details/12081909 快速理解Kafka分布式消息队列框架 标签: kafkamessage que ...
- Spark机器学习 Day2 快速理解机器学习
Spark机器学习 Day2 快速理解机器学习 有两个问题: 机器学习到底是什么. 大数据机器学习到底是什么. 机器学习到底是什么 人正常思维的过程是根据历史经验得出一定的规律,然后在当前情况下根据这 ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- 快速理解高性能HTTP服务端的负载均衡技术原理(转)
1.前言 在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...
- 脑残式网络编程入门(四)：快速理解HTTP/2的服务器推送(Server Push)
本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...
- 字符编码那点事：快速理解ASCII、Unicode、GBK和UTF-8
原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...
- [转帖]十分钟快速理解DPI和PPI，不再傻傻分不清！
十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...
- 快速理解VirtualBox的四种网络连接方式
VirtualBox中有4中网络连接方式: NAT Bridged Adapter Internal Host-only Adapter VMWare中有三种,其实他跟VMWare 的网络连接方式都是 ...
- 深入浅出 1 - AI量化策略快速理解
我们在用AI来编写量化策略过程中,主要用到了机器学习,先来从一张图直观理解什么是机器学习:人类对新问题做出有效决策依靠的是过去积累的许多经验,并对经验进行利用,而对机器来说,“经验”以“数据”方式 ...
随机推荐
- freemarker和thymeleaf的使用样例
最近需要对公司项目首页使用Java模板重做,以提高首屏加载速度和优化SEO. 在选择模板时发现freemarker和thymeleaf最为常用. 两者最大的区别在于语法,对性能方面未作测试,具体性能测 ...
- Geometric regularity criterion for NSE: the cross product of velocity and vorticity 1: $u\times \om$
在 [Chae, Dongho. On the regularity conditions of suitable weak solutions of the 3D Navier-Stokes equ ...
- 五十、进程间通信——System V IPC 之共享内存
50.1 共享内存 50.1.1 共享内存的概念 共享内存区域是被多个进程共享的一部分物理内存 多个进程都可把该共享内存映射到自己的虚拟内存空间.所有用户空间的进程若要操作共享内存,都要将其映射到自己 ...
- 人体姿势识别，Convolutional pose machines文献阅读笔记。
开源实现 https://github.com/shihenw/convolutional-pose-machines-release(caffe版本) https://github.com/psyc ...
- javascipt继承机制(from阮一峰)
Javascript继承机制的设计思想 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类" ...
- 【easy】367. Valid Perfect Square 判断是不是平方数
class Solution { public: bool isPerfectSquare(int num) { /* //方法一:蜜汁超时…… if (num < 0) return fals ...
- LabVIEW--好书推荐与分享
LabVIEW宝典 此书可以作为工具书,配合LabVIEW的范例程序学习可以达到事半功倍的效果. 链接:https://pan.baidu.com/s/17jm6PznLyGW8rVQ_veaGCg ...
- 【原创】Java基础之Freemarker（1）模板加载及清空机制
一 freemarker加载模版机制 freemarker中的配置项template_update_delay表明模版的缓存时间,单位是s,超过缓存时间则从磁盘加载最新的模版,具体细节如下: 1)fr ...
- nginx——location匹配流程图
location匹配流程图 location理解 1.收到url请求后,nginx首先进行精确匹配(有“=”的为精确匹配),如果匹配成功,则直接返回精确匹配结果,如果没有命中则会继续向下进行普通匹配 ...
- linuxDNS
getenforce 查询状态 setenforce 0 临时关闭 永久关闭vim /etc/selinux/configlinux配置文件内容SELINUC=disabled关闭重启系统生效 ...