`

jQuery中回调函数的原理及实现下

阅读更多
//测试Chrome版本  40.0.2214.115 m

//如有错误欢迎指出

//回调函数分析上 http://ezizoo.iteye.com/blog/2204399  
//下面所讲是回调函数下

//重点
//此次添加 回调函数的三种状态
//所写的js可直接放入html中运行


//首先三种状态都在什么时候做判断
//onece 也就是执行回调的时候 fire()的时候判断是否已经fired==true
//unique 在添加函数的判断数组中是否有这个函数
//memory 在添加函数加上一句判断,当memory为真时,那么在cb.fire()执行后添加的方法也会被再次fire()
//需要有一个记录回调到哪一个函数的下标

//思路已经说了,看代码可直接到Callbacks方法这


//下面的一些方法前面都做了分析
//如有不懂可以看下我以前对这些方法的说明

var toString={}.toString;
var class2type={};
var hasOwn={}.hasOwnProperty;
var isArray=Array.isArray;
var indexOf=[].indexOf;

var each=function(obj,callback){
	var 
		value,
		length=obj.length,
		i=0,
		isArray=isArrayLike(obj);
		//两种情况
		//类数组
		if(isArray){
			for(;i<length;i++){
				//若是返回false,则直接跳出
				value=callback.call(obj,i,obj[i]);
				if(value===false){
					break;
				}
			}
		}else{
			for(i in obj){
				value=callback.call(obj,i,obj[i]);
				if(value===false){
					break;
				}
			}
		}
		return obj;
};

//第二个判断是否像数组一样的对象

var isArrayLike=function(obj){
	var 
		length=obj.length;
		
	//判断为空
	if(obj==null){
		return false;
	}
	
	if(type(obj)==="object" ||typeof(obj)==="function"){
		return false;
	}
	
	return type(obj)==="array" ||length===0 || (length>0 &&(length-1) in obj);
};

//第三个判断类型
var type=function(obj){
	//排除为空的
	if(obj==null){
		return obj+"";
	}
	//做判断,如果是object或者function类型的时候
	//不是执行后面
	return  typeof obj==="object" ||typeof obj==="function"  ? class2type[toString.call(obj)] : typeof obj;
};

each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(_,name){
	class2type["[object "+name+"]"]=name.toLowerCase();  
});

var isFunction=function(obj){
	return type(obj);
};
var isWindow=function(obj){
	return obj!==null && obj.window===window;
};

var isPlainObject=function(obj){

	if(type(obj)!=="object" ||obj.nodeType||isWindow(obj)){
		return false;
	}
	if(hasOwn.call(obj.constructor.prototype,"isPrototypeOf")){
		return true;
	}
	
};

//一个确定数组中是否存在这个值的函数
var inArray=function(arr,elem,i){
	return arr===null ? -1 :indexOf.call(arr,elem,i);
};

//第一个添加onece
//第二个添加memory  //只要在添加函数的时候过滤掉就行
var Callbacks=function(options){
	options=type(options)==="string" ? createOptions(options) :{};
	var 
		i,
		fired,
		firing,
		list=[],
		fireIndex=list.length,
		stack=!options.onece && [];
		//定义一个函数,将数组全部执行一次
		fire=function(){
			for(;list && fireIndex<list.length;i++,fireIndex++){
				//list[i]();
				//alert(this);
				list[fireIndex].call(arguments[0]);
			}
			fired=true;
		},
		self={
			add:function(){
				(function add(args){
					//对传进来的参数进行解析
					//以后可使用each遍历
					for(i=0;i<args.length;i++){
						if(!options.unique && typeof(args[i])==="function"||(options.unique && inArray(list,args[i])<0)){
							//list[i]=arguments[i]; 
							list.push(args[i]);
						}
					}
				})(arguments);
				
				if(options.memory){
					fire(this);
				}
				return this;
			},
			fire:function(){
				//if(options.onece && fired){
				//	fire(this);
				//}else{	
				//}
				//若是写成上述,当onece为false时,第一次就过不去
				//再写个fireWith()方法
				self.fireWith(this);
				return this;
			},
			fireWith:function(){
				if(list && (!fired || stack)){
					fire(this);
				}
				return this;
			}
		};
	return self;
};

//写个函数将几种状态解析出来
//参数形式如下'onece','memory'
var createOptions1=function(){
	var object={};
	each(arguments,function(_,flag){
		object[flag]=true;
	});
	return object;
};

//换一种写法
//参数形式如下'onece memory'
var reg=/\S+/g;
var createOptions=function(){
	var object={};
	each(arguments[0].match(reg),function(_,flag){
		object[flag]=true;
	});
	return object;
};

console.info(createOptions('onece unique'));

//附件中有html测试

 

分享到:
评论

相关推荐

    理解和使用 JavaScript 中的回调函数

    每当 `forEach` 方法处理数组中的下一个元素时,就会调用这个回调函数。 #### 三、回调函数的实现原理 **1. 参数传递:** 当我们把一个函数作为参数传递给另一个函数时,我们实际上只是传递了这个函数的引用,而...

    jQuery回调函数的定义及用法实例

    以下是对jQuery回调函数的详细说明: 首先,让我们理解回调函数的基本概念。回调函数是一个被作为参数传递给另一个函数的函数,这个参数会在适当的时间(通常是某个事件或条件满足时)被调用。这种模式使得我们能够...

    解决使用ajaxFileUpload上传控件出现的问题:回调函数总是进入error或success

    然而,在实际应用中,开发者可能会遇到一些问题,如回调函数总是进入error或success状态,这通常与错误处理、请求状态、服务器响应以及代码实现有关。 首先,我们来详细了解一下`ajaxFileUpload`。这是一个基于...

    javascript回调函数详解参考.docx

    JavaScript中的回调函数是一种重要的编程概念,它涉及到函数作为参数传递以及异步编程的基本原理。回调函数的核心在于,它不是直接被调用,而是被另一个函数在特定时机或事件发生时执行。这种机制使得我们能够在执行...

    一个超简单的jQuery回调函数例子(分享)

    回调函数的基本原理是将一个函数作为参数传递给另一个函数,当这个外部函数执行完毕或达到特定条件时,它会调用内部传入的函数,从而实现一种顺序执行或依赖执行的机制。 在jQuery中,回调函数常用于处理DOM操作,...

    jQuerycountdown是一款功能齐全的jQuery倒计时插件

    4. **回调函数**:在上述示例中,`event.strftime('%Y年%m月%d日 %H:%M:%S')`用于格式化倒计时的显示。`strftime`函数允许自定义时间格式。此外,还可以添加更多的回调函数来处理不同的倒计时事件。 **三、实现原理...

    原生js实现jquery函数animate()动画效果的简单实例

    5. fn:这是一个回调函数,当动画执行完毕后将被调用。 在原生JavaScript中,实现动画的原理通常是通过定时器(如setInterval)不断改变目标对象的样式属性,从而创建动画效果。由于动画需要在浏览器重绘之前更新...

    jQuery学习笔记之回调函数

    在这篇"jQuery学习笔记之回调函数"中,我们将深入理解回调函数的工作原理及其在jQuery中的应用。 1. 回调函数定义: 回调函数是一种特殊的函数,它作为参数传递给其他函数,并在特定条件满足或特定事件触发时由该...

    jquery实现PDF在线预览 jquery实现在线预览PDF文档

    这个过程是异步的,因此我们需要处理回调函数。 ```javascript PDFJS.getDocument(pdfUrl).promise.then(function(pdfDocument) { // PDF 加载成功后的操作 }); ``` 4. **渲染页面**:在PDF文档加载成功后,我们...

    CSS3结合jQuery实现动画效果及回调函数的实例

    在现代网页设计与开发中,CSS3与jQuery结合使用是一种常见的技术手段...通过本文的示例和分析,我们能更好地理解动画实现的原理以及回调函数在动画序列中的重要作用。希望本文对读者在进行前端开发时能有所启发和帮助。

    JS回调函数原理与用法详解【附PHP回调函数】

    #### 回调函数原理 在JavaScript中,当一个函数(我们将它称之为A)被调用时,它可以接受一个函数作为参数(称之为B)。函数B此时就是一个回调函数,它将在函数A中的适当位置被执行。这种机制广泛用于事件处理、...

    对js中回调函数的一些看法

    在JavaScript中,回调函数是实现异步操作的基础,它们允许我们在等待某项操作(如网络请求或定时任务)完成时执行其他任务,而不阻塞主线程。然而,回调函数也带来了“回调地狱”的问题,即嵌套的回调可能导致代码...

    jquery.event.drag jquery拖动插件

    3. **回调处理**:在回调函数中,可以获取到当前的鼠标位置、元素位置等信息,实现自定义逻辑。 四、实战案例 1. **文件管理**:可以利用`jquery.event.drag`实现文件列表中的文件拖动排序,改变文件的相对位置。 ...

    倒计时 jquery countdown

    它允许开发者通过简单的API调用来设置倒计时的日期、时间、样式以及各种回调函数,以实现不同阶段的事件处理。例如,你可以设置倒计时结束时触发的回调,用于显示特定的消息或执行其他操作。 首先,要使用jQuery ...

    jQuery position() 函数详解以及jQuery中position函数的应用

    jQuery的`position()`函数是用于获取元素在DOM结构中相对于其最近的定位祖先元素(即position属性设置为absolute、relative或fixed的元素)的偏移坐标。这个函数对于需要精确控制元素位置的情况非常有用,例如在实现...

    jquery_tips,JQ实现的冒泡提示

    在这些回调函数中,我们可以使用.show()和.hide()方法来控制提示框的显示和隐藏。 4. **动态定位**:为了让提示框始终跟随鼠标,可以在鼠标移动事件中动态调整其位置。可以使用event对象的clientX和clientY属性获取...

    jquery下利用jsonp跨域访问实现方法

    3. **服务器响应**:服务器接收到请求后,应将返回的数据包装在预先指定的回调函数中。例如,如果服务器返回的数据是`{"data": "hello world"}`,则应以如下格式返回: ```javascript handleData({"data": "hello ...

    jquery实现前台分页

    5. **处理分页链接**:当用户点击分页链接时,插件会自动更新页面并调用回调函数,你只需要在这个回调函数中处理新的数据并更新页面即可。 这个分页插件可能还提供了其他高级功能,如自定义样式、跳转至指定页、...

    JS回调函数的应用简单实例

    在上述示例中,它说明了如何在不阻塞代码执行的情况下,处理异步任务,然后在任务完成时执行回调函数。除了在异步请求(如Ajax请求)中使用回调函数外,JavaScript中的定时器(如setTimeout和setInterval)也会用到...

Global site tag (gtag.js) - Google Analytics