https://segmentfault.com/a/1190000000733959

什么是模块化开发?

前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,那么什么是模块呢?

一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,否则就都乱套了。

根据AMD规范,我们可以使用define定义模块,使用require调用模块。

目前,通行的js模块规范主要有两种:CommonJSAMD

AMD规范

AMD 即Asynchronous Module Definition,中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范,服务器端的规范是CommonJS

模块将被异步加载,模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。

AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。

define() 函数

AMD规范只定义了一个函数 define,它是全局变量。函数的描述为:

define(id?, dependencies?, factory);

参数说明:

id:指定义中模块的名字,可选;如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。

依赖dependencies:是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。 工厂方法factory,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。

模块名的格式

模块名用来唯一标识定义中模块,它们同样在依赖性数组中使用:

模块名是用正斜杠分割的有意义单词的字符串
单词须为驼峰形式,或者".",".."
模块名不允许文件扩展名的形式,如“.js”
模块名可以为 "相对的" 或 "顶级的"。如果首字符为“.”或“..”则为相对的模块名
顶级的模块名从根命名空间的概念模块解析
相对的模块名从 "require" 书写和调用的模块解析

使用 require 和 exports

创建一个名为"alpha"的模块,使用了requireexports,和名为"beta"的模块:

 define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});

require API 介绍: https://github.com/amdjs/amdj...

AMD规范中文版:https://github.com/amdjs/amdj...

目前,实现AMD的库有RequireJS 、curl 、Dojo 、Nodules 等。

CommonJS规范

CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。

根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性。

输出模块变量的最好方法是使用module.exports对象。

var i = 1;
var max = 30; module.exports = function () {
for (i -= 1; i++ < max; ) {
console.log(i);
}
max *= 1.1;
};

上面代码通过module.exports对象,定义了一个函数,该函数就是模块外部与内部通信的桥梁。

加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的module.exports对象。

CommonJS 规范:http://javascript.ruanyifeng....

RequireJS和SeaJS

RequireJS由James Burke创建,他也是AMD规范的创始人。

define方法用于定义模块,RequireJS要求每个模块放在一个单独的文件里。

RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。

SeaJSRequireJS最大的区别:

SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行

不明白?看这篇图文并茂的文章吧:http://www.douban.com/note/28...

RequireJS API:http://www.requirejs.cn/docs/...

RequireJS的用法:http://www.ruanyifeng.com/blo...

为什么要用requireJS

试想一下,如果一个网页有很多的js文件,那么浏览器在下载该页面的时候会先加载js文件,从而停止了网页的渲染,如果文件越多,浏览器可能失去响应。其次,要保证js文件的依赖性,依赖性最大的模块(文件)要放在最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

RequireJS就是为了解决这两个问题而诞生的:

(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。

RequireJS文件下载:http://www.requirejs.cn/docs/...

AMD和CMD

CMD(Common Module Definition) 通用模块定义。该规范明确了模块的基本书写格式和基本交互规则。该规范是在国内发展出来的。AMD是依赖关系前置,CMD是按需加载。

在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:

define(factory);

factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和 module:

define(function(require, exports, module) {

  // 模块代码

});

require是可以把其他模块导入进来的一个参数,而export是可以把模块内的一些属性和方法导出的。
CMD规范地址:https://github.com/seajs/seaj...

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。

AMD:提前执行(异步加载:依赖先执行)+延迟执行
CMD:延迟执行(运行到需加载,根据顺序执行)

CMD 推崇依赖就近,AMD 推崇依赖前置。看如下代码:

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
}) // AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

另外一个区别是:

AMD:API根据使用范围有区别,但使用同一个api接口
CMD:每个API的职责单一

AMD的优点是:异步并行加载,在AMD的规范下,同时异步加载是不会产生错误的。
CMD的机制则不同,这种加载方式会产生错误,如果能规范化模块内容形式,也可以

jquery1.7以上版本会自动模块化,支持AMD模式:主要是使用define函数,sea.js虽然是CommonJS规范,但却使用了define来定义模块
所以jQuery已经自动模块化了

seajs.config({

'base':'/',

'alias':{

    'jquery':'jquery.js'//定义jQuery文件

}
});

define函数和AMDdefine类似:

define(function(require, exports, module{

     //先要载入jQuery的模块

     var $ = require('jquery');

     //然后将jQuery对象传给插件模块

     require('./cookie')($);

     //开始使用 $.cookie方法

});

sea.js如何使用?

 - 引入sea.js的库
- 如何变成模块?
- define
- 3.如何调用模块?
-exports
-sea.js.use
- 4.如何依赖模块?
-require <script type="text/javascript">
define(function (require,exports,module) {
//exports : 对外的接口
//requires : 依赖的接口
require('./test.js');//如果地址是一个模块的话,那么require的返回值就是模块中的exports
})
</script>

sea.js 开发实例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽的模块化开发实践</title>
<style type="text/css">
#div1{ width:200px; height:200px; background:black; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; bottom:0; right:0;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript"> //A同事 :
seajs.use('./main.js'); </script>
</head> <body>
<input type="button" value="确定" id="input1" />
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

A同事

//A同事写的main.js:

define(function (require,exports,module) {
var oInput = document.getElementById('input1');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); require('./drag.js').drag(oDiv3);
oInput.onclick = function () {
oDiv1.style.display = 'block';
require('./scale.js').scale(oDiv1,oDiv2); require.async('./scale.js', function (ex) {
ex.scale(oDiv1,oDiv2);
})
}
});

B同事


//B同事写的drag.js: define(function(require,exports,module){ function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop; document.onmousemove = function(ev){
var ev = ev || window.event; var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 ); obj.style.left = L + 'px';
obj.style.top = T + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
} exports.drag = drag;//对外提供接口 });

C同事

//C同事写的scale.js:

define(function(require,exports,module){

    function scale(obj1,obj2){
var disX = 0;
var disY = 0;
var disW = 0;
var disH = 0; obj2.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX;
disY = ev.clientY;
disW = obj1.offsetWidth;
disH = obj1.offsetHeight; document.onmousemove = function(ev){
var ev = ev || window.event; var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100);
var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100); obj1.style.width = W + 'px';
obj1.style.height = H + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}; } exports.scale = scale; });

D同事

// D同事的range.js--限定拖拽范围

    define(function(require,exports,module){

        function range(iNum,iMax,iMin){

            if( iNum > iMax ){
return iMax;
}
else if( iNum < iMin ){
return iMin;
}
else{
return iNum;
} } exports.range = range; });

requirejs开发实例

require.config是用来定义别名的,在paths属性下配置别名。然后通过requirejs(参数一,参数二);参数一是数组,传入我们需要引用的模块名,第二个参数是个回调函数,回调函数传入一个变量,代替刚才所引入的模块。

main.js文件

//别名配置
requirejs.config({
paths: {
jquery: 'jquery.min' //可以省略.js
}
});
//引入模块,用变量$表示jquery模块
requirejs(['jquery'], function ($) {
$('body').css('background-color','red');
});

引入模块也可以只写require()requirejs通过define()定义模块,定义的参数上同。在此模块内的方法和变量外部是无法访问的,只有通过return返回才行.

define 模块

define(['jquery'], function ($) {//引入jQuery模块
return {
add: function(x,y){
return x + y;
}
};
});

将该模块命名为math.js保存。

main.js引入模块方法

require(['jquery','math'], function ($,math) {
console.log(math.add(10,100));//110
});

没有依赖

如果定义的模块不依赖其他模块,则可以:

define(function () {

    return {
name: "trigkit4",
age: "21"
}
});

AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exportsexports的属性赋值来达到暴露模块对象的目的。

(转)详解JavaScript模块化开发的更多相关文章

  1. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

  2. 详解javascript的类

    前言 生活有度,人生添寿. 原文地址:详解javascript的类 博主博客地址:Damonare的个人博客 Javascript从当初的一个"弹窗语言",一步步发展成为现在前后端 ...

  3. 详解Javascript的继承实现(二)

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  4. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  5. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  6. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  7. JavaScript模块化开发整理

    在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...

  8. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  9. Javascript模块化开发-轻巧自制

    Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...

随机推荐

  1. js 实现序列号效果实现

    前端的朋友可能遇到过这样的需求,要求在页面输入一串序列号,或激活码(就像在PC正版软件中的序列号),可是HTML中并没有为我们提供类似的组件,我们来自己实现一个: 大体的思路是在表单里有一个隐藏的in ...

  2. quartz的持久化任务调度使用应用的dataSource

    Quartz提供两种基本作业存储类型--->第一种类型叫做RAMJobStore:     最佳的性能,因为内存中数据访问最快     不足之处是缺乏数据的持久性,当程序路途停止或系统崩溃时,所 ...

  3. 在c#中using和new这两个关键字有什么意义?

    在c#中using和new这两个关键字有什么意义?答:using 引入名称空间或者使用非托管资源, new 新建实例或者隐藏基类方法

  4. window7配置python3.3 + django + apache24 + mod_wsgi

    window7安装配置python3.3 + django + apache24 + mod_wsgi 1.下载版本的时候要对应 2.apache24 别放系统盘, 不然权限很麻烦 3.django ...

  5. JS中的var、let、const

    1.var 在全局window中申明则为全局变量,是全局对象 window 的属性. var sum = 0 console.log(window.sum) console.log(sum); 在函数 ...

  6. redis 过期回调通知

    redis 过期回调通知 背景 在使用redis的过程中,有时我们会遇到这种情景,当key过期的时候,我们需要去重新做一些操作,比如重新生成value等.之前,一直用的是添加一个celery定时任务, ...

  7. iRate快速绕坑使用

    目的 iRate库通过激励用户去AppStore打分,来帮助你提升iPhone和Mac App的质量.这是取得经常使用的目标用户的意见的最好的方式之一. 方案(小弟想说的重点) 以前,App中都是显示 ...

  8. centos7 多网卡修改默认路由

    最近在virtualbox里搭了一个centos7的虚拟机,但是网络这一块总是有问题. 单网卡下的问题: 1.当我配置连接方式为NAT网络地址转换的时候,虚拟机可以访问外网.但是在网络地址转换的情况下 ...

  9. iOS-xib的使用1

    一.File‘s owner的解析过程和使用: 1. storyboard:描述软件界面:iOS5.0后出来的. xib:描述软件界面:是storyboard前身. 2. 项目环境里面的所有资源都要通 ...

  10. C语言基础篇(三) 指针

    导航: 1.指针     2. 数组     3. 结构体,共用体     4. 内存分布图     5. 段错误分析 ----->x<------------->x<---- ...