精读《JavaScript设计模式》:简介(一)

经过一段工作时间的沉淀后,我发现需要细看一些书籍验证当中获得的经验。在JavaScript上的结构和模式上的考虑,使我决定精读《JavaScript设计模式》(中文版)。在阅读的过程中,发现中文版的某些译文有些不适当的时候,我就会查询相应英文版《Learning JavaScript Design Patterns》,斟酌差异。我摘拿了一些内容记录,在下面描述中,中文上有异议地方,我会附带上英文部分,并记录自己想法。

模式目的:

中文:

编写易于维护的代码,其中一个最重要方面是能够找到代码中重复出现的主题并优化它们。

英文:

One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them.

我:

在这段话中,我比较纠结的是对于“主题”这个词的翻译,字面上the recurring themes翻译成“重复出现的主题”,主题指的是什么,并不能让人清楚。其实就是代码的“部分”,所以我比较倾向翻译成“重复出现的部分”。

模式的好处:

中文:

1. 模式是已经验证的解决方案。

2. 模式很容易被复用。

3. 模式富有表达力。

看到模式时,通常就表示有一个设置好的结构和表达解决方案的词汇,以帮助我们非常轻松地表达出所实现的大型解决方案。

英文:

1. Patterns are proven solutions.

2. Patterns can be easily reused.

3. Patterns can be expressive.

When we look at a pattern there‘s generally a set structure and vocabulary to the solution presented that can help express rather large solutions quite elegantly.

我:

前两点是比较好理解,对照英文版是可以的,但第三点“富有表达力”过于直译了吧。我觉得可以翻译成“模式具有概括性”。另外对于第三点的阐述,我就更觉得不对劲了,比对之后,我觉得可以这样翻译。

——当我们看一个模式时,通常就有一套结构和词汇描述的解决方案,可以帮助我们很轻松地概括大型解决方案。

模式三法则:

成为有效模式的三个准则。

中文:

1. 适合性

2. 实用性

3. 适用性

英文:

1. Fitness of purpose

2. Usefulness

3. Applicability

我:

在看到中文的“适合性”和“适用性”,我心里就一千只羊驼在跑,这是在逗我吧,这尼玛有什么区别啊。于是查看英文得知重点在第一个翻译上。Fitness of purpose翻译成“适合性”应该是不合理的。我暂时也没有好的想法,姑且先放着。

设计模式类别:

每一种设计模式都重点关注一个特定的面向对象设计问题或设计要点,描述何时使用它,在另一些约束条件下是否还能使用,以及使用的效果和利弊。设计模式划分为下面三种类别:

中文:

1. 创建型设计模式

创建型设计模式专注于处理对象创建机制,以适合给定情况的方式来创建对象。

该分类的模式:Constructor(构造器)、Factory(工厂)、Abstract(抽象)、Prototype(原型)、Singleton(单例)和Builder(生成器)。

2. 结构型设计模式

结构型模式与对象组合有关,通常可以用于找出在不同对象之间建立关系的简单方法。

该分类的模式:Decorator(装饰者)、Facade(外观)、Flyweight(享元)、Adapter(适配器)和Proxy(代理)。

3. 行为设计模式

行为模式专注于改善或简化系统中不同对象之间的通信。

该分类的模式:Iterator(迭代器)、Mediator(中介者)、Observer(观察者)和Visitor(访问者)。

我:

这里中文翻译是正确的,所以就不附带上英文版。

一开始我对结构型设计模式的描述还是不是很明白,对象之间的“建立关系”和对象之间的“通信”区别在于什么地方。于是在我查询资料后,大部分篇章都是将结构型模式用途描述为主要是用于描述如何将类组合在一起去构成更大的结构。所以,与其是说“建立关系”,倒不如说是“组合”。

简而言之:

这三类设计模式解决问题就是:

创建型设计模式 : 对象创建

结构型设计模式 : 对象组合

行为设计模式    : 对象通信

总结

这一篇只是开篇的模式简介,东西并不详尽,因为概念上的东西挺容易忘,很多人(包括我自己)也不大喜欢讲概念,所以捡取我觉得比较重要或有异议地方。另外以此做一个引导,接下来的篇章是细谈每一个书中谈到的模式。

参考文献

1. 《Learning JavaScript Design Patterns》 by Addy Osmani

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

2. 《JavaScript设计模式》by 徐涛【译】

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5572121.html

时间: 2024-11-03 21:09:24

精读《JavaScript设计模式》:简介(一)的相关文章

javascript设计模式:构造器模式学习一

javascript 设计模式1.简介javascript是一种弱类型语言,不过类可以通过函数模拟出来最常见的实现方法如下:function Car(model){ this.model = model; this.color = "red"; this.year = "2012"; this.getInfo = function(){ return this.model + " " + this.year; }}接下来我们可以使用上边定义Car

JavaScript设计模式——互动出版网

这篇是计算机类的优质预售推荐>>>><JavaScript设计模式> 百度前端专家力作,阿里巴巴.百度前端高级工程师鼎力推荐的.极具趣味,容易理解,讲解又极为严谨和透彻的写作风格帮你打造出更为卓越的Web产品的好书 内容简介 <JavaScript设计模式>共分六篇四十章,首先讨论了几种函数的编写方式,体会JavaScript在编程中的灵活性:然后讲解了面向对象编程的知识,其中讨论了类的创建.数据的封装以及类之间的继承:最后探讨了各种模式的技术,如简单工厂模

Javascript 设计模式系统讲解与应用

第1章 课程介绍学习设计模式的必要性,课程包含的知识点,课程安排,学习前提1-1 导学 第2章 面向对象讲解javascript中的面向对象的概念,包括 ES6 class 语法.UML 类图.以及面向对象三要素2-1 搭建开发环境12-2 搭建开发环境22-3 搭建开发环境32-4 搭建开发环境42-5 什么是面向对象2-6 面向对象-继承2-7 面向对象-封装2-8 面向对象-多态2-9 面向对象-应用举例2-10 面向对象-总结2-11 UML类图1-介绍2-12 UML类图2-关系2-1

JavaScript设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素 许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为 内部迭代器 和 外部迭代器 一.jQuery 中的迭代器 1 $.each( [1,2,3,4], function (i, n) { 2 console.log( "当

javascript设计模式详解之命令模式

每种设计模式的出现都是为了弥补语言在某方面的不足,解决特定环境下的问题.思想是相通的.只不过不同的设计语言有其特定的实现.对javascript这种动态语言来说,弱类型的特性,与生俱来的多态性,导致某些设计模式不自觉的我们都在使用.只不过没有对应起来罢了.本文就力求以精简的语言去介绍下设计模式这个高大上的概念.相信会在看完某个设计模式之后有原来如此的感慨. 一.基本概念与使用场景: 基本概念: 将请求封装成对象,分离命令接受者和发起者之间的耦合. 命令执行之前在执行对象中传入接受者.主要目的相互

javascript设计模式

javascript设计模式 阅读目录 什么是设计模式 单体模式: 工厂模式: 单例模式 观察者模式(发布订阅模式) 策略模式 模板模式 代理模式 外观模式 设计模式太多了,貌似有23种,其实我们在平时的工作中没有必要特意去用什么样的设计模式,或者你在不经意间就已经用了设计模式当中的一种.本文旨在总结平时相对来说用的比较多的设计模式. 回到顶部 什么是设计模式 百度百科: 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 使用设计模式是

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

Javascript设计模式系列三

继承,一个类或对象继承另一个类或对象的三种方法.类式继承.原型式继承.掺元类. 一.类式继承,原型链.Extend函数. <script type="text/javascript"> ////定义Person类 var Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; ////原型链 function A

Javascript设计模式系列二

创建对象的基本模式,一.门户大开型,二.采用下划线来表示属性和方法的私用性,三.使用闭包来创建私用的成员. 一.门户大开型.只能提供公用成员.所有属性和方法都公开的.可访问的.这些共用属性都要使用this关键字来创建. <script type="text/javascript"> ////定义Dog对象 var Dog = function (name, age) { this.name = name; this.age = age; } Dog.prototype.Sa