本文例項講述了javascript設計模式 – 原型模式原理與應用。分享給大家供大家參考，具體如下：

介紹：在日常的開發過程中，我們經常會利用到前端模板引擎來做頁面渲染，因為存在很多頁面結構相同，內容不同的場景。這種場景在js層面也會遇到，

很多元件存在相同或者類似，重複的建立會導致系統的消耗，這就要用到原型模式了。將相似內容提取出來作為原型類，建立具體類時需要對原型類進行復制然後擴充套件。

需要注意的是，複製出來的物件在進行修改時不會影響到原型類，二者相互獨立。

定義：使用原型例項指定建立物件的種類，並且通過克隆這些原型建立新的物件。原型模式是一種物件建立型模式。

場景：我們還是基於Dialog類來實現原型模式，我將所有彈窗共有的屬性方法抽取出來，每次建立時通過複製其基礎屬性，在此基礎上進行完善，然後返回新的物件。

示例：

var Dialog = function(){
 this.init = function(arg){
 this.element = arg.element;
 this.name = arg.name;
 }
 this.show = function(){
 console.log(this.name + ' is show -> ' + this.element);
 }
};
var createDialog = function(arg){
 var _dialog = function(){};
 _dialog.prototype = new Dialog();
 
 var resDia = new _dialog();
 resDia.init(arg);
 return resDia;
 
}
var notice = createDialog({name:'notice',element:'<div>notice</div>'});
var toast = createDialog({name:'toast',element:'<div>toast</div>'});
var warnin = createDialog({name:'warnin',element:'<div>warnin</div>'});
 
notice.show(); //notice is show -> <div>notice</div>
toast.show(); //toast is show -> <div>toast</div>
warnin.show(); //warnin is show -> <div>warnin</div>

原型模式總結：

優點：
* 當建立新的物件例項較為複雜時，使用原型模式可以簡化物件的建立過程，通過複製一個已有例項可以提高新例項的建立效率。
* 擴充套件性較好

缺點：
* 對已有類進行改造時需要修改原始碼，違背了開關原則。

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。