- 博客(93)
- 收藏
- 关注
RSS订阅原创 最小覆盖子串
/** * 解题思路 * - 包含所有的包含 T 的子串 * - 找出长度最小的那个字串，返回即可。 * * 解题步骤 * - 用双指针维护一个滑动窗口。 * - 移动右指针，找到包含 T 的子串，移动左指针，尽量减少包含 T 的子串的长度. *//** * @param {string} s * @param {string} t * @return {string} */var minWindow = function(s, t) { let l = 0, .
2022-05-31 14:13:07
214
原创 V8执行原理和优化策略
V8执行原理和优化策略浏览器内核Gecko: 早起被 Netscape 和 Mozila firefox 浏览器使用。Trident: 微软开发，被 IE4~IE1 浏览器使用，但是 Edge 浏览器使用 Blink.Webkit: 评估给予 KHTML 开发、开源的，用来Safari、Google Chrome 之前也是使用的。Blink: 是 Webkit 的一个分支，Google 开发，应用于 Google Chrome、Edge 、Opera。浏览器内核主要是负责浏览器的排版引擎，也称
2022-05-18 13:52:15
452
原创 V8垃圾回收机制
垃圾回收垃圾回收分为手动回收和自动回收两种策略。js 需要垃圾回收吗？js 不像 java，c 对内存的管控可以自己来操作，不需要就可以通过 free 就释放即可。何时分配，何时销毁内存都是由代码来控制的。如果创建了内存，而没有进行 free 回收。这种情况就被称为内存泄露。js 中如何回收js 的数据的存放是存储在栈和堆两种内存空间的。 自然，也就分为栈中的垃圾回收和堆中的垃圾回收。栈中垃圾回收function foo() { var name = '小明'; function
2022-05-18 11:40:58
209
原创 从V8来看数组动态扩容以及对数组的优化
V8对数组的优化在 c++、java 中的数组的特点是：是通过在内存中划分一串连续的、固定长度的空间。来存放一组有限的并且是相同类型的数据结构。js中的数组var arr = [100, 12.3, 'a', function () {return 1}, {a: 1}];arr[arr.length] = '12334';arr.length = 1;js 中的数组可以存放任意的类型。 可以动态的来给数组修改长度。支持任意的类型。js数组可以动态的的改变容量，根据数组的数据来扩容、
2022-05-18 11:35:06
562
原创 利用栈来解决博客目录生成
在开发博客项目中，需要使用 markdown 生成了对应的文章，生成文章之后提取出来 h1 和 h2 标签来组成对应的目录结构。示例 1:输入: ['H1', 'H1', 'H2', 'H2', 'H2', 'H1', 'H2']输出: [{tag: 'h1', children: [{}, {}, {}]}, {tag: 'h1', children: []}] 解题思路：使用栈结构，stack 来进行存放 h1 标签。 使用另一个栈 o_stack 来保存当前所处的 h1 标签
2022-05-15 13:35:31
138
原创 vue源码--$set/$delete
$set用法set 是全局 Vue.set 的别名。set(target, propertyName/index, value)作用Vue 中对于对象新增的属性或者是数组新增的下标都是不能够监听到的，为了保障新的属性同样是响应式的，且触发视图更新，需要借助 this.$set 来新增属性。对象不能是 Vue 实例或者是 Vue 实例的根数据对象。原理// src/core/observer/index.jsfunction set (target: Array<any> |
2022-04-25 22:46:55
212
原创 Vue源码---$nextTick
$nextTickvm.$nextTick(callback)用法在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后使用它，然后等待 DOM 更新。2.1.0 ，如果没有提供回调且在支持 promise 的环境中，则返回一个 promise。原理Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 会开启一个事件队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到事件循环队列中一次。在缓冲时去除重复数据对于避免不必要的计算和
2022-04-24 22:44:36
610
原创 Vue 模版编译
模版编译如何识别用户自己定义的模版，也就是 标签中类似于原生 HTML，还会有一些变量插值，或一些 Vue 指令，如 v-on、v-if 等。这些不属于元素的语法，归功于 Vue 的模版编译。把原生 HTML 提取出来，把非原生 HTML 找出来，经过一系列的逻辑处理生成渲染函数，也就是 render 函数。抽象语法树 AST如何将 template 中的一堆字符串解析为元素标签、属性、变量。需要借助抽象语法树.模版解析阶段：使用正则的方式解析成抽象语法树 AST。优化阶段：遍历 AS
2022-04-23 22:35:36
1347
原创 vue--虚拟DOM
虚拟 DOM虚拟DOM是什么?虚拟 DOM 就是用一个 JS 对象来描述一个 DOM 节点。<div class="a" id="b">我是内容</div>{ tag: 'div', attrs: { class: 'a', id: 'b' }, text: '我是内容', children: []}Vue为什么采用虚拟DOM，而不直接操作真实DOM呢？Vue是数据驱动视图，数据发生变化视图就
2022-04-22 21:50:35
422
原创 Vue响应式原理
响应式原理口述Vue 的响应式是通过 Object.defineProperty 进行数据劫持 + 发布订阅模式 进行依赖收集及更新实现响应式。通过递归的形式将 data 数据（函数/对象）将数据变为可监测的，在 new Vue 初始化 Vue 实例的时候，通过创建一个 Watcher 实例（依赖），进行解析模版中（template）用到的数据，会触发 getter ，每一个对象里面都通过闭包的形式保存一个 Dep 实例（依赖收集者）, Dep 会去收集全局的 Watcher 实例，这样就可以在数据改
2022-04-21 18:34:42
1372
原创 继承的方式
继承的方式原型链继承function Person() { this.data = [1, 2, 3];}function Teacher() {}Teacher.__proto__ = Person.prototype;var teacher = new Teacher();teacher.data; // [1, 2, 3];问题：对于引用类型的将会共享。改变之后会引用到父的数据。不能够给父构造函数传值。构造函数继承function Person(d
2022-03-10 22:46:51
244
原创 创建对象的方法
创建对象的方法1. 通过 Object 构造器var obj = new Object();obj.name = 'xxx'obj...问题：需要写大量的重复代码2. 字面量创建var obj = {};obj.name = 'xxx';问题：需要写大量的重复代码3. 工厂模式function createObj(name, age) { var obj = new Object(); obj.name = name; obj.age = age;
2022-03-10 22:46:37
161
原创 js 事件委托
事件委托定义何为事件委托，事件委托就是我们可以把本身应该在自己身上的事件触发，委托给别的元素上，让它来代替事件触发。原理主要是通过事件冒泡的特性，触发点击事件之后，PC 端的点击事件是由 300 毫秒的延迟的，当前元素触发之后，会一直向上冒泡，直到 document 才会停止冒泡。注意：任意一层阻止冒泡将会停止。好处当我们有大量的子元素，我们为了点击它，需要在它的身上都加上一个点击事件，知道个数还好，假如我们不知道个数，想绑定事件都没法绑定。所以我们需要借助它的父亲来实现点击事件。只需要指定
2022-03-09 19:30:12
141
原创 instanceof
instanceof定义obj instanceof Constructor; 我们用 instanceof 来检测 Constructor.prototype 是否存在于参数 obj 的原型链上。使用function Person() {};var person1 = new Person();person1 instanceof Person; // true;person1 instanceof Object; // true我们可以看到 person1 同时还属于 Object 类
2022-03-09 19:29:37
99
原创 toString
toStringtoString 可以用来判断数据类型. 可以把它看作是 typeof 的加强版，因为它不仅可以检测原始类型，还可以区分 object。[[Class]]我们需要先来说一下 [[Class]] 这个内部属性（只要是 [[]] 都是 js的内部属性，是不能够直接访问的），你不要认为它是与类有关系的内部属性，你可以把它看作是一种分类的方法。我们可以间接地通过在这个值上借用默认的 Object.prototype.toString() 来调用展示。Object.prototype.toSt
2022-03-09 19:29:01
229
原创 ie最小高度
ie最小高度chrome 下最小字体为 16px，而 ie 下最小高度为 12px如果设置一个盒子的话，设置盒子的高度，ie 下最小高度为 19px；我们想要设置更小的高度的话，需要给盒子的父盒子设置 font-size: 0;即时可以设置宽度， ie 下也设置不了 0px。...
2022-03-08 18:43:50
102
原创 移动端禁止默认行为
全面禁止默认行为在移动端上，文字默认会被选中，会使用浏览器默认的滚动条，有默认的右键菜单。那么怎么才能禁止呢?禁止方式document.addEventListener('touchstart', function (ev ) { ev = ev || event; ev.preventDefault();})这样子就可以了，那么怎么才能知道是否可以阻止默认事件？ev.cancelable;那么我们阻止了默认行为，怎么才能单独的使用？如果我们不想在 document
2022-03-08 18:43:13
478
原创 实现1物理像素
实现1物理像素我们写的1css像素都会跨越好几个物理像素，并且显示出来是按1像素的。那我们怎么实现1物理像素。(淘宝实现)通过缩放(function () { var dpr = window.devicePixelRatio || 1; const styleNode = document.createElement('style'); let size = document.documentElement.clientWidth * dpr / 16; styleN
2022-03-08 18:42:32
159
原创 移动端事件点透
事件点透当我们有一个遮罩，遮罩下面有一个 a 标签，当我们点击遮罩，当遮罩消失，a 标签也会相应点击跳转。事件问题PC 端事件可以在移动端触发。 移动端不会在 PC 端触发。PC 端事件有 300 毫秒的延迟。移动端事件不会有延迟。这就是造成点击遮罩之后，触发 touchstart 事件，遮罩消失，然后等了 300毫秒之后，会点击 a 标签，进行跳转。怎么防止点透问题。重写 a 标签跳转功能。var aNodes = document.querySelectorAll('a
2022-03-08 18:42:05
225
原创 移动端常见问题
移动端常见问题号码在移动端上的数字和邮箱点击会进行拨打电话和开启邮箱。解决方法：禁止<meta name="format-detection" content="telephone=no, email=no">那么想要使用的话怎么启用呢?<a href="tel:110">13182031</a> <a href="mailto:1311110231@qq.com">1311120@qq.com</a>链接按钮高亮&
2022-03-08 18:41:30
170
原创 移动端适配方式
适配方式rem 适配(function () { var styleN = document.createElement("style"); var width = document.documentElement.clientWidth/16; styleN.innerHTML = 'html{font-size:'+width+'px!important}'; document.head.appendChild(styleN);})();优点：使用了完
2022-03-08 18:41:08
96
原创 meta视口
meta视口meta 视口的目的就是让布局视口和理想视口尺寸匹配。值width: 设置布局视口的宽度和特定的值。width 是用来改变布局视口的。可以设置为具体的值 width=400init-scale: 设置页面初始缩放程度和布局视口的宽度。初始缩放程度。1代表100%，2代表200%。缩放程度根据理想视口计算的。initial-scale=1视觉视口尺寸和理想视口的尺寸一样。initial-scale=2视觉视口的宽度是理想视口的一半。minimum-scale: 最小缩放程度.
2022-03-08 18:40:02
361
原创 h5移动端概念
移动端概念像素像素就是计算机屏幕能够显示一种颜色的最小区域。屏幕上的像素越多，就能够看到的越多。物理像素（设备像素） , 设备的分辨率就是物理像素，单位是 px。css 像素 我们在页面布局时用的 px 就是 css 像素。物理像素 和 css像素在旧的屏幕上，当缩放程度为 100% 时，一个css响度等于1个物理向度。屏幕上的像素越多，同一时间看到的就越多。自动 iphone公司推出的高清屏，在高密度屏幕上，一个 css 像素可以跨越多个设备像素。设备尺寸相同但像素变得更
2022-03-08 18:39:27
1713
原创 js 防抖
防抖开发中，经常会遇到一些频繁触发的事件。应用场景window: resize、scrollmousemove、mouseodownkeyup, keydown我们会明明鼠标只是移动一次，可能就会触发五六次。如果我们请求数据，1次就会请求这么多次，多么的浪费带宽。我们需要借助一些工具，使得我们能够控制触发的频率。防抖防抖就是我们的事件触发只会 n 秒后触发一次，如果你在事件触发当中，又触发了事件，事件的最终触发触发事件将会延迟到最后一次触发的 n 秒之后触发。实现原理原理就是：第一次
2022-03-08 18:38:03
267
原创 详解 this
this 指向如果我们将环境传入function foo(context) { return context.toUpperCase();}function bar(context) { return context + '欢迎';}foo(环境1);bar(环境2);我们使用 thisfunction foo(context) { return this.toUpperCase();}function bar(context) { return t
2022-03-07 17:14:55
183
1
原创 实现 new
new我们使用 new 来创建一个我们定义的对象类型的实例或者是内置构造函数的实例。版本一function new() { // 生成的实例 var obj = new Object(); var Constructor = [].shift.call(arguments); // 改变原型 obj.__proto__ = Constructor.prototype; // 执行构造函数 Constructor.apply(obj, argume
2022-03-07 17:14:25
59
原创 bind实现
bind我们使用 this 容器丢失绑定，使用 bind 可以一次性绑定，并且不会有丢失绑定问题。第一版本我们需要返回一个新的函数，新的函数(用来绑定的).if (!Function.prototype.bind) { Function.prototype.bind = function (context, ...args) { return (...Nargs) => { return this.apply(args, Nargs);
2022-03-07 17:13:54
190
原创 js 执行栈
执行栈js 中可执行的代码有哪几类呢？怎么的代码才算是符合规范的。当 js 执行全局代码的时候，会编译全局代码并创建全局上下文，全局执行上下文是只有一个的。当执行函数的时候，会编译函数中的代码，然后创建函数上下文，函数执行完成之后，上下文就会被销毁。执行 eval 函数的时候，eval会被编译，并创建 eval 上下文。执行上下文我们写的函数那么多，是如何管理那么多执行上下文的呢？var a = 1;function foo() {}当执行之前，会先编译，创建全局上下文，压入执行栈中
2022-03-07 17:13:23
792
1
原创 js 原型链
原型链js 是一种基于原型的语言，每个对象拥有一个原型对象，对象从原型继承方法和属性。原型对象也可以能拥有原型，并从中继承方法和属性，一层一层，最终构成了原型链。注意：OOP中，首先定义类，此后创建对象实例，类中定义的所有属性和方法都被复制到实例中。而 js 中是通过在实例和它的构造器之间建立一个链接。prototype每一个函数都有一个属于自己的 prototype 属性，它指向一个对象，而这个对象就是实例的原型。原型就是每一个 js 对象在创建的时候与之关联的一个对象。每一个对象都会从原型"
2022-03-07 17:13:05
88
原创 js 类型转换
类型转换让我们思想一个问题，类型转换是邪恶的吗？带着这个问题来看。强制类型转换某些情况下，我们希望将值显示的转换为我们期望的类型。字符串的转换 ToString原始值需要借助内建类型(原生类型), String() 来将一个非字符串类型强制转换为 string , String() 转换的过程是由语言规范ToString 抽象操作处理的。参数类型结果Undefined“undefined”Null“null”Boolean如果参数是 true，返回 “tru
2022-03-07 17:12:16
297
原创 js词法作用域和动态作用域
词法作用域和动态作用域作用域作用域是指程序源代码中定义变量的区域。这些变量存活在哪，我们如何才能找到它们。这样的规则就叫做作用域。词法作用域js 在编译的第一步会进行词法分析（分词），词法作用域就是这么由来，就是在此法分析时被定义的作用域。变量和作用域的块儿在何处被编写决定了它的作用域，可以说作用域是基本固定不变的。var a = 1;function foo() { var a = 2; console.log(a); // 2}console.log(a); // 1
2022-03-07 17:11:37
88
原创 JavaScript 闭包
闭包定义MDN 对闭包的定义为： 闭包是指那些能够访问自由变量的函数。定义：闭包就是函数能够记住并访问它的词法作用域，即使当这个函数在它的词法作用域之外执行时。例子function foo() { var a = 2; function bar() { console.log(a); } bar();}foo();bar 是可以访问 foo 的作用域的，但是不能严格意义来说是闭包，它是在自己当前的词法作用域来执行的。function fo
2022-03-07 17:11:04
270
原创 CSS继承
继承继承需要放到上下文中进行理解。一些设置在父上面的 css 属性向下传递到后代元素。可以被继承的属性字体系列属性font 组合字体font-family：字体系列font-weight: 字体的粗细font-size: 字体的尺寸font-style: 字体的风格font-variant文本系列属性text-aligntext-indextext-transformword-spacing列表相关属性list-style-imagelist-style-posi
2022-03-05 10:46:43
36
原创 清除浮动方法
清除浮动不清楚浮动会造成页面布局的混乱，我们想要做的就是闭合浮动。额外标签法 （隔墙法）.clear {clear: both;}<div> <div></div> <div></div> <div class="clear"></div></div>添加了没有意义的标签，结构化较差。添加的必须是快元素父级添加 overflow 属性<div class="cl
2022-03-05 10:46:13
48
原创 CSS选择器
选择器类型选择器 h1 {}h1 { }通配选择器 * {}全局选择器 。 由 * 带指的， 它选中了文档中的所有内容。* { margin: 0;}更加易读article *:first-child { }类选择器 .box {}.box {}ID选择器 #box {}#box { }标签属性选择器 a[title] {}1. [attr] a[title] {}2. [attr=value] a
2022-03-05 10:45:42
68
原创 margin 重叠
margin 重叠外边距重叠是发生在垂直方向，而不是水平方向。初衷是为了段落美观。发生在块级元素上，不是行内，也不是行内块上。如何重叠块的上下外边距有时会合并为单个边距，其大小为单个边距的最大值。边距折叠。产生的方式有三种情况同一层项链元素之间相邻的两个元素之间的外边距重叠.p:nth-child(1) { margin-bottom: 13px;}p:nth-child(2) { margin-top: 87px;}会选用 87px 作为两个块之间的外边距.
2022-03-05 10:45:12
91
原创 translate 和 绝对定位
translate 和 绝对定位使用 JavaScript 做动画的时候， 为了操作盒子移动，需要给定盒子 position: absolute; 这样子就可以操作盒子的 top、left 了。那么为什么还需要使用 translate 呢？在 PC 端上，我们使用绝对定位来做移动是完全没问题的，也可以使用 translate.因为 PC 上使用绝对定位使用 CPU，触发重排和重绘，浏览器依然可以以每秒60帧来运行，我们肉眼看不出来。但是放到移动端上，触发浏览器重拍和重绘，造成页面的卡顿。使用 t
2022-03-05 10:44:29
499
原创 块格式化上下文 (BFC)
块格式化上下文 (BFC)概念Formatting context(格式化上下文) ，它是页面中的一块渲染区域，并且有自己的一套渲染规则，来决定其子元素将如何定位，以及和其他元素的关系和相互作用。BFC, 块级格式化上下文，属于上述规范的一种。具有 BFC 特性的元素可以看作是隔离了的独立区域，容器里的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。BFC 的内部规则内部的垂直方向，一个接一个放置。垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相
2022-03-05 10:43:59
62
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人