簡(jiǎn)單工廠模式

抽象各個(gè)對(duì)象的共同點(diǎn)，加工出最初形態(tài)，對(duì)于不同點(diǎn)進(jìn)行獨(dú)立設(shè)計(jì)。J9v28資訊網(wǎng)——每日最新資訊28at.com

function createBook(name, time, type) {  //創(chuàng)建一個(gè)對(duì)象，并對(duì)對(duì)象拓展屬性和方法  const o = new Object();  //共同參數(shù)  o.name = name;  o.time = time;  o.getName = function () {    console.log(this.name);  }  //差異性  if (type === "js") {    //js類書(shū)差異處理  } else if (type === "css") {    //css類書(shū)差異處理  } else if (type === "html") {    //html類書(shū)差異處理  }  return o;}const book1 = createBook('js book', 2014, 'js');const book2 = createBook('css book', 2013, 'css');const book3 = createBook('html book', 2012, 'css');book1.getName();book2.getName();book3.getName();

安全工廠模式

安全工廠模式可以屏蔽對(duì)類的錯(cuò)誤使用，如忘記寫(xiě)new實(shí)例化對(duì)象避免產(chǎn)生一些非預(yù)期的行為。J9v28資訊網(wǎng)——每日最新資訊28at.com

function Factory(type, content) {  //如果忘記寫(xiě)new實(shí)例化了，加工重新執(zhí)行一次  if (this instanceof Factory) {    this[type](content);  } else {    new Factory(type, content);  }}Factory.prototype = {  JavaScript: (content) => {    console.log(content)  },  Java: (content) => {    console.log(content)  },}Factory('JavaScript', 'JavaScript哪家強(qiáng)');Factory('Java', 'Java哪家強(qiáng)');

建設(shè)者模式

顧名思義，結(jié)合多個(gè)類，創(chuàng)造出結(jié)合出來(lái)的終極人物（對(duì)象）J9v28資訊網(wǎng)——每日最新資訊28at.com

//創(chuàng)建人類function Human(param) {  //技能  this.skill = param && param.skill || "保密";  //興趣愛(ài)好  this.hobby = param && param.hobby || "保密";}Human.prototype.getSkill = function () {  return this.skill;}Human.prototype.getHobby = function () {  return this.hobby;}//創(chuàng)建姓名類function Name(name) {  (function (_this, name) {    _this.wholeName = name;    _this.firstName = name.slice(0, name.indexOf(" "));    _this.secordName = name.slice(name.indexOf(" "));  })(this, name)}//創(chuàng)建職位類function Work(work) {  (function (_this, work) {    switch (work) {      case "code":        _this.work = "工程師";        _this.workDescript = "每天沉醉于編程";        break;      case "UI":      case "UE":        _this.work = "設(shè)計(jì)師";        _this.workDescript = "設(shè)計(jì)更是一種藝術(shù)";        break;      case "teach":        _this.work = "教師";        _this.workDescript = "分享頁(yè)是一種快樂(lè)";        break;      default:        _this.work = work;        _this.workDescript = "對(duì)不起，我們還不清楚您所選擇職位的相關(guān)描述";    }  })(this, work)}//創(chuàng)建建設(shè)者類function Person(name, work) {  var person = new Human();  person.name = new Name(name);  person.work = new Work(work);  return person;}const person = new Person("xiao ming", "code");console.log(person.skill);                  //保密console.log(person.work.workDescript);      //每天沉醉于編程console.log(person.name.firstName);         //xiao

這里結(jié)合了Humer、Name、Work，最后在Person中構(gòu)造出了一個(gè)應(yīng)聘者。J9v28資訊網(wǎng)——每日最新資訊28at.com

原型模式

用原型實(shí)例指向創(chuàng)建對(duì)象的類，適用于創(chuàng)建新的對(duì)象的類共享原型對(duì)象的屬性以及方法。 簡(jiǎn)而言之，就是根據(jù)一個(gè)基類（原型類）構(gòu)造出多個(gè)子類，將公用方法和屬性保存在原型類中。J9v28資訊網(wǎng)——每日最新資訊28at.com

//圖片輪播基類function LoopImages(imgArr, container) {  this.imgArr = imgArr;  this.container = container;}LoopImages.prototype = {  //創(chuàng)建輪播圖片  createImage: function (img) {    this.imgArr.push(img);    console.log('LoopImages createImage function');  },  //切換下一張圖片  changeImage: () => {    console.log('LoopImages changeImage function');  }}//上下滑動(dòng)切換類function SlideLoopImg(imgArr, container) {  LoopImages.call(this, imgArr, container);}SlideLoopImg.prototype = new LoopImages();//重寫(xiě)繼承的切換下一張圖片方法SlideLoopImg.prototype.changeImage = () => {  console.log('SlideLoopImg changeImage function');}//漸隱切換類function FadeLoopImg(imgArr, container, arrow) {  LoopImages.call(this, imgArr, container);  this.arrow = arrow;}FadeLoopImg.prototype = new LoopImages();//重寫(xiě)繼承的切換下一張圖片方法FadeLoopImg.prototype.changeImage = () => {  console.log('FadeLoopImg changeImage function');}const fade = new FadeLoopImg([  '01.jpg',  '02.jpg',  '03.jpg',  '04.jpg'], 'div', [  'left.jpg',  'right.jpg'])console.log(fade.arrow);        //['left.jpg','right.jpg']console.log(fade.imgArr);       //['01.jpg', '02.jpg', '03.jpg', '04.jpg']fade.createImage('05.jpg');     //LoopImages createImage functionconsole.log(fade.imgArr);        //['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg']fade.changeImage();             //FadeLoopImg changeImage function

可以看到，原型模式可以讓多個(gè)對(duì)象分享同一個(gè)原型對(duì)象的屬性與方法，這也是一種繼承方式。 原型對(duì)象更加適合在創(chuàng)建復(fù)雜的對(duì)象時(shí)，對(duì)于那些需求一直在變化而導(dǎo)致對(duì)象結(jié)構(gòu)不停改變時(shí)，將那些比較穩(wěn)定的屬性與方法公共提取，實(shí)現(xiàn)繼承，代碼復(fù)用。J9v28資訊網(wǎng)——每日最新資訊28at.com

單例模式

單例模式，顧名思義，一個(gè)類只能有一個(gè)實(shí)例，重復(fù)實(shí)例化只會(huì)返回第一次實(shí)例的對(duì)象。J9v28資訊網(wǎng)——每日最新資訊28at.com

靜態(tài)變量

通過(guò)一個(gè)立即執(zhí)行函數(shù)，將所有方法掛載，并且為靜態(tài)變量，無(wú)法改變。J9v28資訊網(wǎng)——每日最新資訊28at.com

const React = (function () {  var react = {    useState: () => { },    useEffect: () => { },    useRef: () => { },    useMemo: () => { },    useCallback: () => { },    useReducer: () => { },    useContext: () => { }  }  return {    get: function (name) {      return react[name] || null;    }  }})()console.log(React.get('useState'))

實(shí)例化單例

創(chuàng)建一個(gè)立即執(zhí)行函數(shù)，利用閉包，使記錄值常駐在內(nèi)存中，每次實(shí)例化的時(shí)候判斷是否為第一次實(shí)例化，實(shí)現(xiàn)單例。J9v28資訊網(wǎng)——每日最新資訊28at.com

const React = (function () {  let instance = null;  return function (params) {    if (instance) {      return instance    }    this.params = params;    return instance = this;  }})()console.log(new React({  useState: () => { },  useEffect: () => { },  useRef: () => { },  useMemo: () => { },  useCallback: () => { },  useReducer: () => { },  useContext: () => { }}) === new React('hh'));      //true

惰性單例

非實(shí)例化創(chuàng)建方式，也是一種延遲創(chuàng)建的方式。J9v28資訊網(wǎng)——每日最新資訊28at.com

function React(fns) {  this.fns = fns;}React.instance = null;React.getFn = function () {  console.log(this.fns)}React.getInstance = function (name) {  if (!this.instance) {    return this.instance = new React(name)  }  return this.instance}console.log(React.getInstance({  useState: () => { },  useEffect: () => { },  useRef: () => { },  useMemo: () => { },  useCallback: () => { },  useReducer: () => { },  useContext: () => { }}) === React.getInstance('xx'));    //true

總結(jié)

本文介紹了JavaScript中創(chuàng)建型設(shè)計(jì)模式，希望看過(guò)之后對(duì)讀者開(kāi)發(fā)中代碼質(zhì)量有所幫助，有所感悟。J9v28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-16758-0.htmlJavaScript設(shè)計(jì)模式——?jiǎng)?chuàng)建型設(shè)計(jì)模式

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 使用Apache Flink的四個(gè)理由，你知道幾個(gè)？

下一篇： Rust編程基礎(chǔ)之函數(shù)和表達(dá)式