资讯专栏INFORMATION COLUMN

js基础 jQuery的Callback入门及原理分析 笔记

lastSeries / 990人阅读

摘要:概念解读事件函数了解事件通常与函数配合使用,这样可以通过发生的事件来驱动函数的执行。作用用于管理函数队列。往内部队列添加的函数保持唯一,不能重复添加。调用后开放容器,添加容器的处理函数将会立即执行。

概念解读

事件函数了解Callbacks
事件通常与函数配合使用,这样可以通过发生的事件来驱动函数的执行。
 原则:一个事件对应一个事件函数,在一个事件对应多个事件函数的情况下,后者会覆盖前者。通过添加数组的方法,实现一对多。
callbacks则是把这些处理成一个可控制的容器。

作用:用于管理函数队列。
使用:通过add添加处理函数到队列中,通过fire去执行这些处理函数(按照函数的添加顺序依次执行处理函数)。

参数:字符串参数的形式 支持4中特定的功能。

once    函数队列只执行一次 默认 fire调用后关闭容器,add添加容器的处理函数将不会执行。
unique  往内部队列添加的函数保持唯一,不能重复添加。
stopOnFalse    内部队列的函数是一次执行的 当某个函数的返回值是false时 ,停止继续执行剩下的函数。
memory         当函数队列fire一次过后,内部会记录当前fire的参数,下次调用的时候,会把记录的参数传递给新添加的函数并立即执行这个新添加的函数。fire调用后开放容器,add添加容器的处理函数将会立即执行。

插件基本框架

(function(root){
    var_ = {
        callbacks:function(){}
    };
    root._ =_;
})(this)

使用_.callbacks();

callbacks方法内是可接收参数的,所以这里需要对参数进行处理:

0、无参数的默认处理
1、参数是string形式 使用typeof进行判断即可,非此类参数则需要进行处理。

typeof options === "string"

2、参数是多个的时候,需要对参数进行切割,并依次传入。

createOptions(options) {//定义一个处理多个参数的方法
    var object = optionsCache[options] = {};//再缓存内进行记录一次 对象形式
    options.split(/s+/).forEach(function(value) {//value 切割参数数组的每一项
        object[value] = true;//扩展对应的value属性
    });
    return object;//返回出去 支持多种参数
}

add fire方法的添加

这里我们直接定义一个对象,执行时返回当前对象。讲add和fire方法添加到对象即可
var self = {
            add:function(){
                
            },
            fireWidth:function(context,arguments){//控制上下文的绑定

            },
            fire:function(){//用于传参
                self.fireWidth(this,arguments);
            }
        }
        return self;

接下来处理add 和 fire
add方法需要将传入的参数成员进行切割、遍历及成员是函数的添加到执行队列。

var args =Array.prototype.slice.call(arguments);//数组化参数 存入变量    
args.forEach(function(fn){//遍历参数
    if(toString.call(fn)==="[object Function]"){//是function的添加到执行队列
        list.push(fn);
    }
})

fire则是接收参数,触发fireWidth接受参数 执行处理函数,fireWidth的处理函数即真正在执行fire操作的函数提取到外部。

var fire = function(data){//控制队列执行的函数
        }

同时呢 我们需要以下几个变量进行存储及判断使用

list=[];//定义队列
index//index 执行参数的下标 
length//参数长度存放到外边 减少for循环内的计算 
testing//添加标识,是否是第一次执行
memory //memery时存储已执行的处理函数
start //存储已执行的下标值 
starts// memory时的已执行下标值

控制队列执行函数根据memory、传来的下标等、设置stopOnfalse、 对执行函数队列进行判断及执行

memory=options.memory&&data ;
    index=starts||0;
    start = 0;
    testing=true;
    length=list.length;
    for(;index

当设置once时 非首次执行函数时要能够直接执行,fireWidth中进行处理

if(!options.once || !testing){
    fire(args);
}

当设置memory时 监测参数,add时记录何事处理memory 同时直接执行fire即可

if(memory){
    starts = start;
    fire(memory);    
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105463.html

相关文章

  • 前端培训-中级阶段(11、12)- 跨域请求原理实现(2019-08-22期)

    摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...

    binaryTree 评论0 收藏0
  • Redux入门0x101: 简介`redux`简单实现

    摘要:在我看来它们的关系不会比共用开头更深了,所以我就重新开了一个头,但其实是基于前面写的资源中文文档英文文档官方视频学习历程当初为了学习,看了许多的材料,中途曾经放弃两次,但是最后还是勇敢的拿起了它,现在终于勉强弄懂。 0x000 概述 这一章开始讲redux,其实是承接前面的react,但其实作为一个框架来说,redux和react并没有太多的关系,本身是独立存在的。在我看来它们的关系不...

    ssshooter 评论0 收藏0
  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • jQuery学习笔记

    摘要:提高业务编程能力中提供了很多的方法基本都兼容,我们可以使用这些方法快速开发项目中有的方法提供的思想可以让我们把项目实现得更优化提高基础以及一些高级编程思想分析源码,学习里面类库封装的思想和一些方法实现的原理有时间把中提供的常用方法都去实现一 jQuery 提高业务编程能力 JQ中提供了很多的方法(基本都兼容),我们可以使用这些方法快速开发项目 JQ中有的方法提供的思想可以让我们把...

    GHOST_349178 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0

发表评论

0条评论

lastSeries

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<