[javascript模块化]require.js简单使用
##1.javascript模块规范
###CommonJS
主要用于服务器端编程,比如node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。
引用一段代码:
// package/lib is a dependency we require
var lib = require( "package/lib" ); // behavior for our module
function foo(){
lib.log( "hello world!" );
} // export (expose) foo to other modules as foobar
exports.foobar = foo;
注释也很清楚,但是这里面有个很大的问题,不适用于浏览器环境。当需要用到log方法时候必须等待依赖模块lib加载完毕,整个应用将会停滞,因此浏览器环境不能使用commonjs规范,只能采用异步加载,即下面将要引出的AMD规范。
###AMD
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
上面的代码可以修改为如下:
define(["package/lib"], function (lib) { // behavior for our module
function foo() {
lib.log( "hello world!" );
} // export (expose) foo to other modules as foobar
return {
foobar: foo
}
});
然后我们需要调用这个模块方法的时候可以这样:
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
利用一个毁掉函数,这样加载不是同步的,浏览器就不会假死,显然AMD规范更适合浏览器环境。现在最流行的AMD规范的javascript库就是require.js,下面我们来介绍。
##2.require.js使用
###为什么要使用
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
###引入require.js
<script src="js/require.js"></script>
<script src="js/require.js" data-main="js/main"></script>
这里的data-main是指定主模块,即js目录下的main.js,这里简写省去后缀。
###main.js写法
// main.js
requirejs(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB,moduleC){
// some code here
});
require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。###requirejs.config()
requirejs.config({
//设置别名
paths: {
jquery : "jquery-1.11.3.min"
}
});
require.js要求,每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。因此,require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。
###define方法
正如前面AMD规范中引用的例子,模块必须采用define函数来定义。假设main.js中定义了一个log模块,log.js应该这样写:
define(["lib"], function (lib) { // behavior for our module
function foo() {
lib.log( "hello world!" );
} // export (expose) foo to other modules as foobar
return {
foobar: foo
}
});
然后在main.js中引用:
require(["log"], function(log) {
log.foobar();
});
[javascript模块化]require.js简单使用的更多相关文章
- JavaScript模块化-require.js
http://www.cnblogs.com/duanhuajian/archive/2013/01/04/2844151.html 原文:http://www.ruanyifeng.com/blog ...
- 模块化 require.js 入门教学(前端必看系列)
在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化 前端模块化 !!! JS 模块化提供给我们三种规范 分别就是 No.1 commonjs 这个其实也就代表了node. ...
- require.js简单入门
推荐文章:http://www.ruanyifeng.com/blog/2012/11/require_js.html 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, 2)实现并引用 ...
- Javascript模块化工具require.js教程
转自:http://www.w3cschool.cc/w3cnote/requirejs-tutorial-1.html, http://www.w3cschool.cc/w3cnote/requir ...
- require.js实现js模块化编程(一)
1.认识require.js: 官方文档:http://requirejs.org/RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的Requ ...
- require.js模块化
require.js简单来说就是把js代码分装模块化了 模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 我拿一个运动框架来解释一下req ...
- JS模块化工具require.js教程(一):初识require.js
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...
- require.js的使用
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...
- 如何使用require.js?
最近几天在学习一个javascript库require.js,也看了一些相关的教学视频,这里推荐一下幕课网阿当老师的<阿当大话西游之Web组件>的教学视频,一整套看下来,参照视频里面的de ...
随机推荐
- java23种设计模式(三)-- 适配器模式
一.适配器模式 转载:https://www.cnblogs.com/V1haoge/p/6479118.html 适配器就是一种适配中间件,它存在于不匹配的二者之间,用于连接二者,将不匹配变得匹配, ...
- C++ 彩色图像(RGB)三通道直方图计算和绘制,图像逆时针旋转90° 实现代码
#include "iostream" #include "opencv2/opencv.hpp" #include "vector" us ...
- 各大漏洞平台及SRC的区别和如何批量刷漏洞
批量刷漏洞: 01刷指纹->02刷原始漏洞->03刷CMS->04刷指定政府.教育->05刷众测平台->06刷SRC->07刷国内外.活动 搜索引擎: 百度.goo ...
- ldd3 第12章 PCI驱动程序
PCI接口 PCI寻址 引导阶段 配置寄存器和初始化 MODULE_DEVICE_TABLE 注册PCI驱动程序 佬式PCI探测 激活PCI设备 访问配置空间 访问I/O和内存空间 PCI中断 硬件抽 ...
- paper 154:姿态估计(Hand Pose Estimation)相关总结
Awesome Works !!!! Table of Contents Conference Papers 2017 ICCV 2017 CVPR 2017 Others 2016 ECCV 20 ...
- gym 101810 M. Greedy Pirate (LCA)
题目:https://codeforc.es/gym/101810/problem/M 题意:给 你一颗树,下面有m次查询,求u->v的最大值是多少,输入两点之间都会有两条边,正边有正权,反边有 ...
- 一双木棋(chess)
一双木棋(chess) 题目描述 菲菲和牛牛在一块 nn 行 mm 列的棋盘上下棋,菲菲执黑棋先手,牛牛执白棋后手. 棋局开始时,棋盘上没有任何棋子,两人轮流在格子上落子,直到填满棋盘时结束.落子的规 ...
- Bootstarp-源码分析-alert.js v3.x和v4.x的对比
一些概念 1. 使用 data-api 调用 就是给所有带有data-dismiss="alert"的元素绑定点击事件 v3.x: $(document).on('click.bs ...
- Unzip 解压报错
$ jar xvf pcre-8.10.zip 如果出现 jar:Command not found 要用yum下载 $ yum -y install java-1.6.0-openjdk-d ...
- 开源 NAS 操作系统不完全汇总
市面上能见到的 NAS 操作系统很多,有如 FreeNAS 这样意气风发的开源免费版,也有完全商业的闭源版本,更有如黑群晖之类的破解版本.NAS 系统的迭代是一个大浪淘沙的过程,活下来的系统在功能上逐 ...