JavaScript 设计模式之模块模式

发布于 2021-11-21 12:48:30 字数 1218 浏览 1262 评论 0

在一些大的项目中经常使用到模块,在这里,我们将了解一下什么是模块模式。模块模式最简单的方法大家一定会用过,如下所示:

var a = {
     b : 1,
     c : 2 
}

这样一个对象的直接量其实就已经是可以表示一个模块的定义了。但是这里会有些问题:a 对象里面的 b 和 c 属性是公有的,也就是说我们可以在外面任意改变其值。而模块化设计要求的是我们尽可能的实现模块中的值和方法都不被外部改变,形成独立或者说是私有的环境。所以我们可以这样写:

var count = (function(window, undefined){
    var total = 0;//私有成员变量
    var c =  function(q) {//私有方法,闭包函数
        total++;
    }
    return {
        count : c//暴露的私有方法,
    };
})(window, undefined)

可以看到,count 最终接受了匿名函数返回的一个自面量,而其中的 count 方法也就是私有的c的公开方法的别名是包含了匿名函数内上下文的闭包函数,通过它,我们可以改变 total 的值,实现了 total 的私有化。我们可以这样来改变 total 的值

count.count();//这样total的值就递增了1

以上的例子中我们可以看到模块模式的一些特点:

模块化,可重用

  1. 封装了变量和 function,和全局的 namaspace 不接触,松耦合
  2. 只暴露可用 public 的方法,其它私有方法全部隐藏。

在大型应用中模块化设计经常引用到。通过一些模块的加载器,和 AMD 规范,我们可以有序整理项目,实现可维护的高效率代码。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

辞别

暂无简介

0 文章
0 评论
540 人气
更多

推荐作者

花开柳相依

文章 0 评论 0

zyhello

文章 0 评论 0

故友

文章 0 评论 0

对风讲故事

文章 0 评论 0

Oo萌小芽oO

文章 0 评论 0

梦明

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文