关于js的回调函数的一点看法
算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了。刚闲下来,我就翻了翻之前看的东西。做了android之后更加感觉到手机端开发的重要性,现在做native App 和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途。我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题“js的回调函数”相关的东西。
说起回调函数,好多人虽然知道意思,但是还是一知半解。至于怎么用,还是有点糊涂。网上的一些相关的也没有详细的说一下是怎么回事,说的比较片面。下面我只是说说个人的一点理解,大牛勿喷。我们来看一下一个粗略的一个定义“函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。”,这句话的意思是函数b以一个参数的形式传入函数a并执行,顺序是先执行a ,然后执行参数b,b就是所谓的回调函数。我们先来看下面的例子。
function a(callback){alert('a');callback.call(this);//或者是 callback(), callback.apply(this),看个人喜好}function b(){alert('b');} //调用 a(b);
这样的结果是先弹出 'a',再弹出‘b’。这样估计会有人问了“写这样的代码有什么意思呢?好像没太大的作用呢!”
是的,其实我也觉得这样写没啥意思,“如果调用一个函数就直接在函数里面调用它不就行了”。我这只是给大家写个小例子,做初步的理解。真正写代码的过程中很少用这样无参数的,因为在大部分场景中,我们要传递参数。来个带参数的:
function c(callback){alert('c');callback.call(this,'d');}//调用 c(function(e){alert(e); });
这个调用看起来是不是似曾相识,这里e参数被赋值为'd',我们只是简单的赋值为字符窜,其实也可以赋值为对象。Jquery里面是不是也有个e参数,下面我们就来讲讲
Jquery里面的e参数是如何被回调赋值的。
Jquery框架我想大家不陌生了,出来了好久,开发的时候都在用,比较简单,api网上搜起来很方便,上手快。在Jquery框架下,我们有时候要获取事件中的一些参数,比如我要获取当前点击的坐标,点击的元素对象。这个需求在Jquery里面好办 :
$("#id").bind('click',function(e){
//e.pageX ,e.pageY ,e.target.....各种数据
});
用起来倒是挺方便,其实这个e参数的赋值也是通过回调函数来实现的,这个参数是用回调参数给它赋予了一个对象值,仔细研究过JJquery源码的朋友应该发现了这一点。
还有Ajax里面 $.get('',{},function(data){}) data这个参数也是同样的原理。
我们来看看Jquery事件对象里面是怎么应用回调函数的。
为了方便,我简单的写了一下$相关的一些实现,之前写过“小谈Jquery”里面有比较接近框架实现的方法,我下面只是写一个简易的选择器。
<div id="container" style="width:200px;height:200px;background-Color:green;"> </div><script>var _$=function (id){ this.element= document.getElementById(id); }_$.prototype={bind:function(evt,callback){var that=this;if(document.addEventListener){this.element.addEventListener(evt, function(e){callback.call(this,that.standadize(e));} ,false);}else if(document.attachEvent){this.element.attachEvent('on'+evt,function(e){callback.call(this,that.standadize(e));});}elsethis.element['on'+evt]=function(e){callback.call(this,that.standadize(e));};},standadize:function(e){var evt=e||window.event;var pageX,pageY,layerX,layerY;//pageX 横坐标 pageY纵坐标 layerX点击处位于元素的横坐标 layerY点击处位于元素的纵坐标if(evt.pageX){pageX=evt.pageX;pageY=evt.pageY;}else{pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;}if(evt.layerX){layerX=evt.layerX;layerY=evt.layerY;}else{layerX=evt.offsetX;layerXY=evt.offsetY;}return {pageX:pageX,pageY:pageY,layerX:layerX,layerY:layerY}}}window.$=function(id){return new _$(id);}$('container').bind('click',function(e){alert(e.pageX);});$('container1').bind('click',function(e){alert(e.pageX);}); </script>
View Code
这段代码我们主要看standadize函数的实现,兼容性的代码,就不多说了,返回的是一个对象
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
然后再看bind函数里面的代码 callback.call(this,that.standadize(e)),这段代码其实就是给e参数赋值了,是用callback回调实现的。
callback 函数被调用的时候传入的是匿名函数
function(e){
}
而callback.call(this,that.standadize(e))相当于是执行了这么一段代码
(function(e){
})(standadize(e))
这也是Jquery用回调函数比较经典的地方,e参数就是这么被赋值的,说了这些你们也大概有个了解了,以及怎么使用了。
回调在各种框架中应用的比较多,有时候自己写一些东西的时候也可以根据实际情况用用看。
如果觉得这篇文章不够详细,可以单独q我共同讨论下(见博客首页左上角),语言表达能力有所欠缺。感谢来访的博友,我会在后面继续增强个人技术以及语言水平,写出更好的博客,大家互相学习进步。
转载于:https://www.cnblogs.com/lonelyxmas/p/4203186.html
关于js的回调函数的一点看法相关推荐
- js接收php 回调,JS callback回调函数的使用(附代码)
这次给大家带来JS callback回调函数的使用(附代码),JS callback回调函数使用的注意事项有哪些,下面就是实战案例,一起来看一下. 在使用开源项目的时候经常会使用到回调函数,如果把回调 ...
- Node.js入门 - 回调函数
本文自theprojectspot.com翻译而来,文章原作者为Lee Jacobson, 已经作者授权翻译用于非商业用途.原文地址:猛戳这里进入 如果你还没读过第一篇,先跑到这里去瞧一瞧,我保证你多 ...
- JS中回调函数的写法
<!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title& ...
- html js 回调函数,js中回调函数的学习笔记
回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" ...
- js中回调函数的理解 举例说明js回调函数
初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is passed as an arg ...
- 关于js的回调函数,同步回调与异步回调
回调定义 刚开始学习javascript时,对回调函数的理解仅仅停留在知道定义阶段.什么是回调函数? 就是将一个函数作为参数传递给另一个函数,作为参数的这个函数就是回调函数. 至于为什么要用到回调函数 ...
- JS中回调函数的三种写法!
//第一种---------------------------------------- function parent(str,callback) {console.log(str);callba ...
- JS基础--回调函数
文章目录 一.回调函数是什么? 二.实现回调函数的方法? 1.使用命名函数作为回调: 2.使用匿名函数作为回调: 三.回调函数中this是谁? 一.回调函数是什么? 是一个被作为参数传递给另一个函数的 ...
- 关于密度函数、分布函数与生存函数的一点看法(一)
统计中经常会涉及到密度函数.分布函数与生存函数的概念,如何透彻的理解这三个函数呢,以下是我的一点理解与看法: 何为生存函数? 电梯用了六年还能否继续使用?一个人活了六年还能否再活5年?这些问题都是生存 ...
最新文章
- python中lambda以及与filter/map/reduce结合的用法
- linux 线程_浅谈Linux线程模型
- video 标签存在的一些坑
- PHP学习总结(14)——PHP入门篇之常用运算符
- Android之Dialog提示Unable to add window -- token is not valid; is your activity running?
- 如何在搜狗浏览器更换页面字体?搜狗浏览器更换页面字体的方法
- CSS3特效 - 呼吸灯效果
- 全球最快!小米发布超级无线闪充技术,小米9 Pro 5G将首发搭载
- Bailian2704 竞赛评分【文本】
- win10的 程序员计算器
- Administration interface
- java前端商城_网上java商城系统前端开发基础技能浅谈
- 去除firefox火狐更新提示
- php商品浏览页面,jquery仿京东商品放大浏览页面_实例分享
- 类型“Window typeof globalThis”上不存在属性“gspZc”
- resultType=int 和 resultType=java.lang.Integer
- c++中绝对值的函数
- MIT scratch安装教程
- OpenCV(九)形态学操作4--礼帽与黑帽(顶帽与底帽)
- LoRaWAN数据解密实例(附C源码)