专栏首页前端干货和生活感悟jQuery之模拟实现$().animate()(上)

jQuery之模拟实现$().animate()(上)

根据上图实现除doAnimation外的逻辑:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery之$().animate()的实现</title>
</head>
<body>
<script src="jQuery.js"></script>

  <div id="A" style="width:100px;height:50px;background-color: deeppink">这是A</div>

<script>
  //匿名函数自调用,下面好长好长的function就是$
  //也就是说$是一个function(){xxx}
  (function($) {

    window.$ = $;

  })(
    //这里也是匿名函数自调用
    //本质就是经过一系列操作得到chenQuery并作为参数$,赋值给window.$
    function() {
      //匹配ID
      let rquickExpr = /^(?:#([\w-]*))$/;
      //jQuery初始化
      function chenQuery(selector) {
        return new chenQuery.fn.init(selector);
      }

      //假设是在数据缓存中存取队列
      const Queue=[]

      //数据缓存
      const dataPriv={
        get:function (type) {
          if(type==='queue') return Queue
        },

      }

      const dequeue=function() {
        const Queue=dataPriv.get("queue")
        let fn = Queue.shift()
        //当单个动画结束后,执行下个动画
        const next = function() {
          dequeue();
        }

        if ( fn === "inprogress" ) {
          fn = Queue.shift();
        }

        if (fn) {
          Queue.unshift( "inprogress" );
          /*执行doAnimation方法,doAnimation(element, options,function() {firing = false;_fire();})*/
          /*fn的参数就是形参func*/
          /*func方法是用来通知上个动画结束,下个动画运行的重要function*/
          //func的作用是用来通知动画执行结束,并继续执行下一个动画
          const func=function() {
            next();
          }
          fn(func);
        }


      }

      //省略type
      const queue=function(element, options, callback, ) {
        //模仿从数据缓存中得到的队列,直接写Queue.push也行
        const Queue=dataPriv.get("queue")
        //向动画队列中添加doAnimation触发器
        Queue.push(function(func) {
          //doAnimation
          callback(element, options, func);
        });
        //如果没有动画在运行,运行动画
        //动画锁inprogress
        if(Queue[0]!=='inprogress'){
          dequeue()
        }

      }

      /*动画*/
      const animation = function(element,options) {

        const doAnimation = function(element, options, func) {
          const width = options.width

          /*===这里面定义了动画的算法,也就是Animation实现的地方===*/
          // 默认动画时长2s
          element.style.transitionDuration = '400ms';
          element.style.width =  width + 'px';

          /*监听单个动画完结*/
          //transitionend 事件在 CSS 完成过渡后触发
          element.addEventListener('transitionend', function() {
            func()
          });
        }
        //每调用一次animation,就入一次队
        return queue(element, options,doAnimation,);
      }


      //为chenQuery的fn和prototype原型属性 赋 animate属性
      chenQuery.fn = chenQuery.prototype = {
        //也可以直接把animation里的代码放这里来,但这样就太长了,降低了可读性
        animate: function(options) {
          animation(this.element, options);
          //注意返回的是this,也就是$("#A"),这样就能继续调用animate方法
          // 也就是链式调用
          return this;
        }
      }
      //为chenQuery的fn属性添加init方法
      const init = chenQuery.fn.init = function(selector) {
        // ["#A", "A",groups: undefined,index: 0,input: "#A"]
        const match = rquickExpr.exec(selector);
        //这边默认是只找id的元素
        const element = document.getElementById(match[1])
        //this指chenQuery.fn.init方法
        //为该方法添加element属性
        this.element = element;
        //返回chenQuery.fn.init
        return this;
      }
      //挺绕的,再将init的原型等于chenQuery.fn方法
      init.prototype = chenQuery.fn;

      //chenQuery本身是一个function(){}
      // chenQuery{
      //init能调用fn,fn能调用init
      //   fn:{
      //     animate:function(){},
      //     init:function(){},
      //     // init.prototype=fn
      //   },
      //   prototype:{
      //     animate:function(){},
      //   }
      // }

      return chenQuery;
    }());


  const A = document.querySelector('#A');
  //在异步调用中,进行同步调用
  //动画是异步的
  A.onclick = function() {
    //就是连续调用animation.add()
    $('#A').animate({
      'width': '500'
    }).animate({
      'width': '300'
    }).animate({
      'width': '1000'
    });
  };

</script>
</body>
</html>

解析: (1)匿名函数自调用的参数:

   (function(a){
     console.log(a) //name
   })('name')

   (function (b) {
     console.log(b) //function(){console.log('name')}
   })(function () {
     console.log('name')
   })

(2)快速匹配id选择器

      //匹配ID
      let rquickExpr = /^(?:#([\w-]*))$/;

(3)inprogress是动画锁 当第一个动画执行时,向Queue中添加锁inprogress,阻止异步调用动画,也就是要求同步执行动画,当动画结束时,移除锁,调用下一个动画。

(4)transitionend transitionend事件在 CSS 完成过渡后触发,这里当做单个动画完成的信号,触发后,会告知下个动画进行

下图的实现将在下篇文章贴出:


本文分享自微信公众号 - webchen(webchen1995)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    我是一名创业者,我的公司(深圳市友浩达科技有限公司)在2018年8月8日开始运营,现在还属于微型公司。这个春节假期,我一直十分关注疫情动向,也非常关心其对公司带来的影响。

    TVP官方团队
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • 数据中台,概念炒作还是另有奇效? | TVP思享

    作者简介:史凯,花名凯哥,腾讯云最具价值专家TVP,ThoughtWorks数据智能业务总经理。投身于企业数字化转型工作近20年。2000年初,在IBM 研发企业级中间件,接着加入埃森哲,为大型企业提供信息化架构规划,设计,ERP,云平台,数据仓库构建等技术咨询实施服务,随后在EMC负责企业应用转型业务,为企业提供云迁移,应用现代化服务。现在专注于企业智能化转型领域,是数据驱动的数字化转型的行业布道者,数据中台的推广者,精益数据创新体系的创始人,2019年荣获全球Data IQ 100人的数据赋能者称号,创业邦卓越生态聚合赋能官TOP 5。2019年度数字化转型专家奖。打造了行业第一个数据创新的数字化转型卡牌和工作坊。创建了精益数据创新方法论体系构建数据驱动的智能企业,并在多个企业验证成功,正在向国内外推广。

    TVP官方团队
    大数据数据分析企业
  • 扩展 Kubernetes 之 CRI

    使用 cri-containerd 的调用流程更为简洁, 省去了上面的调用流程的 1,2 两步

    王磊-AI基础
    Kubernetes
  • 扩展 Kubernetes 之 Kubectl Plugin

    kubectl 功能非常强大, 常见的命令使用方式可以参考 kubectl --help,或者这篇文章

    王磊-AI基础
    Kubernetes
  • 多种登录方式定量性能测试方案

    最近接到到一个测试任务,某服务提供了两种登录方式:1、账号密码登录;2、手机号+验证码登录。要对这两种登录按照一定的比例进行压测。

    八音弦
    测试服务 WeTest
  • 线程安全类在性能测试中应用

    首先验证接口参数签名是否正确,然后加锁去判断订单信息和状态,处理用户增添VIP时间事务,成功之后释放锁。锁是针对用户和订单的分布式锁,使用方案是用的redis。

    八音弦
    安全编程算法
  • 使用CDN(jsdelivr) 优化博客访问速度

    PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

    IFONLY@CUIT
    CDNGitGitHub开源
  • 扩展 Kubernetes 之 CNI

    Network Configuration 是 CNI 输入参数中最重要当部分, 可以存储在磁盘上

    王磊-AI基础
    Kubernetes
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视野、预判、应对等多角度,帮助大家全面提升「技术应变力」!

    腾小云
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
    渲染JavaScripthttps网络安全缓存

扫码关注云+社区

领取腾讯云代金券