HenryZheng1999-优快云博客

原创用JS设计布隆过滤器、LRU缓存

收集一些学习布隆过滤器和LUR缓存的时候看到的文章，还有如何用JS设计数据结构的代码布隆过滤器详解布隆过滤器实现：https://www.jianshu.com/p/f75b6bcb4e57/** * BoolmFilter * maxKeys：最大数量 * errorRate：错误率 * */function BoolmFilter (maxKeys, errorRate) ...

2020-02-26 18:19:38 674

原创实现一个简单的diff算法流程

vue-diff实现一个简单的diff算法流程github：https://github.com/zhenghanhao1999/vue-diff详解流程图如下：什么是虚拟DOM ？所谓虚拟DOM，就是用一个JS对象来描述一个DOM节点为什么要有虚拟DOM ？Vue是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的时候难免要操作DOM,而操作真实DOM又是非常耗费性能的...

2020-02-24 13:18:40 1320

原创从访问URL到呈现页面过程（面试复习版）

此文章为面试复习整理，为知识点的简要概括。合成URL用户输入URL，浏览器根据输入信息判断是搜索内容还是网址如果是搜索内容，就合成新的URL如果是网址，浏览器就会加上协议，合成合法的URLDNS域名解析这是一个查找IP地址的过程，返回的结果就是对应的IP地址客户端和浏览器，本地DNS之间的查询方式是递归查询，如果找不到，继续下一步。本地DNS服务器与根域、子域之间的查询方式是...

2020-02-04 17:02:04 342

原创 2020年CVTE前端实习生面试

CVTE面经文章目录CVTE面经前言笔试面试问题一面二面总结前言12.6号笔试，到12.16号面试，拿offer，再到1.6号最终确认实习时间，差不多刚好一个月的时间。总体来说，整个过程难度是比较简单的，面试官和HR对实习生的态度也是让人比较舒服的。笔试偏基础，有些知识点很冷门，出题形式有点像牛客上面的题库，有两道代码大题，选择题只有一次回答机会（不能回去修改）。面试比较简单，可能因为招的...

2020-01-27 17:39:39 2712

原创 JavaScript模块化发展历程

JavaScript模块化发展历程原始时期函数封装使用函数封装为一个独立作用域function foo(){ //...}缺点是会造成全局污染，函数名与所在环境变量名冲突Namespace用对象来构造namespacevar obj = { a:1}缺点是私有成员暴露，内部状态可被外部改写立即执行函数使用IIFE构造独立作用域(function(){ //.....

2019-11-08 21:54:21 401

原创 Promise和异步机制

异步机制JavaScript的异步机制是事件轮询。Js引擎发起的任务是微任务宿主（浏览器）发起的任务是宏任务下面这张图大概阐述了哪些是宏任务哪些是微任务，都是我们比较常用的。比如，promise是微任务，setTimeOut是宏任务。所有同步任务都先在操作系统主线程上执行，主线程空了就访问宏任务队列主线程执行一个宏任务后先访问微任务队列微任务队列空了再访问下一个宏任务下一个...

2019-10-10 11:11:33 693

原创 Vue双向数据绑定原理

发布-订阅模式和观察者模式的区别在观察者模式中，观察者是知道被观察者对象的，被观察者一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理（信息中介）进行通信，中介将订阅者和发布者串联起来，它过滤和分配所有输入的消息。以下这幅图描绘了观察者和发布订阅两个模式的区别Vue 2.x 双向数据绑定原理如何实现一个简单的MVVM ？首...

2019-09-18 12:07:14 439

原创 JavaScript：== 和 ===

==标准中的==写的十分复杂，但是归根结底只有三条运算规则：undefined与null相等字符串和bool都转为数字再比较对象转换成primitive类型再比较（对象如果转换成了primitive类型跟等号另一边的类型恰好相同，则不需要转换成数字）这样我们就可以理解一些不太符合直觉的例子了：false == '0' // truetrue == 'true' // fals...

2019-07-21 11:51:07 243

1.url不同Hash ：Hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。History：如果用户考虑url的规范那么就需要使用History模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，把这个页面分享到第三方的app里，有的app里面url...

2019-07-20 11:38:39 393

原创对JavaScript预编译的一些思考

JavaScript的历史包袱还是挺多的，之前写过一篇博客，讲述了如何从AO和GO的角度去理解JavaScript预编译、闭包，但是大牛winter说这样理解方式是ES3的，已经不能解释现在很多语法了。不过要去理解这些预编译的历史问题，我觉得此角度再合适不过。这也可能是我最后一篇为ES3、ES5的重难点知识写博客了。直接上代码：思考以下打印结果function f(a) { c...

2019-07-10 10:58:40 198

原创浏览器是如何工作的？

浏览器运行的五个阶段对于浏览器是实现者来说，他们做的事情就是把一个URL变成一个屏幕上显示的网页。这个过程是这样的：浏览器使用HTTP协议或者HTTPS协议，向服务端请求页面把请求回来的HTML代码经过解析，构建成DOM树计算DOM树上的CSS属性根据CSS属性对元素逐个进行渲染，得到内存中的位图（一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度）将位图绘制到界面整...

2019-07-05 10:35:05 598

原创 JavaScript设计模式：工厂模式

强烈推荐大神写的文章：从ES6重新认识设计模式，从ES5、ES6的角度剖析了设计模式，还给出了应用实例。此篇文章就不介绍ES6的写法了，重点在于设计模式的思想。简单工厂简单工厂模式，又称为静态工厂方法，可以这样子来理解，工厂就是售货员，我们要买什么东西只需要告诉售货员，让他来拿给你，我们不需要去关注这个东西摆放在哪里，或者价格如何。具体的实现分为两种：通过类实例化对象创建//简单工厂...

2019-06-07 19:57:34 195

原创 JavaScript设计模式：面向对象

面向对象设计模式面向对象设计模式十分有利于工程化开发，一个项目共同开发者人数越多，越需要用对象来维护开发者各自的变量（函数也是一种变量）。相反，用面向过程的方式，遇到一个功能点就写一个全局函数，到最后一定会相互污染，无法察觉变量覆盖重写、不容易维护代码。用对象来收编既然已经学过了JS中的原型、基于原型的继承，我们可以用面向对象的思想来作工程化处理。最简单的例子，我们制作一个构造函数，然后在...

2019-05-17 21:36:10 165

原创 JavaScript：this

为什么会出现this？由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。阮一峰：JavaScript的this原理关于this我们至少需要明白它在四种情况下的指向：函数预编译过程，this指向window全局作用域里面，this指向windowcal...

2019-05-09 23:44:12 134

原创前端性能优化基础知识

这篇文章主要介绍一些前端性能优化的术语定义和优化出发点技术优化出发点复用很多时候我们开发都会复用一些模块，这是减少开发成本，比如造轮子。当然，在性能优化方面，复用也是非常重要的一点。文件复用文件复用是一种工程化的开发方式，比如说我们定义一些通用样式，放在一个样式表里面，然后在各个组件都可以引用，或者作为全局样式表，这样肯定会比重复定义样式表要更优，同样其他文件（js、html等）都可以...

2019-04-20 21:06:06 307

原创深入CSS布局 (一)

一、单列布局常见的单列布局有两种：header,content和footer等宽的单列布局header与footer等宽,content略窄的单列布局如何实现单列布局对于第一种，先通过对header,content,footer统一设置width：1000px;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实...

2019-03-17 21:33:06 186

原创 JavaScript---谈谈对象系统和对原型的理解

我们都知道JavaScript是一门基于对象的编程语言，那么究竟什么是基于对象？我们先来谈谈JavaScript对象系统的设计思路，JavaScript采用了一种“冷门”的方式来描述对象，那就是原型。面向对象的三大特性是“封装、继承和多态”，可是整个JavaScript系统都是对象，函数也是对象，变量也是对象，却无法利用现有的对象模板来产生新的对象类型，所以JavaScript只有封装的概念，继...

2019-01-31 20:45:01 272

原创浅析JavaScript语言类型

2019-01-29 22:37:36 2699 2

原创斐波那契数列的三种实现方式

递归int Fib(k){ int i = 0; if (k &lt; 2) { return k; } else { return Fib(k - 1) + Fib(k - 2); } return;}非递归int f(int n){ int f0 = 1; int f1 =...

2018-12-27 22:03:19 153

原创数据结构（六）：霍夫曼编码

在介绍霍夫曼编码之前，我们先看看什么是霍夫曼树霍夫曼树美国数学家Huffman在1952年发明了霍夫曼编码，为了纪念他的成就，就把他在编码中用到的特殊二叉树称为霍夫曼树（哈夫曼树）。我们先来看看哈夫曼树的定义：给定n个权值作为n个叶子结点，构造一棵二叉树，若该树的带权路径长度（WPL）达到最小，称这样的二叉树为最优二叉树，也称为哈夫曼树(Huffman Tree)。可以看到，哈夫曼树...

2018-12-27 17:37:26 1405

原创数据结构（五）：散列函数

假如说我们要寻找一个人，我们如果把每一个地点都找遍，那样是没有效率的。我们可以想一想这个人通常会去什么地方，然后直接去那个地方找。这就是散列技术。存储位置=f(关键字)我们把以上对应关系f称为散列函数，又称为哈希（Hash）函数，采用散列技术将记录存储在一块连续的存储空间中，这块存储空间称为散列表（哈希表）。散列冲突：对于两个关键字key1 != key2，却有f(key1)=f(...

2018-12-24 16:19:22 1473

原创数据结构（四）：图基础

图此篇文章介绍一些图的基础知识图（graph）是由顶点的有穷非空集合和顶点之间边的集合组成，通常表示为：G（V,E），其中，G表示一个图，V是图G中顶点的集合,E是图G中边的集合。基本概念图的一些基础概念，可以回顾一下离散数学：顶点、边、弧、无向边、有向边、无向图、有向图、子图、连通图、度等等下面对这些概念进行简单介绍：图按照有无方向分为无向图和有向图。无向图由顶点和边构成，有...

2018-12-23 20:44:03 346

原创 C++ STL基础

标准模板库（Standard Template Library），是一个C++软件库，大量影响了C++标准程序库但并非是其的一部分。这个库包括3种类型的通用项：容器、迭代器和算法。有了STL，程序员就不必编写自己的类和函数，能够利用预先打包好的通用工具来解决先用的问题。下面简单介绍几种最常用的STL工具。参考文献：C++ STL快速入门string头文件#include &lt;s...

2018-12-23 10:08:39 1287

原创数据结构（三）：排序算法（下）

插入排序直接插入排序直接插入排序（Straight Insertion Sort）的基本操作是将一个记录插入到已经排好序的有序表中，从而得到一个新的、记录数增1的有序表。插入排序算法其实很好理解，我们在玩扑克牌的时候，通常喜欢左手拿着排好序的牌，右手拿一张牌然后在左手找位置插入，基本上就是这个思想。我们整理牌的方法，其实就是直接插入排序。对于插入排序，我们可以有两种构造设定哨兵位...

2018-12-22 13:56:45 162

原创数据结构（三）：排序算法（上）

排序稳定性和分类稳定性:如果在元素序列中有两个元素R[i]和R[j]，他们的排序码K[i]==K[j]，且在排序之前，R[i]在R[j]前面。若在排序后，R[i]仍然在R[j]前面，则称这个算法是稳定的。否则，这个算法是不稳定的。怎么理解稳定性？稳定性是指相同元素在排序后相对位置保持不变。举个例子，如果A和B的值相同，排序前B是在A的后面，那么按值排序后B仍然在A的后面，这就叫稳定。分...

2018-12-19 22:42:22 220

原创数据结构（二）：算法复杂度

算法时间复杂度函数渐近增长算法中执行次数最多的那条语句就是基本语句，测定运行时间就是计算基本语句的执行次数可以忽略加法常数与最高此项相乘的常数并不重要最高次项的指数越大，增长越快判断一个算法执行效率时，函数中的常数和其他次要项常常可以忽略，更应该关注主项（最高阶项）的阶数某个算法，随着n增大，它会越来越优于另一算法，或者越来越差与另一算法。大O表示法我们一般使用O(f(n...

2018-12-11 10:31:02 321

原创数据结构（一）:基本概念和初识算法

数据：所有能被输入到计算机中，且能被计算机处理的符号的集合。是计算机操作的对象的总称。数据元素：数据（集合）中的一个“个体”，数据及结构中讨论的基本单位数据项：数据的不可分割的最小单位。一个数据元素可由若干个数据项组成。数据类型：在一种程序设计语言中，变量所具有的数据种类。整型、浮点型、字符型等等逻辑结构：数据之间的相互关系。集合结构中的数据元素除了同属于一种类型外，别无其它...

2018-12-10 22:07:25 288

原创 ajax渲染页面点击事件失效的解决方法

问题所在：最近在学习使用JQ中ajax方法来渲染页面数据，填充表格，附上ajax获取数据填充表格的代码：$.ajax({ //请求方式 type:'GET', //发送请求的地址以及传输的数据 url:"https://www.easy-mock.com/mock/5bd5c6b982302f7129...

2018-11-13 17:23:47 4998 1

原创 jQ attr方法设置checked问题和如何终止each方法

jquery设置checkbox为checked状态不改变参考文献：jquery设置checkbox为checked状态不改变的解决办法在使用jQuery的attr方法设置checkbox为选择状态时发现只能生效一次$(this).attr("checked", true);//或者$(this).attr("checked", checked);而实际上当JQ的版本大于1....

2018-11-03 20:37:00 354

原创 JavaScript作用域链、预解析、闭包

作用域及执行环境变量的作用域有全局变量和局部变量两种，这一点与其他语言（如C）的概念是非常相似的。我们先了解一下几个概念：执行环境（execution context）定义了变量或者函数有权访问其他数据，决定他们各自的行为。每个执行环境都有关联的变量对象（VO），环境中定义的变量和函数都会保存在这个对象中。作用域链（scope chain）保证对执行环境有权访问的所有变量和函数...

2018-10-14 11:37:06 340

原创 CSS权重问题

最近在写官网项目，CSS的权重问题有点头疼，经常会写A元素的样式代码却影响了B的样式，有时候不回头再看一次网页还真发现不了。毕竟自己不可能记住全部的代码，那只能等到发现问题的时候，返回到原来的地方来处理了。上面的图片可以看到，footer的二维码被拉长了，原因是位于footer之前的代码，设定了img元素为高200px。解决方法之一就是找到影响的源头，修改影响源头的代码，把代码改成它...

2018-09-20 20:26:12 1840

原创判断对象进入可视区域添加飞入效果

我们先来讨论如何实现这个效果，我利用了一个效果库https://github.com/daneden/animate.css 这个是它的来源GitHubhttps://daneden.github.io/animate.css/ 这个是效果的体现，可供选择，我们选择一个从下飞入效果“bounceInUp”有了这个类库之后，引入CSS文件就可以开始用了。 $("#div").add...

2018-09-20 19:42:03 827

原创 JQ轮播图

制作轮播图有基本的四种方式：CSS3、JS、JQ、swiper以下介绍基于JQ库的轮播图先上HTML代码，分析一下结构：<body> <div class="pic"> <div class="content">  <img

2018-09-12 20:56:04 298

原创 CSS盒子外边距合并问题

今天在写一个页面的时候发现一个问题，那时候学习内外边距的时候视频中有讲解到这个外边距合并问题，但我以为是浏览器的一种bug应该不会经常遇到。其实在写嵌套盒子的时候我就遇到了，这个东西应该还是比较重要的，不能忽视。问题来源：嵌套盒子，父盒子只提供背景颜色，子盒子更小，想要实现子盒子上边距父盒子有一段距离。我在写这个的时候直接给子盒子写margin-top77像素。发现子盒子还是贴着父盒子...

2018-08-19 11:42:44 1450

原创关于Web功能菜单栏排列的两种做法

功能菜单栏实际上非常常见，通常可以在web首页看到，起到导航的作用。下面总结一下CSS的两种做法。做法一：盒子排列盒子排列，主要利用浮动让盒子排在一行，然后调整a链接样式。其实也没什么好说的，可能这一块用的还是比较少暂时没有什么感悟。做法二会多一点。做法二：无序列表<ul> <li>标签创建无序列表就，然后把li调整为块状，浮动靠左，代码里面有标注的都是必要...

2018-08-15 22:40:48 5339

zhenghaohan1999的博客