- 博客(85)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 关于身份证校验算法的一些想法
身份证校验这东西相信只要是涉及到录入身份证这环节都是要求加上校验。校验分两种，一种是接入公安信息库，这样子得出来的结果肯定是非常准确的，另一种是通过位数+尾数+出生年月日校验，得出一个能满足绝大多数用户的校验。可能看完开头这一段话就有人反驳，为啥不做地区校验。如果你提到地区校验那说明你还是对身份证的生成有一定的了解的，但是也不是了解的很透，接下来我就讲一下为啥不能用地区校验。做过功课的人应该知道，我国有34个省、直辖市和特别行政区，这34个地区在身份证上是前两位，然后3到4位是地级市，5到6位是县级
2020-12-11 17:52:19
661
原创 V8垃圾回收机制
一、浏览器里垃圾是如何产生的 在阐述这个问题之前我们先来看一段代码：window.test = new Object();window.test.a = new Unit16Array(100); 在这段代码里，我们在window上添加了一个test属性，并在堆中创建了一个空对象，这个空对象指向window.test属性。然后我们又在堆中创建了一个长度为100的数组指向window.test.a属性。这个时候的内存分布如图所示： 我们可以看到，栈中保存了指向 wi...
2020-11-03 20:21:57
491
1
原创 现代浏览器工作原理（三）——渲染流程
渲染流程就是浏览器展示页面的流程，在这个流程里，浏览器通过获取到服务端返回的HTML、CSS和JS等静态资源进行处理并展示出页面，这里经过的流程按时间线分的话有：构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成，是为一个渲染流水线。其中面试的时候经常会问到的回流（重排reflow）和重绘（repaint）也是出在这个渲染流程里，下面来逐个步骤的说明讲解。一、构建DOM树我们...
2020-04-02 15:41:09
1521
原创 现代浏览器工作原理（一）——浏览器进程
一、序言其实做了两年前端，一直都是从代码和网络方面考量问题，一直都没有考虑过跟用户打交道最近的其实是浏览器。浏览器这个东西怎么说呢，从刀耕火种时代的ie浏览器，到代表现代先进的chrome浏览器，浏览器的整个架构发生了翻天覆地的变化。本章我就来讲一下浏览器内核进程和架构的变化。二、进程、线程的概念在讲之前，先来看一下会提到的两个概念，进程和线程。我们知道，ie浏览器其实是单进程的浏览...
2019-09-09 21:35:54
2826
原创 数据结构与算法的重温之旅（十一）——桶排序、基数排序和计数排序
今天要讲的三个算法都有一个共同点，与之前讲的排序算法不同，之前讲的算法都是基于比较的，而这里讲的排序算法都是基于非比较的，不涉及元素之间的相互比较。它们的算法时间复杂度是O(n)，由于这三个排序算法的时间复杂度都是线性，所以也称为线性排序。下面来讲讲这三个算法的思想和实现。一、桶排序（Bucket sort）桶排序，顾名思义，核心思想是将要排序的数据分到几个有序的桶里，每个桶里...
2019-08-08 21:18:35
397
原创 数据结构与算法的重温之旅（番外篇1）——谈谈斐波那契数列
在讲斐波那契数列之前，我们先回顾一下之前在第一篇文章讲复杂度分析里，谈到时间复杂度的时候，讲到时间复杂度有七种，分别是O(1)，O(logn)，O(n)，O(nlogn)，O(n^2)，O(2^n)，O(n!)。前面五种的话其实很容易写出对应的算法来实现相应时间复杂度。比如O(1)时间复杂度在数组的下标取值，链表的插入和删除都是这个时间复杂度；O(logn)时间复杂度可以通过二分查找来实现，二分查...
2019-07-25 11:10:24
311
原创 数据结构与算法的重温之旅（十）——归并排序和快速排序
上一节讲到了冒泡排序、插入排序和选择排序，这次进阶讲归并排序和快速排序。一、归并排序（Merge Sort）归并排序其实从字面上就能知道是什么意思，先讲数组切分两半，然后对剩余数组继续切割，直到不可再分割的时候两两比较排序，一块一块的合并成一个数组，这样就变成有序了。如同所示：归并排序使用的就是分治思想。分治，顾名思义，就是分而治之，将一个大问题分解成小的子问题来解决。小的子问题解...
2019-07-24 21:32:27
470
原创 数据结构与算法的重温之旅（九）——三个简单的排序算法
前面的几篇文章讲了一些基础的数据结构类型，这次我们就深入算法，先从简单的排序算法说起。在排序算法中，入门必学的三个算法分别是冒泡排序、插入排序和选择排序。下面就具体讲一下这三个算法的原理和代码实现一、冒泡排序（Bubble Sort）冒泡排序只会操作相邻的两个数据。每次冒泡操作都会对相邻的两个元素进行比较，看是否满足大小关系要求。如果不满足就让它俩互换。一次冒泡会让至少一个元素移动到它应该...
2019-07-04 21:38:41
352
原创 数据结构与算法的重温之旅（八）——递归
接下来讲的是算法是递归。在讲递归前我们先举个递归的例子。在军训中教官可能会喊道让队员叫号，对18号出列，如果队员彼此都不知道别人甚至自己的号码，处于完全随机的排队状态的话，那么这个时候叫号其实相当于一个递归，即当前一个叫号的时候，我知道前一个人和自己的号码。那什么是递归呢？即函数自己调用自己就是一个递归。但是如果函数一直调用自己的话则有可能会出现堆栈溢出导致程序崩溃，所以严格来说，递归除了自己...
2019-06-25 01:01:35
254
原创 数据结构与算法的重温之旅（七）——队列
上一章我们讲到了栈，这次我们来讲队列。其实队列和栈有很多相似的地方，比如它们都是线性表，操作都是受限。区别也是比较明显，队列主要是先进先出，和排队一样，但是栈是先进后出。队列的先进先出这两个操作对应的是入队（enqueue）和出队（dequeue），入队是从队尾插入一个元素，出队是从队头使一个元素出队。队列的概念很好理解，基本操作也很容易掌握。作为一种非常基础的数据结构，队列的应用也非常...
2019-06-25 01:00:52
236
原创 数据结构与算法的重温之旅（六）——栈
栈从定义上来讲，是一个操作受限的线性表。栈只支持从一端存入数据和删除数据，即先进后出。先进后出是典型的栈的结构特点，很多实例都有应用到栈的特点来实现，比如浏览器的前进后退功能。栈对比前面所讲的数组和链表，功能上受限了很多，只支持在一段存入数据和删除数据，但是也比他们容易维护，由于只是在一端存入和删除数据，所以数据不会容易出错。栈从实现上可以用数组和链表来实现，数组实现叫顺序栈，链表实现叫链式栈...
2019-06-05 21:04:27
178
原创 数据结构与算法的重温之旅（五）——如何运用链表
上一篇文章可能讲了太多偏向理论的东西，现在就利用理论来实践一下。本文精选了八道经典的链表实际运用的问题。如果现在都还不能手写一个链表的话建议去上一章按照示例代码重复几遍。一、单链表实现回文字符串问题什么是回文字符串呢？即正着读反着读都一样，比如abbba这个字符串就是一个回文字符串。那如果在面试中别人问了这个问题该如何通过链表来解决了？请大家思考一段时间，想好之后再看下面答案：cla...
2019-06-04 17:31:28
159
原创 数据结构与算法的重温之旅（四）——链表
一、链表概念还记得上一篇文章中数组的概念吗，其实数组和链表都是线性表的一种，不过数组与链表有一点不同的是，链表是不需要连续内存空间来存储，它通过指针将一组零散的内存块串联起来使用。链表它的结构五花八门，常用的三种链表结构分别是单链表、双向链表、循环链表和双向循环链表。首先我们先将最简单的单链表。二、单链表上面有讲，链表是通过指针将一组零散的内存块串联在一起，其中这个内存块我们称之为链表...
2019-05-25 13:55:32
376
原创 数据结构与算法的重温之旅（三）——数组
本系列所有文章的代码都是用JavaScript实现，之所以用JavaScript实现是因为它可以直接在浏览器宿主中运行代码，即在浏览器中按f12打开控制台，选择console按钮，在下面空白的文本框把本例的代码黏贴上去回车即可运行。方便各位同学学习和调试。一、前言数组这个概念相信各位同学在日常写代码的时候肯定会经常用到，我们通常用数组作为容器来存储数据。基本上每一种编程语言都有这种数据...
2019-05-23 01:20:19
197
原创 数据结构与算法的重温之旅（二）——复杂度进阶分析
一、前言上一篇文章主要是初步的入门了复杂度分析，包括讲了大O表示法、时间复杂度、空间复杂度和他们的复杂程度O(1)O(1)O(1)、O(logn)O(logn)O(logn)、O(n)O(n)O(n)、O(nlogn)O(nlogn)O(nlogn)、O(n)O(n)O(n)、O(n2)O(n^{2})O(n2) 、O(2n)O(2^n)O(2n)、O(n!)O(n!)O(n!)等，那么本章则进...
2019-05-22 01:09:41
190
原创 数据结构与算法的重温之旅（一）——复杂度分析
最近刷leetCode刷到后面medium级别的题目的时候就越力不从心，于是乎去极客时间那里买了一门数据结构与算法的课来学习一下，本刊是记录自己在这门课程的笔记，如有错误，劳烦勘正。在讲解复杂度分析之前，我们先要知道为什么我们写程序的时候需要算法与数据结构。可能有些人觉得自己随便撸一段代码，保证业务流畅运行不报错就可以了，其实这样的认知是十分肤浅的。你目前的解决方法只是解决了你目前测试当中所遇...
2019-05-21 01:25:57
236
原创 leetCode第十四题，最长公共前缀(Longest Common Prefix)，JavaScript实现
本文章的代码存放在GitHub上，点击地址即可查看源码：最长公共前缀 下面刷题刷到第十四题，最长公共前缀。先来看看题目： 这道题里我们的函数会接收到一个字符串类型的数组，然后在这些字符串中找到公共的最长前缀。乍一看直接双重for循环撸就完事了。不过嘛除了双重for循环，我们可以用到双指针来求解。 我的解法思路是这样的，首先判断第一个元...
2019-05-18 21:21:12
452
原创 leetCode第十二题和十三题，整数与罗马数的相互转换，JavaScript实现
本文章的源码存放到github上，感兴趣的可以去查看：罗马数转整数、整数转罗马数 讲到整数与罗马数相互转换这道题，其实这道题在读大学的时候做acm也是一道经典的题。为了容易理解，我先从第十三题罗马数转整数这道题开始讲起。 首先第十三题的题目是这样说的： 下面的示例是这样的： 第一眼看其实就能看出这道题的一种解题方...
2019-05-18 16:24:14
279
原创 leetCode第九题，回文数（Palindrome Number），JavaScript实现
本文章的代码已上传到GitHub，地址是回文数，喜欢的老铁点个赞，谢谢合作。 今天刷的题目是算法题里最简单的回文数，题目如下所示： 在不考虑进阶的情况下，可以通过将整数转换成字符串，利用字符串在JavaScript里的特性可以很快的得出结果。方法是遍历字符串的前一半字符是否等于后一半的字符，方法如下： 如果是单纯的转换字符串的...
2019-05-14 00:26:19
331
原创 leetCode第七题，整数反转（Reverse Integer），JavaScript实现
leetCode的第七题可以说是十分容易就能解决的，但是不知道为什么通过率才36%。。。我们先看看题目 其实这道题的话只要一开始先比对一下输入的数是否超过范围，有的话就返回0，没有的话就返回反转后的数，我的代码实现如下： 然后我试了一下答案里运行时间是80ms的代码，发现也只是比我快4ms，都不知道leetCode是如何算时间的。。。...
2019-05-13 00:40:56
279
原创 leetcode第一题，两数之和(Two Sum)，JavaScript实现
好好学习，天天向上。不会算法和数据结构的前端不是一个好前端，为了能够让自己的能力得到更多的提升，小弟开始入坑了leetcode的刷题之旅，为日后升职加薪或者跳槽提供更多的能力基础。 闲话少说，开始leetcode的第一题，在讲第一题之前，先了解一下该题。 该题的题目描述是在一个数组里寻找两个数，如果两个数加起来等于目标值的话则返回他们的下标。...
2019-05-12 13:42:29
373
原创 详细讲解vue.js里的父子组件通信（props和$emit）
在进入这个话题之前，首先我们先来想一下在vue里，如何写一个父子组件。为了简单起见，下面的代码我都没用脚手架来构建项目，直接在html文件里引入vue.js来作为例子。父子组件的写法如下：<div id="app"> <parent></parent></div><script src="node_modules/vue/d...
2018-06-05 01:34:03
1691
原创 es6新特性之解构
在es6之前，如果我们想把一个对象或者一个数组里的某个值存储到某个变量里，我们通常是这样做的：let object = { a: 'aaa', b: 'bbb'}let a = object.a, b = object.b 但是这样做有一个问题，就是如果这个对象有很多个属性，我们要拿很多个属性的变量来存储的话，那就要写很多个变量，非常的繁琐。在es6里
2018-01-10 01:10:44
505
转载 验证数字的正则表达式集
验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数：^\+?[1-9]
2018-01-09 17:55:56
257
原创 在AngularJs中解决[$compile:multidir]错误和[$compile:tplrt]错误
首先先贴这两种错误情况的图： 第一种情况表明的是多指令编译错误，出现这个错误的原因是directive里的第一个参数的名字和所替换的模板的名字发生冲突，解决的办法是改个名字。如我在主页面要引入的模板是这样的：ng-controller="leftmenu"> 模板的文件名是leftNav.html，而配置模板的js文件是这样写的
2017-10-24 20:50:34
4935
原创 ie6下如何使得广告窗口不会因为滚动条的滚动而移动
在现实中，网站为了赚钱肯定会有广告，这些广告无论你的滚动条怎么移动都不会移出你的可视区，你总是可以看见这些广告。其背后的原理是通过position的fixed来进行定位的，这种办法除了广告栏，一些导航栏也这样子使用。但是，如果万恶的客户或者老板叫你兼容ie6的情况下，要如何实现呢？ 首先要提的是，在ie6下，fixed就变没用了，即使你定好了top和left，它都依然在左上角，并
2017-10-16 16:52:15
416
转载 userAgent大全
一、基础知识篇：HttpHeader之User-AgentUserAgent中文名为用户代理，是Http协议中的一部分，属于头域的组成部分，UserAgent也简称UA。它是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标识，用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计；例如用手机访问谷歌和
2017-10-16 16:40:47
6218
原创 JavaScript中documentElement和body的区别及jQuery中实现兼容的原理
在浏览器里documentElement是一个只读属性，返回的是document节点下的子节点，一般是html。而document.body返回的是body。这两个东西在用到获取浏览器的scrollTop等应用时会发现一些不同，下面代码放到有滚动条的页面运行，当你滚动滚动条的时候，看看火狐、谷歌和ie浏览器到底得出什么样的结果。如：console.log(document.document
2017-10-16 11:20:14
2001
原创 对拖拽的高级应用，实现自定义滚动条
下面的自定义滚动条实现了三个功能，一个是对鼠标滚动的监听，一个是对鼠标拖动的监听，最后一个是对鼠标点击的监听，基本上实现了现代浏览器的滚动条功能。 #parent{ width: 15px; height: 500px; background: #ccc; position: relative; margin: 10p
2017-10-15 17:06:53
746
转载 js禁止拷贝等方法
禁止鼠标右键：oncontextmenu="return false"；禁止选择：onselectstart="return false"；禁止拖放：ondragstart="return false"；禁止拷贝：oncopy=document.selection.empty() 。禁止复制：oncopy = "return false"；禁止保
2017-10-14 16:30:27
1086
原创 对拖拽的高级应用，实现带框拖拽
本文将对我上篇JavaScript拖拽进行添加特效，实现类似windows7系统那样带框的拖拽。如果有疑问的话先看我上一篇文章JavaScript实现拖拽。本文主要细讲如下实现这特效的细节。 在JavaScript中我们要实现一个带框的拖拽的话，其实这个框本身也是一个div元素，而这个div元素是我们动态生成的。要想让这个框会动，首先我们对它的定位动手，在css中新设一个id，让
2017-10-14 14:14:37
587
原创 JavaScript中，四种事件绑定方法及attachEvent与addEventListener的区别
我们在对事件进行绑定的时候，除了常用的对元素对象后面通过点加属性来事件绑定，如：a.onclick = function(){ //code} 我们还能通过attachEvent和addEventListener来进行事件绑定，这两个方法是有区别的，前者的这个方法是用在ie6到8的浏览器那里，而后者的方法是用在除了ie6到8的其他浏览器里。这两个方法对于浏览器的兼容来说
2017-10-14 12:15:38
1095
原创 JavaScript实现拖拽和解决部分bug
一般来说，实现拖拽的话，拖拽的基本功能是你对某个想要移动的元素进行点击，点击后按住不放进行移动，该元素就会跟着你的鼠标移动，当你把鼠标一松开，则该元素就会定格在那里。一般的实现这个功能要注意两个地方，一是该元素必须是绝对定位，因为绝对定位脱离了文档流，才能够随意的移动；二是如何能够很好的获取移动的坐标，我们获取的坐标是鼠标移动的坐标减去鼠标在该元素距离边框的坐标，比如说我们点击了该元素的中心位置，
2017-10-12 16:59:23
2843
原创 js的element中，属性以scroll、client和offset为前缀的属性的区别
下面提的Height和Width是基于W3C标准的。 首先提的是clientHeight和clientWidth属性，这个属性返回的值是该属性作用的元素的高度+上下内边距-滚动条宽度或者宽度+左右内边距-滚动条宽度，不包括边框、外边距和滚动条。但是在ie5却不是这个结果。ie5的clientHeight和clientWidth等于该元素的高度减上下边框减滚动条宽度或者宽度减左
2017-10-11 20:41:40
574
原创 JavaScript类型转换
在JavaScript中，类型转换是无时无刻的存在的，下面先从简单开始，然后深入探讨这个问题。 首先是其他类型转换成布尔类型。在JavaScript中，如果一个变量的值为false、undefined、null、0、0.0、NaN和字符串长度为0的时候，转换成布尔值时得到的是false，如果是其他对象的话转换的是true。如：var a,b,c,d,e,f,g,h,i
2017-10-07 16:24:58
524
原创 浅谈js里的attributes和与之相关的一些属性
在前端里，想要对静态的HTML变得更加的动态，就必须要对HTML的dom进行操作，dom犹如一个树，树的最底层是文档节点，这个节点顺着上来就到了html节点，也就是根节点。这个根节点有两个分支，一个是body，另一个是head。head里面有很多个子节点，必须要有的是title节点，其他常见的有meta、style、link等，而body里面也有无数个节点。就拿body里面的p节点来讲，里面就有文
2017-10-07 12:16:29
8227
原创 innerHTML、innerText和outerHTML的区别
在JavaScript里，innerHTML和innerText的主要区别是innerHTML能够把作用元素内的所有内容包括标签都能输出来，而innerText只能输出文本内容，不能输出标签。举个例子，下面的这个例子div标签下有一个文本，这两个方法都能输出haha，但是如果div标签里多一个p标签的话，那么会体现出他们的不同： haha var a = document.getEle
2017-10-07 11:33:48
469
原创 在浏览器上画图（canvas的基本用法）
在HTML5里，我们可以通过canvas标签来在浏览器里进行画图，但是这个标签并不是能画图的，画图还是要通过JavaScript，这个标签只是一个载体。在canvas这个标签里，默认的width是300,、height是150，想要设置canvas的长宽的话需要在canvas的width属性和height属性那里设置，这个width和height不属于style里的，搞清楚这一点很重要，所以当你在
2017-10-05 13:41:32
3692
原创 如何让ie8及之前的浏览器兼容HTML5新标签和自己设定的新标签
在所有的浏览器里，如果遇到不能识别的未知元素时，就会把这个元素当做行内元素来处理。这个时候，若是一些不支持HTML5语义化标签的浏览器（IE另讲）或者我们新设了一些新的元素（如），我们可以通过在css中，定义它的样式。如语义化标签：header, section, footer, aside, nav, main, article, figure { display: block;
2017-10-05 11:13:36
643
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人