深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP


Posted in Javascript onJanuary 15, 2012

前言
Bob大叔提出并发扬了S.O.L.I.D五大原则,用来更好地进行面向对象编程,五大原则分别是:

The Single Responsibility Principle(单一职责SRP)
The Open/Closed Principle(开闭原则OCP)
The Liskov Substitution Principle(里氏替换原则LSP)
The Interface Segregation Principle(接口分离原则ISP)
The Dependency Inversion Principle(依赖反转原则DIP)
五大原则,我相信在博客园已经被讨论烂了,尤其是C#的实现,但是相对于JavaScript这种以原型为base的动态类型语言来说还为数不多,该系列将分5篇文章以JavaScript编程语言为基础来展示五大原则的应用。 OK,开始我们的第一篇:单一职责。

英文原文:http://freshbrewedcode.com/derekgreer/2011/12/08/solid-javascript-single-responsibility-principle/

单一职责
单一职责的描述如下:

A class should have only one reason to change
类发生更改的原因应该只有一个
复制代码
一个类(JavaScript下应该是一个对象)应该有一组紧密相关的行为的意思是什么?遵守单一职责的好处是可以让我们很容易地来维护这个对象,当一个对象封装了很多职责的话,一旦一个职责需要修改,势必会影响该对象想的其它职责代码。通过解耦可以让每个职责工更加有弹性地变化。

不过,我们如何知道一个对象的多个行为构造多个职责还是单个职责?我们可以通过参考Object Design: Roles, Responsibilies, and Collaborations一书提出的Role Stereotypes概念来决定,该书提出了如下Role Stereotypes来区分职责:

Information holder ? 该对象设计为存储对象并提供对象信息给其它对象。
Structurer ? 该对象设计为维护对象和信息之间的关系
Service provider ? 该对象设计为处理工作并提供服务给其它对象
Controller ? 该对象设计为控制决策一系列负责的任务处理
Coordinator ? 该对象不做任何决策处理工作,只是delegate工作到其它对象上
Interfacer ? 该对象设计为在系统的各个部分转化信息(或请求)
一旦你知道了这些概念,那就狠容易知道你的代码到底是多职责还是单一职责了。

实例代码
该实例代码演示的是将商品添加到购物车,代码非常糟糕,代码如下:

function Product(id, description) { 
this.getId = function () { 
return id; 
}; 
this.getDescription = function () { 
return description; 
}; 
} function Cart(eventAggregator) { 
var items = []; 
this.addItem = function (item) { 
items.push(item); 
}; 
} 
(function () { 
var products = [new Product(1, "Star Wars Lego Ship"), 
new Product(2, "Barbie Doll"), 
new Product(3, "Remote Control Airplane")], 
cart = new Cart(); 
function addToCart() { 
var productId = $(this).attr('id'); 
var product = $.grep(products, function (x) { 
return x.getId() == productId; 
})[0]; 
cart.addItem(product); 
var newItem = $('<li></li>').html(product.getDescription()).attr('id-cart', product.getId()).appendTo("#cart"); 
} 
products.forEach(function (product) { 
var newItem = $('<li></li>').html(product.getDescription()) 
.attr('id', product.getId()) 
.dblclick(addToCart) 
.appendTo("#products"); 
}); 
})();

该代码声明了2个function分别用来描述product和cart,而匿名函数的职责是更新屏幕和用户交互,这还不是一个很复杂的例子,但匿名函数里却包含了很多不相关的职责,让我们来看看到底有多少职责:

首先,有product的集合的声明
其次,有一个将product集合绑定到#product元素的代码,而且还附件了一个添加到购物车的事件处理
第三,有Cart购物车的展示功能
第四,有添加product item到购物车并显示的功能
重构代码
让我们来分解一下,以便代码各自存放到各自的对象里,为此,我们参考了martinfowler的事件聚合(Event Aggregator)理论在处理代码以便各对象之间进行通信。

首先我们先来实现事件聚合的功能,该功能分为2部分,1个是Event,用于Handler回调的代码,1个是EventAggregator用来订阅和发布Event,代码如下:

function Event(name) { 
var handlers = []; this.getName = function () { 
return name; 
}; 
this.addHandler = function (handler) { 
handlers.push(handler); 
}; 
this.removeHandler = function (handler) { 
for (var i = 0; i < handlers.length; i++) { 
if (handlers[i] == handler) { 
handlers.splice(i, 1); 
break; 
} 
} 
}; 
this.fire = function (eventArgs) { 
handlers.forEach(function (h) { 
h(eventArgs); 
}); 
}; 
} 
function EventAggregator() { 
var events = []; 
function getEvent(eventName) { 
return $.grep(events, function (event) { 
return event.getName() === eventName; 
})[0]; 
} 
this.publish = function (eventName, eventArgs) { 
var event = getEvent(eventName); 
if (!event) { 
event = new Event(eventName); 
events.push(event); 
} 
event.fire(eventArgs); 
}; 
this.subscribe = function (eventName, handler) { 
var event = getEvent(eventName); 
if (!event) { 
event = new Event(eventName); 
events.push(event); 
} 
event.addHandler(handler); 
}; 
}

然后,我们来声明Product对象,代码如下:
function Product(id, description) { 
this.getId = function () { 
return id; 
}; 
this.getDescription = function () { 
return description; 
}; 
}

接着来声明Cart对象,该对象的addItem的function里我们要触发发布一个事件itemAdded,然后将item作为参数传进去。
function Cart(eventAggregator) { 
var items = []; this.addItem = function (item) { 
items.push(item); 
eventAggregator.publish("itemAdded", item); 
}; 
}

CartController主要是接受cart对象和事件聚合器,通过订阅itemAdded来增加一个li元素节点,通过订阅productSelected事件来添加product。
function CartController(cart, eventAggregator) { 
eventAggregator.subscribe("itemAdded", function (eventArgs) { 
var newItem = $('<li></li>').html(eventArgs.getDescription()).attr('id-cart', eventArgs.getId()).appendTo("#cart"); 
}); eventAggregator.subscribe("productSelected", function (eventArgs) { 
cart.addItem(eventArgs.product); 
}); 
}

Repository的目的是为了获取数据(可以从ajax里获取),然后暴露get数据的方法。
function ProductRepository() { 
var products = [new Product(1, "Star Wars Lego Ship"), 
new Product(2, "Barbie Doll"), 
new Product(3, "Remote Control Airplane")]; this.getProducts = function () { 
return products; 
} 
}

ProductController里定义了一个onProductSelect方法,主要是发布触发productSelected事件,forEach主要是用于绑定数据到产品列表上,代码如下:
function ProductController(eventAggregator, productRepository) { 
var products = productRepository.getProducts(); function onProductSelected() { 
var productId = $(this).attr('id'); 
var product = $.grep(products, function (x) { 
return x.getId() == productId; 
})[0]; 
eventAggregator.publish("productSelected", { 
product: product 
}); 
} 
products.forEach(function (product) { 
var newItem = $('<li></li>').html(product.getDescription()) 
.attr('id', product.getId()) 
.dblclick(onProductSelected) 
.appendTo("#products"); 
}); 
}

最后声明匿名函数:
(function () { 
var eventAggregator = new EventAggregator(), 
cart = new Cart(eventAggregator), 
cartController = new CartController(cart, eventAggregator), 
productRepository = new ProductRepository(), 
productController = new ProductController(eventAggregator, productRepository); 
})();

可以看到匿名函数的代码减少了很多,主要是一个对象的实例化代码,代码里我们介绍了Controller的概念,他接受信息然后传递到action,我们也介绍了Repository的概念,主要是用来处理product的展示,重构的结果就是写了一大堆的对象声明,但是好处是每个对象有了自己明确的职责,该展示数据的展示数据,改处理集合的处理集合,这样耦合度就非常低了。

最终代码

function Event(name) { 
var handlers = []; this.getName = function () { 
return name; 
}; 
this.addHandler = function (handler) { 
handlers.push(handler); 
}; 
this.removeHandler = function (handler) { 
for (var i = 0; i < handlers.length; i++) { 
if (handlers[i] == handler) { 
handlers.splice(i, 1); 
break; 
} 
} 
}; 
this.fire = function (eventArgs) { 
handlers.forEach(function (h) { 
h(eventArgs); 
}); 
}; 
} 
function EventAggregator() { 
var events = []; 
function getEvent(eventName) { 
return $.grep(events, function (event) { 
return event.getName() === eventName; 
})[0]; 
} 
this.publish = function (eventName, eventArgs) { 
var event = getEvent(eventName); 
if (!event) { 
event = new Event(eventName); 
events.push(event); 
} 
event.fire(eventArgs); 
}; 
this.subscribe = function (eventName, handler) { 
var event = getEvent(eventName); 
if (!event) { 
event = new Event(eventName); 
events.push(event); 
} 
event.addHandler(handler); 
}; 
} 
function Product(id, description) { 
this.getId = function () { 
return id; 
}; 
this.getDescription = function () { 
return description; 
}; 
} 
function Cart(eventAggregator) { 
var items = []; 
this.addItem = function (item) { 
items.push(item); 
eventAggregator.publish("itemAdded", item); 
}; 
} 
function CartController(cart, eventAggregator) { 
eventAggregator.subscribe("itemAdded", function (eventArgs) { 
var newItem = $('<li></li>').html(eventArgs.getDescription()).attr('id-cart', eventArgs.getId()).appendTo("#cart"); 
}); 
eventAggregator.subscribe("productSelected", function (eventArgs) { 
cart.addItem(eventArgs.product); 
}); 
} 
function ProductRepository() { 
var products = [new Product(1, "Star Wars Lego Ship"), 
new Product(2, "Barbie Doll"), 
new Product(3, "Remote Control Airplane")]; 
this.getProducts = function () { 
return products; 
} 
} 
function ProductController(eventAggregator, productRepository) { 
var products = productRepository.getProducts(); 
function onProductSelected() { 
var productId = $(this).attr('id'); 
var product = $.grep(products, function (x) { 
return x.getId() == productId; 
})[0]; 
eventAggregator.publish("productSelected", { 
product: product 
}); 
} 
products.forEach(function (product) { 
var newItem = $('<li></li>').html(product.getDescription()) 
.attr('id', product.getId()) 
.dblclick(onProductSelected) 
.appendTo("#products"); 
}); 
} 
(function () { 
var eventAggregator = new EventAggregator(), 
cart = new Cart(eventAggregator), 
cartController = new CartController(cart, eventAggregator), 
productRepository = new ProductRepository(), 
productController = new ProductController(eventAggregator, productRepository); 
})();

总结
看到这个重构结果,有博友可能要问了,真的有必要做这么复杂么?我只能说:要不要这么做取决于你项目的情况。

如果你的项目是个是个非常小的项目,代码也不是很多,那其实是没有必要重构得这么复杂,但如果你的项目是个很复杂的大型项目,或者你的小项目将来可能增长得很快的话,那就在前期就得考虑SRP原则进行职责分离了,这样才有利于以后的维护。

Javascript 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 #Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 #Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 #Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 #Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 #Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 #Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 #Javascript
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python实现机器学习之多元线性回归
2018/09/06 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Python 如何对文件目录操作
2020/07/10 Python
python操作链表的示例代码
2020/09/27 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
派出所所长先进事迹
2014/05/19 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
优秀党员推荐材料
2014/12/18 职场文书
师德师风个人总结
2015/02/06 职场文书
中学生运动会广播稿
2015/08/19 职场文书