JavaScript的Module模式编程深入分析


Posted in Javascript onAugust 13, 2013

基础知识

首先我们要大概了解一下Module模式(2007年由YUI的EricMiraglia在博客中提出),如果你已熟悉 Module 模式,可以跳过本部分,直接阅读"高级模式"。

匿名函数闭包

匿名函数闭包是JavaScript最棒的特征,没有之一,是它让一切都成为了可能。现在我们来创建一个匿名函数然后立即执行。函数中所有的代码都是在一个闭包中执行的,闭包决定了在整个执行过程中这些代码的私有性和状态。

(function () {
 // ... all vars and functions are in this scope only
 // still maintains access to all globals
}());

注意在匿名函数外面的括号。这是由于在JavaScript中以function开头的语句通常被认为是函数声明。加上了外面的括号之后则创建的是函数表达式。

全局导入

JavaScript有一个特征叫做隐藏的全局变量。当一个变量名被使用,编译器会向上级查询用var来声明这个变量的语句。如果没有找到的话这个变量就被认为是全局的。如果在赋值的时候这样使用,就会创建一个全局的作用域。这意味着在一个匿名的闭包中创建一个全局变量是十分容易的。不幸的是 ,这将会导致代码的难以管理,因为对于程序员来说,如果全局的变量不是在一个文件中声明会很不清晰。幸运的是 ,匿名函数给我我们另一个选择。我们可以将全局变量通过匿名函数的参数来导入到我们的代码中,这样更加的快速和整洁。

(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));

Module导出

有时你并不想要使用全局变量,但是你想要声明他们。我们可以很容易通过匿名函数的返回值来导出他们。关于Module模式的基本内容就这么多,这里有一个复杂一点的例子。

var MODULE = (function () {
 var my = {},
  privateVariable = 1;
 function privateMethod() {
  // ...
 }
 my.moduleProperty = 1;
 my.moduleMethod = function () {
  // ...
 };
 return my;
}());

这里我们声明了一个全局的module叫做MODULE,有两个公有属性:一个叫做MODULE.moduleMethod的方法和一个叫做MODULE.moduleProperty的变量。另外他通过匿名函数的闭包来维持私有的内部状态,当然我们也可使用前面提到的模式,轻松导入所需的全局变量

高级模式

之前提到的内容已经可以满足很多需求了,但我们可以更深入地研究这种模式来创造一些强力的可拓展的结构。让我们一点一点,继续通过这个叫做MODULE的module来学习。

拓展

目前,module模式的一个局限性就是整个module必须是写在一个文件里面的。每个进行过大规模代码开发的人都知道将一个文件分离成多个文件的重要性。幸运的是我们有一个很好的方式来拓展modules。首先我们导入一个module,然后加属性,最后将它导出。这里的这个例子,就是用上面所说的方法来拓展MODULE。

var MODULE = (function (my) {
 my.anotherMethod = function () {
  // added method...
 };
 return my;
}(MODULE));

虽然不必要,但是为了一致性 ,我们再次使用var关键字。然后代码执行,module会增加一个叫做MODULE.anotherMethod的公有方法。这个拓展文件同样也维持着它私有的内部状态和导入。

松拓展

我们上面的那个例子需要我们先创建module,然后在对module进行拓展,这并不是必须的。异步加载脚本是提升 Javascript 应用性能的最佳方式之一。。通过松拓展,我们创建灵活的,可以以任意顺序加载的,分成多个文件的module。每个文件的结构大致如下

var MODULE = (function (my) {
 // add capabilities...
 return my;
}(MODULE || {}));

在这种模式下,var语句是必须。如果导入的module并不存在就会被创建。这意味着你可以用类似于LABjs的工具来并行加载这些module的文件。

紧拓展

虽然松拓展已经很棒了,但是它也给你的module增添了一些局限。最重要的一点是,你没有办法安全的重写module的属性,在初始化的时候你也不能使用其他文件中的module属性(但是你可以在初始化之后运行中使用)。紧拓展包含了一定的载入顺序,但是支持重写,下面是一个例子(拓展了我们最初的MODULE)。

var MODULE = (function (my) {
 var old_moduleMethod = my.moduleMethod;
 my.moduleMethod = function () {
  // method override, has access to old through old_moduleMethod...
 };
 return my;
}(MODULE));

这里我们已经重写了MODULE.moduleMethod,还按照需求保留了对原始方法的引用。

复制和继承

var MODULE_TWO = (function (old) {
 var my = {},
  key;
 for (key in old) {
  if (old.hasOwnProperty(key)) {
   my[key] = old[key];
  }
 }
 var super_moduleMethod = old.moduleMethod;
 my.moduleMethod = function () {
  // override method on the clone, access to super through super_moduleMethod
 };
 return my;
}(MODULE));

这种模式可能是最不灵活的选择。虽然它支持了一些优雅的合并,但是代价是牺牲了灵巧性。在我们写的代码中,那些类型是对象或者函数的属性不会被复制,只会以一个对象的两份引用的形式存在。一个改变,另外一个也改变。对于对象来说[g5] ,我们可以通过一个递归的克隆操作来解决,但是对于函数是没有办法的,除了eval。然而,为了完整性我还是包含了它。

跨文件的私有状态

把一个module分成多个文件有一很大的局限,就是每一个文件都在维持自身的私有状态,而且没有办法来获得其他文件的私有状态。这个是可以解决的,下面这个松拓展的例子,可以在不同文件中维持私有状态。

var MODULE = (function (my) {
 var _private = my._private = my._private || {},
  _seal = my._seal = my._seal || function () {
   delete my._private;
   delete my._seal;
   delete my._unseal;
  },
  _unseal = my._unseal = my._unseal || function () {
   my._private = _private;
   my._seal = _seal;
   my._unseal = _unseal;
  };
 // permanent access to _private, _seal, and _unseal
 return my;
}(MODULE || {}));

每一个文件可以为它的私有变量_private设置属性,其他文件可以立即调用。当module加载完毕,程序会调用MODULE._seal(),让外部没有办法接触到内部的 _.private。如果之后module要再次拓展,某一个属性要改变。在载入新文件前,每一个文件都可以调用_.unsea(),,在代码执行之后再调用_.seal。

这个模式在我今天的工作中想到的,我从没有在其他地方见到过。但是我认为这是一个很有用的模式,值得单独写出来。

Sub-modules

最后一个高级模式实际上是最简单的,有很多创建子module的例子,就像创建一般的module一样的。

MODULE.sub = (function () {
 var my = {};
 // ...
 return my;
}());

虽然这可能是很简单的,但是我决定这值得被写进来。子module有一般的module所有优质的特性,包括拓展和私有状态。

总结

大多数高级模式都可以互相组合来创建更有用的新模式。如果一定要让我提出一个设计复杂应用的方法的话,我会结合松拓展,私有状态,和子module。

在这里我没有提到性能相关的事情,但是我可以说,module模式对于性能的提升有好处。它可以减少代码量,这就使得代码的载入更迅速。松拓展使得并行加载成为可能,这同样提升的载入速度。初始化的时间可能比其他的方法时间长,但是这多花的时间是值得的。只要全局变量被正确导入了运行的时候就不会出问题,在子module中由于对变量的引用链变短了可能也会提升速度。

最后,这是一个子module自身动态加载的例子(如果不存在就创建),为了简介我没有考虑内部状态,但是即便考虑它也很简单。这个模式可以让复杂,多层次的代码并行的加载,包括子module和其他所有的东西。

var UTIL = (function (parent, $) {
 var my = parent.ajax = parent.ajax || {};
 my.get = function (url, params, callback) {
  // ok, so I'm cheating a bit 
  return $.getJSON(url, params, callback);
 };
 // etc...
 return parent;
}(UTIL || {}, jQuery));

我希望这些内容是有用的,请在下面留言来分享你的想法。少年们,努力吧,写出更好的,更模块化的JavaScript。

原文链接:ben cherry 翻译:王筱

Javascript 相关文章推荐
jQuery代码优化 选择符篇
Nov 01 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
删除select中所有option选项jquery代码
Aug 12 #Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 #Javascript
JavaScript解析URL参数示例代码
Aug 12 #Javascript
You might like
基于PHP常用函数的用法详解
2013/05/10 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Django组件content-type使用方法详解
2019/07/19 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
用python实现名片管理系统
2020/06/18 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
python 检测图片是否有马赛克
2020/12/01 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
shell的种类有哪些
2015/04/15 面试题
给女儿的表扬信
2014/01/18 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
房屋租赁协议书
2014/10/18 职场文书
培训心得体会怎么写
2016/01/25 职场文书
2019各种承诺书范文
2019/06/24 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript