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

阿新 • • 發佈：2019-01-21

在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使用組合+依賴注入而不是繼承

優先使用組合物件，而不是繼承"的理解

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

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

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

組合而不是繼承 - Go中的OOP

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

設計模式（筆記）優先使用物件組合而不是類繼承

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

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

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

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

Angular入門-依賴注入

如何實現多執行緒？實現多執行緒為什麼要調start，而不是run方法？（繼承Thread類、實現Ruable介面、Callable<V>）

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

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

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

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

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

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

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

相關推薦