franki Blog

make a small progress every day

react cli 制作

react cli 写在前面，一个不想造轮子的搬砖工不是好的程序汪！一为什么会有造 react cli 的想法受困于每次新开项目，不论项目大小，都得重新搭建，无疑是劳民伤财、效率低下的苦差事。想到当前流行的框架react、vue、angular都有各自的cli，虽然以上的cli，足以解决市面上大部分场景问题，但是由于公司内部项目的特殊性，需要更多个性化的配置，故有了做re...

Posted by franki on September 9, 2019

jQuery 队列

队列是一种特殊的线性表，是一种先进先出的机制，把其想象成排队的场景即可。 jQuery中队列入队 queue: function(elem, type, data) { var queue; if (elem) { type = (type || 'fx') + 'queue'; queue = dataPriv.get(elem, ty...

Posted by franki on June 12, 2019

jQuery 自定义事件

在jQuery中常用trigger()方法来完成模拟操作，如可以使用下面的代码来触发id为test按钮的click事件。 $("#test").trigger("click"); 也可以直接简化写法click(),来实现同样的效果： $("test").click(); 如何触发自定义事件 //给element绑定hello事件 element.bind("hello",fun...

Posted by franki on June 11, 2019

jQuery 事件委派

从上篇jQuery事件的绑定，就可以看到：事件的信息都存储在数据缓存中对于没有特殊事件和普通事件都用addEventListener来添加事件有特殊事件用另外的方式来添加事件这篇文章的重点是：在addEventListener(type, func, false),触发事件后，回调句柄是如何处理的？涉及的处理：事件的读取与处理事件对象的兼容，jQu...

Posted by franki on June 10, 2019

jQuery 事件绑定

事件堪比javascript的心脏，页面的更新变化，几乎都是通过事件的响应去触发的，由此可见，事件在javascript的地位。开始正文之前，很有必要补充下事件的两个概念，一个是捕获、一个是冒泡，如下图所示这个图很好的解释了事件的执行过程，对于浏览器常见的如click、mouse事件就可以使用上图的机制，去解决现实场景的问题。回归正文，jQuery对事件的绑定主要总结如下: ...

Posted by franki on June 9, 2019

jQuery Deferred

在 es6 promise 还未全面普及的情况下，jQuery 的 Deferred 是很好用来解决耗时操作任务(setTimeout、ajax 等)，deferred 字面意思是递延、延迟的意思。常见的耗时的操作或者说异步操作都是通过回调函数处理返回的结果，利用返回的结果在回调函数做其他的操作，若是有超过两个的异步操作，且每一步都依赖上一步的异步任务完成的情况下，就会产生我们常说的回调地狱...

Posted by franki on June 8, 2019

jQuery 数据缓存

引入缓存的作用允许我们在dom元素添加自定义的属性，避免循环引用的的内存泄漏风险用于存储跟dom节点相关的数据，包括事件、动画等一种低耦合的方式让dom和缓存数据能够联系起来这里面有两个概念需要知悉 dataPriv: 一个Data实例，保存jQuery内部数据，如果jQuery的事件、动画、等数据都由这个访问器保存和获取 dataUser: 一个Data实...

Posted by franki on June 7, 2019

jQuery Callbacks

jQuery Callbacks 是一个多用途的回调函数列表对象，提供一个强大的方法来管理回调函数队列常见处理队列的的方法 etc function dowithList (List, cb) { setTimeout(function() { var task = List.shift(); task(); if (List.length > 0)...

Posted by franki on June 6, 2019

jQuery 初始化

jQuery初始化 jQuery 风靡多时，在前端历史有着举足轻重的影响，jQuery本着write less，do more，把广大开发者带进了新的世界，选择器、dom操作、css处理、事件、ajax、动画队列是jQuery最为出彩的部分。前端如今变幻莫测，react、vue、angular三驾马车并趋前行、大行其道，回想当年，jQuery有过之而不过及，每个历史时期都会出现新的框架。作...

Posted by franki on June 5, 2019

jQuery 整体架构

jQuery 源码分析之整体架构阅读一个开源框架，目的无非想学习设计的思想以及实现的方式。为什么要分析整体框架？理清整体架构有助于接下来源码的阅读，源码脉络清晰了，接下来的细节也就娓娓道来了。事不宜迟，下面看看jQuery的整体架构整体架构 jQuery 框架的核心其实就是对html元素的查找匹配并且进行dom操作。 etc $().find().css() $()...

Posted by franki on June 4, 2019