【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. 无法为私有成员创建自动化测试单元;


相关文章
|
4月前
|
JavaScript 前端开发
在Node.js中,如何合理使用模块来避免全局变量的问题?
在Node.js中,如何合理使用模块来避免全局变量的问题?
188 71
|
7月前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
804 44
|
7月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
159 8
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
306 0
Next.js 实战 (三):优雅的实现暗黑主题模式
|
10月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
128 2
|
10月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第40天】在JavaScript的世界里,异步编程是一道不可或缺的风景线。它允许我们在等待慢速操作(如网络请求)完成时继续执行其他任务,极大地提高了程序的性能和用户体验。本文将深入浅出地探讨Promise、async/await等异步编程技术,通过生动的比喻和实际代码示例,带你领略JavaScript异步编程的魅力所在。
85 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
233 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
156 1
JavaScript中的原型 保姆级文章一文搞懂
|
10月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
97 0