franki Blog

make a small progress every day

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

js进阶

js进阶修炼手册

手写一个call函数 es5实现 Function.prototype.call2 = function() { var args = arguments; var context = args[0] || window; context.fn = this; var newArr = []; for(var i=0; i<args.le...

Posted by franki on May 25, 2019

图解event loop

event loop 众所周知，javascript是单线程的，代码只能一步一步执行，如果一个任务消耗的时间太长，那么后面的任务就会被阻塞，js就是通过event loop(事件循环)来解决这个问题的。 stack queue heap event loop stack 吃多了上吐 queue 吃多了下泄 heap 存放对象具体表现有何用处对于js的执行...

Posted by franki on May 21, 2019

v8引擎运行原理浅析

v8引擎 V8引擎是一个JavaScript引擎实现，最初由一些语言方面专家设计，后被谷歌收购，随后谷歌对其进行了开源。V8使用C++开发，，在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高...

Posted by franki on May 16, 2019

git commit 提交规范

git commit信息规范 Angular团队规范 <type>(<scope>): <subject> <BLANK LINE> <body> <BLANK LINE> <footer> 通过vim界面编写填写的最终结果如上所示，大致分为三个部分(使用空行分割) 标题行：必填，描述...

Posted by franki on May 7, 2019

js实现常见的数据结构

数据结构对于工作中的作用可大可小，在当前前端的使用场景并没有十分广泛，但是对于一个对于开发者来说，技术不断精进是一个循序渐进的过程，所以很有必要进行学习。 js 数据结构实现斐波那契数列 var fibonaci = []; fibonaci[0] = 1; fibonacip[1] = 1; for (var i=2; i<20; i++) { fibonaci[...

Posted by franki on February 12, 2019

设计原则与编程技巧

单一职责原则单一职责原则(SRP)的职责被定义为“引起变化的原因”。如果我们有两个动机去改写一个方法，那么这个方法就具有两个职责。每个职责都是变化的一个轴线，如果一个方法承担了过多的职责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大因此，SRP 原则体现为:一个对象(方法)只做一件事情。以下设计模式都符合此规则： 1 代理模式 2 迭代器模式 3 代理模式 4 装饰者...

Posted by franki on November 12, 2018

设计模式之适配器模式

适配器模式解决两个软件实体之间接口不兼容的问题 var googleMap = { show: function() { console.log("start to render googleMap"); } }; var baiduMap = { show: function() { console.log("start t...

Posted by franki on November 11, 2018

设计模式之状态模式

状态模式的关键是区分事物内部的状态，事物的内部状态改变往往会带来事物行为的变化。允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。一电灯程序 // 普通处理方式 var Light = function() { this.state = "off"; // 电灯初始状态 this.button = null; // 电灯的开关按钮 }; Li...

Posted by franki on November 10, 2018