javascript是一門弱語言,他有著分同一般的靈活性使它迅速的成為幾乎人人必會的一門語言,but,你們使用的姿勢真的正確嗎?
在以前的開發(fā)過程當(dāng)中,老板:給我加個驗證用戶郵箱、驗證用戶短信...功能!
function checkMessage(){...} function checkEmail(){...} function ... //茫茫多的函數(shù)
這樣寫好了之后 function 是全局的變量,那么是全局的就難免會對項目javascript環(huán)境造成污染,可能會對其他同事造成影響,我們首先要考慮會不會影響別人,如果別人重名對你的checkMessage覆蓋,那么這樣的BUG是很難發(fā)現(xiàn)的。為了不造成太多的全局污染,我們可以這樣寫:
var checkObject = { checkMessage:function(){}, checkEmail:function(){}, ... }
首先說明,并不是這樣寫就不會造成污染了,checkObject依舊是全局變量,那么好處在哪里呢?想一下如果Jquery的$被覆蓋了,那么我們頁面的
$.each | $.extends | $(#id) | $...
都失效了,那么我們很容易定位問題: Jquery出問題了!checkObject也是一樣,當(dāng)checkObject出問題了,我們很容易定位錯誤。
調(diào)用:checkObject.checkMessage() 即可
那么問題又來了:如果有同事用我的checkObject搞一些事情呢?它可以直接用我的方法么?當(dāng)然可以,問題是,你買了一本書你愿意別人亂寫亂畫么?我們可以改造一下:
var checkObject = function(){ return { checkMessage:function(){}, checkEmail:function(){}, ... } }
我們把方法通過function的調(diào)用返回,這樣別人可以這樣用 :
var check = checkObject(); check.checkEmail();
我們可以再完善一下,把checkObject看成java的類,checkMessage,checkEmail看成java的public 公有方法,既然看成類了,我們可以把checkObject寫成大寫CheckObject
var CheckObject = function(){ this.checkMessage = function(){}, this.checkEmail = function(){}, ... }
別人調(diào)用:
var check = new CheckObject(); //既然是一個類了,就要 new 來實例化了 check.checkEmail();
每一次通過new創(chuàng)建新對象的時候,新創(chuàng)建的對象都會對類this上的屬性進(jìn)行復(fù)制,你定義了兩個那么就復(fù)制兩次,那么再更多呢?是不是感覺有些奢侈呢,考慮我們可以運(yùn)用javascript的原型prototype來創(chuàng)建它:
var CheckObject = function(){ } CheckObject.prototype.checkMessage = function(){}, CheckObject.prototype.checkEmail = function(){}, ...
你嫌麻煩?
var CheckObject = function(){ } CheckObject.prototype{ checkMessage : function(){}, checkEmail : function(){}, ... }
這樣我們的方法都復(fù)制到CheckObject的原型連上去了,創(chuàng)建出來的對象都是通過prototype依次尋找,都綁定在CheckObject的原型上__proto__
隨便看一下Jquery的原型鏈,是不是很熟悉的方法呢?
同志們是否好奇Jquery的方法是如何鏈?zhǔn)秸{(diào)用的呢?很簡單,我來模擬一下
var CheckObject = function(){ } CheckObject.prototype = { checkMessage : function(){ ... return this }, checkEmail : function(){ ... return this }, ... var check = new CheckObject(); check.checkMessage().checkEmail();
就這么簡單,我們只需要將this指代的當(dāng)前對象全部返回即可。
咳咳,言歸正傳,回到面向?qū)ο缶幊痰恼n題上
java中有 private聲明的私有變量、 有通過public的getter setter方法進(jìn)行通信,有static修飾的靜態(tài)變量,靜態(tài)方法,有構(gòu)造器,那么javascript可以使用這樣的設(shè)計模式么?可以,跟我往下看:
我們?nèi)ド痰曩I煙
var Smoke = function(id,name){ //私有屬性 var num = 0; //對象的公有屬性 (需要new) this.id = id; //私有方法 function checkID(){ return true}; //公有 setter getter 構(gòu)造函數(shù) this.setName = function(name){ this.name = name; } this.getName = function(){ return this.name; } //對象的公有屬性 (需要new) this.information = function(){ //只有在Smoke內(nèi)部才能調(diào)用checkID() if(checkID()) return this.name+"香煙"+"訂單號 :"+this.id } } Smoke.prototype = { money:"10元", //公有屬性(不需要new) 直接Smoke.money[想沒想到Array的length?] other:function(){} } var smoke = new Smoke(994857,"煊赫門"); smoke.information(); //"undefined香煙訂單號 :994857" ps:因為我們沒對Smoke的name屬性賦值 smoke.setName("煊赫門"); //我們賦值 smoke.information(); //"煊赫門香煙訂單號 :994857" smoke.num; //undefined ps:很明顯他是私有屬性 smoke.checkID();//error is not function ps:很明顯私有方法
如果我們沒有new
var smoke = Smoke(994857,"煊赫門"); smoke.information(); //Uncaught TypeError: Cannot read property "information" of undefined
納尼報錯了?
smoke.money; //undefind smoke //undefind
(好像明白了什么......) 別急,讓我們看下window
window.information(); // "undefined香煙訂單號 :994857"
恍然大悟,因為new是可以對當(dāng)前對象(Smoke)的this不停地賦值【上面講過】,而上面的沒有new相當(dāng)于全局執(zhí)行了Smoke() 所以是他的this 指向到 window去了!
怎么避免這種無操作呢?我們在Smoke內(nèi)部進(jìn)行類型檢查:
var Smoke = function(id,name){ var num = 0; function checkID(){ return true}; //判斷this在執(zhí)行過程中是不是屬于Smoke,如果是說明是new過的 0.0 if(this instanceof Smoke){ this.id = id; this.setName = function(name){ this.name = name; } this.getName = function(){ return this.name; } //對象的公有屬性 (需要new) this.information = function(){ //只有在Smoke內(nèi)部才能調(diào)用checkID() if(checkID()) return this.name+"香煙"+"訂單號 :"+this.id } }else{ return new Smoke(id,name);//內(nèi)部重新new一個 0.0 } }
看完了么,感覺爽不,是不是感覺就是在寫java呢,其實javascript就是靈活在這里,這只是javascript一種常用的面向?qū)ο笤O(shè)計模式,后面我會將更多的設(shè)計模式,這些設(shè)計模式都是經(jīng)過前人無數(shù)心血總結(jié)出來給我們的,我們?yōu)槭裁床挥媚兀?/p>
感謝[他居然愛吃蟲]同學(xué)對本文的校對
如果您覺得還算不錯可以關(guān)注我持續(xù)看我的文章,大概方向:前后端語言設(shè)計模式、如何設(shè)計好一款框架、源碼導(dǎo)讀、技術(shù)實踐。
青年才俊可以入群交流:147255248
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/89144.html
javascript是一門弱語言,他有著分同一般的靈活性使它迅速的成為幾乎人人必會的一門語言,but,你們使用的姿勢真的正確嗎? 在以前的開發(fā)過程當(dāng)中,老板:給我加個驗證用戶郵箱、驗證用戶短信...功能! function checkMessage(){...} function checkEmail(){...} function ... //茫茫多的函數(shù) 這樣寫好了之后 function 是全...
javascript是一門弱語言,他有著分同一般的靈活性使它迅速的成為幾乎人人必會的一門語言,but,你們使用的姿勢真的正確嗎? 在以前的開發(fā)過程當(dāng)中,老板:給我加個驗證用戶郵箱、驗證用戶短信...功能! function checkMessage(){...} function checkEmail(){...} function ... //茫茫多的函數(shù) 這樣寫好了之后 function 是全...
摘要:然而學(xué)習(xí)布局,你只要學(xué)習(xí)幾個手機(jī)端頁面自適應(yīng)解決方案布局進(jìn)階版附源碼示例前端掘金一年前筆者寫了一篇手機(jī)端頁面自適應(yīng)解決方案布局,意外受到很多朋友的關(guān)注和喜歡。 十分鐘學(xué)會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具,fiddle英文中有欺騙、偽造之意,與wireshark相比它更輕量級,上手簡單,因為只能抓http和https數(shù)據(jù)...
摘要:為此決定自研一個富文本編輯器。本文,主要介紹如何實現(xiàn)富文本編輯器,和解決一些不同瀏覽器和設(shè)備之間的。 對ES6Generator函數(shù)的理解 Generator 函數(shù)是 ES6 提供的一種異步編程解決方案,語法行為與傳統(tǒng)函數(shù)完全不同。 JavaScript 設(shè)計模式 ② 巧用工廠模式和創(chuàng)建者模式 我為什么把他們兩個放在一起講?我覺得這兩個設(shè)計模式有相似之處,有時候會一個設(shè)計模式不能滿...
閱讀 1405·2021-11-25 09:43
閱讀 2261·2021-09-27 13:36
閱讀 1114·2021-09-04 16:40
閱讀 1957·2019-08-30 11:12
閱讀 3309·2019-08-29 14:14
閱讀 567·2019-08-28 17:56
閱讀 1320·2019-08-26 13:50
閱讀 1246·2019-08-26 13:29