JavaScript函数的声明与调用方式
2017-08-25 16:09
176 查看
入职第一天小记
对于初入前端的程序猿来说,对于函数的理解与使用可谓是相当浅薄的,回顾这自己近几年的工作以及学习经历,准备对JavaScript来个系统的总结.
如果要我们对H5中的表单做个简单的校验,我想对于初入前端的童鞋来说都会是这样的表情与心态:
A:哎呀,不就是个表单验证嘛!
B:这个也算是问题么,so easy!
C:哇哦,就这个啊
D:...............
所有的童鞋都带着不屑的眼神与骄傲的姿态拿起笔刷刷刷的写下了如下coding:
刷刷刷的抱着激动的心情准备去提交代码,就在这时童鞋们的背后蹭的一下冒出一个人(有着近六七年的工作经验的大牛),且慢!众人皆惊讶,
曰:why?
大牛:你看你们写的这些方法,虽然没有什么大的问题,但是无形中却创建了大量的全局变量
童鞋:有吗,这个不全部是函数吗,莫非函数也是变量??????
大牛:笑着便拿起笔刷刷刷的写出如下code:
童鞋:这不才是声明了全局变量吗?
大牛:对啊,那只是把变量给提前声明了而已,而你们写的那种只是把变量给放到了function后面声明,难道这就不是声明了三个全局变量吗
童鞋:那这样有什么问题吗?
大牛:最大的问题便是在你多人协作开发的时候如果创建了多个全局变量的时候,在其他同事进行开发的时候会对你的方法进行覆盖(几率提高)
童鞋:恍然大悟。。。。。。。
大牛:于是 我们可以这样写,用对象进行包装
大牛:当然我们还可以这样写
大牛:这样是不是看上去有点高大上了呢,是不是就是类的写法了呢,这样在其他同事调用的时候只需要New一下就可以拥有属于自己的方法了,但是有时候这样做是会做成不必要的资源消耗的,于是我们可以进行如下修改
大神:但是这样的调用方式会让我们把a书写多次,不过这个是可以避免的,看修改后的代码方案:
大神:这样是不是就简单多啦 实现了链式调用,同时我们还可以利用proptype向JavaScript原生对象上面添加共有方法类似于Function.proptype,addMethod = function(){},这样在创建函数的时候都会拥有此方法,不过这种方式要慎用,因为JavaScript中大多都是函数实现的,这样会出现太多多于的代码甚至拖垮性能,所以你可以换种方式去实现:例如:Function.proptype = function(fucName,fn){fucName = fn},这样就可以实现选择性的添加了,哈哈是不是很有趣,很有魔力。
童鞋:瞬间惊呆了 原来js还可以这样玩,哈哈 受教了
goodbye everyone,今天的娱乐节目就到这里啦,下次我们再见喽,下次将带来JavaScript的设计模式,初级阶段,bye了各位!
对于初入前端的程序猿来说,对于函数的理解与使用可谓是相当浅薄的,回顾这自己近几年的工作以及学习经历,准备对JavaScript来个系统的总结.
如果要我们对H5中的表单做个简单的校验,我想对于初入前端的童鞋来说都会是这样的表情与心态:
A:哎呀,不就是个表单验证嘛!
B:这个也算是问题么,so easy!
C:哇哦,就这个啊
D:...............
所有的童鞋都带着不屑的眼神与骄傲的姿态拿起笔刷刷刷的写下了如下coding:
function check_phone(){ //逻辑代码 } function check_age(){ //逻辑代码 } function check_sex(){ //逻辑代码 }
刷刷刷的抱着激动的心情准备去提交代码,就在这时童鞋们的背后蹭的一下冒出一个人(有着近六七年的工作经验的大牛),且慢!众人皆惊讶,
曰: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了各位!
相关文章推荐
- GroupBy(..)的四种声明方式的理解及调用
- Sass预编译语言之@mixin混合的几种声明和调用方式
- 变量类型、存储方式、函数声明调用——记录
- JavaScript函数声明和调用、有参函数和无参函数、返回值
- JavaScript函数定义的三种方式及其调用
- javascript函数调用方式总结(共四种)-理解this
- Javascript 调用Javascript函数的四种方式
- javascript函数的声明和调用、有参函数和无参函数、有返回值
- Acticle 2:javascript函数:声明和调用、有参函数和无参函数、返回值
- javascript函数的声明、调用、传参和返回值
- 详解Javascript函数声明与递归调用
- 函数调用4种声明方式
- JavaScript函数的调用方式和传参方式
- 结构体的声明(extern)与调用的方式
- php调用javascript函数的方式
- javascript函数的4种调用方式
- JavaScript函数调用得四种方式及函数传参
- javascript函数调用的几种方式
- 详解Javascript函数声明与递归调用
- Javascript函数声明与递归调用