javascript是一門弱語言,他有著分同一般的靈活性使它迅速的成為幾乎人人必會的一門語言,but,你們使用的姿勢真的正確嗎?
在以前的開發過程當中,老板:給我加個驗證用戶郵箱、驗證用戶短信...功能!
function checkMessage(){...} function checkEmail(){...} function ... //茫茫多的函數
這樣寫好了之后 function 是全局的變量,那么是全局的就難免會對項目javascript環境造成污染,可能會對其他同事造成影響,我們首先要考慮會不會影響別人,如果別人重名對你的checkMessage覆蓋,那么這樣的BUG是很難發現的。為了不造成太多的全局污染,我們可以這樣寫:
var checkObject = { checkMessage:function(){}, checkEmail:function(){}, ... }
首先說明,并不是這樣寫就不會造成污染了,checkObject依舊是全局變量,那么好處在哪里呢?想一下如果Jquery的$被覆蓋了,那么我們頁面的
$.each | $.extends | $(#id) | $...
都失效了,那么我們很容易定位問題: Jquery出問題了!checkObject也是一樣,當checkObject出問題了,我們很容易定位錯誤。
調用:checkObject.checkMessage() 即可
那么問題又來了:如果有同事用我的checkObject搞一些事情呢?它可以直接用我的方法么?當然可以,問題是,你買了一本書你愿意別人亂寫亂畫么?我們可以改造一下:
var checkObject = function(){ return { checkMessage:function(){}, checkEmail:function(){}, ... } }
我們把方法通過function的調用返回,這樣別人可以這樣用 :
var check = checkObject(); check.checkEmail();
我們可以再完善一下,把checkObject看成java的類,checkMessage,checkEmail看成java的public 公有方法,既然看成類了,我們可以把checkObject寫成大寫CheckObject
var CheckObject = function(){ this.checkMessage = function(){}, this.checkEmail = function(){}, ... }
別人調用:
var check = new CheckObject(); //既然是一個類了,就要 new 來實例化了 check.checkEmail();
每一次通過new創建新對象的時候,新創建的對象都會對類this上的屬性進行復制,你定義了兩個那么就復制兩次,那么再更多呢?是不是感覺有些奢侈呢,考慮我們可以運用javascript的原型prototype來創建它:
var CheckObject = function(){ } CheckObject.prototype.checkMessage = function(){}, CheckObject.prototype.checkEmail = function(){}, ...
你嫌麻煩?
var CheckObject = function(){ } CheckObject.prototype{ checkMessage : function(){}, checkEmail : function(){}, ... }
這樣我們的方法都復制到CheckObject的原型連上去了,創建出來的對象都是通過prototype依次尋找,都綁定在CheckObject的原型上__proto__
隨便看一下Jquery的原型鏈,是不是很熟悉的方法呢?
同志們是否好奇Jquery的方法是如何鏈式調用的呢?很簡單,我來模擬一下
var CheckObject = function(){ } CheckObject.prototype = { checkMessage : function(){ ... return this }, checkEmail : function(){ ... return this }, ... var check = new CheckObject(); check.checkMessage().checkEmail();
就這么簡單,我們只需要將this指代的當前對象全部返回即可。
咳咳,言歸正傳,回到面向對象編程的課題上
java中有 private聲明的私有變量、 有通過public的getter setter方法進行通信,有static修飾的靜態變量,靜態方法,有構造器,那么javascript可以使用這樣的設計模式么?可以,跟我往下看:
我們去商店買煙
var Smoke = function(id,name){ //私有屬性 var num = 0; //對象的公有屬性 (需要new) this.id = id; //私有方法 function checkID(){ return true}; //公有 setter getter 構造函數 this.setName = function(name){ this.name = name; } this.getName = function(){ return this.name; } //對象的公有屬性 (需要new) this.information = function(){ //只有在Smoke內部才能調用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是可以對當前對象(Smoke)的this不停地賦值【上面講過】,而上面的沒有new相當于全局執行了Smoke() 所以是他的this 指向到 window去了!
怎么避免這種無操作呢?我們在Smoke內部進行類型檢查:
var Smoke = function(id,name){ var num = 0; function checkID(){ return true}; //判斷this在執行過程中是不是屬于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內部才能調用checkID() if(checkID()) return this.name+"香煙"+"訂單號 :"+this.id } }else{ return new Smoke(id,name);//內部重新new一個 0.0 } }
看完了么,感覺爽不,是不是感覺就是在寫java呢,其實javascript就是靈活在這里,這只是javascript一種常用的面向對象設計模式,后面我會將更多的設計模式,這些設計模式都是經過前人無數心血總結出來給我們的,我們為什么不用呢?
感謝[他居然愛吃蟲]同學對本文的校對
如果您覺得還算不錯可以關注我持續看我的文章,大概方向:前后端語言設計模式、如何設計好一款框架、源碼導讀、技術實踐。
青年才俊可以入群交流:147255248
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/67803.html
javascript是一門弱語言,他有著分同一般的靈活性使它迅速的成為幾乎人人必會的一門語言,but,你們使用的姿勢真的正確嗎? 在以前的開發過程當中,老板:給我加個驗證用戶郵箱、驗證用戶短信...功能! function checkMessage(){...} function checkEmail(){...} function ... //茫茫多的函數 這樣寫好了之后 function 是全...
javascript是一門弱語言,他有著分同一般的靈活性使它迅速的成為幾乎人人必會的一門語言,but,你們使用的姿勢真的正確嗎? 在以前的開發過程當中,老板:給我加個驗證用戶郵箱、驗證用戶短信...功能! function checkMessage(){...} function checkEmail(){...} function ... //茫茫多的函數 這樣寫好了之后 function 是全...
摘要:然而學習布局,你只要學習幾個手機端頁面自適應解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應解決方案布局,意外受到很多朋友的關注和喜歡。 十分鐘學會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具,fiddle英文中有欺騙、偽造之意,與wireshark相比它更輕量級,上手簡單,因為只能抓http和https數據...
閱讀 2785·2021-11-04 16:15
閱讀 3458·2021-09-29 09:35
閱讀 4032·2021-09-22 15:45
閱讀 1417·2019-08-30 15:55
閱讀 1689·2019-08-30 15:44
閱讀 2711·2019-08-29 12:56
閱讀 2698·2019-08-26 13:30
閱讀 2169·2019-08-23 17:00