深入理解JavaScript学习笔记(3)_全面解析Module模式

简介

Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式。

首先我们来看看Module模式的基本特征:

  1. 模块化,可重用
  2. 封装了变量和function,和全局的namaspace不接触,松耦合
  3. 只暴露可用public的方法,其它私有方法全部隐藏

基本用法

先看一下最简单的一个实现,代码如下:

var Calculator = function (eq) {//这里可以声明私有成员var eqCtl = document.getElementById(eq);return {// 暴露公开的成员add: function (x, y) {var val = x + y;eqCtl.innerHTML = val;}};
};

 

我们可以通过如下的方式来调用:

var calculator = new Calculator('eq');
calculator.add(2, 2);

大家可能看到了,每次用的时候都要new一下,也就是说每个实例在内存里都是一份copy,如果你不需要传参数或者没有一些特殊苛刻的要求的话,我们可以在最后一个}后面加上一个括号,来达到自执行的目的,这样该实例在内存中只会存在一份copy,不过在展示他的优点之前,我们还是先来看看这个模式的基本使用方法吧。

 

匿名闭包

匿名闭包是让一切成为可能的基础,而这也是JavaScript最好的特性,我们来创建一个最简单的闭包函数,函数内部的代码一直存在于闭包内,在整个运行周期内,该闭包都保证了内部的代码处于私有状态。

(function () {// ... 所有的变量和function都在这里声明,并且作用域也只能在这个匿名闭包里// ...但是这里的代码依然可以访问外部全局的对象
}());

注意,匿名函数后面的括号,这是JavaScript语言所要求的,因为如果你不声明的话,JavaScript解释器默认是声明一个function函数,有括号,就是创建一个函数表达式,也就是自执行,用的时候不用和上面那样在new了,当然你也可以这样来声明:

function () {/* 内部代码 */})();

不过我们推荐使用第一种方式,关于函数自执行,我后面会有专门一篇文章进行详解,这里就不多说了。

引用全局变量

JavaScript有一个特性叫做隐式全局变量,不管一个变量有没有用过,JavaScript解释器反向遍历作用域链来查找整个变量的var声明,如果没有找到var,解释器则假定该变量是全局变量,如果该变量用于了赋值操作的话,之前如果不存在的话,解释器则会自动创建它,这就是说在匿名闭包里使用或创建全局变量非常容易,不过比较困难的是,代码比较难管理,尤其是阅读代码的人看着很多区分哪些变量是全局的,哪些是局部的。

不过,好在在匿名函数里我们可以提供一个比较简单的替代方案,我们可以将全局变量当成一个参数传入到匿名函数然后使用,相比隐式全局变量,它又清晰又快,我们来看一个例子:

(function ($, YAHOO) {// 这里,我们的代码就可以使用全局的jQuery对象了,YAHOO也是一样
} (jQuery, YAHOO));

现在很多类库里都有这种使用方式,比如jQuery源码。

不过,有时候可能不仅仅要使用全局变量,而是也想声明全局变量,如何做呢?我们可以通过匿名函数的返回值来返回这个全局变量,这也就是一个基本的Module模式,来看一个完整的代码:

 
var blogModule = (function () {var my = {}, privateName = "博客园";function privateAddTopic(data) {// 这里是内部处理代码
    }my.Name = privateName;my.AddTopic = function (data) {privateAddTopic(data);};return my;
} ());

上面的代码声明了一个全局变量blogModule,并且带有2个可访问的属性:blogModule.AddTopic和blogModule.Name,除此之外,其它代码都在匿名函数的闭包里保持着私有状态。同时根据上面传入全局变量的例子,我们也可以很方便地传入其它的全局变量。

 

高级用法

上面的内容对大多数用户已经很足够了,但我们还可以基于此模式延伸出更强大,易于扩展的结构,让我们一个一个来看。

扩展

Module模式的一个限制就是所有的代码都要写在一个文件,但是在一些大型项目里,将一个功能分离成多个文件是非常重要的,因为可以多人合作易于开发。再回头看看上面的全局参数导入例子,我们能否把blogModule自身传进去呢?答案是肯定的,我们先将blogModule传进去,添加一个函数属性,然后再返回就达到了我们所说的目的,上代码:

var blogModule = (function (my) {my.AddPhoto = function () {//添加内部代码  
    };return my;
} (blogModule)); 

这段代码,看起来是不是有C#里扩展方法的感觉?有点类似,但本质不一样哦。同时尽管var不是必须的,但为了确保一致,我们再次使用了它,代码执行以后,blogModule下的AddPhoto就可以使用了,同时匿名函数内部的代码也依然保证了私密性和内部状态。

松耦合扩展

上面的代码尽管可以执行,但是必须先声明blogModule,然后再执行上面的扩展代码,也就是说步骤不能乱,怎么解决这个问题呢?我们来回想一下,我们平时声明变量的都是都是这样的:

var cnblogs = cnblogs || {} ;

这是确保cnblogs对象,在存在的时候直接用,不存在的时候直接赋值为{},我们来看看如何利用这个特性来实现Module模式的任意加载顺序:

var blogModule = (function (my) {// 添加一些功能   return my;
} (blogModule || {}));  

通过这样的代码,每个单独分离的文件都保证这个结构,那么我们就可以实现任意顺序的加载,所以,这个时候的var就是必须要声明的,因为不声明,其它文件读取不到哦。

紧耦合扩展

虽然松耦合扩展很牛叉了,但是可能也会存在一些限制,比如你没办法重写你的一些属性或者函数,也不能在初始化的时候就是用Module的属性。紧耦合扩展限制了加载顺序,但是提供了我们重载的机会,看如下例子:

var blogModule = (function (my) {var oldAddPhotoMethod = my.AddPhoto;my.AddPhoto = function () {// 重载方法,依然可通过oldAddPhotoMethod调用旧的方法
    };return my;
} (blogModule));

通过这种方式,我们达到了重载的目的,当然如果你想在继续在内部使用原有的属性,你可以调用oldAddPhotoMethod来用。

克隆与继承

var blogModule = (function (old) {var my = {},key;for (key in old) {if (old.hasOwnProperty(key)) {my[key] = old[key];}}var oldAddPhotoMethod = old.AddPhoto;my.AddPhoto = function () {// 克隆以后,进行了重写,当然也可以继续调用oldAddPhotoMethod
    };return my;
} (blogModule));

这种方式灵活是灵活,但是也需要花费灵活的代价,其实该对象的属性对象或function根本没有被复制,只是对同一个对象多了一种引用而已,所以如果老对象去改变它,那克隆以后的对象所拥有的属性或function函数也会被改变,解决这个问题,我们就得是用递归,但递归对function函数的赋值也不好用,所以我们在递归的时候eval相应的function。不管怎么样,我还是把这一个方式放在这个帖子里了,大家使用的时候注意一下就行了。

跨文件共享私有对象

通过上面的例子,我们知道,如果一个module分割到多个文件的话,每个文件需要保证一样的结构,也就是说每个文件匿名函数里的私有对象都不能交叉访问,那如果我们非要使用,那怎么办呢? 我们先看一段代码:

var blogModule = (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;};return my;
} (blogModule || {}));

任何文件都可以对他们的局部变量_private设属性,并且设置对其他的文件也立即生效。一旦这个模块加载结束,应用会调用 blogModule._seal()"上锁",这会阻止外部接入内部的_private。如果这个模块需要再次增生,应用的生命周期内,任何文件都可以调用_unseal() ”开锁”,然后再加载新文件。加载后再次调用 _seal()”上锁”。

子模块

最后一个也是最简单的使用方式,那就是创建子模块

blogModule.CommentSubModule = (function () {var my = {};// ...return my;
} ());

尽管非常简单,我还是把它放进来了,因为我想说明的是子模块也具有一般模块所有的高级使用方式,也就是说你可以对任意子模块再次使用上面的一些应用方法。

总结

上面的大部分方式都可以互相组合使用的,一般来说如果要设计系统,可能会用到松耦合扩展,私有状态和子模块这样的方式。另外,我这里没有提到性能问题,但我认为Module模式效率高,代码少,加载速度快。使用松耦合扩展允许并行加载,这更可以提升下载速度。不过初始化时间可能要慢一些,但是为了使用好的模式,这是值得的。

转载于:https://www.cnblogs.com/178mz/p/4542190.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/374978.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

汇编----乘指令: MUL、IMUL

MUL: 无符号乘 ;影响 OF、CF 标志位;指令格式:;MUL r/m ;参数是乘数;如果参数是 r8/m8, 将把 AL 做乘数, 结果放在 AX;如果参数是 r16/m16, 将把 AX 做乘数, 结果放在 EAX;如果参数是 r32/m32, 将把 EAX 做乘数, 结果放在 EDX:EAX IMUL: 有符号乘 ;影响 OF、CF 标志位;…

Google App Engine Java功能和命名空间API

功能API 使用Capabilities API,您的应用程序可以检测特定API功能的停机和计划停机时间。 您可以使用此API来检测应用程序何时不可用,然后绕过它来减少应用程序的停机时间。 我们该如何处理,这是个折衷方案? 1.优雅:创…

破解key file时经常用到的几个API函数及其用法

CreateFile函数 ================================================================================== CreateFile: Creates or opens a file or I/O device. The most commonly used I/O devices are as follows: file, file stream, directory, physical disk, volume, …

PHP计划任务之关闭浏览器后仍然继续执行的函数

函数名称:ignore_user_abort 本函数配置或取得使用端连接中断后,PHP 程序是否仍继续执行。默认值为中断连接后就停止执行。在 PHP 配置文件中 (php3.ini/php.ini) 的 ignore_user_abort 选项就是配置处。本功能在 PHP 3.0.7 版之后才开始提供。 官方说明…

node--更新数据库问题

昨天测试blog的comment功能,在新增comment相关的代码之后,重启应用,出现Cannot call method forEach of undefined 。反复核对代码,都没发现异常,最后将数据库文件删除之后,再重启数据库,一切正…

U盘做完启动盘,如何恢复原始容量

(1)右击“我的电脑”,选择“管理”选项,之后选择“磁盘管理”,查看自己U盘的索引,如:Disk 1(2)在运行窗口,输入cmd,回车,出现Dos运行环…

GWT Spring和Hibernate进入数据网格世界

利用Infinispan数据网格的功能最大化Hibernate性能。 一个GWT , Spring , JPA , Hibernate , Infinispan集成教程。 在本教程中,我们将讨论如何将Infinispan用作Hibernate二级缓存提供程序。 Infinispan是JBoss缓存的…

记对一个key file crackme的破解

crackme下载地址: http://kssd.pediy.com/tutorial/exercise/section04/chap6-1-4-03.zip ------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------…

第八章 CTE 递归 及 分组汇总 高级部分(多维数据集)

UNION 等集合操作符:UNION 等以第一个 SELECT 的 列明 作为 整个结果集的列明,整个结果集 唯一认可的 唯一逻辑处理阶段 是 ORDER BY 这个意思是说 只有 ORDER BY 是对整个结果集作用的,其它都操作都作用在 UINON 两侧的 子集合中。EXCEPT 操…

Java Code Geeks Andygene Web原型

大家好, 我们很高兴地宣布,一组Maven原型的第一个版本已经发布!!! 该集合的目的是提供可以满足各种开发需求的项目模板。 您可以在本文末尾找到JCG路线图。 该第一个发行版旨在提供项目模板-Web应用程序的体系结构。 …

关于如何用od反汇编win32 控制台程序

*********************************************************** 如何用od反汇编win32 控制台程序(类似dos程序)呢?*********************************************************** 注:od是用来调试win32程序的 1.反编译win32 控制台程序&…

Chrome/Chromium HTML5 video 视频播放硬件加速

Chromium站点上有个大致的框图。描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的Chromium代码分析,HTML5 video播放硬件加速,终于是使用MediaCodec.java来利用本地…

.net mvc结合微软提供的FormsAuthenticationTicket登陆

一、Web.config <system.web><compilation debug"true" targetFramework"4.5" /><httpRuntime targetFramework"4.5" /><authentication mode"Forms"><forms loginUrl"/Sign/SignIn" defaultUrl…

vc6.o--fatal error C1010错误的解决

当编译c文件时&#xff0c;出错信息为&#xff1a;fatal error C1010: unexpected end of file while looking for precompiled header directive 解决方案&#xff1a; 1、如果发生错误的文件是由其他的C代码文件添加进入当前工程而引起的&#xff0c;则AltF7进入当前工程的…

具有Java 7中自动资源管理功能的GC

这篇文章简要概述了Java 7中引入的称为自动资源管理或ARM的新功能。 文章探讨了ARM如何减少开发人员为有效释放分配的资源的JVM堆而必须编写的代码。 Java编程语言中编程的最甜蜜之处之一是对象取消分配的自动处理。 在Java世界中&#xff0c;这通常被称为垃圾收集。 基本上&am…

PHP学习笔记(六)

《Wordpress 50个过滤钩子》 1-10 过滤钩子是一类函数&#xff0c;wordpress执行传递和处理数据的过程中&#xff0c;在针对这些数据做出某些动作之前的特定点执行。本质上&#xff0c;就是在wordpress输出之前&#xff0c;将对浏览数据做出反应。 添加过滤钩子&#xff1a; ad…

JS 操作 radio input(cc问卷管理)

1、选中特定的单选按钮 function showDetail(content){$("input[name^radio]").removeAttr("checked");for(var i0;i<content.length;i){$("#radio"(i1)content.substr(i,1)).attr("checked","checked");} }2、手动添加问…

国内外著名黑客杂志

国外黑客杂志&#xff1a; 《phrack》黑客杂志 http://www.phrack.org 《phrack》创刊于80年代&#xff0c;是世界级的顶级黑客杂志&#xff0c;每年只有一期&#xff0c;现已出了65期&#xff0c;国人似乎至今只有三人在上面发表发表文章&#xff0c;三人好像都是绿盟的人&…

团体项目随笔

我们的团体项目不仅在在课堂上讨论了很久&#xff0c;课后也是几经讨论。每个人都有不同的想法我特别想做一个基于Web编写的驴客网&#xff0c;因为基于个人需求&#xff0c;在最终的讨论中被毙掉。 我们组最终的的讨论结果是写个游戏&#xff0c;关于游戏的发展&#xff0c;这…