JavaScript函數的聲明與調用方式

  入職第一天小記javascript

  對於初入前端的程序猿來講,對於函數的理解與使用可謂是至關淺薄的,回顧這本身近幾年的工做以及學習經歷,準備對JavaScript來個系統的總結.前端

  若是要咱們對H5中的表單作個簡單的校驗,我想對於初入前端的童鞋來講都會是這樣的表情與心態:java

  A:哎呀,不就是個表單驗證嘛!設計模式

  B:這個也算是問題麼,so easy!函數

  C:哇哦,就這個啊性能

  D:...............學習

  全部的童鞋都帶着不屑的眼神與驕傲的姿態拿起筆刷刷刷的寫下了以下coding:this

  function check_phone(){
	//邏輯代碼
 }  function check_age(){ //邏輯代碼 } function check_sex(){ //邏輯代碼 }

  刷刷刷的抱着激動的心情準備去提交代碼,就在這時童鞋們的背後蹭的一下冒出一我的(有着近六七年的工做經驗的大牛),且慢!衆人皆驚訝,spa

  曰:why?設計

  大牛:你看大家寫的這些方法,雖然沒有什麼大的問題,可是無形中卻建立了大量的全局變量

  童鞋:有嗎,這個不所有是函數嗎,莫非函數也是變量??????

  大牛:笑着便拿起筆刷刷刷的寫出以下code:

var check_phone = function(){

}
var check_sex = function(){

}
var check_age = function(){
			
}

  童鞋:這不才是聲明瞭全局變量嗎?

  大牛:對啊,那只是把變量給提早聲明瞭而已,而大家寫的那種只是把變量給放到了function後面聲明,難道這就不是聲明瞭三個全局變量嗎

  童鞋:那這樣有什麼問題嗎?

  大牛:最大的問題即是在你多人協做開發的時候若是建立了多個全局變量的時候,在其餘同事進行開發的時候會對你的方法進行覆蓋(概率提升)

  童鞋:恍然大悟。。。。。。。

  大牛:因而 咱們能夠這樣寫,用對象進行包裝

//封裝檢測對象
var check_obj = {
	check_phone:function(){
	        //邏輯操做
        },
	check_age:function(){
		//邏輯操做
	},
	check_sex:function(){
		//邏輯操做
	}
}        

  大牛:固然咱們還能夠這樣寫

function check_obj(){
	this.check_age = function(){

	};
	this.check_phone = function(){

	};
	this.check_sex = function(){

	}
}

  大牛:這樣是否是看上去有點高大上了呢,是否是就是類的寫法了呢,這樣在其餘同事調用的時候只須要New一下就能夠擁有屬於本身的方法了,可是有時候這樣作是會作成沒必要要的資源消耗的,因而咱們能夠進行以下修改

 

var check_obj = function(){};
check_obj.proptype = {
	check_sex:function(){

	},
	check_age:function(){

	},
	check_phone:function(){

	}
}
//調用
var a = new check_obj();
a.check_phone();
a.check_sex();
a.check_age();

  大神:可是這樣的調用方式會讓咱們把a書寫屢次,不過這個是能夠避免的,看修改後的代碼方案:

var check_obj = function(){};
check_obj.proptype = {
	check_sex:function(){

		return this;
	},
	check_age:function(){

		return this;
	},
	check_phone:function(){

		return this;
	}
}
//調用
//var a = new check_obj();
//a.check_phone();
//a.check_sex();
//a.check_age();

//調用新方案
var a = new check_obj();
a.check_age().check_sex().check_phone();

  大神:這樣是否是就簡單多啦 實現了鏈式調用,同時咱們還能夠利用proptype向JavaScript原生對象上面添加共有方法相似於Function.proptype,addMethod = function(){},這樣在建立函數的時候都會擁有此方法,不過這種方式要慎用,由於JavaScript中大多都是函數實現的,這樣會出現太多多於的代碼甚至拖垮性能,因此你能夠換種方式去實現:例如:Function.proptype = function(fucName,fn){fucName = fn},這樣就能夠實現選擇性的添加了,哈哈是否是頗有趣,頗有魔力。

  童鞋:瞬間驚呆了  原來js還能夠這樣玩,哈哈 受教了

  goodbye everyone,今天的娛樂節目就到這裏啦,下次咱們再見嘍,下次將帶來JavaScript的設計模式,初級階段,bye了各位!

相關文章
相關標籤/搜索