franki Blog

make a small progress every day

spa 路由简易原理

spa 路由简易原理及其实现浏览器 history 和 hash hash 具体指的是浏览器url # 后面的内容，例如 https://www.google.com/#abc 的hash值为abc 浏览器会记录hash的变化，以至于前进后退可以使用具体表现： 1 hash 变化可以随便改变更新url，不会引起服务器的更新，因为hash的变化并不会引起http之类的请求，所以h...

Posted by franki on October 31, 2019

彻底搞懂词法分析、语法分析、静态作用域、动态作用域

一词法分析词法分析到底是何物？相信大家在工作生活中或多或少都听说过，但是却少有人真正懂得词法分析到底有何功用，怎么用，这里面的到底有多少奥秘，值得我们每一个从事前端开发者都需要好好研究下。首先我们来看看常见编程语言是如何运行的？编程语言分为编译型语言和解释性语言。编译型语言（如java）的编译过程是：词法分析 > 语法分析 > 语意检查 > ...

Posted by franki on September 20, 2019

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