深入理解 JavaScript（四）

阿新 • • 發佈：2017-08-07

div 參數面向描述 pla 耦合理論 spl 什麽

前言

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，開始我們的第一篇：單一職責。

單一職責

單一職責的描述如下：

 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");
    });
}

最後聲明匿名函數（需要確保 HTML 都加載完了才能執行這段代碼，比如放在 jQuery 的 ready 方法裏）：

(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（四）

div 參數面向描述 pla 耦合理論 spl 什麽前言 Bob 大叔提出並發揚了 S.O.L.I.D 五大原則，用來更好地進行面向對象編程，五大原則分別是： The Single Responsibility Principle（單一職責 SRP） The Op

深入理解 JavaScript（四）

前言

單一職責

實例代碼

重構代碼

總結

深入理解 JavaScript（四）

聊聊高並發（二十四）解析java.util.concurrent各個組件（六）深入理解AQS（四）

深入理解JavaScript（一）

深入理解Plasma（四）Plasma Cash

深入理解JVM（四）——各個版本提供的垃圾收集器

聊聊高併發（二十四）解析java.util.concurrent各個元件（六）深入理解AQS（四）

深入理解Python（四）

深入理解jvm（四）：虛擬機器位元組碼執行引擎

深入理解jvm（四、虛擬機器效能監控與故障處理工具）

原生js深入理解系列（七）--- 讀JavaScript 執行機制的一點小總結

JavaScript（四）操作符

深入理解JVM（六）——類加載器原理

深入理解http（二）------http的緩存機制及原理

換個角度深入理解GlusterFS（三）

深入理解計算機（CSAPP）資源匯總

JavaScript（四）——DOM操作——Window.document對象

DAY57-前端入門-javascript（四）面向對象

spring 官方文件的介面理解整理（四）型別轉換spring例項解析

深入理解Plasma（3）：Plasma MVP

深入理解Plasma（2）：Plasma 細節剖析

深入理解 JavaScript（四）

前言

單一職責

實例代碼

重構代碼

總結

相關推薦