美文网首页
js模块模式

js模块模式

作者: 50153465fcd8 | 来源:发表于2017-02-26 20:55 被阅读0次

一、Module模式

最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。

在js中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象用于公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低。

  var myNamespace=(function(){
    //私有计数器变量
    var myPrivateVar=0;
    //记录所有参数的私有函数
    var myPrivateMethod=function(foo){
      console.log(foo);
    }
    return{
      //公有变量
      myPublicVar:"foo",
      //调用私有变量和方法的公有函数
      myPublicFunction:function(bar){
          //增加私有计数器值
          myPrivateVar++;
          //传入bar调用私有方法
          myPrivateMethod(bar);
      }
  };
})();

二、私有

Module模式使用闭包封装“私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式,防止其泄露至全局作用域,并与别的开发人员的接口发生冲突。通过该模式,只需返回一个公有API,而其他的一切则都维持在私有闭包里 。

 var basketModule=(function(){
    //私有
    var basket=[];
    function doSomethingPrivate(){
        console.log("private");
    }
    function doSomethingElsePrivate(){
        //
    }
    //返回一个暴露出的公有对象
    return{
        //添加item到购物车
        addItem:function(values){
            basket.push(values);
        },
        //获取购物车里的item数
        getItemCount:function(){
            return basket.length;
        },
        //私有函数的公有形式别名,
        // doSomething:doSomethingPrivate自动调用doSomethingPrivate函数
        doSomething:doSomethingPrivate,
        //获取购物车里所有item的价格总值
        getTotal:function(){
            var itemCount=this.getItemCount(),total=0;
            while(itemCount--){
                total+=basket[itemCount].price;
            }
            return total;
        }
    };
})();

//basketModule返回了一个拥有公用API的对象
basketModule.addItem({
    item:"bread",
    price: 0.5
});
basketModule.addItem({
    item:"butter",
    price:0.3
});
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());
//会打印一个private和一个undefined,原因不明
console.log(basketModule.doSomething());
console.log(basketModule.basket);

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • js模块模式

    一、Module模式 最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。 在js中,Module模式用...

  • js模块模式

    当一个javascript文件很大的时候,会出现一些问题:1.里面定义了大量的变量,你不得不把变量的名字写的越来越...

  • js 模块模式

    在js的懒汉式单例模式中,其实也用到了另一种设计模式,即模块模式。在传统软件工程中,模块模式被定义为给类提供私有和...

  • js的4种设计模式及Vue小结(1)

    4种js设计模式 模块模式(module) 原型模式(prototype) 观察者模式(observer) 单例模...

  • js常见设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 JS设计模式大全 构造函数模...

  • modules

    翻译github整理笔记。模块(能力一般水平有限)。 ps:在ES6模块系统中,js自动将模式变为严格模式 exp...

  • JS设计模式之模块模式

    我们通过单体模式理解了是以对象字面量的方式来创建单体模式的;比如如下的对象字面量的方式代码如下: 模块模式的思路是...

  • JS设计模式三:模块模式

    模块模式简述 模块模式是为单例模式添加私有变量和私有方法,并减少全局变量的使用;如下就是一个模块模式的代码结构: ...

  • 2018-06-13 学习NodeJs 模块

    1.CommonJS规范 函数调用模式模块格式:hello.js'use strict'; vars ='Hell...

网友评论

      本文标题:js模块模式

      本文链接:https://www.haomeiwen.com/subject/lflawttx.html