【javascript设计模式】2.Module(模块)模式

简介: 【javascript设计模式】2.Module(模块)模式

模块能帮助我们清晰分离和组织项目中的代码单元。

在js中有几种实现模块的方法:

  1. 对象字面量表示法;
  2. Module模式
  3. AMD模块
  4. CommonJs模块
  5. ES Harmony模块

本篇中我们主要介绍“对象字面量”表示法。

2.1对象字面量

示例:

<script type="text/javascript">
  var myObjectLiteral = {
    varibaleKey : varibaleValue,
    function: function () {
      //实现
    }
  };
</script>
<!-- 注意 
1.对象字面量不需要使用new实例化;
2.不能用在一个语句的开头,否则可能会被解释为一个块的开始;
-->

2.2 Module(模块)模式

JS中,Module模式用于进一步模拟类的概念。它能够使一个单独的对象拥有公有、私有方法和变量,从而屏蔽来自

全局作用域的特殊部分。进而降低了与其他脚本冲突的可能性。

其中,私有部分,主要利用了“闭包”。由于闭包的存在,声明的变量和方法只能在该模式内部可用。但在返回对象上

定义的变量和方法,外部使用者是能够调用的。

一个关于购物车的例子:

<script type="text/javascript">
  var basketModule = (function() {
    //私有
    var baskey = [];
    function doSomethingPrivate () {
      //实现
    }
    function doSomethingElsePrivate() {
      //实现
    }
    //返回一个暴露出的公有对象API
    return {
      //添加item到购物车
      addItem: function (values) {
        basket.push(values);
      },
      //获取购物车里的item数
      getItemCount: function() {
        return basket.length;
      },
      //私有函数的公有形式别名
      doSomething: doSomethingPrivate,
      //获取购物车里所有item的价格总值
      getTotal: function() {
        var itemCount = this.getItemCount(),
          total = 0;
        while (itemCount--) {
          total += basket[itemCount].price;
        }
        return total;
      }
    }
  })();
  //交互
  basketModule.addItem({
    item: "bread",
    price: 0.5
  });
  basketModule.addItem({
    item: "酱油",
    price: 1.5
  });
  //输出结果
  console.log(basketModule.getItemCount());//2
  console.log(basketModule.getTotal());//0.5+1.5 = 2
  //注意
  console.log(basketModule.basket);//underfined。因为basket没有暴露在公有的API中
</script>

优点:

  1. 整洁;
  2. 支持私有数据。在Module模式中,代码的公有部分能够接触到私有部分,而外部代码无法接触到类的私有部分。

缺点:

  1. 可见性需要改变时,需要修改每一处使用过该成员的地方;
  2. 无法访问之后在方法中添加的私有成员;
  3. 无法为私有成员创建自动化测试单元;


相关文章
|
9月前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
968 44
|
9月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
286 8
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
402 0
Next.js 实战 (三):优雅的实现暗黑主题模式
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
174 2
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第40天】在JavaScript的世界里,异步编程是一道不可或缺的风景线。它允许我们在等待慢速操作(如网络请求)完成时继续执行其他任务,极大地提高了程序的性能和用户体验。本文将深入浅出地探讨Promise、async/await等异步编程技术,通过生动的比喻和实际代码示例,带你领略JavaScript异步编程的魅力所在。
116 1
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
设计模式 算法 JavaScript
|
设计模式 算法 JavaScript
你不知道的javascript设计模式(六)---- 策略模式
你不知道的javascript设计模式(六)---- 策略模式
243 0
|
设计模式 存储 算法
JavaScript 设计模式之策略模式
什么是设计模式?为什么需要学习设计模式?
190 0
JavaScript 设计模式之策略模式