JS设计模式之序

最近看了3本关于设计模式的好书，Head First Design Patterns，Learning Javascript Design Patterns，大话设计模式，也顺便捡一捡多年不用的英语。

我们都知道一个古老的问题：面向对象的好处有哪些？可复用、可扩展、易维护、灵活。我用一门面向对象语言（比如c#）来写程序，我的代码当然不会自动获得上述优点，而取决于我怎么去写。那怎么写出可复用、可扩展、易维护又灵活的代码呢，大牛们早已总结了以下设计原则：

  • seperate what changes from what stays the same
  • program to an interface, not an implementation
  • favor composition over inheritance
  • strive for loosely coupled designs between objects that interact
  • classes should be open for extension, but close to modification
  • talk only to your immediate friends
  • a class should have only one reason to change

如果只用一句话来概括设计原则，那么一定是第一条，封装变化。毕竟变化是“enemy”，它不可避免，才驱使我们燃烧着脑力堆积起健壮的代码来对坑它。

为此，大牛们又给了我们“武器”，即各种各样的设计模式，用来解决某一类问题或问题的某个方面。设计模式不是具体的解决方案，它更像是一个获得大家认可的模板，我们利用这个模板来解决问题。面对不同的情况，选择对的设计模式，并恰当的使用，决定了好坏，也是我目前的目标:)

时间： 2024-12-25 13:26:33

JS设计模式之序的相关文章

JS设计模式（门面模式）

<!--JS设计模式(门面模式)--> // 门面模式的概念:简化API接口 最经典的就是事件 // 做一件事情: 必须要调用2个函数分别是 a , b //案例:获得页面上多个元素并设置css样式 window.onload=function(){ setCss(["div1","div2","div3"],{ background:"blue", color:"#fff" }); } fun

JS 设计模式（工厂模式环境搭建）

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(工厂模式)--> //搭建一个工厂环境 //卖车店 function CarShop(){}; CarShop.prototype={ cons

js 设计模式学习（1）

最近一个人外出旅行 顺便在那座城市买了一本关于JS设计模式的书 供无聊的时候阅读 却发现小有收获 旅游回来以后立马写下心得 做了一个地图 并以此总结此次旅行的经过的地方 尝试1: 尝试写JS类 1 var TianDiTu = function (lat, lng, zoom) { 2 if (this instanceof TianDiTu) { 3 var zoomSize = { maxZoom: 18, minZoom: 5 }, 4 normalm = L.tileLayer.chin

设计模式之序章-UML类图那点事儿

设计模式之序-UML类图那点事儿 序 打14年年底就像写那么一个系列,用于讲设计模式的,代码基于JAVA语言,最早接触设计模式是大一还是大二来着,那时候网上有人给推荐书,其中就有设计模式,当时给我推荐的书我还隐约记得,叫GoF的,书名是<Design Patterns: Elements of Reusable Object-Oriented Software>,也即<设计模式>,机械出版社的将其翻译为<设计模式-可复用面向对象软件的基础>.至于为什么叫做GoF,那时候

JS设计模式（桥接模式）

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(桥接模式)--> //桥接模式:主要是把抽象和现实分离开来,使他们独立开来 //应用场景:事件监听回掉机制 window.onload=func

JS设计模式（动态工厂模式）

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(细粒度工厂模式)--> //搭建一个工厂环境 买什么车——(去什么店)卖车的店——卖车——生产车 //卖车店 super Shop 只有卖车的方

【转】JS设计模式开篇

(原文地址:http://blog.chinaunix.net/uid-26672038-id-3904513.html) 本文主要讲述一下,什么是设计模式(Design pattern),作为敲键盘的我们要如何学习设计模式.设计模式真的是一把万能钥匙么? 各个代码的设计模式几乎每个人都知晓,就算不会那也一定在一些装逼的大牛(部分而已)口中听过.但可能很少有人知道设计模式的由来: 设计模式该术语源自Erich Gamma等人在上世纪90年代从建筑设计领域引入到计算机科学的(很难想象到底有多大关联

JS设计模式（一）

刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化.linux.数据库.服务器等的基础知识. 设计模式的学习主要参考<JavaScript设计模式与开发实践>一书,很多笔记也会从该书抄录.开始JS设计模式的学习. 1.原型模式 原型模式既是一种设计模式,也是一种编程泛型.原型模式是JS最基础的继承实现,在这儿就不多讲了,写一下JS原型继承的基本原

【JS 设计模式 】用组合模式来实现树形导航--代码结构思路分析（一）

树导航效果图: 组合模式的描述: 将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 我们把部分用Leaf表示, 把整体用Composite表示.组合模式是有一定规律的,在实现树导航的情况下,Composite需要包含一个以上Leaf,也可以包含一个以上Leaf和一个以Composite,为什么说要包含一个以上的,如果Composite不包含任何子child的话那么它就是Leaf,Leaf表示是最后一层结节. 树形导航代码片段: