JavaScript工廠模式詳解
簡(jiǎn)單工廠模式(Simple Factory)
//籃球基類 var Basketball = function() { this.intro = '籃球盛行于美國(guó)'; } Basketball.prototype = { getMember: function() { console.log('每個(gè)隊(duì)伍需要五個(gè)隊(duì)員'); }, getBallSize: function() { console.log('籃球很大'); } } //足球基類 var Football = function() { this.intro = '足球在世界范圍內(nèi)都很流行'; } Football.prototype = { getMember: function() { console.log('每個(gè)隊(duì)伍需要11名隊(duì)員'); }, getBallSize: function() { console.log('足球很大'); } } //運(yùn)動(dòng)工廠 var SportsFactory = function(name) { switch (name) { case 'NBA': return new Basketball(); case 'worldCup': return new Football(); } } //當(dāng)你需要為世界杯創(chuàng)建一個(gè)足球的時(shí)候,只需要記住運(yùn)功工廠sportsFactory即可,調(diào)用并創(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)建一個(gè)對(duì)象,并對(duì)對(duì)象拓展屬性和方法 //這是不相似的部分 o.name = name; //書本名稱 o.time = time; //書本出版時(shí)間 o.type = type; //書本類型 //下面是相似的部分 o.getName = function() { console.log(this.name); }; //將對(duì)象返回 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)建實(shí)例 d.show(); //成功獲取 var d = Demo();//錯(cuò)誤創(chuàng)建實(shí)例 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); } } //工廠原型中設(shè)置創(chuàng)建所有類型數(shù)據(jù)對(duì)象的基類 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)建對(duì)象 var data = [ { type: 'javascript', content: 'js哪家強(qiáng)' }, { type: 'java', content: 'java哪家強(qiáng)' }, { type: 'UI', content: 'UI哪家強(qiáng)' } ]; 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('抽象方法不能調(diào)用'); }, getSpeed: function() { return new Error('抽象方法不能調(diào)用'); } };
//抽象工廠方法 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 { //不存在該抽象類則拋錯(cuò) throw new Error('未創(chuàng)建該抽象類'); } }; //小汽車抽象類 VehicleFactory.Car = function() { this.type = 'car'; } VehicleFactory.Car.prototype = { getPrice: function() { return new Error('抽象方法不能調(diào)用'); }, getSpeed: function() { return new Error('抽象方法不能調(diào)用'); } }; //公交車抽象類 VehicleFactory.Bus = function() { this.type = 'bus'; } VehicleFactory.Bus.prototype = { getPrice: function() { return new Error('抽象方法不能調(diào)用'); }, getPassengerNum: function() { return new Error('抽象方法不能調(diào)用'); } }
//抽象與實(shí)現(xiàn) //寶馬汽車子類 var BMW = function(price, speed) { this.price = price; this.speed = speed; }; //抽象工廠實(shí)現(xiàn)對(duì)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; }; //抽象工廠實(shí)現(xiàn)對(duì)BUS抽象類的繼承 VehicleFactory(YUTONG, 'Bus'); YUTONG.prototype.getPrice = function() { return this.price; } YUTONG.prototype.getPassengerNum = function() { return this.passenger; }; //實(shí)例化類 var myBMW = new BMW('100w', '1000km/h'); console.log(myBMW.getPrice(), myBMW.getSpeed(), myBMW.type);
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript FormatNumber函數(shù)實(shí)現(xiàn)方法
如果有一個(gè)數(shù)字498.8573945,如何把它格式化成兩位小數(shù)據(jù)呢?用過asp的都知道,在vbscript里我們可以調(diào)用formatnumber,即用formatnumber(498.8573945,2)就可以輸出:498.86。2008-12-12JS判斷指定dom元素是否在屏幕內(nèi)的方法實(shí)例
做圖片滾動(dòng)加載的時(shí)候會(huì)判斷圖片是否在可視區(qū)域內(nèi),如果在就加載原地址圖片,下面這篇文章就給大家介紹了利用JS判斷指定dom元素是否在屏幕內(nèi)的方法實(shí)例,需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01基于JavaScript實(shí)現(xiàn)微信搶紅包功能
本文通過實(shí)例代碼給大家介紹了基于JavaScript實(shí)現(xiàn)微信搶紅包功能,金額隨機(jī),額度在0.01和(剩余平均值*2)之間,具體的實(shí)例代碼大家參考下本文2017-07-07CocosCreator ScrollView優(yōu)化系列之分幀加載
這篇文章主要介紹了CocosCreator ScrollView的優(yōu)化,從分幀加載進(jìn)行了講解,對(duì)性能優(yōu)化感興趣的同學(xué),一定要看一下2021-04-04javascript實(shí)現(xiàn)獲取指定精度的上傳文件的大小簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)獲取指定精度的上傳文件的大小簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JS簡(jiǎn)單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼,涉及JavaScript數(shù)組元素的遍歷及動(dòng)態(tài)設(shè)置select的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09