設計模式并非是難以理解, 或是難以應用到實踐中的, 相反的, 設計模式恰恰代表了某些場景下的最佳實踐! 這些設計模式通常被有經驗的開發者們所采用。
設計模式是開發者們在開發過程中面臨的一般問題的解決方案。 這些解決方案是眾多開發者們經過長時間的實驗和錯誤所總結出來的
本文將講解前端 (javascript) 的設計模式概念!
構造函數用于特定類型的對象, 不僅聲明了使用的對象, 構造函數還可以接收參數以便第一次創建對象的時候設置對象的成員值, 要注意的是構造函數模式所生成實例的屬性和方法都是獨立存在的
一個簡單的構造函數示例:
function Blog(name) {
this.name = name;
this.toName = function() {
return this.name;
}
}
或是將方法提出:
function Blog(name) {
this.name = name;
this.toName = toName;
}
function toName() {
return this.name;
}
構造函數的函數名首字母大寫, 并且構造函數內部要是完整的, 不要依賴外部屬性
以下是一個錯誤的示例
var name = 'hello world!';
function Blog() {
this.name = name;
this.toName = toName;
}
function toName() {
return this.name;
}
多數構造函數都需要使用new來創建實例, 但有一種方式可以避免使用new來創建, 但是并不建議如此使用, 這樣寫代碼中可能引起歧義
function Blog(name) {
if (!(this instanceof Blog)) {
return new Blog(name);
}
this.name = name;
this.toName = toName;
}
function toName() {
return this.name;
}
加入代碼instanceof
判斷之后, 當直接使用Blog('hello world');
時, 也始終返回一個實例
原理是通過判斷this
的instanceof
是不是Blog
來決定返回new Blog
還是繼續執行代碼,如果使用的是new
關鍵字,則(this instanceof Blog)
為true
,會繼續執行下面的參數賦值,如果沒有用new
,(this instanceof Blog)
就為false
,就會重新new
一個實例返回。
使用場景
構造函數模式的應用比較廣泛, 但不經常單獨使用, 一般是與原型模式結合使用, 如包裝一個常用的按鈕, 這種會重復使用的模塊, 只要是需要復用的模塊, 就可以應用到構造函數模式
其他設計模式
單例模式: http://www.lxweimin.com/p/4c0604f116ba
建造者模式: http://www.lxweimin.com/p/70cf4bb80549
簡單工廠模式: http://www.lxweimin.com/p/4293450926c2
抽象工廠模式: http://www.lxweimin.com/p/d6138f36e6e2
裝飾者模式: http://www.lxweimin.com/p/16cf284ab810
外觀模式: http://www.lxweimin.com/p/179ae2a13c59