MichelleZhai的博客

ios android抓包

js树状结构铺平，平级数据与树状结构之间的转换

前段时间给同事们做了一次技术分享《前端工程化》,我总觉得全程讲的磕磕巴巴的，感觉没有把精髓同步给小伙伴们，虽然他们都说我讲很好，还可以之类的，但是一次分享的重点和精髓没有传达到位的话，那我觉得应该是失败的。强迫症患者又上线了，把之前的讲义再梳理下，下次有机会分享就可以讲的再透彻一些了什么是前端工程化概念狭义上的理解：将开发阶段的代码发布到生产环境，包含：1、构建2、分支管理3、自动化测试4、部署广义上理解：前端工程化应该包含从编码开始到发布，运行和维护阶段意义内容四个维度组件

背景：今天是2022年1月22日星期六，此刻我拖着同事坐在办公室里加班，需求页面中某一表格因产品业务逻辑不清晰，反复更改交互，写到一半发现业务流程走不下去，原稿的UED也被改的面目全非，导致表格所依赖的第三方组件EditableProTable高级组件，彻底 被 玩 坏 了产品要求1月24日上线，而此刻清单里还躺着10几个组件的bug分析：痛定思痛，还是重新梳理一下这边的业务逻辑吧这是最初的UED，2021.12.25-2022.1.22历经修复了60几个业务变更的bug之后，最后确认的最终

js通过识别字符串中的逗号进行换行let testInfo=['t1','t2','t3']var str = testInfo.toString()var reg = /[,，]/g;str=str.replace(reg,"$&\r\n");console.log(str);

Babel概念过程pluginsPresetspolyfill概念babel是一个转译器,用于把同种语言的高版本规则翻译成低版本规则。过程babel的转译过程也分为三个阶段：parsing(解析)、transforming（改变）、generating（生成），以ES6代码转译为ES5代码为例，babel转译的具体过程如下1、ES6代码输入2、babylon进行解析3、得到AST-plugin用babel-traverse对AST树进行遍历转译4、得到新的AST树5、用babel-gen

PromisePromise原理promise有两个特点手动实现Promise（Class vs ES5）手动实现promise.all手动实现promiseAllSettled最近在整理promise的一些知识点，以前看的太浅，如今再去理解又是另外一种感觉，废话就不多说了，直接上原理Promise原理promise函数是ES6里的一部分，new promise对象，promise其实也是一个构造函数，自身有reject、resolve、race方法，原型链上有then、catch方法。用new出来一

react面试整理React 的 diff 算法工作过程React 中的 setState 是同步还是异步React、Vue Next Umi 的区别?React 中各种组件复用的优劣势（mixin、render props、hoc、hook）React 的 Fiber 架构React 性能优化React hooks 相关问题React新的生命周期，为什么 getDrivedStatefromProps 是静态的？React 的 diff 算法工作过程React 中的 setState 是同步还是异步

React Hooks面试题整理React 加入 Hooks 的意义是什么？为什么 React 要加入Hooks 这一特性？常用的Hooks有哪些？React Hooks api的原理：React Hooks如何模拟组件生命周期？模拟的生命周期和class中的生命周期有什么区别吗？Hooks相比HOC和Render Prop有哪些优点？Function Component与Class Component区别useEffect和useLayoutEffect区别？useState和setState区别？用u

为什么立即解决的 promise 比立即执行定时器处理得更快？由于事件循环优先级的存在，因此与任务队列(宏任务)（存储超时的setTimeout()回调）相比，作业队列(微任务)（用于存储已实现的Promise回调）的优先级更高。https://segmentfault.com/a/1190000038769853https://juejin.cn/post/6844903798305996807...

一般在项目中我们会对input、scroll、resize等事件进行节流控制，防止事件过多触发，减少资源消耗。一个很有趣的比喻节流 throttle:比如公交车站，每经过5分钟就会发车，不管有没有人都会发车，这就是节流的过程防抖 debounce:以最后一个上车乘客为准，再等5分钟发车，5分钟内没人上来就发车，否则就再等5分钟发车，这就是防抖的过程区别节流 throttle 与 去抖 debounce的区别主要在触发时机上：throttle(func, wait, options):创建并返回一

JS原型原型对象原型链最近很忙，忙着房子装修，忙着轮轴加班，还忙着去选择和被选择，在没怎么准备的情况面试了百度，挂在了算法题上，一直内伤到现在，闭门不出也没再接面试邀请，今晚难得不加班，打开博客，发现自己好久都没更新学习笔记了，不闲扯了，重新出发，开整。原型对象原型对象：构造函数都设置一个prototype属性，这个属性就指向原型对象。其实原型对象就只是一个普通对象，里面存放着所有实例对象需要共享的属性和方法！所以，我们把需要共享的放到原型对象里，把那些不需要共享的属性和方法存在构造函数里 fun

文章目录一、 http原理二、 SSL/TLS协议运行机制的概述三、 HTTP1.0、HTTP1.1、HTTP2.0的区别四、 浏览器的渲染机制五、 JS的加载方式一、 http原理https://csdn二、 SSL/TLS协议运行机制的概述xxx三、 HTTP1.0、HTTP1.1、HTTP2.0的区别xxx四、 浏览器的渲染机制xxx五、 JS的加载方式...

文章目录一、常见的安全性问题二、XXS攻击（Cross Site Scripting）（跨站脚本攻击）三、CSRF安全漏洞（跨站请求伪造）四、SQL注入五、文件上传漏洞六、OS命令注入攻击一、常见的安全性问题1、XSS(Cross-Site Scripting)脚本攻击漏洞；2、CSRF（Cross-sit request forgery）漏洞；3、iframe安全隐患问题；4、本地存储数据问题；5、第三方依赖的安全性问题；6、HTTPS加密传输数据；7、SQL注入8、文件上传漏洞

文章目录Node进程之间如何通讯1.cluster介绍2.cluster的工作原理3.cluster的APIcluster对象worker对象4.master和worker的通信例子Node进程之间如何通讯1.cluster介绍nodeJS是一个单进程单线程的服务器引擎，不管有多么的强大硬件，只能利用到单个CPU进行计算。所以，有人开发了第三方的cluster，让node可以利用多核CPU实现并行。随着nodejs的发展，让nodejs上生产环境，就必须是支持多进程多核处理！在V0.6.0版本，Nod

文章目录一、HTTP的历史二、HTTP的基本优化三、HTTP1.0、HTTP1.x、HTTP2和HTTPS梳理HTTP1.xHTTP1.0HTTP1.1HTTP/2.0HTTPS四、HTTPS和HTTP的区别HTTPS和HTTP的区别：HTTPS和HTTP的工作过程区别：五、HTTP1.0和HTTP1.1的一些区别缓存处理带宽优化及网络连接的使用错误通知的管理Host头处理长连接六、HTTP1.1和HTTP2.0的区别多路复用HTTP2.0的多路复用和HTTP1.X中的长连接复用有什么区别？HTTP2.0多

文章目录一、什么是HTTP二、通信过程三、请求方法（method）四、状态码（HTTP status code）一、什么是HTTP超文本传输协议，专门用于Web通信http：普通http协议，不安全，已逐步替代https：安全http协议，RSA非对称加密，理论上无可接受的破解方案版本问题：http1.0 （1996年）早起版本，已废除http1.1 （1999年）现行http版本，就有持久连接特性（keey-alive）http2.0 （2015年）最新的http版本，尚未普及，具有多路

//promise并发限制class PromisePool{ constructor(max,fn){ this.max=max;//最大并发量 this.fn=fn;//自定义的请求函数 this.pool=[];//并发池 this.urls=[];//剩余的请求地址 } start(urls){ this.urls=urls;//先循环把并发池塞满 while (this.pool.length<this.max){ l

在家里办公的弊端就是需要测试机的时候一筹莫展，奈何公司的在线模拟网络设备平台又不具备ios的多种手机型号，遇到这种兼容性的问题真是头大

这是一次面试题的理论部分，偏向前端工程化部分，记录一下文章目录一、 你使用过哪些前端框架/类库，其各有什么优缺点？二、如果需要使用你熟悉的技术封装一套前端的框架，你怎么规划？三、前端代码怎么打包发布，怎么理解工程化，在”工程化”过程中需要注意些什么？四、前端性能优化需要考虑哪些方面？五、如何看待前后端协作，scrum是一种什么模式？一、 你使用过哪些前端框架/类库，其各有什么优缺点？前端框架...

最近在看promise.all的时候，整理了两种手动实现的写法,方便以后查阅，直接上代码吧方法一const promiseAll=(all)=>{ return new Promise((resolve,reject)=>{ var countNum=0; var res=new Array(all.length); for(var i=0;i<all.leng...

之前总是对模块机制类的内容走马观花，知其一不知其二，只了解AMD\CMD\Common.js很表面的知识，今天看到一篇大佬的文章，总结的很好，做个笔记以后方便查阅。主流模块规范1. UMD2. CommonJs3. es6 module1. umd 模块（通用模块） (function (global,factory){ typeof exports ==='obje...

emmmm…遇到一题目，promise为什么比setTimeout先执行，查阅了很多文档基本都是说了事件循环的大概的理念，都没有根据事件循环的概念深入解释promise比setTimeout先执行的原因。实在不太喜欢半吊子的解释，也有可能是自己理解不太透彻，简单的整理下原因。 setTimeout(function(){console.log(1)},0); new Promise...

原理1.给页面绑定滚动事件；2.加载页面的时候把真正的图片地址放在某属性中；3.然后再滚动过程中判断元素是否进入当前浏览器窗口内；4.最后加载图片难点浏览器兼容是造成难点的原因所在，DOM标准和IE标准，每天前端的工作都在和它们打交道。思考下面的几段代码1.window.pageYOffset ? window.pageYOffset : window.document.docume...

React优点1、React运用一个虚拟的DOM实现了一个非常强大的渲染系统，在React中对DOM只更新不读取；2、一切都是component，代码更加模块化，重用代码更容易，可维护性高3、单向数据流4、同构和服务端渲染可以更好的SEO和解决白屏问题缺点1、 它不是一个框架，它只是MVC（模型 - 视图 - 控制器）中的view2、 jsx的一个问题是，渲染函数常常包含大量逻辑，...

看了第二部分的异步与性能，内心五味杂全，说不出来的感觉，看过阮老师和廖老师的异步编程文章的缘故，越发的感觉第二部分的内容有点咬文嚼字，断章取义，晦涩难懂，当然也有可能是我个人理解能力有限，不敢恭维这本书的下半场内容，由于也有可取之处啦，所以接下来我就以自己的理解整理一下异步与性能的这部分内容吧，可能会与书本的内容有些出入，不太理解的地方可以查阅一下阮老师和廖老师的博客作参考第三章 Pro...

函数防抖函数节流最近在做一个分页滚动的基本功能，第一次做的时候加了一个延时器，这次做的时候加了延时器，数据处理的有点不对，然后就和我同事争论了起来，因为他资质比我深一点，就觉得他的理论就一定是对的，后来搞得大家心里都不是很愉快，再后来我们深入讨论到节流和防抖的问题，显然他把两者混淆了，把防抖说成了节流，写这篇博客也是希望自己记住这两个概念，下次遇到同样的场景，也有理有据了。【...

目录用 [TOC]来生成目录：目录作用域是什么词法作用域函数作用域和块作用域提升作用域闭包关于 thisthis 全面解析对象混合对象“类”原型行为委托ES6 中的 Class作用域是什么1、作用域是一套规则，用于确定在何处以及如何查找变量(标识符)。如果查找的目的是对变量进行赋值，那么就会使用 LHS 查询;如果目的是获取变量的值，...

类型值原生函数强制类型转换语法类型1、JavaScript 有七种内置类 型:null 、undefined 、boolean 、number 、string 、object 和 symbol ，可以使用 typeof 运算符来查看。 2、变量没有类型，但它们持有的值有类型。类型定义了值的行为特征。 3、很多开发人员将 undefined 和 undecla...

js基础题整理

JS设计模式写在前面：最近心情一直都很失落，一方面遇到了一些技术瓶颈，想转为全栈的路且慢且长且煎熬，没有一套系统的学习方向，另外众多xx语言框架如雨后春笋般冒出来，吸引着很多技术的眼球，盲目追新不在少数，一方面来自现实的压力，技术窘迫，喜欢越挫越勇越要走下去，最近还是把那些星星点点所谓高能的框架们抛在脑后，开始回归最原始的那部分，从零开始，好了，废话说完了，开始记录学习笔记了 单例模式 ...

继承实现方式： 为了实现继承，proto会指向上一层的原型对象，而上一层的结构依然类似，那么就利用proto一直指向Object的原型对象上！Object.prototype.proto = null;表示到达最顶端。如此形成了原型链继承一、构造函数绑定： 二、prototype模式 三、直接继承prototype 四、利用空对象做中介 五、拷贝继承...

JavaScript面向对象的基础——原型链JavaScript闭包的形成JavaScript中thisJavaScript中的毒瘤和缺陷一些JavaScript简单语法 . 操作符：访问对象的属性 var 操作符：用来声明变量（也叫标识符） function: 用来创建函数 new 操作符：执行构造函数 全局环境和全局对象 对象字面量原型对象 原型对象：构造函数都...

异步编程的方法，有下面几种。 * 回调函数 * 事件监听 * 发布/订阅 * Promise 对象 * 协程 * Generator * async一、回调函数回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指...

JS三种加载方式三种加载方式图解三种加载方式图解

综合类前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html前端知识结构 https://github.com/JacksonTian/fksWeb前端开发大系概览 https://github.com/unruledboy/WebFrontEndStackWeb前端开发大系概览-中文版 http://www.cnblogs.com/...

上海居住证落户简称 “居转户” ， 本文主要写给在上海打拼的程序员们，告诉大家比写代码更重要的一件事情是落户。讲述一些关于上海居住证落户的一些政策和一些建议。很多人以为居转户，只要上海居住证满7年就可以转了，殊不知，居住证7年只是其中一个最简单的条件。《没有经历过居转户的人生是不完美的人生》。虽然居转户政策复杂，只要你事先了解政策，可以绕过很多坑，实现居转户。户口的重要性很多年轻人以及刚毕...

cd ~/.ssh/ssh-keygen -t rsa -C “你的邮箱"3次回车vim ~/.ssh/id_rsa.publs查看文件id_rsaid_rsa.pub执行命令vi id_rsa.pubshift i生成可复制的密码

如何在GitHub部署自己的静态网站最近无意看到了网上阐述如何在git上部署自己的静态网站时，看到的一些教程真的是很繁琐，所以就我来一个简洁快速版本的吧第一步在自己的github社区新建一个分支，注意一定要public第二步，进入你创建项目的Settings第三步，下拉页面到GitHub Pages第四步，选择master branch分支后查看到这里就结束了...

上篇文章讲解了mobx的入门API，这篇文章主要针对redux的功能进行一次比较，因为在网上没有看到比较全面详细易懂的文章，整理的笔记也是七零八落的。写下这篇文章方便以后知识点梳理吧。状态容器介绍既然是比较，那就先简单的介绍下两个状态容器1、某一状态只有一个可信数据来源（通常命名为store，指状态容器）2、操作更新状态方式统一，并且可控（通常以action方式提供更新状态的途径）...