JavaScript设计模式-模块化模式

本文探讨JavaScript模块化模式,通过闭包实现私有属性与方法,避免全局污染,增强代码安全性。并介绍ES6中使用class关键字及#符号定义私有属性的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概念

  1. 模块化模式最初被定义为一种对传统软件工程中的类提供私有和公共封装的方法
  2. 在JavaScript中,模块化模式用来进一步模拟类的概念,通过这样一种方式:我们可以在一个单一的 对象中包含公共/私有的方法和变量,从而从全局范围中屏蔽特定的部分。
  3. 这个结果是可以减少我们的函数名称与在页面中其他脚本区域定义的函数名称冲突的可能性。

例子

第一步:定义一个闭包的模块。
第二步:利用闭包的特性定义一个局部变量,这个局部变量就是这个模块的私有属性。
第三步:同样定义一个局部函数。
第三步:利用return暴露模块内部的私有属性和方法,好处是可以保护模块的私有属性和方法。

 // 定义一个闭包的模块
        const basketModule = (function () {
            // 定义一个私有属性,模块以外是访问不到的
            const basket = []
            // 定义一个私有方法
            function doSomethingPrivate () {
                console.log('basket', basket)
            }
            // 返回写方法,让外面可以通过方法设置和获取私有属性
            return {
                // 这个方法可往私有属性里面加数据
                addItem: function (values) {
                    basket.push(values)
                },
                // 获取私有属性的长度
                getItemCount: function () {
                    return basket.length
                },
                // 把私有方法关联到这里,通过这个方法可以间接访问
                // Public alias to a  private function
                doSomething: doSomethingPrivate
            }
        }())
        basketModule.addItem({a: 1})
        console.log('basketModule.getItemCount()', basketModule.getItemCount())
        basketModule.doSomething()

ES6的模块化

es6新增了class的关键字#,在属性或方法前加#表示私有

class basketModuleClass {
// #代表私有属性
    #basket = []
    #sum() {
    	return #a + #b;
    } 
    addItem (values) {
        this.#basket.push(values)
    }
}

总结

模块化模式就是需要在函数内定义私有属性或方法,同时用公共的方法暴露出私有的属性和方法,即实现了外部可使用,但是又能保护私有属性。

github仓库地址:点击 设计模式例子 查看

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值