Bob大叔提出并發(fā)揚了S.O.L.I.D五大原則,用來更好地進行面向?qū)ο缶幊蹋宕笤瓌t分別是:
五大原則,我相信在博客園已經(jīng)被討論爛了,尤其是C#的實現(xiàn),但是相對于JavaScript這種以原型為base的動態(tài)類型語言來說還為數(shù)不多,該系列將分5篇文章以JavaScript編程語言為基礎(chǔ)來展示五大原則的應(yīng)用。 OK,開始我們的第一篇:單一職責(zé)。
英文原文:http://freshbrewedcode.com/derekgreer/2011/12/08/solid-javascript-single-responsibility-principle/
單一職責(zé)的描述如下:
A class should have only one reason to change 類發(fā)生更改的原因應(yīng)該只有一個
一個類(JavaScript下應(yīng)該是一個對象)應(yīng)該有一組緊密相關(guān)的行為的意思是什么?遵守單一職責(zé)的好處是可以讓我們很容易地來維護這個對象,當(dāng)一個對象封裝了很多職責(zé)的話,一旦一個職責(zé)需要修改,勢必會影響該對象想的其它職責(zé)代碼。通過解耦可以讓每個職責(zé)工更加有彈性地變化。
不過,我們?nèi)绾沃酪粋€對象的多個行為構(gòu)造多個職責(zé)還是單個職責(zé)?我們可以通過參考Object Design: Roles, Responsibilies, and Collaborations一書提出的Role Stereotypes概念來決定,該書提出了如下Role Stereotypes來區(qū)分職責(zé):
一旦你知道了這些概念,那就狠容易知道你的代碼到底是多職責(zé)還是單一職責(zé)了。
該實例代碼演示的是將商品添加到購物車,代碼非常糟糕,代碼如下:
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,而匿名函數(shù)的職責(zé)是更新屏幕和用戶交互,這還不是一個很復(fù)雜的例子,但匿名函數(shù)里卻包含了很多不相關(guān)的職責(zé),讓我們來看看到底有多少職責(zé):
讓我們來分解一下,以便代碼各自存放到各自的對象里,為此,我們參考了martinfowler的事件聚合(Event Aggregator)理論在處理代碼以便各對象之間進行通信。
首先我們先來實現(xiàn)事件聚合的功能,該功能分為2部分,1個是Event,用于Handler回調(diào)的代碼,1個是EventAggregator用來訂閱和發(fā)布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里我們要觸發(fā)發(fā)布一個事件itemAdded,然后將item作為參數(shù)傳進去。
function Cart(eventAggregator) { var items = []; this.addItem = function (item) { items.push(item); eventAggregator.publish("itemAdded", item); }; }
CartController主要是接受cart對象和事件聚合器,通過訂閱itemAdded來增加一個li元素節(jié)點,通過訂閱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的目的是為了獲取數(shù)據(jù)(可以從ajax里獲?。缓蟊┞秅et數(shù)據(jù)的方法。
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方法,主要是發(fā)布觸發(fā)productSelected事件,forEach主要是用于綁定數(shù)據(jù)到產(chǎn)品列表上,代碼如下:
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"); }); }
最后聲明匿名函數(shù)(需要確保HTML都加載完了才能執(zhí)行這段代碼,比如放在jQuery的ready方法里):
(function () { var eventAggregator = new EventAggregator(), cart = new Cart(eventAggregator), cartController = new CartController(cart, eventAggregator), productRepository = new ProductRepository(), productController = new ProductController(eventAggregator, productRepository); })();
可以看到匿名函數(shù)的代碼減少了很多,主要是一個對象的實例化代碼,代碼里我們介紹了Controller的概念,他接受信息然后傳遞到action,我們也介紹了Repository的概念,主要是用來處理product的展示,重構(gòu)的結(jié)果就是寫了一大堆的對象聲明,但是好處是每個對象有了自己明確的職責(zé),該展示數(shù)據(jù)的展示數(shù)據(jù),改處理集合的處理集合,這樣耦合度就非常低了。
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); })();
看到這個重構(gòu)結(jié)果,有博友可能要問了,真的有必要做這么復(fù)雜么?我只能說:要不要這么做取決于你項目的情況。
如果你的項目是個是個非常小的項目,代碼也不是很多,那其實是沒有必要重構(gòu)得這么復(fù)雜,但如果你的項目是個很復(fù)雜的大型項目,或者你的小項目將來可能增長得很快的話,那就在前期就得考慮SRP原則進行職責(zé)分離了,這樣才有利于以后的維護。
更多建議: