- 博客(68)
- 收藏
- 关注
RSS订阅原创 为什么使用node做中间层
1、适配性提升我们其实在开发过程中，经常会给pc端、mobile、app端各自研发一套前端。其实对于这三端来说，大部分端业务逻辑是一样的。唯一区别就是交互展现逻辑不同。如果controller层在后端手里，后端为了这些不同端页面展示逻辑，自己维护这些controller，徒增和前端沟通端成本。 如果增加了node.js层2、响应速度提升我们有时候，会遇到后端返回给前端的数据太简单了，前端需要对这些数据进行逻辑运算。那么在数据量比较小的时候，对其做运算分组等操作，并无影响。但是当数据量大的时候，会有明
2021-08-31 20:11:41
739
原创 深拷贝解决循环引用问题
var obj = { a: 1, b: null}obj.b = objfunction deep(obj, m = new Map()) { let clone; let Con = obj.constructor; if (Con) { switch(Con) { case RegExp: clone = new Con() break case Date: clone = new Con()
2021-08-04 14:26:18
451
原创 微信小程序坑位总结
最近公司项目使用微信小程序做项目，踩坑3个月，给大家总结一下最近遇到的问题：1、首先说一下npm包的使用点击这里的 ’构建npm即可‘，但是构建之前记得要在工程中先执行npm init命令，否则会报’找不到Rootminiprogram_npm‘之类的错误，这个是比较坑的，大多数新手第一次使用第三方的npm包都会犯这个错误，省的大家百度了。2、小程序的自定义导航栏先来说明一下使用方法：1、 使用npm i weui-miniprogram 命令下载微信官方的ui组件库2、按照官方文档，在a
2021-07-22 16:04:05
1842
1
原创 js继承详解
此篇文章为大家讲解es5继承和es6继承的实现和区别首先我们来看一下es5和es6继承的图，再结合代码来让大家深刻理解左边是es5继承，右边是es6继承代码实现1、es5的继承function F () { this.name = 'f'}F.prototype.test = function () { console.log('ffffff')}function S () { F.call(this)}S.prototype = new F()S.p.
2021-02-26 19:29:51
143
2
原创 生成平衡二叉树
学习平衡二叉树前，先来看看下图废话不多说，直接上代码class TreeNode { constructor (data) { this.data = data this.leftChild = null this.rightChild = null this.parent = null } leftRotate () { let newNode = this.rightChild let grandeNode = newNode.left
2021-01-02 16:17:34
571
原创 记录一次修改Vue源码
我们都知道在vue中直接修改数组下标来修改数据，是不能触发vue的更新机制的，但是当你发现随着项目代码越来越多，你的$set会越来越多，这样会让你的代码可读性、维护性越来越差本次博主就来为大家分享一下，修改vue源码，让vue支持修改下标触发更新function observe (value, asRootData) { if (!isObject(value) || value instanceof VNode) { return } var ob; if (h.
2020-12-25 13:57:03
567
3
原创 new本质与this指向问题
new的本质：1.在内存中创建一个新的空对象2.让this指向这个新的对象3.执行构造函数里面的代码，给这个新的对象添加属性和方法4.返回这个新的对象(所以构造函数里面不需要return)function A () { this.a = 1 // 如果解开这段注释，打印结果就位2222 // this.b = 2222 return { b: 2, c: 3 }}A.prototype.b = 4A.prototype.c = 5let obj = .
2020-12-23 18:23:57
683
原创 http和https区别介绍1
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
2020-12-20 17:01:47
161
原创 从内向外遍历对象的key值
题目：let obj = { a:{ b:{ c:{f:"aa"} }, d:{ e:{g:"bb"}, h:{i:"cc"} }, j:{ k:"dd" } }}// 想要的结果[f,g,i,c,e,h,k,b,d,j,a]解答：function getType (data) { return Object.prototype.toString.call(data)}// 关键
2020-12-20 16:17:09
248
原创 阅读vue源码后，简单实现虚拟dom
class Element { constructor (type, props, children) { this.type = type this.props = props this.children = children }}const ul = createElement( 'ul', {id: 'list'}, [ createElement('li', {class: 'item'}, ['Item 1']), creat.
2020-12-20 13:36:36
159
原创 记录一次vue优化
$$(’*’) ，在浏览器控制台输入即可看到，查看项目的dom数量，将不需要双向绑定的数据，例如：列表、表格等不需要编辑或者联动的数据去除双向绑定下面是Vue源码片段function defineReactive$$1 ( obj, key, val, customSetter, shallow ) { var dep = new Dep(); var property = Object.getOwnPropertyDescriptor(.
2020-12-17 10:09:50
97
原创 信封错排问题
假设有5封信放入5个信箱，问：有多少种方案是5个信封全部没有放入对应的信箱中如：[1,2,3] 有两种方案：[2,3,1] [3,1,2]// [1,2,3]。两个错位排列的数组为 [2,3,1] 和 [3,1,2]var findDerangement = function(n) { /* 公式：D(n)=(n−1)∗(D(n−2)+D(n−1)) 推出公式（感性） 对于第n个数，放在k位置上。 而第k个数有两种情况： 当第k个数放到n位置时，相当于把k和n交换了位.
2020-12-13 16:01:38
1129
原创 只输出最后一个promsie的结果(经典面试题)
实现方法调用后如下：let count = 1;let promiseFunction = () => new Promise(rs => setTimeout(() => { rs(count++); }) );lastFn().then(console.log); // 无输出lastFn().then(console.log); // 无输出lastFn().then(console.log); // 3实现方案：fu.
2020-12-13 12:01:36
288
1
原创 setTimeout实现setInterval和clearInterval
function interV (fn, time) { let res = { target: '' // 需要注意：利用引用类型保证target一直是最新的 } function test () { fn() res.target = setTimeout(test, time); } test() return res}function cv (timer) { clearTimeout(timer.target)}let t = int
2020-12-13 11:20:55
532
3
原创 生成器函数generator
function * fn(){ yield 10; y = yield 'foo'; yield y;}var test = fn();console.log(test.next()) // { value: 10, done: false }console.log(test.next()); // { value: 'foo', done: false }console.log(test.next(11)) // { value: 11, done: false }consol
2020-12-10 11:38:31
869
原创 2020年js新特性
最近项目没有那么忙，就能多抽出时间来为大家更新博哥，顺便也是自己学习历程记录本篇文章就为大家介绍一下2020年js都出现了哪些新特性我就从使用的频繁度来为大家介绍1、可选链操作符我们是不是在代码中经常这么写if (data && data.list && data.list.name) { //do something}// 我们都知道这么写是为了容错，减少代码异常问题，但是这么写很不优雅js的新特性中为我们添加了可选链操作符，以上代码就可以这么写.
2020-12-08 15:52:19
1393
原创 vue深度监听对象newVal和oldVal一样怎么回事
有时候我们使用watch并且添加deep:true深度监听一个对象时候，获取到的newVal和oldVal数据一致，官方一点这种现象叫做：深度监听对象出现的同源问题其实道理很简单，属于vue2.0的坑，其实就是：== 在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。==watch: { obj: { handler (newVal, oldVal) { // newVal和oldVal打印的话是一样的，指针相同.
2020-12-04 15:37:21
5746
原创 es6的扩展运算符(...)详解
**对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中**下面为大家一一举例说明：1、对象使用扩展运算符let obj = {a: 1}let newObj = {...obj}console.log(newObj) // {a: 1}// 等价于let newObj = Object.assign({}, obj)// 还可以这么用let obj = {a: 1}let newObj = {...obj, ...{a:4, b: 2}}let ne
2020-11-25 16:11:36
269
2
原创 Element-ui的table中使用fixed后出现行混乱情况
最近项目比较忙，很久没有更新博客了，今天就来贴一下下午使用elementui遇到的问题1、话不多说，先看看问题是什么我们看到table左侧fixed的区域并没有延伸到表格底部，之前在用户拖拽表格时添加了方法this.$refs.headGroupTable.doLayout()来重置表格（headGroupTable是自定义组件名称，学过vue的都懂），但是在数据拿到后使用此方法并不能解决以上问题2、解决方法其实解决方法也很简单，我们打开浏览器看到fiexed的表格区域样式的高度是固定的px，这是
2020-11-24 15:49:41
2862
2
原创 vscode代码折叠起来，看不到尾部}
今天打开我的vscode发现，代码折叠起来后看不到尾部的}，全是…，非常不舒服，看图下面进行这样的设置，找到vscode首选项然后看到’控制计算折叠范围的策略’默认的是auto,我们改为indentation，就可以看到折叠后代码末尾的’}'啦，这样就方便我们插入代码了效果如下：...
2020-09-15 11:48:50
1355
3
原创 vue的hook,生命周期相关应用
内部监听生命周期函数export default { mounted() { this.chart = echarts.init(this.$el) // 请求数据，赋值数据 等等一系列操作... // 监听窗口发生变化，resize组件 window.addEventListener('resize', this.$_handleResizeChart) // 通过hook监听组件销毁钩子函数，并取消监听事件 this.$once('ho.
2020-09-09 10:38:46
283
原创 饿了么框架中el-cascader级联组件“报错TypeError: Cannot read property ‘forEach‘ of null
博主近期做项目遇到这么一个问题，一个关于费用项的表格，表格中的每一行中都包含el-cascader这个组件，当我进行插入行操作（arr.splice方法）的时候，总是报错TypeError: Cannot read property ‘forEach’ of null，但是使用push方法在末尾新增行的时候就没有这个问题，两种方式新增的数据是一样的，为什么splice就会报错呢解决方案：经过排查，是elementui遇到的坑，处理方案是给el-cascader添加一个key值，新增行的时候，对这个值进行+
2020-09-09 10:00:09
1591
原创 AMD、CMD、Common.js、ES6模块对比
他们都是用于在模块化定义中使用的，AMD、CMD、CommonJs是ES5中提供的模块化编程的方案，import/export是ES6中定义新增的AMD-异步模块定义AMD是一个组织，RequireJS是在这个组织下自定义的一套脚本语言RequireJS：是一个AMD框架，可以异步加载JS文件，按照模块加载方法，通过define()函数定义，第一个参数是一个数组，里面定义一些需要依赖的包，第二个参数是一个回调函数，通过变量来引用模块里面的方法，最后通过return来输出。是一个依赖前置、异步定义
2020-09-01 14:51:48
170
原创 fetch发送2次请求的原因分析
划重点：如果被别人问到，其实这是在迷惑你，发送两次请求的情况确实存在，但这与你所使用的是不是http协议，所采用的是不是fetch真的没有任何关系！我们所说的发送2次请求，其实就是在跨域请求时，编写了带预检请求的代码导致多了一次名为OPTIONS的尝试请求发送2次请求需要满足以下2个条件：必须要在跨域的情况下除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain .
2020-08-21 15:07:12
2529
原创 js中不借助第三变量交换两个变量的值
方法一：let a = 5let b = 6a = a + b // 11b = a - b // 5a = a - b // 6方法二：let a = 5let b = 6a = a * b // 30b = a / b // 5a = a / b // 6
2020-08-12 10:50:11
309
原创 斐波那契数列递归和循环实现
斐波那契数，指的是这样一个数列：1、1、2、3、5、8、13、21、……，用文字来说，就是斐波那契数列由 0 和 1开始，之后的斐波那契数列系数就由之前的两数相加1.普通递归实现function fei (n) { if (n === 1 || n === 2) { return 1 } return fei(n - 1) + fei(n - 2)}2、普通循环function fibonacci(n) { let n1 = 1 le.
2020-08-06 14:50:47
294
原创 经典的数组扁平化
有数组：[1, [2, 3, [4, 5]]]最后我们要得到[1,2,3,4,5]// toString方法、join方法都能将以上数组转换为1,2,3,4,5字符串// 方法一function fn1 (arr) { return arr.join().split(',').map(function(item) { return Number(item) })}// 方法二function fn2 (arr) { return arr.toString
2020-08-04 16:03:42
91
原创 手动实现promise
创建promise的基础框架function MyPromise(executor) { function resolve(value) { } function reject(reason) { } try { // executor为new promise时传入的函数，executor的两个参数分别为成功回调函数和失败的回调 executor(resolve, reject) } catch (reason) { reject(rea.
2020-07-30 16:30:31
274
原创 vue和react的diff算法比较
相同点：vue和react的diff算法，都是不进行跨层级比较，只做同级比较。不同点：vue进行dif时，调用patch打补丁函数，一边比较一边给真实的DOM打补丁Vue对比节点，当节点元素类型相同，但是className不同时，认为是不同类型的元素，删除重新创建，而react则认为是同类型节点，进行修改操作① Vue的列表比对，采用从两端到中间的方式，旧集合和新集合两端各存在两个指针，两两进行比较，如果匹配上了就按照新集合去调整旧集合，每次对比结束后，指针向队列中间移动；②而react则是从
2020-07-29 11:27:50
2557
原创 vue的diff算法讲解
当数据发生变化时，vue是怎么运作的？vue会根据真实DOM生成virtual dom，当虚拟DOM节点数据变化时会生成一个新的vnode，然后vnode和oldVnode作对比，如果有不一样的地方就直接修改在真实的dom上，然后将oldVnode更新为vnode，diff的过程就是调用patch（打补丁）函数,比较新旧节点，一边比较一边给真实的DOM打补丁虚拟DOM和真实DOM都是什么样的？<div> <span>我是真实DOM<</span>..
2020-07-28 16:56:00
1353
1
原创 react的diff算法讲解
传统的diff算法通过循环递归进行依次对比，算法复杂度高达O(n^3)，n代表树的节点数，这个算法有多么庞大？如果要展示1000个节点就要执行上亿次比较，你电脑CPU再好也很难在1秒内计算出差异。react的diff算法先了解一下什么是调和？将virtual DOM（虚拟dom）转换成actual DOM(真实dom)的 最少操作过程就叫调和，简单理解就是简化算法复杂度react的diff算法react的diff就是实现了上述的调和，简化了算法的复杂度react的三大diff策略
2020-07-27 17:31:12
3057
原创 4.ts中函数定义与接口介绍
// ts中定义函数方式一function sum (x: number, y: number): number { return x + y}-------------------------------------------------------------------------// ts中定义函数方式二let sum2 = function (x: number, y: number): number { return x + y}// 其中: number是定义了函数
2020-07-23 14:06:06
2344
原创 3.typescript的数据类型-枚举（enum）
1.枚举初识默认情况下，枚举是从0开始的，后面的值依次递增，它们当中的每个值都可以显示指定，只要不出现重复即可，没有被显示指定的值，会以前一个值为基础递增得到enum Color { red, yellow, green}let c: Color = Color.red // 1let str:string = Color[1] // yellow,这个写法不太友好let str1:string = Color[Color.green] // green，推荐使用console.log(
2020-07-16 16:01:33
838
原创 2.typescript学习之基础数据类型
1.强类型和弱类型学习之前我们先来认识一下强类型和弱类型强类型：定义变量同时还需要定义变量类型，比如：Java、c++、当然还有typescript；弱类型 ：定义变量时，变量类型可以忽略，一个变量允许被赋予不同类型的值，比如：javascript、php、vb；弱类语言的优缺点：优点： 开发者可以将注意力集中在业务处理和逻辑开发上缺点：①变量类型检测不足，当你的项目比较庞大时，肯定会出现数据类型不正确导致的问题；②弱类语言的内存利用率是低于强类型语言的，因为弱类型语言在运行中需要对变量进
2020-07-16 14:48:40
185
原创 1.ts初识与环境搭建
在学习typescript之前，国际惯例，先了解一下历程：TypeScript 是微软在2012年开发的一门免费开源的编程语言。它是JavaScript 的一个超集（增强版）为什么要学习TypeScript？拥有强大的靠山，分别为微软与谷歌。TypeScript是由微软开发的，谷歌的Angular框架是用Typescript开发的。所以TypeScript很有可能是未来的前端脚本语言发展的主流方向话不多说，来学习一下环境搭建因为TypeScript在JavaScript的基础上增加了类型
2020-07-16 10:52:40
533
1
原创 vue双向绑定的简化代码原理
为了能够快速读懂代码，首先要先弄明白以下三个概念：1、观察者（observer）：也就是数据监听器，负责数据对象的所有属性进行监听劫持，并将消息发送给订阅者进行数据更新2、订阅者（watcher）：负责接收数据的变化，更新视图（view），数据与订阅者是一对多的关系。3、解析器（compile)：负责对你的每个节点元素指令进行扫描和解析，负责相关指令的数据初始化及创造订阅者<!DOCTYPE html><html lang="en"><head>
2020-07-14 16:51:45
155
原创 判断对象中是否存在某个属性的方法
1、in 运算符如果指定的属性在指定的对象或其原型链中，则in 运算符返回true'name' in test //true'un' in test //true'toString' in test //true'age' in test //false这种方式的局限性就是无法区分自身和原型链上的属性2、hasOwnProperty()test.hasOwnProperty('name') //true .
2020-07-13 23:10:18
1472
原创 js中判断数据类型方法
js中有7种数据类型，其中三种基本类型：Number、String、Boolean两种引用类型：Object、Array两种特殊类型：undefined、null1.判断boolean类型的不再多说，我们都知道undefined、null、NaN、0、’'这几种大都是false，其余都是true2.typeof，他无法判断数组和对象，返回的都是Object console.log(typeof str);//string console.log(typeof arr);//object
2020-07-13 23:05:43
203
原创 js原型对象个人理解
所有的构造函数都有一个prototype属性，这个属性叫做原型对象所有的构造函数new出来的对象都有一个原型对象下面我用一张图来给大家解释prototype是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法所有通过同一个构造函数创建的实例对象都会共享同一个prototype原型，原型诞生的意义就是实现代码复用原型的执行顺序：首先在实例上查找，如果实例有方法或属性就返回，如果没有，就去原型上查找，如果有就返回，如果原型上没有对应的属性或方法，就去最外层的Objec.
2020-07-13 22:43:55
139
原创 js代码优化之惰性函数
什么是惰性函数？ 简单来说它很惰，所以其只会在函数第一次调用时执行话不多说，直接上代码function zhou(){ if(a === 1){ console.log("对着JS一调一下午") }else{ console.log("调了一下午，bug还得补") }}在上面这段代码中存有一个判断语句，如果在当前环境下a的值不变，那么该函数不管你如何执行，其结果都不会发生任何变化。但每次执行还要进行if判断，这势必造成了没有必要的浪费，有.
2020-07-13 21:57:13
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人