- 博客(32)
- 收藏
- 关注
RSS订阅原创 van-tree-select实现全选功能
van-tree-select实现全选功能建立一级分类和二级分类id对照表，方便后续操作各个id //前提：全部选项的id与一级分类id一致且id长度与二级分类不相同并具备前三个字符相同的规律（后面算法实现的基础） data=[{id:101,text:一级分类，children:[ {id:101,text:'全部'}, {id:101001,text:'二级分类1'}, {id:101002,text:'二级分类2'}] //建立本地一级分类与二级分类的Id对照表减少
2021-08-27 15:28:17
1597
原创 Vue源码学习之核心目录分析
在 github下载Vue源码后在本地编辑器打开src文件夹：compiler目录 包含了 Vue.js 所有编译相关的代码。它包括把所有模板解析成 ast 语法树， ast 语法树优化，代码生成等功能。core目录 包含了 Vue.js 的核心代码，包括内置组件，全局API封装，Vue 实例化，观察者，虚拟DOM, 工具函数等等。（1）components 包含抽象出来的通用组件。...
2020-04-30 10:48:12
342
原创 2020年前端开发常见面试题总结
以下内容都是我在牛客网参考各个大佬的前端面经以及自己面试过程中遇到的问题总结出来的一些题目，有一些问题在我的原创博客中已做了总结，没有附答案的问题后续会持续总结，欢迎关注。
2020-04-27 11:12:21
838
原创 算法：在树中查找某个结点并返回该节点路径（js实现）
给定一个树，给定一个节点id，返回从root到该节点的path、以及该节点的所有叶节点id
2020-04-24 02:05:47
3472
原创 Vuex状态管理总结
可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。再将这个对象放在顶层的Vue实例中，让其他组件可以使用。那么多个组件就可以共享这个对象中的所有变量属性了；这也是跨组件的通信方式之一。
2020-04-19 13:48:48
427
原创 了解Vue的虚拟dom及diff算法
vue框架里面的两大核心，虚拟dom和数据双向绑定原理，数据双向绑定原理已经在我的另外一篇博客中详细介绍了，本文来了解一下虚拟dom以及与虚拟dom难离难舍的diff算法。
2020-04-18 22:10:01
708
原创 vue数据双向绑定原理及简单实现
数据双向绑定是vue的核心特性，是MVVM模式的体现。一句话概括的话就是：通过 Object.defineProperty( ) 方法劫持数据并结合发布订阅者模式的方式来实现数据的双向绑定
2020-04-18 15:42:32
594
原创 从输入url到加载完页面发生了什么？
我愿称之为绝杀面试题，计算机网络方面的知识甚至浏览器的渲染机制，同时考察知识面的广度和深度，面试官问这一个题就足以探清你这方面知识的掌握情况。另一方面了解这其中的细节，对于前端优化来说也至关重要，本文也只能尽自己所了解到的进行总结。
2020-04-17 23:02:24
3952
原创 TCP三次握手、四次挥手过程详解
为什么“握手”是三次，“挥手”却要四次？为什么客户端在TIME-WAIT阶段要等2MSL?如果只有两次握手会发生什么？如果已经建立了连接，但是客户端突然出现故障了怎么办？看看详解吧！
2020-04-17 14:07:39
6482
原创 TCP和UDP的区别及应用场景
TCP和UDP是OSI模型中的运输层中的协议，TCP提供可靠的通信传输，而UDP则常被用于广播提供面向无连接的通信服务TCP： 传输控制协议，是一种面向连接的可靠传输协议。UDP： 用户数据报协议，是一种非面向连接的不可靠传输协议。一、TCP和UDP的区别 （这里不讨论安全性，UDP稍微安全些）1、TCP面向连接（即传送数据前要先建立连接）; UDP是无连接的，即发送数据之前不需要建立...
2020-04-17 10:26:33
2175
原创 HTTP强缓存与协商缓存详解
浏览器缓存在前端性能优化是个非常重要的点，第一次接触强缓存和协商缓存的概念的时候也是一头雾水，经过一轮面试背诵加理解终于有点感悟，希望以下的梳理对你有一定帮助。
2020-04-16 21:29:18
1313
2
原创 HTTP请求方法及get和post的区别
一、HTTP请求方法根据 HTTP 标准，HTTP 请求可以使用多种请求方法。HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。方法描述GET请求指定的页面信息，并返回实体主体HEAD类似于 GET 请求，只不过...
2020-04-16 12:53:57
1002
原创 js中的函数柯里化思想
柯里化： 是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。面试中嘴jian，提了一下函数柯里化思想，面试官反问我函数柯里化有哪些应用场景，回答了只知道bind的内部实现，还好面试官说在实际工作中也不常用，问题不大。不过名字叫得这么高大上，还是了解一下比较好。概念过于抽象，看下面例子马上理解：// 普通的add函...
2020-04-16 00:17:21
320
原创 ES6新特性的简单总结
ES6 既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。一、变量扩展1. let和const命令let用来声明变量，它的用法类似于var。const声明一个只读的常量。一旦声明，常量的值就不能改（当const声明的常量为引用类型时只保证...
2020-04-15 14:23:44
451
原创 CSS3新特性简单总结
CSS3CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。1. 选择器2. 盒模型box-sizing:pandding-boxbox-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！...
2020-04-14 19:13:59
334
原创 HTML5新特性简单总结
HTML5 是HTML 的最新稳定版本, HTML5 将 HTML 从用于构造一个文档的一个简单标记，到一个完整的应用程序开发平台。除其他功能外, HTML5 还包括新元素和用于增强存储、多媒体和硬件访问的JavaScript APIs (MDN文档定义)
2020-04-14 14:10:43
417
原创 前端性能优化之减少重排和重绘
首先需要了解一下浏览器渲染HTML的大致过程：（1）HTML被HTML解析器解析成DOM Tree, css则被css解析器解析成CSSOM Tree（并行解析）。（2）DOM Tree和CSSOM Tree解析完成后，被合并到一起，形成渲染树（render Tree）。（3）重排：节点信息计算，即根据渲染树计算每个节点的几何信息（大小及位置）。（4）重绘：渲染绘制，即根据计算好的信息绘制...
2020-04-13 23:12:51
2129
原创 js中的原型与原型链的清晰梳理
原型与原型链是js中的重难点，比较难理解和易混淆，希望以下的总结和梳理能让你更进一步的掌握原型和原型链（良心总结）
2020-04-13 17:08:35
304
原创 js的事件执行机制之Event Loop(事件循环)
首先了解一下以下几个概念：JavaScript语言的特点：JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着，于是引入异步任务的概念。同步任务和异步任务：所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asy...
2020-04-13 00:57:47
241
原创 js中的闭包及应用
闭包的定义：函数和对其周围状态的引用捆绑在一起构成闭包（MDN文档中的闭包定义）相关代码帮助理解：//最常见的闭包类型，函数嵌套，子函数引用父函数的变量，形成闭包function init() { var name = 'js; // name 是一个被 init 创建的局部变量 function GN() { // GN为内部函数，与引用的变量name形成一个闭包 ...
2020-04-12 23:29:18
226
原创 js中的节流和防抖的区别及应用场景
函数节流(throttle)和防抖(debounce)：是一种性能优化手段一、函数节流类比生活中的例子。高频率触发某个事件就像一个大开的水龙头，水流源源不断大量流出，就像代码在不断执行。这是对资源的一种浪费。我们要通过节流，把水龙头拧紧一点，让它流水的频率降低，但是每一段时间都能滴下一滴水，从而节省资源。节流应用场景：用户滚动浏览器滚动条的时候，就会调用后台的接口来更新页面上的某些内容...
2020-04-12 20:47:52
1737
2
原创 js中call、apply和bind的介绍(区别)及实现
js中call、apply和bind主要用于改变调用函数(或方法)中this的指向区别：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。bind()方法的用法和call()方法类似，区别就是bind()不会立即执行，可二次传参后再执行。一、call、apply和bind的介绍(1) Funct...
2020-04-12 15:56:33
975
原创 js实现数组扁平化方法总结
数组扁平化：将多维数组变为一维数组arr = [1,2,[3,[4,5]]]经扁平化处理后变为:arr = [1,2,3,4,5]1、arr.some+concat 实现数组扁平化实现原理：some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。…arr(es6展开运算符)：[1,2,[3,4]] => 1,2,[3,4]...
2020-04-12 14:18:12
249
原创 js高阶函数之用reduce实现map
加深对高阶函数reduce和map实现原理的理解高阶函数：函数中可以传入另一个函数作为参数的函数map介绍map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。语法：var new_array = arr.map(function callback(currentValue, index, array) { // 返回新数组的元素},this...
2020-04-12 12:04:23
771
原创 js中的继承及优缺点
《JavaScript高级程序设计》提到了6中继承方式：一、原型链继承function Parent(){ this.name = 'CC';}Parent.prototype.getName = function(){ console.log(this.name);}function Child(){}//核心：子类的原型对象指向父类的实例Child.prot...
2020-04-11 15:24:16
274
原创 js中this的指向问题
js中this的指向问题常见的大概有以下几种情况：全局作用域、普通函数以及定时器中的this指向全局对象window方法中的this指向的是调用它的对象构造函数中的this指向构造函数的实例箭头函数中没有绑定this，this为最近外层作用域下有定义的thiscall、apply、bind可改变this指向对以下代码进行说明，加深理解：全局作用域、普通函数以及定时器中的thi...
2020-04-11 13:42:09
367
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人