前端设计模式复习之模块模式

113 阅读2分钟

「这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战

定义:

一种解决软件中私有和公有的封装问题的方法,指定类想暴露的属性和方法,并且不会污染全局,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分

分类:

  1. 对象字面量表示法
var obj={
    id:1,
    text:"打印数据"
}

注意:

(1) 定义一个属性后用逗号分隔,最后一个属性不需要

(2) 结尾加分号

(3) 属性名可以加双引号

  1. 模块化模式 模块化模式可以为类提供私有和公共封装

JavaScript:

可以使一个单独的对象拥有公共/私有的方法和变量,可以屏蔽来自全局作用域的特殊部分。可以减少我们的函数名与在页面中其他脚本区域内定义的函数名冲突的可能性。

  1. AMD模块

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:

require([module], callback);

  1. CommonJS 模块

特点:

(1) 所有代码都运行在模块作用域,不会污染全局作用域

(2) 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存

(3) 模块加载的顺序,按照其在代码中出现的顺序

  1. ECMAScript Harmony 模块

优点:

  1. 可以实现私有化变量和方法
  2. 可以实现代码的封装模块化

缺点:

  1. 不容易修改
  2. 不能应用私有变量,无法对私有变量进行单元测试