Javascript模块化编程-require.js[3]
很多情况下,JS都是放到一个或者多个文件里,只要加载这些文件就可以了。
但是对于一些小型项目而言,这种写法是没有任何问题的。
但是对于某些大型网站,JS的量是很大的,如果还采用这种方式,网站时常在加载时,出现假死的现象。
为了解决这个问题,require.js应运而生。
1、require.js的核心
1、实现js文件异步加载,避免网站失去响应。
2、管理模块之间的依赖性,便于代码的编写和维护。
2、require.js的加载
在网页加载require.js时,需要实现如下写法:
<script src="js/require.js" defer async="true" data-main="js/jsname"></script>
defer兼容IE。
async=“true”兼容其它常规浏览器。
data-main属性的作用:加载当前网页的主模块。
3、主模块的写法
主模块即当前网页的主程序。
主模块依赖其它模块,此时,需要AMD规范定义require()函数。
Eg:
require(['moduleA','moduleB','moduleC',function(moduleA,moudleB,moduleC){
//...
}]);
第一个参数:所依赖的各个模块的全局名称。
第二个参数:回调函数,当前模块加载成功后,该函数将被调用。加载模块会以参数的形式传入改函数。
4、模块的配置
require.config()方法,实现了对模块加载行为的自定义。require.config()定义在主模块的头部。
Eg:
require.config({
paths:{
"jquery":"juqery.min",
...
}
});
如果子模块在主模块的同级目录的子目录下,那写法为:
Eg:
require.config({
paths:{
"jquery":"lib/juqery.min",
...
}
});
或
require.config({
baseUrl:"js/lib",
paths:{
"jquery":"lib/juqery.min",
...
}
});
require.js要求,每个模块是一个单独的js文件。如果加载多个模块时,此时需要发出多次http请求,那么加载速度方面就会大大折扣。
require.js提供了一个优化工具,当模块部署完毕后,可以用这个工具将多个模块合并在一个文件中。
5、AMD模块写法
require.js加载的模块,采用AMD规范。
定义模块,需要采用特定的define()函数来定义,以test.js为例。
定义不依赖其它模块的写法:
define(function(){
var fn1=function(obj){
return obj;
};
return{
op:fn1
};
});
定义依赖其它模块的写法:
define(['mytest'],function(mytest){
function test(){
//...
}
return {
ta:test
};
});
主模块或者别的模块调用的写法:
require(['test'],function(test){
//...
});
6、非AMD规范模块写法
理论上,require.js加载模块,必须按照AMD规范、必须用define()函数定义模块。
例如:JQuery等。,现实环境中,也会出现非AMD规范的模块,require.js也实现了对非AMD规范的模块的兼容。
实现对非AMD模块的兼容,需要用require.config()进行配置,定义他们的特征。
Eg:
jQuery插件可以这样定义:
require.config({
shim:{
'jQuery.scroll':{
deps:['jQuery'],
exports:'jQuery.fn.scroll'
}
}
});
deps,模块的依赖。
exports,输出的变量名,别的模块调用这个模块时的名称。
7、require.js插件
require.js还提供了一些插件。
json和mdown插件。
domready插件,可以让回调函数在也页面DOM结构加载完成后再运行。
Eg:
require(['domready!'],function(doc){
//...
});
text和image插件,允许require.js加载文本和图片文件。
define(
['text!review.txt','image!cat.jpg'],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
【上一章节】 【下一章节】
Javascript模块化编程-require.js[3]的更多相关文章
- 坑人的 Javascript 模块化编程 require.js
坑人的 Javascript 模块化编程 require.js
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- Javascript模块化编程 require.js使用详解
一.为什么用require.js,产生的背景 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载. & ...
- 坑人的 Javascript 模块化编程 sea.js
坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...
- Javascript模块化工具require.js教程
转自:http://www.w3cschool.cc/w3cnote/requirejs-tutorial-1.html, http://www.w3cschool.cc/w3cnote/requir ...
- JavaScript模块化-require.js,r.js和打包发布
在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
- (转)Javascript模块化编程(三):Require.js的用法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
随机推荐
- Hadoop1和Hadoop2的区别是什么?
[学习笔记] Hadoop1和Hadoop2的区别是什么?马 克-to-win @ 马克java社区:原来的Hadoop1的Mapreduce又管资源管理,又管数据处理和计算.而Hadoop2中的Ma ...
- mysql-实现远程连接(授权法)
远程连接阿里云主机的mysql,遇到以下问题: 1.连接被拒,无法连接 可能原因:1.3306(默认)端口未开放,在控制台设置防火墙规则: 2. host字段的值改为%就表示在任何客户端机器上能以ro ...
- 适配iOS7之—UITableView和UISearchBar
iOS7中,如果用UITableViewStyleGrouped的话,里面的cell会比原来的拉长了,这样做应该是为了统一和UITableViewStylePlain风格时cell的大小一致,所以改用 ...
- Shell脚本部分语法
Shell中的变量 Linux Shell中的变量分为“系统变量”和“用户自定义变量”,可以通过set命令查看那系统变量 系统变量:$HOME.$PWD.$SHELL.$USER等等 显示当前sh ...
- nginx/iptables动态IP黑白名单实现方案
nginx/iptables动态IP黑白名单实现方案 一.手动封IP步骤 1.Nginx手动封IP 1.获取各个IP访问次数 awk '{print $1}' nginx.access.log |so ...
- UVA1406 - A Sequence of Numbers(树状数组)
UVA1406 - A Sequence of Numbers(树状数组) 题目链接 题目大意: 给定N个数字.给两种操作:C x: 把这N个数字都加上x. Q x:查询这N个数里面有多少个数字和2^ ...
- 数据结构基础-Hash Table详解(转)
理解Hash 哈希表(hash table)是从一个集合A到另一个集合B的映射(mapping). 映射是一种对应关系,而且集合A的某个元素只能对应集合B中的一个元素.但反过来,集合B中的一个元素可能 ...
- Linux环境变量PS1配置
1. 说明: 在Shell下,我们能够拥有更加色慘斑斓的提示行信息.这能够通过改变bash的$PS1环境变量还设置,如以下就是提示行的一种: user@host$ root用户的提示是这种: user ...
- Laravel 5.4的本地化
简介 Laravel 的本地化功能提供方便的方法来获取多语言的字符串,让你的网站可以简单的支持多语言. 语言包存放在 resources/lang 目录下的文件里.在此目录中应该有应用对应支持的语言并 ...
- ReentrentLock重入锁
ReentrentLock lock=new ReentrentLock(); lock.lock(); //锁的代码 finally{ lock.unlock(); } ReentrentLock ...