1. 程式人生 > >在Angular.js使用組合+依賴注入而不是繼承

在Angular.js使用組合+依賴注入而不是繼承

在Angular.js,您建立的每個物件(控制器,服務或工廠)是一個純老javascript的物件(POJO)。POJO是小功能是獨立的不繼承任何其他物件 ,可輕鬆地測試和可擴充套件性。聽起來可能不是很多,但是在大規模應用程式中實現去耦邏輯,這是非常重要的。

不要使用繼承,繼承導致程式碼耦合。

比如下面程式碼:

var Mammal = Backbone.Model.extend({
    isAlive: true,
    
    init: function () {
        console.log('An animal is born');
    },
    
    eat: function (food) {
        return 'omnomnom, I\'m eating: ' + food;
    },
    
    sleep: function () {
        return 'zzzzz' ;
    },
    
    die: function () {
        this.isAlive = false;
        return 'I\'m dead!';
    }
});
 
var Cat = Mammal.extend({
    meow: function () {
        return 'meow meow';
    }
});
 
var Dog = Mammal.extend({
    bark: function () {
        return 'woof woof';
    }
});

貓cat和狗dog繼承Mammal,接下來如果需要擴充套件,比如貓狗是不能用來打獵吃的,如果我們需要豹panther和狼wolf,以及獵人殺死它們,可以看出,豹和狼雖然都是食肉特徵,但是它屬於不同的分類,新增這些食肉特徵會導致重複程式碼,都有hunt和kill方法:
var Panther = Cat.extend({
    hunt: function () {
        return 'imma go search for food!';
    },
    
    kill: function (animal) {
        animal.die();
        return animal + ' is dead!';
    }
});
 
var Wolf = Dog.extend({
    hunt: function () {
        return 'imma go search for food!';
    },
    
    kill: function (animal) {
        animal.die();
        return animal + ' is dead!';
    }
});

根據達爾文的進化論,the traits that adapt to the environment the most make the organisms survive the best. 最適應環境的特徵(trait)能讓生物生存的最好。

許多生物體的特點可以是相似的,即使它們不屬於相同的屬或科。

使用組合方式實現如下:
var animals = angular.module('animals', []);
 
animals.factory('Mammal', function Mammal () {
    this.init();
    
    this.init = function () {
        this.isAlive = true;
        console.log('An animal is born');
    };
    
    this.eat = function (food) {
        return 'omnomnom, I\'m eating: ' + food;
    };
    
    this.sleep = function () {
        return 'zzzzz' ;
    };
    
    this.die = function () {
        this.isAlive = false;
        return 'I\'m dead!';
    };
});
 
animals.service('meowingTrait', function () {
    this.meow = function () {
        return 'meow meow';
    }
});
 
animals.service('barkingTrait', function () {
    this.bark = function () {
        return 'woof woof';
    };
});
 
animals.service('huntingTrait', function () {
    this.hunt = function () {
        return 'imma go search for food!';
    };
    
    this.kill = function (animal) {
        animal.die();
        return animal + ' is dead!';
    };
});

我們將豹和狼的動作特徵trait以animals.service('huntingTrait',.)方式實現,這個特徵trait獨立成一個類,然後通過依賴注入將這個特徵注入到具體例項中。如:
// Angular.js uses dependency injection to inject the traits you
// need for your animal.
animals.factory('Cat', function (meowingTrait) {
    // use the meowing trait here.
});
 
animals.factory('Dog', function (barkingTrait) {
    // use the barking trait here.
});
 
animals.factory('Panther', function (meowingTrait, huntingTrait) {
    // meow or hunt, pick what you please!
});
 
animals.factory('Wolf', function (barkingTrait, huntingTrait) {
    // bark or hunt, or do both!
});


這種方法一個明顯的好處是,它使你的程式碼更好可測試,你可以建立一個物種,是一種混搭的各種性狀triat,他們一定會如預期般運作的特點,只要有足夠的單元測試。

相關推薦

Angular.js使用組合+依賴注入繼承

在Angular.js,您建立的每個物件(控制器,服務或工廠)是一個純老javascript的物件(POJO)。POJO是小功能是獨立的不繼承任何其他物件 ,可輕鬆地測試和可擴充套件性。聽起來可能不是很多,但是在大規模應用程式中實現去耦邏輯,這是非常重要的。 不要使用繼承

優先使用組合物件,繼承"的理解

繼承應該不陌生了,OO的基本特性之一,由於繼承易於理解,比很多地方都用,可以說有面向物件設計的地方都用,以至於被濫用。組合物件,可能聽到的也有,但真正理解的可能就不多了的。筆者剛看到組合物件這詞也很蒙,不知何物? 下面貼一段程式碼來理解一下組合物件。此程式碼是用php實現觀

Hibernate 關聯查詢返回組合的Bean,是返回Object[]

目的:hibernate 多張表關聯查詢,用到了原生的sql,那麼用到SQLQuery,返回的是Object[],如果欄位太多,在後期維護上很不方便(obj[0],obj[1],,,,),為了維護方便,就改成自定義實體;程式碼如下: StringBuffer sql = n

Angular學習筆記-依賴注入入門

依賴注入 依賴注入:Dependency Injection 簡稱DI 首先,當使用引數是物件的方法時,需要先例項化物件,再傳給方法。 var person = new Person(); addPerson(person); 於是我們說,addPerson方法依賴Pers

Angular依賴注入:類“AnotherProductService”錯誤實現類“ProductService”。你是想擴充套件“ProductService”並將其成員作為子類繼承嗎?

在做Angular依賴注入例項時候出現一個問題“類“AnotherProductService”錯誤實現類“ProductService”。你是想擴充套件“ProductService”並將其成員作為子類繼承嗎?”於是找到解決本問題的方法,由於小編剛入門所以不能給大家提供更多的解釋,只提出解決方

組合繼承 - Go中的OOP

第27部分:組合而不是繼承 - Go中的OOP 2017年9月4日 歡迎來到教程號。27在Golang教程系列中。 Go不支援繼承,但它確實支援組合。組合的通用定義是“放在一起”。組合的一個例子是汽車。汽車由車輪,發動機和各種其他部件組成。 通過嵌入結構組成 Go中的組合可以通過

angular js中的依賴注入是什麼?

這裡是修真院前端小課堂,每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能,本篇分享的是: 【angular js中的依賴注入是什麼? 】 【JS-7】  &n

設計模式(筆記)優先使用物件組合是類繼承

優先使用物件組合而不是類繼承 文章內容參考自:    http://www.hautelooktech.com/2013/02/05/design-principle-favor-composition-over-inheritance/   《agiledevelop

面向物件設計三大原則(封裝變化點,對介面進行程式設計,多使用組合繼承)

該三大原則應該算是OO的基礎,很多OO設計原則和設計模式都是在此三大原則上面衍生髮展而來。所以對於學習設計模式的人,瞭解這三大原則顯然是非常必要的。  1.面向物件設計的第一原則:封裝變化點。隔離變化點的好處在於,將系統中經常變化的部分和穩定的部分隔離,有助於增加複用性,並降

angular.js 頭部默認值,使用json提交數據

ont 不知道 ade lar mon form encodeuri nbsp comm 自己使用自定義方法獲取的,不知道有沒有更好的。 // 獲取angular中appfunction getApp(appStr, para) { var app = angul

epii.js簡約簡單的JS模板引擎

js1,基礎數據綁定epii 自定義dom節點屬性 r-data 可以對任何類型節點賦值,其中 input 節點最終 賦值其value 屬性,img節點賦值其 src 屬性,其它類型節點均賦值innerHtml 屬性。如果設置r-data-default 則在沒有數據時候顯示默認值。r-data="title

js組合繼承(原型繼承+借用構造函數繼承

.com cnblogs ont 李克強 技術分享 賦值 const end 引用 組合繼承就是將原型鏈和構造函數結合起來發揮二者優勢的一種模式。繼承:是類型與類型之間的繼承繼承目的:把子類型相同成員提取到父類型,實現代碼重用 大體思路是:使用原型鏈實現對原型屬性和方

Angular入門-依賴注入

Angular的DI與Java略有不同,主要是在概念方面,從Java轉過來容易被繞暈。記下來備忘。 要理清Angular的DI機制,首先要弄懂Angular中的兩個概念:注入器和提供商(提供器) 注入器 在Angular中,每一個元件都會有一個依賴注入器負責注入元件需要的物

如何實現多執行緒?實現多執行緒為什麼要調start,是run方法?(繼承Thread類、實現Ruable介面、Callable<V>)

什麼是程序? 作業系統中一個程式的執行週期(從開啟到關閉)。程序是具有一個或多個執行緒的執行緒組。 什麼是執行緒? 一個程序可以同時執行多個任務,任務就是執行緒,一個程序至少有一個執行緒。 執行緒執行在程序內部,執行緒是輕量級程序。 程序和執行緒比較:

Angular學習筆記3--依賴注入

基本用法 1.建立服務 ng g service product/product 2.編寫服務 getProduct(): Product { return new Product('123', 'productName') } getProduct(): Product {

AngularJs依賴注入的一個錯誤,程式碼報錯但程式碼也一句都執行

百度找來找去沒找到答案,最後想到還是去看看官方文件吧 結果:順序必須完全一致,我檢查來檢查去沒想到是這個問題。 以後找不到bug產生的原因多看看文件吧。。。 又出現bug了,接著上面那個bug來,改完上面那個bug後chrome報錯了 TypeError: $cookies.

Tomcat在指定JDK版本下啟動 依賴環境變數中配置的版本

1、windows 找到bin下的setclasspath.bat檔案;在檔案的開始出新增如下程式碼: set JAVA_HOME=D:\Program Files\Java\jdk7\jdk1.7.0_51 set JRE_HOME=D:\Program Files\Java\jdk7\j

指定Tomcat使用的jdk版本依賴環境變數

面試時被大佬問到過如何解決jdk版本衝突的問題,當時憑藉著IDE配置的經驗矇混過關, 今天遇到了這個問題著手解決了一下並記錄下來 以下: linux環境 假設jdk版本7,目錄為/home/user1/jdk 進入到tomcat的bin目錄下,修改setclasspath.

Spring靜態變數依賴注入的解決方案

          https://blog.csdn.net/persistencegoing/article/details/84376427            

Winform 自定義控制元件設計模式下使用DesignMode進行依賴注入

系統定義了一個基類控制元件BaseControl,該類實現控制元件的通用方法以及進行依賴注入 public partial class BaseControl : UserControl { //依賴注入的實體類 public TestClass testC