入职第一天小记

  对于初入前端的程序猿来说,对于函数的理解与使用可谓是相当浅薄的,回顾这自己近几年的工作以及学习经历,准备对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了各位!

  

JavaScript函数的声明与调用方式的更多相关文章

  1. javascript函数的声明和调用

    × 目录 [1]函数的声明方式 [2]函数的调用方式 [3]两种声明方式的区别 函数:将完成某一特定功能的代码集合起来,可以重复使用的代码块. ---------------------------- ...

  2. javascript 函数的4种调用方式与 this(上下文)的指向

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript中作用域链和this(上下文)的指向是很容易混淆的,简单的说就是: 作用域链取决于函数 ...

  3. javascript函数的4种调用方式

    在javascript中一共有4种函数调用模式,分别是:方法调用模式.函数调用模式.构造函数调用模式和apply(call)调用模式,这4种模式的主要差异在于如何初始化关键参数this. 方法调用模式 ...

  4. JavaScript 函数的4种调用方法

    JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化. 作为一个函数调用 function myFunction(a, b) { return a * b; } ...

  5. JavaScript 函数 (一 JavaScript 函数的声明与使用)

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JavaScript 函数的声明与使用 实例 <!DOCTYPE html> <html> <head> ...

  6. JavaScript函数的4种调用方法详解

    在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造 ...

  7. javascript this 代表的上下文,JavaScript 函数的四种调用形式

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的 ...

  8. 第十篇----------javascript函数的三种定义方式及区别

    javascript定义函数有3种方式: //3种函数定义方式,前两种常用 /** * 1,function 语句式 * 形式:句子 * 名称:有名 * 性质:静态 * 解析时机:优先解析 * 作用域 ...

  9. JavaScript函数定义 ,参数调用

    一.JavaScript函数函数: 函数就是一种封装,由事件驱动的或者当它被调用时执行的可重复使用的代码块.定义函数:function 函数名(){函数体;}数不会自动执行,需要被调用才可以执行函数名 ...

随机推荐

  1. JavaScript中类型检测

    文章首发: http://www.cnblogs.com/sprying/p/4349426.html 本文罗列了一般Js类型检测的方法,是构建Js知识体系的一小块,这篇文章是我很早之前总结的. 一. ...

  2. UOJ #138. 【UER #3】开学前的涂鸦

    Description 红包是一个有艺术细胞的男孩子. 红包由于NOI惨挂心情不好,暑假作业又多,于是他开始在作业本上涂鸦. 一开始,他在纸上画了一棵 n 个节点的树.但是他觉得这样的画太简单了,体现 ...

  3. webservice log4net日志写入失败

    原因1:如果webservice和调用者都部署在一台机器上,日志有可能写到了项目所在目录中,虽然你添加的服务引用是部署在iis下的,但不会写到这.暂时解决办法,把webservice部署到内网服务器上 ...

  4. nodejs中引入art-template模板

    使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便.没关系,这里我们使用art-template模板引擎,使 ...

  5. 懒汉单例安全basedao

    package Dao; import java.sql.*; public class BaseDao { private String drname = "com.mysql.jdbc. ...

  6. Javaweb之EL表达式

    1.EL表达式简介 EL全名为Expression Language.EL的主要作用为: 获取数据:EL表达式主要用于替换jsp页面中的脚本表达式,以从各种类型的web域中检索java对象,获取数据. ...

  7. 封装hiredis——C++与redis对接(一)(string的SET与GET操作)

    在菜鸟教程自学了redis,总想着像Mysql一样,在C/C++中进行对接.于是查询了一些资料,最后找到了hiredis.然而直接用它的话,难免有点不方便.于是,对其进行封装. hiredis直接去g ...

  8. 学习stylus笔记

    最近在研究v-cli3.0,发现了一种新的预处理器,于是花了一些时间去学习下. 学习网站 基本上这个网站上,讲的已经很详情.我下面把我在学习之中的笔记和觉得自己用的多方法贴出来. 1.缩排 使用缩排和 ...

  9. [ERROR] Failed to execute goal org.apache.maven.plugins:maven-dependency-plugin:2.8:unpack (unpack) on project sq-integral-web: Unable to find artifact.

    1.问题描述 项目maven打包报上述错误, 但是小伙伴运行好使. 2.问题解决 是idea工程编码(gbk)和项目编码(utf-8)不一致 idea->file->Other Setti ...

  10. VC6.0开发OCX按钮控件

    原文:http://www.cnblogs.com/joinclear/archive/2013/05/21/3091934.html 0前言 1.OCX是典型的ActiveX控件,常见的OCX控件有 ...