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了各位!

相关文章
相关标签/搜索