1.SortableJS原理分析（源码）
2.大家帮我看看这段JS代码是源码什么意思？
3.keep-alive的vue2和vue3的源码以及LRU算法
4.PIXI.JS源码解析：Ticker.js
5.konva.js 原理与源码解析

SortableJS原理分析（源码）

       前言

       SortableJS是基于H5拖拽API实现的一个轻量级JS拖拽排序库，它适用于以下一些场景：

       容器项目拖动排序：容器列表内的源码子项目，通过拖动进行位置调换，源码且具有动画效果；

       容器间的源码项目移动：将一个容器列表中的子项目，拖动到另一个容器列表中（移动/克隆）。源码

       不论是源码扑克识别源码容器内元素顺序排序，或是源码两个容器内的元素进行移动，本质上是源码在通过操作DOM来实现。

       下面我们先熟悉一下SortableJS基本使用。源码

示例

       1、源码HTML结构：

<divclass="row"><divid="leftContainer"class="list-groupcol-6"><divclass="list-group-item">Item1</div><divclass="list-group-item">Item2</div><divclass="list-group-item">Item3</div><divclass="list-group-item">Item4</div><divclass="list-group-item">Item5</div><divclass="list-group-item">Item6</div></div><divid="rightContainer"class="list-groupcol-6"><divclass="list-group-itemtinted">Item1</div><divclass="list-group-itemtinted">Item2</div><divclass="list-group-itemtinted">Item3</div><divclass="list-group-itemtinted">Item4</div><divclass="list-group-itemtinted">Item5</div><divclass="list-group-itemtinted">Item6</div></div></div>

       2、源码为容器实例化：

newSortable(leftContainer,源码{ group:{ name:'group',pull:'clone',put:true},});newSortable(rightContainer,{ group:'group',});

       现在，就可以在容器内进行排序拖动，源码或者拖动左侧容器元素，源码添加到右侧容器中。源码

思路分析

       在看源码之前，还是需要对H5拖拽用法有一定了解，如果不熟悉，直接去看源码很容易就放弃。

       若你对H5拖拽API比较熟悉，就可以根据SortableJS的视图呈现效果，想出个大概思路。

       拖拽，首先要搞清楚两个词汇对象：

       拖动元素：作为拖拽元素被拖起（下文叫dragEl）；

       目标元素：作为拖拽元素即将被放置时的参照物（下文叫target）；

       在SortableJS中，拖拽离不开以下几个事件：

       dragstart：作为拖拽元素，按下鼠标开始拖动元素时触发（拖拽周期只触发一次）；

       dragend：作为拖拽元素，当鼠标松开拖放元素时触发（拖拽周期只触发一次）；

       dragover：作为拖拽元素，当拖动元素进行移动，会持续触发，需要在这里取消默认事件，mini源码否则元素无法被拖动（松开时元素的预览幽灵图又回去了）；

       drop：作为目标元素，当鼠标松开拖放元素时触发（拖拽周期只触发一次）；

       下面我们一起去分析SortableJS具体实现。

源码实例构造函数

       从上面的示例使用上得知，SortableJS是一个构造函数，接收容器元素和配置项：

constexpando='Sortable'+(newDate).getTime();functionSortable(el,options){ this.el=el;//rootelementthis.options=options=Object.assign({ },options);el[expando]=this;constdefaults={ group:null,sort:true,//默认容器可以排序animation:0,removeCloneOnHide:true,//将一个容器元素拖动至另一个容器后，默认setData:function(dataTransfer,dragEl){ dataTransfer.setData('Text',dragEl.textContent);}};//参数合并for(varnameindefaults){ !(nameinoptions)&&(options[name]=defaults[name]);}//规范group_prepareGroup(options);//绑定原型方法为私有方法for(varfninthis){ if(fn.charAt(0)==='_'&&typeofthis[fn]==='function'){ this[fn]=this[fn].bind(this);}}//绑定指针触摸事件，类似mousedownon(el,'pointerdown',this._prepareDragStart);on(el,'dragover',this);on(el,'dragenter',this);}

       初始化示例做了以下几件事件：

       将传入的参数与提供的默认参数进行合并；

       规范传入的group格式；

       将原型上的方法绑定在实例对象上，便于使用；

       绑定pointerdown、dragover、dragenter事件，其中pointerdown可以看作是dragstart事件，做了一些拖拽前的准备工作。

       group用于两个容器元素的相互拖拽场景，规范group核心代码如下：

function_prepareGroup(options){ functiontoFn(value,pull){ returnfunction(to,from){ letsameGroup=to.options.group.name&&from.options.group.name&&to.options.group.name===from.options.group.name;if(value==null&&(pull||sameGroup)){ returntrue;}elseif(value==null||value===false){ returnfalse;}elseif(pull&&value==='clone'){ returnvalue;}else{ returnvalue===true;}};}letgroup={ };letoriginalGroup=options.group;if(!originalGroup||typeoforiginalGroup!='object'){ originalGroup={ name:originalGroup};}group.name=originalGroup.name;group.checkPull=toFn(originalGroup.pull,true);group.checkPut=toFn(originalGroup.put);options.group=group;}_prepareDragStart拖动前的准备工作

       当鼠标按下触发pointerdown事件时，会保存拖动元素的信息，提供后续使用，并且注册dragstart事件：

letoldIndex,newIndex;letdragEl=null;//拖拽元素letrootEl=null;//容器元素letparentEl=null;//拖拽元素的父节点letnextEl=null;//拖拽元素下一个元素letactiveGroup=null;//options.groupSortable.prototype={ _prepareDragStart(evt){ lettarget=evt.target,el=this.el,options=this.options;oldIndex=index(target);rootEl=el;dragEl=target;parentEl=dragEl.parentNode;nextEl=dragEl.nextSibling;activeGroup=options.group;dragEl.draggable=true;//设置元素拖拽属性on(dragEl,'dragend',this);on(rootEl,'dragstart',this._onDragStart);on(document,'mouseup',this._onDrop);},}

       on就是addEventListener，index方法用于获取元素在父容器内的索引：

functionon(el,event,fn){ el.addEventListener(event,fn);}functionoff(el,event,fn){ el.removeEventListener(event,fn);}functionindex(el){ if(!el||!el.parentNode)return-1;letindex=0;//返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）while(el=el.previousElementSibling){ if(el!==Sortable.clone)index++;}returnindex;}

       _onDragStart用于处理dragstart事件逻辑，_onDrop用于处理拖拽结束逻辑，比如这里执行了dragEl.draggable=true;，那么在mouseup鼠标松开后需将draggable=false。

       这里有趣的一点是dragend事件，它的处理函数绑定的是this即Sortable实例本身，我们都知道实例对象是一个对象，怎么能作为函数使用呢？

       其实addEventListener第二参数可以是函数，也可以是对象，当为对象时，需要提有一个handleEvent方法来处理事件：

Sortable.prototype={ handleEvent:function(evt){ switch(evt.type){ case'dragend':this._onDrop(evt);break;case'dragover':evt.stopPropagation();evt.preventDefault();break;case'dragenter':if(dragEl){ this._onDragOver(evt);}break;}},syncing源码}

       到这里，整个拖拽流程功能函数都暴露在了眼前：

       _onDragStart处理dragstart拖拽开始工作；

       _onDragOver处理拖拽移动到别的元素时工作；

       _onDrop处理鼠标拖动结束的收尾工作。

dragstart

       这里做了两件事情：

       clone一个dragEl元素副本，用于两个容器项目移动时使用；

       触发外部传入的clone和dragstart事件；

letcloneEl=null,cloneHidden=null;//clone元素_onDragStart(evt){ letdataTransfer=evt.dataTransfer;letoptions=this.options;cloneEl=clone(dragEl);cloneEl.removeAttribute("id");cloneEl.draggable=false;//设置拖拽数据if(dataTransfer){ dataTransfer.effectAllowed='move';options.setData&&options.setData.call(this,dataTransfer,dragEl);}Sortable.active=this;Sortable.clone=cloneEl;_dispatchEvent({ sortable:this,name:'clone'});_dispatchEvent({ sortable:this,name:'start',originalEvent:evt});},functionclone(el){ returnel.cloneNode(true);}

       _dispatchEvent会通过newwindow.CustomEvent构造一个事件对象，将拖拽元素的信息添加到自定义事件对象上，传递给外部的注册事件函数，大体代码如下：

functiondispatchEvent(...params){ //sortable没有传，就根据rootEl获取sortable。sortable=(sortable||(rootEl&&rootEl[expando]));if(!sortable)return;letevt,options=sortable.options,onName='on'+name.charAt(0).toUpperCase()+name.substr(1);//自定义事件，拿到事件对象，满足外部用户传入的事件正常使用if(window.CustomEvent){ evt=newCustomEvent(name,{ bubbles:true,cancelable:true});}else{ evt=document.createEvent('Event');evt.initEvent(name,true,true);}evt.to=toEl||rootEl;evt.from=fromEl||rootEl;evt.item=targetEl||rootEl;evt.clone=cloneEl;evt.oldIndex=oldIndex;evt.newIndex=newIndex;//执行外部传入的事件if(options[onName]){ options[onName].call(sortable,evt);}}

       可见，拖拽的核心逻辑不在dragstart中，下面我们去看dragenter的处理函数_onDragOver。

dragenter

       SortableJS的核心逻辑在_onDragOver中，拿容器内项目排序为例：当拖动dragEl元素，移动到另一个元素上时，会发生两者的位置交换，可见，Sort的逻辑在这里。

       首先，在实例化对象时绑定了dragover和dragenter事件，并且通过handleEvent将事件逻辑交由_onDragOver来处理：

on(el,'dragover',this);on(el,'dragenter',this);handleEvent:function(evt){ switch(evt.type){ case'dragover':evt.stopPropagation();evt.preventDefault();break;case'dragenter':if(dragEl){ this._onDragOver(evt);}break;}},

       在_onDragOver中，需要注意一点是：假如有两个容器，那就有两个newSortable实例对象，isOwner将为false，这是就需要判断拖动容器的activeGroup.pull（是否允许被移动）和group.put（是否允许添加拖动过来的元素）。

newSortable(leftContainer,{ group:{ name:'group',pull:'clone',put:true},});newSortable(rightContainer,{ group:'group',});0

       上面的核心在于下面这一行代码：

newSortable(leftContainer,{ group:{ name:'group',pull:'clone',put:true},});newSortable(rightContainer,{ group:'group',});1

       如果拖拽元素的位置小于目标元素的位置，说明是从上往下拖动，那么将dragEl移动到target.nextSibling之前；

       如果拖拽元素的位置大于目标元素的位置，说明是propertylist源码从下往上拖动，那么只需将dragEl移动到target之前即可；

       整个移动过程均采用DOM操作insertBefore来实现。

       另外如果是两个容器的场景（isOwner=false），并且拖动元素的容器activeGroup.pull=clone，需要将dragstart创建的clone元素渲染到容器中：

newSortable(leftContainer,{ group:{ name:'group',pull:'clone',put:true},});newSortable(rightContainer,{ group:'group',});2drop

       drop主要做一些收尾工作，如将dragEl.draggable=false，移除绑定的mouseup、dragstart、dragend事件，触发用户传入的sort、end事件等。

       不过注意，虽然起名叫drop，触发的事件确是dragend。

newSortable(leftContainer,{ group:{ name:'group',pull:'clone',put:true},});newSortable(rightContainer,{ group:'group',});3动画

       如果想在拖动排序中有一定的animation动画效果，可以配置动画属性，属性值是动画持续时长：

newSortable(leftContainer,{ group:{ name:'group',pull:'clone',put:true},});newSortable(rightContainer,{ group:'group',});4

       动画的时机也是在dragenter中，大致的思路如下：

       1、记录：记录容器子项位置信息

       在操作DOM移动dragEl之前，记录容器内所有子项的位置；

       进行DOM操作进行位置交换，DOM操作本身没有动画；

       这时再去记录一次移动后的容器内所有子项的位置；

       2、执行：有了上面几步的操作，接下来就可以根据移动前后的位置进行动画操作

       通过translate先让元素立刻回到移动前的位置；

       此时给元素自身设置过度效果transform；

       这时候就可以通过translate让元素回到移动之后的位置。

       大致实现如下：

newSortable(leftContainer,{ group:{ name:'group',pull:'clone',put:true},});newSortable(rightContainer,{ group:'group',});5最后

       本文以探索SortableJS拖拽思路为主线，去了解业界开源拖拽库的设计与思路。感谢阅读。

原文：/post/

大家帮我看看这段JS代码是什么意思？

       总的来说是一段每隔2秒切换一下选项卡的js特效代码

       1.自动切换:

       每2秒通过调用aa()动态改变选项卡的索引，再用foucs(c,i,str)函数改变选项卡标签(focus_tab_)和相对应的内容(focus_con_)的class属性来实现(class ="on"就显示该标签和内容，class=""就隐藏该标签和内容)

       2.手动切换:

       最后面的(for (i=1;i<6;i++)这一段是为5个选择卡的标签和内容容器,初始化鼠标事件

       3.很遗憾你这个自动切换的js特效不会起作用

       aa()函数里面这一句:foucs(start,'2','foucs');把foucs(c,i,str)中的i定死为字符变量"2"了(它本该是for循环中1-5中的一个整数,是变化的,而你这却把i当作个一个字符变量来传送),所以，你这个自动切换的jsoneditorqt源码，切换不了，永远显示的是索引为的2那个选项卡，搞不好还会报错。

keep-alive的vue2和vue3的源码以及LRU算法

       0.LRU算法

       LRU（leastrecentlyused）根据数据的历史记录来淘汰数据，重点在于保护最近被访问/使用过的数据，淘汰现阶段最久未被访问的数据

       LRU的主体思想在于：如果数据最近被访问过,那么将来被访问的几率也更高

       经典的LRU实现一般采用双向链表+Hash表。借助Hash表来通过key快速映射到对应的链表节点，然后进行插入和删除操作。这样既解决了hash表无固定顺序的缺点，又解决了链表查找慢的缺点。

       但实际上在js中无需这样实现，可以参考文章第三部分。先看vue的keep-alive实现。

1.keep-alive

       keep-alive是vue中的内置组件，使用KeepAlive后，被包裹的组件在经过第一次渲染后的vnode会被缓存起来，然后再下一次再次渲染该组件的时候，直接从缓存中拿到对应的vnode进行渲染，并不需要再走一次组件初始化，render和patch等一系列流程，减少了script的执行时间，性能更好。

       使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

       当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

       从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

       在路由中设置keepAlive属性判断是否需要缓存。

2.vue2的实现

       实现原理：通过keep-alive组件插槽，获取第一个子节点。根据include、exclude判断是否需要缓存，通过组件的key，判断是否命中缓存。利用LRU算法，更新缓存以及对应的keys数组。根据max控制缓存的最大组件数量。

       先看vue2的实现：

exportdefault{ name:'keep-alive',abstract:true,props:{ include:patternTypes,exclude:patternTypes,max:[String,Number]},created(){ this.cache=Object.create(null)this.keys=[]},destroyed(){ for(constkeyinthis.cache){ pruneCacheEntry(this.cache,key,this.keys)}},mounted(){ this.$watch('include',val=>{ pruneCache(this,name=>matches(val,name))})this.$watch('exclude',val=>{ pruneCache(this,name=>!matches(val,name))})},render(){ constslot=this.$slots.defaultconstvnode:VNode=getFirstComponentChild(slot)constcomponentOptions:?VNodeComponentOptions=vnode&&vnode.componentOptionsif(componentOptions){ //checkpatternconstname:?string=getComponentName(componentOptions)const{ include,exclude}=thisif(//notincluded(include&&(!name||!matches(include,name)))||//excluded(exclude&&name&&matches(exclude,name))){ returnvnode}const{ cache,keys}=thisconstkey:?string=vnode.key==null?componentOptions.Ctor.cid+(componentOptions.tag?`::${ componentOptions.tag}`:''):vnode.keyif(cache[key]){ vnode.componentInstance=cache[key].componentInstance//makecurrentkeyfreshestremove(keys,key)keys.push(key)}else{ cache[key]=vnodekeys.push(key)//pruneoldestentryif(this.max&&keys.length>parseInt(this.max)){ pruneCacheEntry(cache,keys[0],keys,this._vnode)}}vnode.data.keepAlive=true}returnvnode||(slot&&slot[0])}}

       可以看到<keep-alive>组件的实现也是一个对象，注意它有一个属性abstract为true，是一个抽象组件，它在组件实例建立父子关系的时候会被忽略，发生在initLifecycle的过程中：

//忽略抽象组件letparent=options.parentif(parent&&!options.abstract){ while(parent.$options.abstract&&parent.$parent){ parent=parent.$parent}parent.$children.push(vm)}vm.$parent=parent

       然后在?created?钩子里定义了?this.cache?和?this.keys，用来缓存已经创建过的?vnode。

       <keep-alive>直接实现了render函数，执行<keep-alive>组件渲染的时候，就会执行到这个render函数，接下来我们分析一下它的实现。

       首先通过插槽获取第一个子元素的vnode：

constslot=this.$slots.defaultconstvnode:VNode=getFirstComponentChild(slot)

       <keep-alive>只处理第一个子元素，所以一般和它搭配使用的有component动态组件或者是router-view。

       然后又判断了当前组件的名称和include、exclude（白名单、黑名单）的关系：

//checkpatternconstname:?string=getComponentName(componentOptions)const{ include,exclude}=thisif(//notincluded(include&&(!name||!matches(include,name)))||//excluded(exclude&&name&&matches(exclude,name))){ returnvnode}functionmatches(pattern:string|RegExp|Array<string>,name:string):boolean{ if(Array.isArray(pattern)){ returnpattern.indexOf(name)>-1}elseif(typeofpattern==='string'){ returnpattern.split(',').indexOf(name)>-1}elseif(isRegExp(pattern)){ returnpattern.test(name)}returnfalse}

       组件名如果不满足条件，那么就直接返回这个组件的vnode，否则的话走下一步缓存：

const{ cache,keys}=thisconstkey:?string=vnode.key==null?componentOptions.Ctor.cid+(componentOptions.tag?`::${ componentOptions.tag}`:''):vnode.keyif(cache[key]){ vnode.componentInstance=cache[key].componentInstance//makecurrentkeyfreshestremove(keys,key)keys.push(key)}else{ cache[key]=vnodekeys.push(key)//pruneoldestentryif(this.max&&keys.length>parseInt(this.max)){ pruneCacheEntry(cache,keys[0],keys,this._vnode)}}

       如果命中缓存，则直接从缓存中拿vnode的组件实例，并且重新调整了key的顺序放在了最后一个；否则把vnode设置进缓存，如果配置了max并且缓存的长度超过了this.max，还要从缓存中删除第一个。

       这里的实现有一个问题：判断是否超过最大容量应该放在put操作前。为什么呢？我们设置一个缓存队列，都已经满了你还塞进来？最好先删一个才能塞进来新的。

       继续看删除缓存的实现：

functionpruneCacheEntry(cache:VNodeCache,key:string,keys:Array<string>,current?:VNode){ constcached=cache[key]if(cached&&(!current||cached.tag!==current.tag)){ cached.componentInstance.$destroy()}cache[key]=nullremove(keys,key)}

       除了从缓存中删除外，还要判断如果要删除的缓存的组件tag不是当前渲染组件tag，则执行删除缓存的组件实例的$destroy方法。

       ————————————

       可以发现，vue实现LRU算法是通过Array+Object，数组用来记录缓存顺序，Object用来模仿Map的功能进行vnode的缓存（created钩子里定义的this.cache和this.keys）

2.vue3的实现

       vue3实现思路基本和vue2类似，这里不再赘述。主要看LRU算法的实现。

       vue3通过set+map实现LRU算法：

constcache:Cache=newMap()constkeys:Keys=newSet()

       并且在判断是否超过缓存容量时的实现比较巧妙：

if(max&&keys.size>parseInt(maxasstring,)){ pruneCacheEntry(keys.values().next().value)}

       这里巧妙的利用Set是可迭代对象的特点，通过keys.value()获得包含keys中所有key的可迭代对象，并通过next().value获得第一个元素，然后进行删除。

3.借助vue3的思路实现LRU算法

       Leetcode题目——LRU缓存

varLRUCache=function(capacity){ this.map=newMap();this.capacity=capacity;};LRUCache.prototype.get=function(key){ if(this.map.has(key)){ letvalue=this.map.get(key);//删除后，再set，相当于更新到map最后一位this.map.delete(key);this.map.set(key,value);returnvalue;}return-1;};LRUCache.prototype.put=function(key,value){ //如果已经存在，那就要更新，即先删了再进行后面的setif(this.map.has(key)){ this.map.delete(key);}else{ //如果map中不存在，要先判断是否超过最大容量if(this.map.size===this.capacity){ this.map.delete(this.map.keys().next().value);}}this.map.set(key,value);};

       这里我们直接通过Map来就可以直接实现了。

       而keep-alive的实现因为缓存的内容是vnode，直接操作Map中缓存的位置代价较大，而采用Set/Array来记录缓存的key来模拟缓存顺序。

       参考：

       LRU缓存-keep-alive实现原理

       带你手撸LRU算法

       Vue.js技术揭秘

原文;/post/

PIXI.JS源码解析：Ticker.js

       本文聚焦于剖析PIXI.JS的核心模块，尤其探讨了Ticker.js文件中包含的功能实现，解释了Ticker和TickerListener如何协同工作以处理动画渲染和执行回调。

       在使用PIXI.JS时，初次接触的关键代码涉及实例化Application，该实例用于添加精灵图和创建动画。核心在于Application中的内部变量_ticker，它负责动画循环的执行。_ticker对象通过start方法启动循环，同时ticker.add方法允许将渲染函数添加到渲染队列中，确保每次循环时都能触发渲染函数，更新画布上的图像。

       Ticker.js作为核心模块，包含了Ticker和TickerListener的逻辑。ticker.add方法将渲染函数添加到渲染队列中，而ticker.start方法则启动循环，触发队列中的渲染函数执行。ticker.remove方法用于移除队列中的函数。UPDATE_PRIORITY.LOW参数允许用户调整回调函数的执行顺序。

       Ticker内部维护了一个队列，由_head和_tick变量管理。_head作为队列的源头，而_tick则负责循环执行，通过requestAnimationFrame实现。每次循环执行前，需要确保三个条件满足：_ticker已启动、_requestId为null以及队列中存在有效回调。当这三个条件满足时，循环得以启动并执行。

       每次循环时，_tick执行内部逻辑以更新图像。在循环过程中，_head.next指向下个回调，形成链式执行。_addListener方法用于内部管理回调函数的添加与移除，允许用户通过控制参数来影响回调函数的执行顺序与执行次数。

       TickerListener作为回调函数链的管理器，负责链接并执行一系列回调函数。当向应用实例中添加回调时，会自动插入到TickerListener队列中，确保在每次循环时按照特定顺序执行所有回调。TickerListener内部方法确保了回调的正确执行顺序与执行次数，同时提供了灵活的插入策略，允许用户根据需要调整回调函数的位置。

       总之，Ticker.js通过Ticker和TickerListener的协作，实现了高效、灵活的动画循环和回调执行机制，为开发者提供了强大的动画控制能力，简化了渲染和动画管理过程。

konva.js 原理与源码解析

       Konva是一个基于2D canvas的类库，适用于桌面和移动设备，提供图形组件、事件系统、变换、高性能动画、节点嵌套与分层等功能。Konva与FabricJS都是高性能2D渲染库，适合编辑器场景，各有优势。

       Konva架构基于图形树，类似DOM结构，通过add和remove操作增删节点。核心包括SceneContext和HitContext，实现绘制填充和描边。Konva通过Canvas缓存绘制图形信息，用户点击时判断击中图形。

       拾取方案中，Konva在SceneCanvas上绘制图形同时在HitCanvas上绘制，使用随机索引颜色，用户点击时根据缓存判断图形。流程包括获取交集、计算击中图形，触发交互事件。

       Konva的Node类是图形的底层封装，包含各种方法，所有Konva节点最终继承自Node。渲染流程包括添加图形、绘制、缓存和重绘。Node类的draw方法调用drawScene和drawHit，最终执行具体图形类的绘制方法。

       属性更新流程使用Factory模块绑定属性，通过getter和setter实现，统一调用Node._setAttr方法更新属性并批量重绘。Konva历史源码基于ES3定义类，Factory模块在代码中添加属性绑定逻辑。

       总体而言，Konva的结构设计、图形绘制、交互处理和属性更新机制共同构建了一个高效、灵活的2D图形渲染框架。