模块模式可以提供软件架构,为不断增长的代码提供组织形式。JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织代码块,这些黑盒的代码块内的功能可以根据不断变化的软件需求而不断的被添加,替代和删除。模块模式由几种我们已经介绍过的模式共同组成:

  • 命名空间模式
  • 即时函数模式
  • 私有成员与访问控制方法模式
  • 依赖声明模式

模块模式的第一步是建立一个命名空间。首先我们用先前介绍的namespace()方法创建一个工具模块例子,这个例子模块提供一些数组功能:

MYAPP.namespace('MYAPP.utilities.array');

下一步就是定义这个模块。模块模式使用即时函数中的局部作用域来存放私有代码段。即时函数返回一个对象,该对象实际上就是被定义模块的公用接口,使用该模块的程序员可以通过这个对象来获得该模块提供的功能:

  1. MYAPP.utilities.array = (function() {
  2. return {
  3. // todo...
  4. };
  5. } ());

下面为这个模块增加一些公有的方法:

  1. MYAPP.utilities.array = (function() {
  2. return {
  3. inArray: function(needle, haystack) {
  4. // ...
  5. },
  6. isArray: function(a) {
  7. // ...
  8. }
  9. };
  10. } ());

利用即时函数提供的局部作用域,可以在即时函数体的上部,给出模块的依赖关系,私有属性,以及需要初始化的代码。最后,这个即时函数返回需要创建的模块的公有访问接口对象:

  1. MYAPP.namespace('MYAPP.utilities.array');
  2. MYAPP.utilities.array = (function() {
  3. // dependencies
  4. var uobj = MYAPP.utilities.object,
  5. ulang = MYAPP.utilities.lang,
  6. // private properties
  7. array_string = "[object Array]",
  8. ops = Object.prototype.toString;
  9. // private methods
  10. // ...
  11. // end var
  12. // optionally one-time init procedures
  13. // ...
  14. // public API
  15. return {
  16. inArray: function(needle, haystack) {
  17. for (var i = 0,
  18. max = haystack.length; i < max; i += 1) {
  19. if (haystack[i] === needle) {
  20. return true;
  21. }
  22. }
  23. },
  24. isArray: function(a) {
  25. return ops.call(a) === array_string;
  26. }
  27. // ... more methods and properties
  28. };
  29. } ());

以上就是模块模式的基本思路。模块模式是组织JavaScript代码的常用模式,推荐在软件开发中经常使用。

1. 模块的揭露模式

上面的模块模式例子中,公有方法是直接声明的。结合之前介绍的揭露模式,可以把所有模式中的方法都先声明为私有,然后再通过揭露模式,把私有的方法通过公有的接口方法展示出来。据此,上面的例子可以这样写:

  1. MYAPP.utilities.array = (function() {
  2. // private properties
  3. var array_string = "[object Array]",
  4. ops = Object.prototype.toString,
  5. // private methods
  6. inArray = function(haystack, needle) {
  7. for (var i = 0,
  8. max = haystack.length; i < max; i += 1) {
  9. if (haystack[i] === needle) {
  10. return i;
  11. }
  12. }
  13. return ? 1;
  14. },
  15. isArray = function(a) {
  16. return ops.call(a) === array_string;
  17. };
  18. // end var
  19. // revealing public API
  20. return {
  21. isArray: isArray,
  22. indexOf: inArray
  23. };
  24. } ());

2. 通过构造函数创建的模块

以上的例子中都是直接返回对象,有时候使用构造函数要更方便一些。使用构造函数的模块模式与上面例子的区别就在于返回的是一个函数,而不是一个字面声明的对象:

  1. MYAPP.namespace('MYAPP.utilities.Array');
  2. MYAPP.utilities.Array = (function() {
  3. // dependencies
  4. var uobj = MYAPP.utilities.object,
  5. ulang = MYAPP.utilities.lang,
  6. // private properties and methods...
  7. Constr;
  8. // end var
  9. // optionally one-time init procedures
  10. // ...
  11. // public API -- constructor
  12. Constr = function(o) {
  13. this.elements = this.toArray(o);
  14. };
  15. // public API -- prototype
  16. Constr.prototype = {
  17. constructor: MYAPP.utilities.Array,
  18. version: "2.0",
  19. toArray: function(obj) {
  20. for (var i = 0,
  21. a = [], len = obj.length; i < len; i += 1) {
  22. a[i] = obj[i];
  23. }
  24. return a;
  25. }
  26. };
  27. // return the constructor
  28. // to be assigned to the new namespace
  29. return Constr;
  30. } ());

使用构造函数来声明的模块,可以这样调用:

  1. var arr = new MYAPP.utilities.Array(obj);

3. 把global对象引入到模块中

模块声明时使用的即时函数可以接受需要的参数,这些参数可以根据设计的需要来引入。一个常用的做法是把global作为参数引入进来,这样全局对象就本地化了(Localized),可以加速对全局变量的访问:

  1. MYAPP.utilities.module = (function(app, global) {
  2. // references to the global object
  3. // and to the global app namespace object
  4. // are now localized
  5. } (MYAPP, this));

转载地址:http://zihui.lin.blog.163.com/blog/static/7292115420127781426279/

对象创建模式之模块模式(Module Pattern)的更多相关文章

  1. 初涉JavaScript模式 (11) : 模块模式

    引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中去,在北川的提醒下,我才发觉这是非常不严谨的,于是我把这些内容拎出来,这就是这篇的由来. 什么是模块模式 在 ...

  2. javascript模式之模块模式

    使用模式来组织代码有很多优点:使代码的结构更清晰,逻辑性更强,更容易维护.还可以避免很多错误. 首先,在javascript主要分为两大类: 编程模式-- 一些专门为javascript语言开发出的最 ...

  3. JavaScript基础对象创建模式之模块模式(Module Pattern)(025)

    模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织 代码块,这些黑盒的代码块内的功能可以根据不断变化的软件 ...

  4. 【JavaScript回顾】对象创建的几种模式

    组合使用构造函数模式和原型模式 创建自定义类型的常见方式,就是组合使用构造函数模式与原型模式.构造函数模式用于定义实 例属性,而原型模式用于定义方法和共享的属性.结果,每个实例都会有自己的一份实例属性 ...

  5. Eclipse创建Maven多模块工程Module开发(图文教程)

    自己研究了下Eclipse用Maven多模块工程Module开发,跟大家分享一下! 功能模块来分Module,跟java的package类似,一般是按照的功能模块分module,比如:sso/cas/ ...

  6. 《JavaScript 模式》读书笔记(5)— 对象创建模式2

    这一篇,我们主要来学习一下私有属性和方法以及模块模式. 三.私有属性和方法 JavaScript并没有特殊的语法来表示私有.保护.或公共属性和方法,在这一点上与Java或其他语言是不同的.JavaSc ...

  7. 《JavaScript 模式》读书笔记(5)— 对象创建模式4

    我们学完了大部分对象创建模式相关的内容,下面还有一些小而精的部分. 七.对象常量 JavaScript中没有常量的概念,虽然许多现代的编程环境可能为您提供了用以创建常量的const语句.作为一种变通方 ...

  8. JavaScript基础对象创建模式之命名空间(Namespace)模式(022)

    JavaScript中的创建对象的基本方法有字面声明(Object Literal)和构造函数两种,但JavaScript并没有特别的语法来表示如命名空间.模块.包.私有属性.静态属性等等面向对象程序 ...

  9. JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)

    (转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...

随机推荐

  1. crmv2项目

    maven -----------------------------------------------------------------------------感谢打赏!

  2. maven-本地安装jar包

    maven 安装本地jar包,通过install插件的install-file mojo进行工作,具体可通过如下命令进行查看 mvn help:describe -Dplugin=install -D ...

  3. 043-PHP简单获得一个类对应的反射信息

    <?php // 简单获得一个类对应的反射信息 class demo{ CONST CON_STR = '123456'; public $str_1; private $str_2; prot ...

  4. 025-PHP常用字符串函数(二)

    <?php $text = "My dog's name is Angus."; //print Angus print(substr($text, , )."&l ...

  5. Centos7.4 Storm2.0.0 + Zookeeper3.5.5 高可用集群搭建

    想了下还是把kafka集群和storm集群分开比较好 集群规划: Nimbus Supervisor storm01 √ √ storm02 √(备份) √ storm03 √ 准备工作 老样子复制三 ...

  6. 实验吧-密码学-他的情书(进一步了解js代码调试和console.log)

    打开网站,在白色背景下的任一点上点击鼠标,白色部分都会消失(包括password输入框),那么就无法输入. 查看源码,发现是明显的从源码解决问题. 火狐F12查看器查看源码(如果是简单的操作,可以vi ...

  7. sprngmvc+restFul 请求报错:404

    服务端代码 control类 @RequestMapping(value="getUser",method = RequestMethod.POST) @ResponseBody ...

  8. oracle(3)select语句中常用的关键字说明

    1.select 查询表中的数据 select * from stu: ---查询stu表所有的数据,*代表所有2.dual ,伪表,要查询的数据不存在任何表中时使用 select sysdate f ...

  9. 二十三、CI框架之post

    一.在控制器里面代码如下: 二.在View里面写好按钮和需要post的代码 三.效果如下,点击按钮之前: 点击按钮之后, 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额 ...

  10. bugku-Web 求getshell

    求getshell 上传一个png文件发现提示My name is margin,give me a image file not a php 然后也尝试上传php文件,但是依然不行,这里显然对文件类 ...