2021年02月_IamSmaLLR.

转载异步请求竞态问题（input搜索框实时搜索）

如何解决异步请求的竞态问题1.简单的解决方式，通过给请求编号，然后计数，最后的计数位是否与请求编号相同，否则return结果（比较是否是最后一个请求）.但是这样简单的方法在实际使用中并不方便，你总是需要想办法返回一个计数，然后做比较判断，每个请求还都要重写一遍。2.结合了 Promise 和 XHR.abort()XMLHttpRequest 提供的 abort 方法可以用来将 XMLHttpRequest 的 readyState 置为 0。这样就可以视为请求被 “终止” 了。只是前端视角

2021-02-28 16:35:10 603

原创 DNS解析过程

1、域名系统概述域名系统DNS(Domain Name System)是因特网使用的命名系统，用来把便于人们使用的机器名字转换成为IP地址。域名系统其实就是名字系统。为什么不叫“名字”而叫“域名”呢？这是因为在这种因特网的命名系统中使用了许多的“域(domain)”，因此就出现了“域名”这个名词。“域名系统”明确地指明这种系统是应用在因特网中。IP地址是由32位的二进制数字组成的。用户与因特网上某台主机通信时，显然不愿意使用很难记忆的长达32位的二进制主机地址。即使是点分十进制IP地址也并不太容易记忆。相

2021-02-28 14:54:37 184

原创 vue中的缓存组件（keep-alive)

当我们进行频换切换，不需要重复渲染的时候，比如tab栏切换，就可以利用keep-alive缓存组件，不需要重复加载，也是提高vue性能的一个方式。keep-alive是什么？keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。keep-al

2021-02-28 00:35:54 4145 1

原创手写new

function Dog(name){ this.name = name}Dog.prototype.sayName = function(){ console.log(this.name)}// 上面是本身Dogfunction _new(fn,...args){ // ...args为ES6展开符,也可以使用arguments //先用Object创建一个空的对象, const obj = Object.create(fn.prototype) //fn.

2021-02-27 23:25:05 97

原创对角线遍历

/** * @param {number[][]} matrix * @return {number[]} */var findDiagonalOrder = function(matrix) { if (matrix == null || matrix.length == 0) return [] let m = matrix.length let n = matrix[0].length let i = 0 let j = 0 // 预先创建好固.

2021-02-27 17:44:43 214

原创长度最小的子数组（滑动窗口）

/** * @param {number} target * @param {number[]} nums * @return {number} */var minSubArrayLen = function(target, nums) { let size = 0; let sum = 0 let result = Infinity for(let i=0,j=0;j<nums.length;j++){ sum+=nums[j] .

2021-02-27 00:57:20 195

原创合并二叉树

/* * function TreeNode(x) { * this.val = x; * this.left = null; * this.right = null; * } *//** * * @param t1 TreeNode类 * @param t2 TreeNode类 * @return TreeNode类 */function mergeTrees( t1 , t2 ) { // write code here if(!t1&a.

2021-02-26 02:08:31 73

原创求区间最小数乘区间和的最大值

[3,1,6,4,5,2]对于任意子序列可以计算一个X值，X=sum(subArray) * min(subArray)求最大XX = (6+4+5) * 4 = 60 function fn(arr){ let max = 0 let result = [] while(arr.length){ let num = Math.max(...arr) result.push(...arr.splice(arr.indexOf(num),1)) let mi

2021-02-26 00:19:12 723 1

原创 vue2.0和3.0的区别

1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：•可直接监听数组类型的数据变化•监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升•可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行•直接实现对象属性的新增/删除2.新增Composition API，更好的逻辑复用和代码组织3.重构 Virtual DOM•模板编译时的优化，将一些静

2021-02-24 11:50:10 1237

原创 setTimeout模拟setInterval

var i=0;setTimeout(function () { console.log(i++);//放执行的任务 setTimeout(arguments.callee, 1000);}, 1000);arguments 的主要用途是保存函数参数，但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。...

2021-02-24 00:11:56 110

原创手写异步调度器

class Scheduler {constructor(maxNum) {this.taskList = [];this.count = 0;this.maxNum = maxNum;}async add(promiseCreator) {if (this.count >= this.maxNum) {await new Promise((resolve) => {this.taskList.push(resolve)})}this.count ++;const r.

2021-02-23 23:58:39 301

原创 vue中v-if 和 v-show的区别

1.共同点：v-if 和 v-show 都可以动态地显示DOM元素2.区别（1）手段：v-if 是动态的向DOM树内添加或者删除DOM元素；v-show 是通过设置DOM元素的display样式属性控制显隐；（2）编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；（3）编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再

2021-02-23 21:33:59 3808

原创手写实现call和apply

// callFunction.prototype.myCall = function(thisArg, ...args) { const fn = Symbol('fn') // 声明一个独有的Symbol属性, 防止fn覆盖已有属性 thisArg = thisArg || window // 若没有传入this, 默认绑定window对象 thisArg[fn] = this // this指向调用call的对象,即我们要改变th

2021-02-23 21:16:21 135

原创怎样创建一个没有任何属性和方法的空对象

使用: Object.create(null)生成的空对象在原型对象上也没有任何属性和方法.var obj = Object.create(null);obj; // {}obj.toString(); // Error;obj.valueOf(); // Error;

2021-02-23 20:15:34 532

原创 HTTPS的对称加密和非对称加密

非对称加密算法需要两个密钥：公开密钥（publickey:简称公钥）和私有密钥（privatekey:简称私钥）。公钥与私钥是一对，如果用公钥对数据进行加密，只有用对应的私钥才能解密。因为加密和解密使用的是两个不同的密钥，所以这种算法叫作非对称加密算法。非对称加密算法实现机密信息交换的基本过程是：甲方生成一对密钥并将公钥公开，需要向甲方发送信息的其他角色(乙方)使用该密钥(甲方的公钥)对机密信息进行加密后再发送给甲方；甲方再用自己私钥对加密后的信息进行解密。甲方想要回复乙方时正好相反，使用乙方的公钥对数据

2021-02-23 10:17:20 350

原创手写深拷贝

function fn(obj) { if(typeof obj !== 'object' || obj === null) return var newObj = obj instanceof Array ? []:{} for(var key in obj) { if(obj.hasOwnProperty(key)){ if(typeof obj[key] === 'object'){ newObj[key] = fn(obj[key]) }//如果检测某一项是一个对象

2021-02-22 22:48:50 111

原创前端渲染插入10W条数据

// 插入十万条数据const total = 100000 // 一次插入 20 条，如果觉得性能不好就减少const once = 20 // 渲染数据总共需要几次const loopCount = total / oncelet countOfRender = 0let ul = document.querySelector("ul");function add() { // 优化性能，插入不会造成回流 const fragment = document.

2021-02-21 18:50:54 540

原创将HTML字符转化为DOM结点

使用HTML字符串动态创建Node1使用innerHTML我们使用document.createElement方法创建新的元素，然后利用innerHTML将字符串注入进去，最后返回firstChild，得到动态创建的Node，添加到文档底部。 function createNode(txt) { const template = `<div class='child'>${txt}</div>`; let tempN

2021-02-21 18:37:42 580

原创二叉树的右视图

/** * 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 * 求二叉树的右视图 * @param xianxu int整型一维数组先序遍历 * @param zhongxu int整型一维数组中序遍历 * @return int整型一维数组 */function solve( xianxu , zhongxu ) { // write code here function TreeNode(x){ this.val = x .

2021-02-21 17:03:25 98

原创扫码登录技术的原理

首先用户打开网站的登录页面的时候，向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后，随机生成一个uuid，将这个id作为key值存入数据库，同时设置一个过期时间，在时间到期后从数据库删除该条记录，用户登录二维码需要进行刷新重新获取。将这个key值和本公司的验证字符串合在一起，通过二维码生成接口，生成一个二维码的图片（二维码生成，网上有很多现成的接口和源码）。然后，将二维码图片和uuid一起返回给用户浏览器。浏览器拿到二维码和uuid后，会每隔一秒向浏览器发送一次，登录是否成功的请求。请求中携.

2021-02-21 13:27:21 172

原创机器人dp求路径

/** * * @param m int整型 * @param n int整型 * @return int整型 */function uniquePaths( m , n ) { // write code here let dp = [] for(let i=0;i<m;i++){ dp[i] = new Array(n).fill(1) } for(let i=1;i<m;i++){ fo.

2021-02-21 12:46:10 161

原创版本号排序

JS写版本号排序，如传入参数[‘1.5’,‘2.0’,‘1.7’,‘1.1.5’] 返回 [‘1.1.5’,‘1.5’,‘1.7’,‘2.0’]1.sortlet arr = ['1.5','2.0','1.7','1.1.5']arr.sort(function(a,b){ return a>b?1:-1});console.log(arr) //["1.1.5", "1.5", "1.7", "2.0"]换个case可能存在错误为什么字符串比较能够轻松的实现排序？sort()对数

2021-02-20 19:22:37 1106

原创 cookie有哪些字段/cookie和session的区别

name　　字段为一个cookie的名称。value　　字段为一个cookie的值。domain　　字段为可以访问此cookie的域名。非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名doma

2021-02-20 00:33:48 2057

原创手写事件代理（兼容IE浏览器）

<div id="btns"> <button data-id="1">按钮1</button> <button data-id="2">按钮2</button> <button data-id="3">按钮3</button> <button data-id="4">按钮4</button> <div>666</div> </div>.

2021-02-19 23:11:04 103

原创容器盛水问题NC128

/** * max water * @param arr int整型一维数组 the array * @return long长整型 */function maxWater( arr ) { // write code here if(!arr) return; let val = 0; let left = 0, right = arr.length -1; let leftMax = 0, rightMax = 0; while(left &lt

2021-02-19 16:41:10 140

原创无序数组找出两数和等于目标数的索引

/** * * @param numbers int整型一维数组 * @param target int整型 * @return int整型一维数组 */function twoSum( numbers , target ) { // write code here var arr = new Array(); var n = numbers.length; for(var i = 0; i < n; i++) { .

2021-02-19 14:26:53 207

原创什么是图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。通俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。ps：自定义属性可以取任何名字<img src="xx

2021-02-19 00:46:15 480

原创 express常用中间件

Express是一个自身功能极简，由路由和中间件构成的一个开发框架，本质上，express应用就是在调用各种中间件。中间件的功能：执行任何代码。修改请求和响应对象。终结请求-响应循环。调用堆栈中的下一个中间件。1.应用级别的中间件 app.useapp.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接受所有的请求app.use((req, res, next) => {/*表示匹配任何路由*/ console.log(req.url); next();/*表示匹配完成这

2021-02-18 23:50:15 625

原创手写reduce，使用reduce模拟map

let arr = [1,2,3] Array.prototype.myReduce = function(callback,initValue){ let arr = this for(let i=0;i<arr.length;i++){ initValue = callback(initValue,arr[i],i,arr) } return initValue } let sum1 = arr.myReduce((result,item,index..

2021-02-18 23:19:55 275

原创判断是否是平衡二叉树

/* function TreeNode(x) { this.val = x; this.left = null; this.right = null;} */function IsBalanced_Solution(pRoot){ // write code here if(!pRoot) return true function dfs(root){ if(!root) return 0 return Math.ma.

2021-02-18 16:20:45 88

原创单链表的归并排序

/* * function ListNode(x){ * this.val = x; * this.next = null; * } *//** * * @param head ListNode类 the head node * @return ListNode类 */function sortInList( head ) { if(head==null||head.next==null){ return head } let slo

2021-02-18 16:04:43 72

原创在二叉树中找到两个结点的最近公共祖先节点

/* * function TreeNode(x) { * this.val = x; * this.left = null; * this.right = null; * } *//** * * @param root TreeNode类 * @param o1 int整型 * @param o2 int整型 * @return int整型 */function lowestCommonAncestor( root , o1 , o2 ) { .

2021-02-17 21:30:46 247

原创打印螺旋矩阵

/** * * @param matrix int整型二维数组 * @return int整型一维数组 */function spiralOrder( matrix ) { // write code here if(matrix.length==0) return [] var r = matrix.length - 1 var c = matrix[0].length - 1 var m = 0 var n = 0 var res.

2021-02-17 20:50:26 96

原创不使用新数组来合并排序两个有序数组

/** * * @param A int整型一维数组 * @param B int整型一维数组 * @return void */function merge( A, m, B, n ) { // write code here let i = m-1 let j = n-1 let k = m+n-1 while(i>=0 && j>=0){ if(A[i]>=B[j]){ .

2021-02-17 19:19:43 309

原创二分查找(存在重复找到第一个的位置）

/** * 二分查找 * @param n int整型数组长度 * @param v int整型查找值 * @param a int整型一维数组有序数组 * @return int整型 */function upper_bound_( n , v , a ) { // write code here function BinarySearch(i,j,arr,k){ let left = i; let right = j; .

2021-02-17 18:50:29 601

原创设计LRU缓存结构

/** * lru design * @param operators int整型二维数组 the ops * @param k int整型 the k * @return int整型一维数组 */function LRU( operators , k ) { // write code here let cache = new Map() let result = [] for(let i = 0; i < operators.length; i++).

2021-02-17 15:40:05 123

原创 HTML5 Web Workers

Web worker 是运行在后台的JavaScript，不会影响页面的性能。什么是Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。创建Web Worker在外部创建一个js文件，举例设定一个计数脚本，取名为‘worker.js’var i=0;functio

2021-02-17 01:16:32 152

原创在转动过的有序数组中寻找目标值索引

/** * * @param A int整型一维数组 * @param target int整型 * @return int整型 */function search( A , target ) { // write code here let index = -1; let left = 0; let right = A.length - 1; // 没有旋转 if (A[left] <= A[right]) {.

2021-02-16 21:26:27 267

原创最大正方形（动态规划）

/** * 最大正方形 * @param matrix char字符型二维数组 * @return int整型 */function solve( matrix ) { // write code here let row = matrix.length let column = matrix[0].length let maxSquare = 0 for(let i=0;i<row;i++){ for(let j=0;j<c.

2021-02-16 21:20:19 117

原创数组中相加为0的三元组

/** * * @param num int整型一维数组 * @return int整型二维数组 */function threeSum( num ) { // write code here let result = [] let len = num.length num.sort(function(a,b){return a-b}); for(let i=0;i<len-2;i++){ let head = i+1 .

2021-02-16 20:01:19 116

空空如也

空空如也