日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

JavaScript設計模式——創建型設計模式

來源: 責編: 時間:2023-11-03 09:17:30 312觀看
導讀簡單工廠模式抽象各個對象的共同點,加工出最初形態,對于不同點進行獨立設計。function createBook(name, time, type) { //創建一個對象,并對對象拓展屬性和方法 const o = new Object(); //共同參數 o.name = name;

簡單工廠模式

抽象各個對象的共同點,加工出最初形態,對于不同點進行獨立設計。fpK28資訊網——每日最新資訊28at.com

function createBook(name, time, type) {  //創建一個對象,并對對象拓展屬性和方法  const o = new Object();  //共同參數  o.name = name;  o.time = time;  o.getName = function () {    console.log(this.name);  }  //差異性  if (type === "js") {    //js類書差異處理  } else if (type === "css") {    //css類書差異處理  } else if (type === "html") {    //html類書差異處理  }  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();

安全工廠模式

安全工廠模式可以屏蔽對類的錯誤使用,如忘記寫new實例化對象避免產生一些非預期的行為。fpK28資訊網——每日最新資訊28at.com

function Factory(type, content) {  //如果忘記寫new實例化了,加工重新執行一次  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哪家強');Factory('Java', 'Java哪家強');

建設者模式

顧名思義,結合多個類,創造出結合出來的終極人物(對象)fpK28資訊網——每日最新資訊28at.com

//創建人類function Human(param) {  //技能  this.skill = param && param.skill || "保密";  //興趣愛好  this.hobby = param && param.hobby || "保密";}Human.prototype.getSkill = function () {  return this.skill;}Human.prototype.getHobby = function () {  return this.hobby;}//創建姓名類function Name(name) {  (function (_this, name) {    _this.wholeName = name;    _this.firstName = name.slice(0, name.indexOf(" "));    _this.secordName = name.slice(name.indexOf(" "));  })(this, name)}//創建職位類function Work(work) {  (function (_this, work) {    switch (work) {      case "code":        _this.work = "工程師";        _this.workDescript = "每天沉醉于編程";        break;      case "UI":      case "UE":        _this.work = "設計師";        _this.workDescript = "設計更是一種藝術";        break;      case "teach":        _this.work = "教師";        _this.workDescript = "分享頁是一種快樂";        break;      default:        _this.work = work;        _this.workDescript = "對不起,我們還不清楚您所選擇職位的相關描述";    }  })(this, work)}//創建建設者類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

這里結合了Humer、Name、Work,最后在Person中構造出了一個應聘者。fpK28資訊網——每日最新資訊28at.com

原型模式

用原型實例指向創建對象的類,適用于創建新的對象的類共享原型對象的屬性以及方法。 簡而言之,就是根據一個基類(原型類)構造出多個子類,將公用方法和屬性保存在原型類中。fpK28資訊網——每日最新資訊28at.com

//圖片輪播基類function LoopImages(imgArr, container) {  this.imgArr = imgArr;  this.container = container;}LoopImages.prototype = {  //創建輪播圖片  createImage: function (img) {    this.imgArr.push(img);    console.log('LoopImages createImage function');  },  //切換下一張圖片  changeImage: () => {    console.log('LoopImages changeImage function');  }}//上下滑動切換類function SlideLoopImg(imgArr, container) {  LoopImages.call(this, imgArr, container);}SlideLoopImg.prototype = new LoopImages();//重寫繼承的切換下一張圖片方法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();//重寫繼承的切換下一張圖片方法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

可以看到,原型模式可以讓多個對象分享同一個原型對象的屬性與方法,這也是一種繼承方式。 原型對象更加適合在創建復雜的對象時,對于那些需求一直在變化而導致對象結構不停改變時,將那些比較穩定的屬性與方法公共提取,實現繼承,代碼復用。fpK28資訊網——每日最新資訊28at.com

單例模式

單例模式,顧名思義,一個類只能有一個實例,重復實例化只會返回第一次實例的對象。fpK28資訊網——每日最新資訊28at.com

靜態變量

通過一個立即執行函數,將所有方法掛載,并且為靜態變量,無法改變。fpK28資訊網——每日最新資訊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'))

實例化單例

創建一個立即執行函數,利用閉包,使記錄值常駐在內存中,每次實例化的時候判斷是否為第一次實例化,實現單例。fpK28資訊網——每日最新資訊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

惰性單例

非實例化創建方式,也是一種延遲創建的方式。fpK28資訊網——每日最新資訊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

總結

本文介紹了JavaScript中創建型設計模式,希望看過之后對讀者開發中代碼質量有所幫助,有所感悟。fpK28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-16758-0.htmlJavaScript設計模式——創建型設計模式

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 使用Apache Flink的四個理由,你知道幾個?

下一篇: Rust編程基礎之函數和表達式

標簽:
  • 熱門焦點
  • SpringBoot中使用Cache提升接口性能詳解

    環境:springboot2.3.12.RELEASE + JSR107 + Ehcache + JPASpring 框架從 3.1 開始,對 Spring 應用程序提供了透明式添加緩存的支持。和事務支持一樣,抽象緩存允許一致地使用各
  • .NET 程序的 GDI 句柄泄露的再反思

    一、背景1. 講故事上個月我寫過一篇 如何洞察 C# 程序的 GDI 句柄泄露 文章,當時用的是 GDIView + WinDbg 把問題搞定,前者用來定位泄露資源,后者用來定位泄露代碼,后面有朋友反
  • 共享單車的故事講到哪了?

    來源丨??素斀浥c共享充電寶相差不多,共享單車已很久沒有被國內熱點新聞關照到了。除了一再漲價和用戶直呼用不起了。近日多家媒體再發報道稱,成都、天津、鄭州等地多個共享單
  • 得物寵物生意「狂飆」,發力“它經濟”

    作者|花花小萌主近日,得物宣布正式上線寵物鑒別,通過得物App內的“在線鑒別”,可找到鑒別寵物的選項。通過上傳自家寵物的部位細節,就能收獲擁有專業資質認證的得物鑒
  • 華為HarmonyOS 4.0將于8月4日發布 或搭載AI大模型技術

    華為宣布HarmonyOS4.0將于8月4日正式發布。此前,華為已經針對開發者公布了HarmonyOS4.0,以便于開發者提前進行適配,也因此被曝光出了一些新系統的特性
  • iQOO 11S評測:行業唯一的200W標準版旗艦

    【Techweb評測】去年底,iQOO推出了“電競旗艦”iQOO 11系列,作為一款性能強機,該機不僅全球首發2K 144Hz E6全感屏,搭載了第二代驍龍8平臺及144Hz電競
  • 2021中國國際消費電子博覽會與青島國際軟件融合創新博覽會新聞發布會隆重舉行

    9月18日,2021中國國際消費電子博覽會與青島國際軟件融合創新博覽會新聞發布會在青島國際新聞中心隆重舉行。發布會上青島市政府領導聯袂出席,對本次雙展會情
  • 電博會與軟博會實現"線下+云端"的雙線融合

    在本次“電博會”與“軟博會”雙展會利好條件的加持下,既可以發揮展會拉動人流、信息流、資金流實現快速交互流動的作用,繼而推動區域經濟良性發展;又可以聚
  • 北京:科技教育體驗基地開始登記

      北京“科技館之城”科技教育體驗基地登記和認證工作日前啟動。首批北京科技教育體驗基地擬于2023年全國科普日期間掛牌,后續還將開展常態化登記。  北京科技教育體驗基
Top 主站蜘蛛池模板: 达孜县| 乌兰察布市| 会理县| 永吉县| 峨眉山市| 石渠县| 改则县| 榆树市| 合川市| 中阳县| 安顺市| 肥乡县| 旺苍县| 鹤庆县| 锡林郭勒盟| 宣恩县| 康乐县| 吉木乃县| 汉阴县| 廊坊市| 北京市| 武清区| 高雄县| 伽师县| 松原市| 邳州市| 安达市| 萝北县| 闵行区| 阿鲁科尔沁旗| 新建县| 巴马| 平潭县| 辽阳县| 台北县| 民勤县| 阜阳市| 花莲市| 绩溪县| 隆安县| 军事|