設計模式

1/52ページ

CSS設計模式:OOCSS 和 SMACSS

真心覺得寫出 CSS 並不難,但是要寫出可被維護的 CSS 比其他程式語言都還難。所幸已經有許多大師級的人物,提出許多設計模式和思維,藉由站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來說說 OOCSS、SMACSS 和撰寫 CSS 時應該注意的規範。 (本文的例子用的是 SCSS 語法) OOCS […]

JavaScript設計模式之策略模式

《JavaScript設計模式與開發實踐》讀書筆記。這本書挺好的,推薦。 俗話說,條條大路通羅馬。在現實生活中,我們可以採用很多方法實現同一個目標。比如我們先定個小目標,先掙它一個億。我們可以根據具體的實際情況來完成這個目標。 如果你是個富二代,可以接手家族生意,分分鐘掙它一個億。 如果你是個官二代 […]

JavaScript設計模式之釋出-訂閱模式(觀察者模式)-Part1

《JavaScript設計模式與開發實踐》讀書筆記。 釋出-訂閱模式又叫觀察者模式,它定義了物件之間的一種一對多的依賴關係。當一個物件的狀態發生改變時,所有依賴它的物件都將得到通知。 例如:在segmentfault我們關注了某一個問題,這個時候可以說是訂閱了這個問題的訊息。當該問題有了新的回答、評 […]

原始碼分析:Vue的雙向資料繫結

雖然工作中一直使用Vue作為基礎庫,但是對於其實現機理僅限於道聽途說,這樣對長期的技術發展很不利。所以最近攻讀了其原始碼的一部分,先把雙向資料繫結這一塊的內容給整理一下,也算是一種學習的反芻。 本篇文章的Vue原始碼版本為v2.2.0開發版 Observer物件:即觀察者,包含兩個主要屬性value […]

前端學習筆記之觀察者模式

觀察者模式也稱”釋出-訂閱”模式,它的作用就是當一個物件的狀態發生改變時,所有依賴於它的物件都將得到通知,自動重新整理物件狀態 舉個生活比較常見常見的例子,比如你去面試之後,面試官看你表現不錯,最後會跟你要聯絡方式,以便之後可以聯絡你。在這角色扮演當中,你就是“訂閱者”,面試 […]

JS設計模式-單例模式

單例模式是一個用來劃分名稱空間並將一批屬性和方法組織在一起的物件,如果它可以被例項化,那麼它只能被例項化一次。 原文連結 單例模式優點 劃分名稱空間,減少全域性變數 組織程式碼為一體,便於閱讀維護 並非所有的物件字面量都是單例,比如模擬資料 基本結構: let Cat = { name: 'Kitt […]

JS設計模式-觀察者模式

觀察者(又稱釋出訂閱)模式定義了物件間的一種一對多的依賴關係,以便一個物件的狀態發生變化時,所有依賴於它的物件都得到通知並自動重新整理。 原文連結 應用場景 當使用者在網頁執行一些操作(如點選)後就需要執行一些預定的事件(如表單提交、跳轉頁面) 優點:在釋出者和訂閱者間耦合性降低 缺點:弱化了物件間 […]

JS設計模式-代理模式

代理模式的定義:為其他物件提供一種代理以控制對這個物件的訪問。在某些情況下,一個物件不適合或者不能直接引用另一個物件,而代理物件可以在客戶端和目標物件之間起到中介的作用。 原文連結 虛擬代理 虛擬代理是把一些開銷很大的物件,延遲到真正需要它的時候才去建立執行 圖片懶載入 //圖片載入 let ima […]

JS設計模式-策略模式

策略模式是指對一系列的演算法定義,並將每一個演算法封裝起來,而且使它們還可以相互替換。策略模式讓演算法獨立於使用它的客戶而獨立變化。 優點: 策略模式利用組合、委託等技術和思想,可以避免很多if條件語句 策略模式提供了開放-封閉原則,使程式碼更容易理解和拓展 簡單取值 很多例子以績效等級和薪資計算獎 […]

1 52