溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用javascript中的原型模式

發布時間:2020-08-04 14:18:28 來源:億速云 閱讀:147 作者:小豬 欄目:web開發

這篇文章主要講解了如何使用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>

原型模式總結:

優點:
* 當創建新的對象實例較為復雜時,使用原型模式可以簡化對象的創建過程,通過復制一個已有實例可以提高新實例的創建效率。
* 擴展性較好

缺點:
* 對已有類進行改造時需要修改源代碼,違背了開關原則。

看完上述內容,是不是對如何使用javascript中的原型模式有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女