Javascript 设计模式 -- Module（模块）模式

KoreyLee 发布于2019-08-21 10:23 / 3311人阅读

摘要：使用字面量表示法定义模块方法二模式模式使用闭包封装私有状态和组织。它提供了一种包装混合公有私有方法和变量的方式，防止其污染全局命名空间，防止其泄露到全局作用域。

方法一对象字面量表示法

在对象字面量表示法中，一个对象被描述为一组包含在大括号中，以逗号分隔的 name/value 对。对象内的名称可以是字符串或标识符，后面跟着一个冒号。对象中最后一个 name/value 对不加逗号，否则会出错。

 /**
 * 使用字面量表示法定义模块
 */
var myModule = {

    myProperty: "someValue",

    myConfig: {
        useCaching: true,
        language: "en"
    },

    myMethod: function () {
        console.log("the first method");
    },

    myMethod2: function () {
        console.log("the second method");
    },

};

console.log(myModule.myProperty);           // someValue
console.log(myModule.myConfig);             // {useCaching: true, language: "en"}
console.log(myModule.myConfig.useCaching);  // true
myModule.myMethod();                        // the first method
myModule.myMethod2();                       // the second method

方法二 Module模式

Module模式使用闭包封装“私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式
，防止其污染全局命名空间，防止其泄露到全局作用域。通过该模式，只需返回一个公有API，而其他的一切则都维持在私有闭包里。

/**
 * Module方法定义
 */
var myNameSpace = (function () {

    // 私有变量
    var myPrivateVar = 0;

    // 私有函数
    var myPrivateMethod = function (foo) {
        console.log(foo);
    };


    // 公有API
    return {

        // 公有变量
        myPublicVar: "foo",

        // 公有方法
        myPublicFunction: function (bar) {

            // 操作私有变量
            myPrivateVar ++;

            // 调用私有函数
            myPrivateMethod(bar);
        },

        // 公有方法二
        myPublicFunction2: function () {
            console.log("success");
        }
    };
}) ();

console.log(myNameSpace.myPrivateVar);          // undefined
console.log(myNameSpace.myPrivateVar);          // undefined
console.log(myNameSpace.myPublicVar);           // foo
console.log(myNameSpace.myPublicFunction);      // Function
myNameSpace.myPublicFunction2();                // success
myNameSpace.myPublicFunction("i am first");     // i am first

海外云主机云服务器 module模式 javascript设计模式 javascript命令模式 javascript严格模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85439.html

深入了解Javascript模块化编程

摘要：我们将简单地创建一个匿名函数并立即执行它。注意这对包裹匿名函数的最外层括号。幸运的是，我们的匿名函数提供了简单的变通方法。另外，它还维护了一个利用匿名函数闭包的私有的内置状态。本文译自Ben Cherry的《JavaScript Module Pattern: In-Depth》。虽然个人不太认同js中私有变量存在的必要性，但是本文非常全面地介绍了Javascript中模块化模...

骞讳护 2019-08-19 14:53 评论0 收藏0
Javascript模块化编程之【模块的写法】

摘要：模块化编程，已经成为一个迫切的需求。但是，不是一种模块化编程语言，它不支持类，更遑论模块了。本文总结了当前模块化编程的最佳实践，说明如何投入实用。就是模块的基本写法。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。随着WEB的快速崛起，网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。 Ja...

Riddler 2019-08-20 10:28 评论0 收藏0
分享JS模块化写法

摘要：模块化编程，已经成为一个迫切的需求。但是，不是一种模块化编程语言，它不支持类，更遑论模块了。一原始写法模块就是实现特定功能的一组方法。但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。就是模块的基本写法。随着网站逐渐变成互联网应用程序，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开...

Nino 2019-08-21 12:10 评论0 收藏0
Javascript设计模式学习之Module(模块)模式

摘要：实现模块的几种方法对象字面量表示法模式模式模式模块对象字面量对象字面量型完整版配置对象基本方法根据配置信息输出内容重写当前的配置信息输出结果值模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。该模式返回一个对象。 javascript实现模块的几种方法: 对象字面量表示法 Module模式 AMD模式 CommonJS模式 ECMAScript Harmony模块 ...

付永刚 2019-08-19 17:48 评论0 收藏0
JavaScript 模块化现状

摘要：比如，这种模拟并不符合某些边缘情况。然而，使用，结果是在引导模块时，将指向，与使用的行为一致。这将更容易完成代码库的过渡，并使成为可能。原文作者：Johannes Ewald @Jhnnns 原文链接：The state of JavaScript modules 已获原作者授权翻译及发布 showImg(https://segmentfault.com/img/bVOpwz?w...

draveness 2019-08-20 16:52 评论0 收藏0
深入理解JavaScript系列3:全面解析Module模式

摘要：总结上面的大部分方式都可以互相组合使用的，一般来说如果要设计系统，可能会用到松耦合扩展，私有状态和子模块这样的方式。简介 Module模式是JavaScript编程中一个非常通用的模式，一般情况下，大家都知道基本用法，本文尝试着给大家更多该模式的高级使用方式。首先我们来看看Module模式的基本特征：模块化，可重用封装了变量和function，和全局的namaspace不接触...

付伦 2019-08-19 17:19 评论0 收藏0