eval是一个函数,可以接受一个参数,这个参数可以作为js语句被解释性的执行,利用这个特性,eval和apply结合起来,可以大大简化代码
如下例子
<a class="click" data-click="first">firstClick<a> //点击后执行函数firstClick
<a class="click" data-click="second">secondClick<a>//点击后执行函数secondClick
<a class="click" data-click="third">thirdClick<a>//点击后执行thirdClick
如果直接实现功能的话,需要绑定三个click,或者是各种判断,分别实现如下:
直接实现
$("[data-click=first]").click(function(){firstClick($(this).text())});
$("[data-click=second]").click(function(){secondClick($(this).text())});
$("[data-click=third]").click(function(){thirdClick($(this).text())});
var firstClick=function(r){alert(r)}
var secondClick=function(r){alert(r)}
var thirdClick=function(r){alert(r)}
直接实现要绑定三次click事件,不好维护,如果click事件是10个,或者更多,这样写的话就太恐怖了
判断实现
$(".click").click(function(r){
var _click=this.data("click");
var _text=this.text();
if(_click=="firstClick")
{
firstClick(_text);
}
else if(_click=="secondClick")
{
secondClick(_text);
}
else
{
thirdClick(_text);
}});
var firstClick=function(r){alert(r)}
var secondClick=function(r){alert(r)}
var thirdClick=function(r){alert(r)}
判断data-click属性来实现,虽然实现了,但是让人感觉好恶心,那么多次的判断,更加难以维护。
apply结合eval实现
$(".click").click(function(){
var _click=$(this).data("click");
var _text=$(this).text();
var _func=eval(_click);
_func.apply($(this),[_text]);
});
apply 结合eval实现:eval直接将data-click值,定义为函数变量,再由这个变量来调用apply函数清晰易懂,但是这也不是绝对的,对于没有掌握这个知识点的同学来说,实在是太痛苦了,因为根本看不懂,但是,这是js的基础知识,也是很实用的知识,应该去掌握的,下面简单介绍下eval函数和apply函数
eval函数介绍:
定义和用法
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
语法
eval(string)
通过计算 string 得到的值(如果有的话)。返回值
该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常。
如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。
如果非法调用 eval(),则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者。
apply函数简介
apply很强大,知识点也很多,但是我认为,非常有用的东西也就是下面这些知识点
Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args-->arguments)
这里需要注意的是,args是个数组,但是Function中得参数是多个,他们和args是一一对应的,比方说args=[1,2,3],Function定义为 function(x)则调用时x的值为1,而不是[1,2,3],若Function定义为function(x,y),则,x的值为1,y的值为2.
javascript中apply和eval结合的强大用法的更多相关文章
-
(转)深入浅出 妙用Javascript中apply、call、bind
原文连接 深入浅出 妙用Javascript中apply.call.bind 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且 ...
-
javascript中apply、call和bind的区别,容量理解,值得转!
a) javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b) 深入浅出 妙用Javascrip ...
-
解析JavaScript中apply和call以及bind
函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...
-
JavaScript中apply与call方法
一.定义 apply:应用某一对象的一个方法,用另一个对象替换当前对象. call:调用一个对象的一个方法,以另一个对象替换当前对象. 二.apply //apply function Person( ...
-
一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别
JavaScript中apply.call.bind三者的用法及区别 引言 正文 一.apply.call.bind的共同用法 二. apply 三. call 四. bind 五.其他应用场景 六. ...
-
JavaScript中常见的数组操作函数及用法
JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...
-
JavaScript中常见的字符串操作函数及用法
JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...
-
在JavaScript中闭包的作用和简单的用法
在JavaScript中闭包的作用和简单的用法 一.闭包的简介 作用域链:在js中只有函数有作用域的概念,由于函数内能访问函数外部的数据,而函数外部不能访问函数内部的数据,由上述形成一种作用域访问的链 ...
-
深入浅出 妙用Javascript中apply、call、bind
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
随机推荐
-
Android获取ImageView上的图片,和一个有可能遇到的问题!
1.在获取图片前先调用setDrawingCacheEnabled(true)这个方法: 举例:mImageView.setDrawingCacheEnabled(true); 2.之后可以通过get ...
-
ThinkPHP中的快捷函数小结
U() 制作url地址的快捷函数 C(名称) 获得配置变量(convertion.php config.php)信息C(名称,值) 设置配置变量信息 L() 获得语言变量信息E() 给页面输出错误信息 ...
-
谈谈网站插入youtube视频播放
最近需要在网页首页追加视频播放功能. 需要播放youtube视频.中间遇到一些波折.特来分享一下. 首先像网页添加视频文件我们通常够采用embed标签. 标签里可以设置很多的关键子.我们可以配置为fl ...
-
hdu 2050
PS:真是醉了..之前觉得这题很难..然后在网上找到了大神给的深入解析,跪谢...这里贴大神博客的网址:http://blog.csdn.net/lishuhuakai/article/details ...
-
新浪使用Redis
新浪微博的工程师们曾经在多个公开场合都讲到过,微博平台当前在使用并维护着可能是世界上最大的Redis集群,其中最大的一个业务,单个业务使用了超过 10T 的内存,这里说的就是微博关系服务. 风起 20 ...
-
Jquery回车键切换焦点方法(兼容各大浏览器)
做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息. 第一想法就是,网上去copy一段代码直接用.但了百度.谷歌找了个遍,找到的代码80%以上都是一样的.有的代码 ...
-
【VBA研究】VBA通过HTTP协议实现邮件轨迹跟踪查询
作者:iamlasong 1.接口说明 通过互联网訪问,运单跟踪信息查询接口基于HTTP协议开发,接口为RESTFul风格的Web Service,信息交互过程为用户按我方提供的web service ...
-
PHP:执行模型和内存模型
PHP:执行模型和内存模型 背景 对于任何一种语言,了解其执行模型和内存模型都是有意义的,本文中的内容不见得正确,请多批评. 执行模型 每个请求都是一个独立的PHP进程,两个请求之间会完全隔离,会话和 ...
-
实时通讯系列目录篇之SignalR详解
一. 简单说几句 最早使用SignalR的时候大约是两年前了,记得当时是一个OA中消息的实时提醒,轮询的方式有点耗资源,WebSocket写起来又比较麻烦,最终选择了SignalR,当时是什么版本已经 ...
-
JsonBuilder初出茅庐
互联网这股东风不久前刮到了甘凉国,国王老甘独具慧眼,想赶紧趁着东风未停大力发展移动互联网,因为他笃信布斯雷的理论:“站在风口上,猪都能飞起来”.无奈地方偏僻落后,国内无可用之才啊.老甘一筹莫展的低头凝 ...