JavaScript 设计模式

什么是模式?

  • 可复用的解决方案
  • 已经被验证的解决方案
  • 最好的设计模式通常会间接提供解决问题的方案

三类设计模式

通常将设计模式分为三类,分别是:

一 、创建型设计模式
二 、创建型设计模式
三、行为设计模式

下面我们分别对这三类设计模式进行介绍。

一 、创建型设计模式

基于创建对象的概念。创建对象的基本方法会导致项目复杂性的增加,而这类设计模式旨在通过控制创建过程来解决这种问题。

二 、创建型设计模式

基于构建对象块的想法。这类模式有助于确保在系统某一部分发生变化时,系统的整个结构不需要同时改变。

三、行为设计模式

基于对象在一起配合工作的方式。专注于改善或简化系统中不同对象之间的通信。


常见设计模式

Constructor (构造器) 模式

在javascript中几乎所有东西都是对象,我们通常感兴趣的是object构造器。
带原型的构造器可以在同类对象之间共享单一实例。

Module (模块) 模式

  • 模块化,可重用
  • 封装了变量和function,和全局的namaspace不接触,松耦合
  • 只暴露可用public的方法,其它私有方法全部隐藏

对象字面量

在对象字面量表示法中,一个对象被描述为一组包含在大括号({})中、以逗号分隔的name/value对。对象内的名称可以是字符串或标识符,后面跟着一个冒号。对象中最后的一个name/value对的后面不用加逗号,如果加逗号将会导致出错。

在JavaScript中,可以通过类的实例化来创建对象,也可以使用 对象字面量 直接创建对象。使用对象字面量来创建对象更快更简洁。

模块模式使用对象字面量作为一个作用域函数的返回值。

私有

模块模式使用闭包封装“私有”状态和组织。通过该模式,只需返回一个共有API,而其他的一切则都维持在私有闭包里。

Revealing Module (揭示模块) 模式

在私有范围内简单定义所有的函数和变量,并返回一个匿名对象,它拥有指向私有函数的指针。

Singleton(单例)模式

实例不存在的情况下,可以通过一个方法创建一个类来实现创建类的新实例;如果实例已经存在,它会简单返回该对象的引用。一个类只有一个对象实例,并提供一个访问它的全局访问点。

如何保证一个类只有一个实例并且这个实例易于被访问呢?定义一个全局变量可以确保对象随时都可以被访问,但不能防止我们实例化多个对象。一个更好的解决办法是让类自身负责保存它的唯一实例。这个类可以保证没有其他实例被创建,并且它可以提供一个访问该实例的方法。这就是单例模式的模式动机。

显然单例模式的要点有三个:一是某个类只能有一个实例;二是它必须自行创建这个实例;三是它必须自行向整个系统提供这个实例。

从具体实现角度来说,就是以下三点:一是单例模式的类只提供私有的构造函数,二是类定义中含有一个该类的静态私有对象,三是该类提供了一个静态的公有的函数用于创建或获取它本身的静态私有对象。

闭包变量实际上并不是闭包,而提供闭包的函数作用域是闭包。

Observer(观察者)模式

MVC模式

Model (模型)

Model管理应用程序的数据,不涉及用户界面,不涉及表示层,主要和业务数据有关。当model改变时,它通常会通知它的观察者(view)。一个model可以有多个view。

View (视图)

视图是模型的可视化表示,表示当前状态的筛选视图。一个view通常检测一个model,并在model更新时进行通知,使view本身能够进行相应的更新。
模板本身并不是视图。视图是一个用来检测model并保持可视化表示更新的对象。模板可能是一种指定部分或甚至所有视图对象的声明方式,这样它就可以从模板规范中生成。

Controller(控制器)

控制器是模型和视图之间的中介,当用户操作视图时,它通常负责更新model。
控制器在MVC中起到一个视图策略模式简易化的角色。负责管理view与model之间的逻辑与协调。

MVVM模式

Model (模型)

表示特定领域数据的典型示例可能是一个用户账户或一个音乐带。模型里保存着信息,但是通常不处理行为。它们不会格式化信息或影响数据,数据格式化是由view来处理的,而行为被认为是业务逻辑,应该被封装在与model交互的另一层中:viewmodel。

View (视图)

主动view,包含数据绑定、事件和行为。view不负责处理状态,它仅仅是让状态与viewmodel保持同步

ViewModel(控制器)

充当数据转化器,将model信息转变为view,将命令从view传递到model。

view与viewmodel之间通过数据绑定和事件进行通信。viewmodel不只暴露model属性,还会访问其他方法和验证类的特性。view处理自己用户界面的事件,必要时将它们映射到viewmodel。model和viewmodel上的属性通过双向数据绑定进行同步和更新。

其他小知识点

类的概念:Javascript是一种无类语言,但可以使用函数来模拟类。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容