JavaScript工廠模式詳解

更新時間：2021年10月12日 16:27:55 作者：房西的啥玩意呀''

這篇文章主要介紹了JavaScript設計模式之工廠模式,結合完整實例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關操作技巧,需要的朋友可以參考下

簡單工廠模式（Simple Factory）

在這里插入圖片描述

//籃球基類
var Basketball = function() {
    this.intro = '籃球盛行于美國';
}
Basketball.prototype = {
    getMember: function() {
        console.log('每個隊伍需要五個隊員');
    },
    getBallSize: function() {
        console.log('籃球很大');
    }
}
//足球基類
var Football = function() {
    this.intro = '足球在世界范圍內都很流行';
}
Football.prototype = {
    getMember: function() {
        console.log('每個隊伍需要11名隊員');
    },
    getBallSize: function() {
        console.log('足球很大');
    }
}
//運動工廠
var SportsFactory = function(name) {
    switch (name) {
        case 'NBA':
            return new Basketball();
        case 'worldCup':
            return new Football();
    }
}
//當你需要為世界杯創(chuàng)建一個足球的時候，只需要記住運功工廠sportsFactory即可，調用并創(chuàng)建
var Footnall = SportsFactory('worldCup');
console.log(Footnall);
console.log(Footnall.intro);
Footnall.getMember();

在這里插入圖片描述

//工廠模式
function createBook(name, time, type) {
    var o = new Object(); //創(chuàng)建一個對象，并對對象拓展屬性和方法
    //這是不相似的部分
    o.name = name; //書本名稱
    o.time = time; //書本出版時間
    o.type = type; //書本類型
    //下面是相似的部分
    o.getName = function() {
        console.log(this.name);
    };
    //將對象返回
    return o;
}
//創(chuàng)建兩本書
var book1 = new createBook('JS book', 2021, 'js');
var book2 = new createBook('CSS book', 2019, 'css');
book1.getName();
book2.getName();

在這里插入圖片描述

工廠方法模式（Factory Method）

在這里插入圖片描述

var Demo = function() {}
Demo.prototype = {
    show: function() {
        console.log('成功獲取');
    }
}
var d = new Demo();//正確創(chuàng)建實例
d.show(); //成功獲取
var d = Demo();//錯誤創(chuàng)建實例
d.show(); //炸裂

在這里插入圖片描述

var Demo = function() {
    if (!this instanceof Demo) {//判斷this的指向
        return new Demo();
    }
}
Demo.prototype = {
    show: function() {
        console.log('安全模式類真好用');
    }
}
var d = Demo();
d.show();

在這里插入圖片描述

安全的工廠方法

//安全模式創(chuàng)建工廠類
var Factory = function(type, content) {
    if (this instanceof Factory) {
        var s = new this[type](content);
        return s;
    } else {
        return new Factory(type, content);
    }
}
//工廠原型中設置創(chuàng)建所有類型數據對象的基類
Factory.prototype = {
    java: function(content) {
        //...
    },
    UI: function(content) {
        this.content = content;
        (function() {
            var div = document.createElement('div');
            div.innerHTML = content;
            div.style.border = '1px soild red';
            document.getElementById('container').appendChild(div);
        })(content);
    },
    php: function(content) {
        //...
    },
    javascript: function(content) {
        //..
    }
};
//創(chuàng)建對象
var data = [
    { type: 'javascript', content: 'js哪家強' },
    { type: 'java', content: 'java哪家強' },
    { type: 'UI', content: 'UI哪家強' }
];
for (let index = 0; index < data.length; index++) {
    console.log(data[index].type);
    Factory(data[index].type, data[index].content);
}

在這里插入圖片描述

抽象工廠模式（Abstract Factory）

在這里插入圖片描述

var Car = function() {}
Car.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能調用');
    },
    getSpeed: function() {
        return new Error('抽象方法不能調用');
    }
};

在這里插入圖片描述

//抽象工廠方法
var VehicleFactory = function(subType, superType) {
    //判斷抽象工廠中是否有該抽象類
    if (typeof VehicleFactory[superType] === 'function') {
        //緩存類
        function F() {};
        //繼承父類屬性和方法
        F.prototype = new VehicleFactory[superType]();
        //將子類constructor指向子類
        subType.constructor = subType;
        //子類原型繼承父類
        subType.prototype = new F();
    } else {
        //不存在該抽象類則拋錯
        throw new Error('未創(chuàng)建該抽象類');
    }
};
//小汽車抽象類
VehicleFactory.Car = function() {
    this.type = 'car';
}
VehicleFactory.Car.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能調用');
    },
    getSpeed: function() {
        return new Error('抽象方法不能調用');
    }
};
//公交車抽象類
VehicleFactory.Bus = function() {
    this.type = 'bus';
}
VehicleFactory.Bus.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能調用');
    },
    getPassengerNum: function() {
        return new Error('抽象方法不能調用');
    }
}

在這里插入圖片描述

//抽象與實現
//寶馬汽車子類
var BMW = function(price, speed) {
    this.price = price;
    this.speed = speed;
};
//抽象工廠實現對Car抽象類的繼承
VehicleFactory(BMW, 'Car');
BMW.prototype.getPrice = function() { //重寫方法
    return this.price;
}
BMW.prototype.getSpeed = function() {
    return this.speed;
};
//宇通公交車子類
var YUTONG = function(price, passenger) {
    this.price = price;
    this.passenger = passenger;
};
//抽象工廠實現對BUS抽象類的繼承
VehicleFactory(YUTONG, 'Bus');
YUTONG.prototype.getPrice = function() {
    return this.price;
}
YUTONG.prototype.getPassengerNum = function() {
    return this.passenger;
};
//實例化類
var myBMW = new BMW('100w', '1000km/h');
console.log(myBMW.getPrice(), myBMW.getSpeed(), myBMW.type);

在這里插入圖片描述

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容！

您可能感興趣的文章:

JS實現的豎向折疊菜單代碼
這篇文章主要介紹了JS實現的豎向折疊菜單代碼,涉及JavaScript動態(tài)遍歷頁面元素及樣式修改的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
基于JavaScript實現實時在線協作編輯器
隨著Web技術的發(fā)展,實現在線協作編輯文檔已經成為一種常見的需求,本文主要為大家詳細介紹了如何使用JavaScript實現實時在線協作編輯器,需要的可以參考下
2024-01-01
JS使用window.requestAnimationFrame()實現逐幀動畫
這篇文章介紹了JS使用window.requestAnimationFrame()實現逐幀動畫的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
JavaScript實現仿新浪微博大廳和騰訊微博首頁滾動特效源碼
最近看到朋友用JavaScript實現仿新浪微博大廳和未登錄騰訊微博首頁滾動效果，朋友使用jquery實現的，在網上看到有用js制作的也比較好，于是把我的內容整理分享給大家，具體詳解請看本文
2015-09-09
TypeScript 類class與修飾符的詳細使用教程
通過 class 關鍵字定義一個類，然后通過 new 關鍵字可以方便的生產一個類的實例對象，這個生產對象的過程叫實例化，類的成員就是類中所有的屬性和方法，這篇文章主要介紹了TypeScript 類class與修飾符的詳細使用,需要的朋友可以參考下
2022-06-06
JavaScript裝飾器函數(Decorator)實例詳解
這篇文章主要介紹了JavaScript裝飾器函數(Decorator),結合實例形式分析了JavaScript裝飾器函數(Decorator)的功能、實現與使用方法,需要的朋友可以參考下
2017-03-03
微信小程序學習之數據處理詳解
這篇文章主要給大家介紹了關于微信小程序中數據處理的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
分享一道筆試題[有n個直線最多可以把一個平面分成多少個部分]
今天地鐵上和一個同事閑聊,給我說的一道題,回來想了想,寫出來的,說來慚愧,我用的是行測方面數字推理里面的知識歸納出來的,當然這個可以用遞歸寫出來,說說我的代碼,以及遞歸的思路
2012-10-10
JavaScript正則驗證密碼強弱度的實現方法
這篇文章主要介紹了JavaScript正則驗證密碼強弱度的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-05-05
javascript中的this作用域詳解
這篇文章主要介紹了javascript中的this作用域詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07