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


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

    • 命名空间模式
    • 即时函数模式
    • 私有成员与访问控制方法模式
    • 依赖声明模式
    模块模式的第一步是建立一个命名空间。首先我们用先前介绍的namespace()方法创建一个工具模块例子,这个例子模块提供一些数组功能:
    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));
    
  • 相关阅读:
    改变标题栏颜色和顶部栏颜色
    listview崩溃问题
    android欢迎界面
    ASZ参考代码
    shape的使用
    listview加边框
    toolbar左边有一小段空白
    as用百度地图不联网就gg
    OOM-OutOfMemory
    java reference定位
  • 原文地址:https://www.cnblogs.com/Bryran/p/3976145.html
Copyright © 2020-2023  润新知