博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript基础对象创建模式之模块模式(Module Pattern)(025)
阅读量:7122 次
发布时间:2019-06-28

本文共 3648 字,大约阅读时间需要 12 分钟。

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

  • 命名空间模式
  • 即时函数模式
  • 私有成员与访问控制方法模式
  • 依赖声明模式
模块模式的第一步是建立一个命名空间。首先我们用先前介绍的 创建一个工具模块例子,这个例子模块提供一些数组功能:
MYAPP.namespace('MYAPP.utilities.array');
下一步就是定义这个模块。模块模式使用即时函数中的局部作用域来存放私有代码段。即时函数返回一个对象,该对象实际上就是被定义模块的公用接口,使用该模块的程序员可以通过这个对象来获得该模块提供的功能:
MYAPP.utilities.array = (function () {    return {        // todo...    };}());

 

下面为这个模块增加一些公有的方法:
MYAPP.utilities.array = (function () {    return {        inArray: function (needle, haystack) {            // ...        },        isArray: function (a) {            // ...        }    };}());

 

利用即时函数提供的局部作用域,可以在即时函数体的上部,给出模块的依赖关系,私有属性,以及需要初始化的代码。最后,这个即时函数返回需要创建的模块的公有访问接口对象:
MYAPP.namespace('MYAPP.utilities.array');MYAPP.utilities.array = (function () {        // dependencies    var uobj  = MYAPP.utilities.object,        ulang = MYAPP.utilities.lang,        // private properties        array_string = "[object Array]",        ops = Object.prototype.toString;        // private methods        // ...        // end var    // optionally one-time init procedures    // ...    // public API    return {        inArray: function (needle, haystack) {            for (var i = 0, max = haystack.length; i < max; i += 1) {                if (haystack[i] === needle) {                    return true;                }            }        },        isArray: function (a) {            return ops.call(a) === array_string;        }        // ... more methods and properties    };}());
以上就是模块模式的基本思路。模块模式是组织JavaScript代码的常用模式,推荐在软件开发中经常使用。
1. 通过揭露模式创建的模块
上面的模块模式例子中,公有方法是直接声明的。结合之前介绍的 ,可以把所有模式中的方法都先声明为私有,然后再通过揭露模式,把私有的方法通过公有的接口方法展示出来。据此,上面的例子可以这样写:
MYAPP.utilities.array = (function () {        // private properties    var array_string = "[object Array]",        ops = Object.prototype.toString,        // private methods        inArray = function (haystack, needle) {            for (var i = 0, max = haystack.length; i < max; i += 1) {                if (haystack[i] === needle) {                    return i;                }            }            return ?1;        },        isArray = function (a) {            return ops.call(a) === array_string;        };        // end var    // revealing public API    return {        isArray: isArray,        indexOf: inArray    };}());
2. 通过构造函数创建的模块
以上的例子中都是直接返回对象,有时候使用构造函数要更方便一些。使用构造函数的模块模式与上面例子的区别就在于返回的是一个函数,而不是一个字面声明的对象:
MYAPP.namespace('MYAPP.utilities.Array');MYAPP.utilities.Array = (function () {        // dependencies    var uobj  = MYAPP.utilities.object,        ulang = MYAPP.utilities.lang,        // private properties and methods...        Constr;        // end var    // optionally one-time init procedures    // ...    // public API -- constructor    Constr = function (o) {        this.elements = this.toArray(o);    };    // public API -- prototype    Constr.prototype = {        constructor: MYAPP.utilities.Array,        version: "2.0",        toArray: function (obj) {            for (var i = 0, a = [], len = obj.length; i < len; i += 1) {                a[i] = obj[i];            }            return a;        }    };    // return the constructor    // to be assigned to the new namespace    return Constr;}());
使用构造函数来声明的模块,可以这样调用:
var arr = new MYAPP.utilities.Array(obj);

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

模块声明时使用的即时函数可以接受需要的参数,这些参数可以根据设计的需要来引入。一个常用的做法是把global作为参数引入进来,这样全局对象就本地化了(
Localized),可以加速对全局变量的访问:
MYAPP.utilities.module = (function (app, global) {    // references to the global object    // and to the global app namespace object    // are now localized}(MYAPP, this));

 

转载于:https://www.cnblogs.com/Bryran/p/3976145.html

你可能感兴趣的文章
记录fastclick中一次手动触发click事件失败
查看>>
云框架发布KONG API Gateway主题,开源求助攻~
查看>>
从一次报错聊聊 Point 事件
查看>>
JS attribute and prpperty
查看>>
SpringMVC配置太多?试试SpringBoot
查看>>
详解js深浅复制
查看>>
Laravel 服务容器实现原理
查看>>
stl map
查看>>
什么是with?
查看>>
LeetCode Weekly Contest 21
查看>>
查询计划参数详解
查看>>
JS中把对象赋值给变量时出现的问题
查看>>
华为敏捷/DevOps实践:如何开好迭代计划会议
查看>>
AI+社交,快手商业化落地之道
查看>>
.NET Core中的去虚
查看>>
滴滴开源支撑业务代码重构工具Rdebug
查看>>
联合国儿童基金会投资六家区块链初创企业,目标是解决“全球性挑战”
查看>>
CNCF宣布Envoy项目正式毕业
查看>>
百度App网络深度优化系列(一):DNS优化
查看>>
Oracle发布多语种虚拟机平台GraalVM 1.0
查看>>