javascript設(shè)計模式 – 原型模式原理與應(yīng)用實例分析

更新時間：2020年04月10日 08:33:35 作者：李小強

這篇文章主要介紹了javascript設(shè)計模式 – 原型模式,結(jié)合實例形式分析了javascript原型模式相關(guān)概念、原理、應(yīng)用場景及操作注意事項,需要的朋友可以參考下

本文實例講述了javascript設(shè)計模式 – 原型模式原理與應(yīng)用。分享給大家供大家參考，具體如下：

介紹：在日常的開發(fā)過程中，我們經(jīng)常會利用到前端模板引擎來做頁面渲染，因為存在很多頁面結(jié)構(gòu)相同，內(nèi)容不同的場景。這種場景在js層面也會遇到，

很多組件存在相同或者類似，重復(fù)的創(chuàng)建會導(dǎo)致系統(tǒng)的消耗，這就要用到原型模式了。將相似內(nèi)容提取出來作為原型類，創(chuàng)建具體類時需要對原型類進(jìn)行復(fù)制然后擴展。

需要注意的是，復(fù)制出來的對象在進(jìn)行修改時不會影響到原型類，二者相互獨立。

定義：使用原型實例指定創(chuàng)建對象的種類，并且通過克隆這些原型創(chuàng)建新的對象。原型模式是一種對象創(chuàng)建型模式。

場景：我們還是基于Dialog類來實現(xiàn)原型模式，我將所有彈窗共有的屬性方法抽取出來，每次創(chuàng)建時通過復(fù)制其基礎(chǔ)屬性，在此基礎(chǔ)上進(jìn)行完善，然后返回新的對象。

示例：

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>

原型模式總結(jié)：

優(yōu)點：
* 當(dāng)創(chuàng)建新的對象實例較為復(fù)雜時，使用原型模式可以簡化對象的創(chuàng)建過程，通過復(fù)制一個已有實例可以提高新實例的創(chuàng)建效率。
* 擴展性較好

缺點：
* 對已有類進(jìn)行改造時需要修改源代碼，違背了開關(guān)原則。

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: