[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 ...
随机推荐
- Ehcahe spring
Ehcache系列二:Spring缓存注解@Cache使用 标签: CacheableCacheEvictCachePut 2016-06-06 16:37 2235人阅读 评论(0) 收藏 举报 ...
- php 从7.0升级到7.2
下面的方法安装的php是非线程安全的,apache2服务器用不了 1. 添加Ondřej Surý提供的PHP源: sudo apt-get install software-properties-c ...
- python socket基本连接功能实现
socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信 在应用中,要写两个程序来通信,一个是服务器端程序,一个是客户端程序 ...
- CentOS6.8 安装/升级Python2.7.x,并安装最新setuptools、pip、fabric程序总结
最终靠谱的可借鉴文档: 1.python官网 2.http://lovesoo.org/python-fabric-yuan-cheng-zi-dong-bu-shu-jian-jie.html 3. ...
- vue 全局 js 方法
1.新增 getCurrentDataType.js 文件 import cookieUtils from '@/config/cookieUtils' function getCurrentData ...
- js-ifelse-奇技淫巧
我们有A,B,C,D四个不同的类别,在最开始的时候只有三个类别,并且两个类别是做同样的事: function categoryHandle(category) { if(category !== 'A ...
- leetcode-167周赛-1291-顺次数
题目描述: 自己的提交: class Solution: def sequentialDigits(self, low: int, high: int) -> List[int]: l,h = ...
- controllerpom
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- 基于oracle 的PL/SQL编程 -变量使用
1. 需要开启的服务: 本机安装的oracle ,默认是开机启动服务的,开机时间太慢,关闭了,需要手动打开: OracleDBConsoleorcl OracleOraDb10g_home1iSQL ...
- php fmod()函数 语法
php fmod()函数 语法 作用:fmod()函数的作用是两个数值做除法运算后的余数 语法:fmod(X,Y).大理石平台哪家好 参数: 参数 描述 X 必须,X为除数 Y 必须,被除数,如果Y为 ...