随着网站逐渐变成“互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂

网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。

Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

但是,Javascript不是一种模块化编程语言,它不支持""(class),更不要说"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)

Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。本文主要通过自己动手编程,实现一个简易版的require.js来讲述怎么应用模块化编程,以及模块化的原理,以便更好的理解require.js 及seajs等现有的模块化管理框架。虽然这不是初级教程,但是只要稍稍了解Javascript的基本语法,就能看懂。

一、原始写法

模块就是实现特定功能的一组方法。

只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

function module1(){
    //...
}
function module2(){
    //...
  }

上面的函数module1()和mmodule2(),组成一个模块。使用的时候,直接调用就行了。

这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

二、对象写法

为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。

var module1 = new Object({
    _count : 0,
    m1 : function (){
      //...
    },
    m2 : function (){
      //...
    }
  });

上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。

module1.m1();

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。

module1._count = 5;

三、立即执行函数写法

使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE),可以达到不暴露私有成员的目的。

 var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();

module1就是Javascript模块的基本写法。但是上面的例子只是演示了”模块“这个概念,而我们工作中遇到的更多的问题是如何组织这些模块。如果有过php的编程经验的话,你就会想到php中有一个require()函数(也有人说这不是函数,因为括号可以省略),当我们在编写模块A时,如果要用到之前定义过的模块B时,只要require('b.php')就可以了。但是在javascript中是没有这种现成的方法的。不过我们知道,javascript的语法是非常灵活的,只要有运用一定的技巧,就可以模拟其它编程语言中的特性,比如我们熟知的extend() 继承就是一个很好的例子。当然,现在的这个模块化require方法,也有现成的库可以使用了,比如require.js, seajs等等,但是它们大都有一个巨大的身躯,我们一下子难以看清它是怎么实现的。

下面我贴下我实现的简易版源码

/**
* 模块化编程简易框架
*/
;(function() {
//存放所有声明过的模块
var modules = {};
//存放已解析的模块
var dn = {} /**
* 判断是否为一个数组
*/
function isArray(arr){
return Object.prototype.toString.call(arr) == '[object Array]';
} /*
* 解析申请的模块
* @param {array} ids 模块id
* @param {function} callback 回调
*/
function makeRequire(ids, callback) {
var r = ids.length,
shim = [];
ids.forEach(function(name,i) {
shim[i] = build(modules[name])
})
if (callback) {
callback.apply(null,shim);
} else {
shim = null;
}
} /**
*解析依赖关系
* @param {object} module 模块对象
* @return {array} 一个由所有依赖模块所返的对象所组成的数组
*/
function parseDeps(module) {
var deps = module['deps'],
temp = [];
deps.forEach(function(id, index) {
temp.push(build(modules[id]))
})
return temp;
} /**
* 返回模块中定义的对象
* @param {object} module 定义的模块
* @return 模块返回的对象
*/
function build(module){
var exist,exports;
factory = module['factory'],
id = module['id']; exist = dn[id]; if(exist){
return exist;
} if(module['deps']){
depsList = parseDeps(module);
exports = factory.apply(module, depsList);
}else{
exports = factory() || {};
} dn[id] = exports;
return exports;
} /**
* 导入模块
* @param {id} id 模块ID
* @param {function} callback 回调函数
* @return {object}
*/
function require(id,callback){
if(isArray(id)){
return makeRequire(id,callback);
}
if (!modules[id]) {
throw "module " + id + " 模块不存在!";
} if(callback){
var module = build(modules[id]);
callback(module);
}else{
if(modules[id].factory){
return modules[id];
}
}
}
/**
* 定义一个模块
* @param {string} id 模块ID
* @param {array} deps 依赖列表
* @param {function} factory 模块方法
*/
function define(id,deps,factory){
if(modules[id]){
throw "module " + id + " 模块已存在!";
} //如果有依赖
if(arguments.length > 2){
modules[id] = {
id : id,
deps : deps,
factory : factory
}
}else{
modules[id] = {
id : id,
factory : deps
}
}
} window.require = require;
window.define = define; })();

这里的实现忽略了javascript文件的加载和循环依赖的问题,因为我的重点是放在模块之间的导入和团队协作开发的问题上。个人认为也没有必要做成按需加载,因为不会用到的模块,是根本没有必要为它编写模块的。在开发模式下,需要一个功能,就在index.html中导入一个js模块,在产品模式下,就把index.html中的所有js文件进行合并压缩,这样做到只加载一次,根本没有按需加载出场的余地。

下面我来介绍下这个简易版的require.js框架是怎么用的。

其实非常简单,只要知道define()是定义一个模块,require是调用一个模块就可以了。

具体的看下面几个典型示例:

//定义一个模块 a
define('a',function(){
//模块a中的私有变量
var name = 'module a'; //返回这个模块所实现的方法
return {
a : function(){
//根据需要返回模块中的内容
console.log(name)
}
}
})
//定义一个模块 b
define('b',function(){
var name = 'module b'; return {
b : function(){
console.log(name)
}
}
}) //定义一个模块 c, 依赖 a,b两个模块
define('c',['a','b'],function(a,b){
//a,b是模块c需要依赖的模块
//只要以数组的方式依次例出模块Id就可以了
console.log(a,b)
return {
c : function(){
console.log('module c')
}
}
}) //同时调用a,b两个模块
require(['a','b'],function(a,b){
//a就是前面定义的模块a返回的对象
//b同上
//此处就可以自由的使用a,b模块中所公布的方法了
console.log(a,b)
}) //调用c模块
require('c',function(c){
console.log(c)
})

这样我们就实现了一个简单的模块化功能。从上面的示例来看,进行单元测试是不是很容易呢? 代码看起来是不是很清爽呢?

从我这一百来行的代码中也不难看出实现的原理,先是定义modules用来收集所定义的模块,然后用 define来定义一个模块,通过id进行区分,factory返回这个模块提供的对象

而require则根据请求的id,去modules中进行查找,如果没有依赖则直接返回找到的对象,如果有依赖,则先查找依赖模块中返回的对象,最后把它们传给回调函数。其中还考虑了id是数组的情况,也就是可以同时请求多个模块,这也只不过是循环解析这个过程而已。有些书上说,define就像是内鬼,而require则是侵略者。它们之间的关系就是里应外合,说的非常形象。浓缩才是精华,从这一百来行的代码中体验模块化的实现原理,是不是要比从几千行的require.js 中慢慢模索要容易地多呢?

如果您觉得这文章对您有帮助,请点击推荐!谢谢,想跟我一起进步么?那就【关注】我吧!

高级javascript---模块化编程的更多相关文章

  1. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  2. Javascript模块化编程(二):AMD规范

    Javascript模块化编程(二):AMD规范   作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...

  3. Javascript模块化编程(一):模块的写法

    Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...

  4. Javascript模块化编程(二):AMD规范(转)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...

  5. Javascript模块化编程(一):模块的写法(转)

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  6. Javascript模块化编程(二):AMD规范 作者: 阮一峰

    声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可 ...

  7. Javascript模块化编程(一):模块的写法 作者: 阮一峰

    声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...

  8. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  9. Javascript模块化编程(一):模块的写法 (转载 学习中。。。。)

    转载地址:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 阮一峰 大神:http://www.ruanyifeng.com/ ...

  10. Javascript模块化编程(二):AMD规范【转】

    作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为 ...

随机推荐

  1. python面试总结

    1.python的优势 1.1 python是一门胶水语言,能够结合各种语言 1.2 python是支持面向对象编程 1.3 python是完全开放源代码,有大量的技术支持文档, 1.4 可移植,py ...

  2. 让/etc/profile文件修改后立即生效

    方法1: 让/etc/profile文件修改后立即生效 ,可以使用如下命令: # .  /etc/profile 注意: . 和 /etc/profile 有空格 方法2: 让/etc/profile ...

  3. (转)为什么需要正则表达式 by 王珢

    为什么需要正则表达式 by 王垠 学习Unix最开头,大家都学过正则表达式(regexp).可是有没有人考虑过我们为什么需要正则表达式? 正则表达式本来的初衷是用来从无结构的字符串中提取信息,殊不知这 ...

  4. <十二>JDBC_批量处理

    import java.sql.Connection;import java.sql.PreparedStatement;import org.junit.Test;import com.kk.jdb ...

  5. HDU1401 BFS

    Solitaire Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  6. POJ1860 Currency Exchange(bellman-ford)

    链接:http://poj.org/problem?id=1860 Currency Exchange Description Several currency exchange points are ...

  7. jGestures: jQuery的手势事件插件

    官网地址:http://jgestures.codeplex.com/文档版本号: v0.7,由neuedigitale编辑,2012年5月8日最新稳定版: jGestures v0.90 - sha ...

  8. Des与3Des加密解密

    /// <summary> /// Des和3Des算法 /// </summary> public class Des { /// <summary> /// D ...

  9. 5.Powershell变量

    在指令执行过程中,会有一些数据产生,这些数据被用于以后的语句,需要一个存储单元暂时的存放这些数据,这个时候定义一个变量来存储数据.例如$string = “Hello Powershell!” Pow ...

  10. UWP中重用C/C++代码时踩过的一些坑

    标题中提到的UWP,主要是指用C#来写UWP的主工程,开发过程中可能需要调用C/C++实现的库. 为什么需要调用C/C++的库呢,举个例子,开源库OpenSSL实现了许多加密算法,稳定快速,我们想在应 ...