这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇对 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));
- });
- } else this.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>
这段代码我们主要看 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 参数就是这么被赋值的,说了这些你们也大概有个了解了,以及怎么使用了。
回调在各种框架中应用的比较多,有时候自己写一些东西的时候也可以根据实际情况用用看。
以上这篇对 js 中回调函数的一些看法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0524/332250.html