沛沛呀、

原创 前端中高级基础知识面试汇总

保持学习，保持热爱。持续更新ing～前端基础github地址。README.md可以下载到typora中打开，会有整个大纲目录显示（github中markdown目录快捷生成方式不现实，之后可能会想办法生成贴过来，暂时不做相关处理）前端基础gitbook地址。README.md中会实时更新进度内容。gitbook中考虑整个学完整理完成之后，再去统一处理发布，敬请期待！gitbook版本可建议后期碎片化时间进行复习使用。前端基础csdn地址。CSDN博客专栏前端自我修养进阶中，也会一篇一篇实时更新相关

原创 【threejs】简单四元数转欧拉角

【代码】【threejs】简单四元数转欧拉角。

原创 Component inside ＜Transition＞ renders non-element root node that cannot be animated

这个warn是因为组件中包裹的不是一个单节点元素。

原创 vue2.0基础

补充：Vue中数组项变化可以监听到方式收集表单数据过滤器通过父组件给子组件绑定一个自定义事件实现父给子传递数据形式父组件< Student v-on:componentName = "funcName" > < /Student > //简写形式： @componentName = "funcName" //方法只执行一次 @componentName.once = "funcName" .. .父组件接收另外一种形式这种方式灵活性强只执行一次的写法子组件。

原创 Vue3.0基础

原创 React从Class方式转Hooks

文章目录React Hooks前言Why Hooks ？For ClassFor FunctionClass & Hooks 对比React Hooks前言之前工作三年中一直在用class方式去写前端功能页面这些，其实接触hooks也是有一定时间了。在第一次接触的时候应该是看了一门关于electron+react的项目的课程的时候。当时主要是去看electron，所以对hooks没有特别的关注。也有可能是长期以来对class的熟悉，当时对hooks这种函数式的写法也有一些抵触。但是由于业内对h

原创 算法&数据结构

文章目录数组单链表双链表数组查询O(1)插入平均O(n)删除平均O(n)单链表插入和删除非常多的情况，改善插入和删除单链表的变形，有头指针和尾指针，很方便的知道头部和尾部在哪链表的常见操作，插入和删除。插入和删除O(1)查找O(n)双链表有前驱也有后继，查询链表的数据的时候更加方便...

原创 DDD领域驱动开发

文章目录DDD（Domain Driving Design）领域驱动开发架构对比微服务的问题战略设计（业务层面-业务架构）战术设计（技术层面-系统架构）：DDD和微服务DDD（Domain Driving Design）领域驱动开发架构对比单机架构：数据驱动架构集中式架构：面向对象的方式（三层架构）分布式微服务架构：应用之间解藕，解决单体用扩展性和弹性伸缩能力不足问题微服务的问题微服务粒度怎样拆分边界是什么DDD 核心思想是通过领域驱动设计方法定义领域模型

原创 TS基础知识

文章目录TS基本类型编译选项面向对象类：对象的模型(包含：属性&方法)TS基本类型如果变量的声明和赋值是同事进行，ts可以自动给变量进行类型检测也可以直接使用字面量进行类型声明（但是字面量赋值之后就不能再修改了）//也可以直接使用字面量进行类型声明,但是字面量赋值之后就不能再修改了let a:10;let b:'fa'|'ma'; //枚举：这样的话b就可以赋值为fa或者mab = 'fa'b = 'ma'可以使用｜连接多个类型。联合类型(限制变量在某几个值之

原创 react合成事件

react合成事件是什么？用了很久都没有踩合成事件的坑，于是第一次react合成事件这个词出现在我视野中，我在脑袋中搜索，居然完全没有一点印象。于是赶紧去看了一下，React合成事件。简而言之：react内部自己通过事件冒泡实现了一套事件触发机制。????那么合成事件和原生事件的区别是什么？怎样区分呢？原生事件: 在 componentDidMount生命周期里边进行addEventListener绑定的事件合成事件: 通过 JSX 方式绑定的事件，比如 onClick={() =>

原创 手写Promise的实现

手写Promise的实现（then的链式调用）promise特点分析：Promise参数函数会立即执行promise在then的回调函数中可以拿到resolve的值promise可以有多个then并且依次链式调用执行promise可以嵌套多个then，并且then中也是可以返回Promiseresolved状态的promise调用then会立即执行二次调用resolve不会产生影响实现思路promise是一个对象，一般通过new进行实例化promise的then是可以链式调用的，因

原创 【查漏补缺系列】前端基础补充

主要是根据自己没有掌握好以及还没有了解的部分进行补充。github地址。github会实时更新，可以下载用markdown查看。1、require和import的区别规范：require是node的commonjs规范；import是ES6的模块化规范可否动态：require支持动态导入；import不支持动态导入导入方式：require输出的是一个值的拷贝；import输出的是一个值的引用位置：import可以在import模块引入之前使用，但是require只能在引用之后使用是否可以在模块

原创 【Review系列】三大基础排序

冒泡排序数组当前项跟后一项进行对比，如果当前项比后一项大那么两项交换位置let ary = [23,31,4,7,3,9]function bubble(ary){ for(let i = 0;i<ary.length-1;i++){ //控制比较轮数 for(let j = 0;j<ary.length-1-i;j++){ //每一轮比较的次数 ary[j]>ary[j+1]?[ary[j],ary[j+1]]=[ary[j+1],ary[j]]:nul

原创 【Review系列】把公司1-12个月的销售额存在对象中

把公司1-12个月的销售额存在对象中方法一let obj = { 1:222, 3:444, 5:345}let arr = new Array(12).fill(null).map((item,index)=>{ return obj[index+1]||null})方法二obj.lengthlet obj = { 1:222, 3:444, 5:345}obj.length = 13 //将其长度强行赋值到13，那么它有13位并且不对应

原创 【Review系列】旋转数组

旋转数组截取拼接function rotate(k){ //参数处理 if(k<0 || k === 0 || k === this.length){return this;} if(k > this.length){k = k%this.length} //旋转数组 //return arr.slice(-k).concat(arr.slice(0,arr.length-k)) //方法一：slice(-k)从后面取k个 //return [...this.spli

原创 【Review系列】求两个数组的交集

求两个数组的交集let num1 = [1,4,2,6,9]let num2 = [3,4,7,2]//方法一let arr = []for(let i = 0;i < num1.length;i++){ let item1 = num1[i] for(let j = 0;j<num2.length;j++){ let item2 = num2[j] if(item1 === item2){ arr.push(item1) num1[i

原创 【Review系列】函数柯里化及其应用

请实现一个函数满足以下功能add(1) //1add(1)(2) //3add(1)(2)(3) //6add(1)(2,3) //6add(1,2)(3) //6add(1,2,3) //6函数柯里化，利用闭包的保存的特性，实现预先处理的方法function currying(fn,len){ //可执行多少次 len = len||fn.length; //函数的length是获取函数的形参个数 return function(...arg..

原创 【leetcode】每日leetcode一题

其实有些思路算法挺有意思的，决定开始刷刷leetcode，先从简单的题开始吧！非最优解，仅记录分享6.16/** * @param {number[]} nums * @param {number} target * @return {number[]} */var twoSum = function(nums, target) { let result = null for(let i =0;i<nums.length-1;i++){ for(let

原创 【Review系列】前端经典题之对象调用数组方法

写出以下的obj的值：let obj = { 2:3, 3:4, length:2, push:Array.prototype.push}obj.push(1) //obj[2] = 1obj.push(2) //obj[3] = 2console.log(obj)分析：//模拟数组的push方法Array.prototype.push = function(val){ this[this.length] = val; //往数组中push一个val，也就

原创 【Review系列】正则

正则编写一条规则，用来验证6-16位的字符串，必须同时包含有大写字母小写字母字符串和数字正向预查：要匹配的字符串必须满足这个条件负向预查：要匹配的字符串必须不符合这个条件//要求cainiao8才能匹配过，以下正则只有cainiao8才符合条件，但是设置的条件是不参与捕获结果的var reg = /cainiao(?=8)///指的是 smileyqp后面必须是yyyy才符合条件，但是yyyy不参与捕获的结果var reg1 = /smileyqp(?=yyyy)/var reg =

原创 【Review系列】系列数组扁平化

数组扁平化编写一个程序将数组let arr=[[2,4,1,5],[8,5,2],[23,45,12,[29,3,5,[1,4,67]],10]扁平化，并去除其中重复部分，最终得到一个升序且不重复的数组ES6 ：flat 、Set、sortlet arr=[[2,4,1,5],[8,5,2],[23,45,12,[1,45,35]],10]arr = arr.flat(Infinity)arr = Array.from(new Set(arr))arr = arr.sort((a,b)=

原创 【Review系列】面向对象new

面向对象new(function(){ function _new(){ //let obj = Object.create(this.prototype)下面两句的简写 let obj = new Object(); obj.__proto__ = this.prototype; obj.apply(this,arguments) return obj; } Function.prototype._new = _new;})()...

原创 【Review系列】数组合并

数组合并得到["A", "A1", "A2", "B", "B1", "B2", "C", "C1", "C2", "D", "D1", "D2"]let ary1 = ['A1','A2','B1','B2','C1','C2','D1','D2']let ary2 = ['A','B','C','D']let arr = ary1.concat(ary2).sort((a,b)=>{ return a.localeCompare(b)})console.log(arr) //[

原创 【基础Review系列】前端基础Review

Review题目合集持续更新ing～前端基础github地址。README02.md可以下载到typora中打开，会有整个大纲目录显示（github中markdown目录快捷生成方式不现实，之后可能会想办法生成贴过来，暂时不做相关处理）前端基础gitbook地址。README.md中会实时更新进度内容。gitbook中考虑整个学完整理完成之后，再去统一处理发布，敬请期待！gitbook版本可建议后期碎片化时间进行复习使用。前端基础csdn地址。CSDN博客专栏前端自我修养进阶中，也会一篇一篇实时更

原创 基本设计模式

文章目录代理模式观察者模式（发布订阅模式）装饰器设计模式：针对特定的场景，在软件设计过程中常见的代码范式（通用解决方案，与语言无关）。观察者模式（麦当劳点餐）代理模式（花店送花）装饰器：可以允许向一个对象添加新的功能，却不改变原有对象。比如：给文件上传功能添加日志输出功能react中redux的@connect代理模式特点：代理对象与真实对象有相同的行为真实对象->代理对象->用户花店送花：男孩让花店送花给女孩//定义女孩对象var Girl = funct

原创 webpack基础知识以及配置

webpack基础知识以及配置webpack：静态模块打包工具。webpack中的一切资源都是文件。webpack是通过从入口进行递归查询的方式直接或者间接相互依赖的文件，最后生成打包文件。webpack-cli处理打包命令，解析webpack命令。webpack包做文件打包工作webpack不用全局下载，只用局部下载即可。因为不同项目可能使用的webpack版本不一样webpack本身能解析打包各种模块规范的js代码webpackyarn init -yyarn add -D web

原创 前端算法基础数据结构

文章目录数组自定义栈Stack队列Queue链表(单项链表->只有next、双向链表->有front和next)树（dom树）集合字典哈希列表/散列表图数组数组相关声明式方法都是高阶函数，都没有改变原数组数组静态方法fromofisArray//from 从一个类数组，或者可迭代对象创建一个新的，浅拷贝的数组实例const set = new Set(['foo','smile','yqp'])console.log(Array.from(set)) //[

原创 数组声明式系列方法的使用

数组声明式系列方法的使用(1)产生一个每个元素都比原来大10的新数组function addTen(arr){ return arr.map((item,index)=>{ return item+10; })}(2)得到数组中所有奇数的和function getAdd(arr){ arr.reduce((pretotal,item,index)=>{ return item%2 === 1 ? pretotal+item:pretotal; },0)

原创 前端性能优化

性能优化初始阶段（加载优化）首页加载优化解答对于首页加载过慢的问题，一般是由于首页加载资源过多并且资源过大导致，所以应对的策略一般是减少资源的数量以及减少资源的大小对于图片可以进行懒加载，减少首屏图片加载量，以及对于小图标和小图片分别可以使用Iconfont和雪碧图来解决，最大程度的减少首屏图片渲染量，提高首屏加载速度对于其他资源可以通过打包（nginx combo资源合并或者webpack打包）来合并资源，或者通过路由懒加载的方式来减少首页js加载的数量同时可以在服务器配置ngin

原创 React、redux基础必会点

ReactreduxRedux帮我们用一个变量存储所有的state，并且提供发布的功能来修改我们的数据，以及提供订阅的功能来触发回调redux是一个独立的数据状态管理库，在angular、vue也都可以使用redux，只不过常与react一起使用redux解决数据状态管理，跨层级问题。redux就是一个经典的发布订阅器。事件绑定的过程其实也是一个发布订阅的过程。redux使用方法调用ctreateStore创建store对象用Provide包裹根组件使用connect

原创 中高级面试题题目合集

题目合集持续更新ing～前端基础github地址。README.md可以下载到typora中打开，会有整个大纲目录显示（github中markdown目录快捷生成方式不现实，之后可能会想办法生成贴过来，暂时不做相关处理）前端基础gitbook地址。README.md中会实时更新进度内容。gitbook中考虑整个学完整理完成之后，再去统一处理发布，敬请期待！gitbook版本可建议后期碎片化时间进行复习使用。前端基础csdn地址。CSDN博客专栏前端自我修养进阶中，也会一篇一篇实时更新相关知识点。前

原创 http缓存控制

http缓存控制缓存作用范围第一次响应后到第二次请求缓存分类缓存命中率：从缓存中获取数据的请求与所有请求的比率。理想状态是越高越好过期内容：超过设置的过期时间，被标记为陈旧的内容，必须重新向服务器请求新的内容或者验证缓存的内容是否仍然准备验证：验证缓存中的内容是否仍然有效，验证通过的话就刷新过期时间失效：把内容从缓存中清除，内容发生改变时就必须清除失效内容http缓存实现技术浏览器缓存分类强缓存：不用发请求到服务器就能拿到缓存（减少服务器压力）expire和cac

原创 一次完整的http请求过程

一次完整的http请求过程题目当web浏览器输入www.baidu.com具体发生了什么？DNS域名解析，得到对应的IP根据这个IP，找到对应的服务器，发起TCP三次握手建立TCP链接之后发起HTTP请求服务器响应HTTP请求，浏览器获取html代码浏览器解析html代码，并且请求html代码中的资源（css、js、图片、视频等。得到html后才能去湖区这些资源）浏览器对页面进行渲染并且呈现给用户服务器关闭TCP链接（四次挥手）详细解析怎样进行域名解析，DNS怎样找到域名的？

原创 前端混合开发

混合开发混合开发一部分原生一部分js内嵌浏览器壳web手机端网页：手机操作比较困难，一般没有手机操作权限混合开发框架weex：采用vue框架，可打包成appreact-native：采用react框架react语法加上自己特定的标签<Text></Text> <View></View>等uniapp：采用vue框架补充：如何将vue项目打包成app？1、vue项目build 2、将build文件夹下面文件复制到新的hbu

原创 移动端兼容问题

移动端兼容问题

原创 h5离线存储manifest

h5离线存储manifestHtml5提出的一个新特性：离线存储。通过离线存储，我们可以吧需要离线存储在本地的文件夹列举在manifest配置文件中，这样即使在离线的情况下，用户也可以正常的看见网页在需要离线缓存的页面的html标签上加上manifest='cache.manifest'<html lang='en' manifest='cache.manifest'>...</html>在根目录创建新文件名称为cache.manifest的文件，并写上代码

原创 js事件循环

事件循环异步：定时器、ajax、onclick、promise（new Promise立刻执行，then异步）宏任务：定时器（setTimeout、setInterval）、requestAnimationFrame、I/O微任务：process.nextTick、Promise、Object.observe、MutationObserver宏任务队列和微任务队列，执行主线程任务，宏任务放到宏任务队列，微任务放到微任务队列。只有在微任务队列中的微任务全部执行完成之后才会去执行下一个宏任务。注意：执

原创 ES6装饰器的使用

ES6装饰器的使用装饰器：是一种与类相关的语法，用来注释和修改类和类相关的方法和属性。许多面向对象的语言都有这个功能。一般和类class 相关，普通的方法不要去使用装饰器是一种函数，写法是@函数名，它可以放在类和类的方法定义前。装饰器就是执行函数，给类或者类下面的属性方法加一些控制条件装饰器给类或者类属性驾驶一些其他代码可以代码复用@decoratorclass A(){ }//等同于class A(){ //decorator是一个函数，相当于调用它给A类可以加上一些

原创 async、await使用与原理

async、await使用与原理异步情况：定时器、ajax、事件处理、nodejs、读取文件也有异步let p = new Promise((resolve,reject)=>{ resolve(1);})//这里的function就是promise中调用的resolve。那么上面掉哟哦那个resolve(1),data参数就是1 p.then(function(data){ console.log('success',data) //success 1})Pr

原创 重绘、重排（回流）

重绘、重排（回流）先把dom节点生成dom树（解析dom）生成cssom（解析css）布局：构成渲染树render tree（从根节点递归，布局）绘制：绘制div等到页面上重绘（repaint）：一个元素外观的改变所触发的浏览器的行为，浏览器会根据元素的新属性重新绘制，使元素呈现新外观回流（重排、重构reflow）：当渲染树的一部分因为元素的尺寸、布局、隐藏等改变而需要重新构建称之为重排重绘和重排的关系：在重排的过程中，浏览器会使渲染树中收到影响的部分失效，并且重新去构造这部分渲染树，完成