- 博客(64)
- 收藏
- 关注
RSS订阅原创 sessionStorage、localStorage
sessionStorage的生命周期只能存在于当前窗口，一旦关闭窗口，sessionStorage会消失，即使是保持当前窗口，切换到新的窗口打开同一个网址，sessionStorage也无法访问到。但是使用window.open()打开新的窗口，可以访问到sessionStorage。...
2023-09-19 14:25:46
91
原创 【无标题】
Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →LogRocket BlogRendering large lists in React: 5 methods with examplesJuly 14, 2022 6 min readReact Render Larg ListsEditor’s note: This article was last updated
2023-08-05 21:01:59
254
原创 single-spa使用微前端
1.主应用注册应用，指定微应用的加载路径（script或者system.js，script具有跨域的功能)，挂载dom，激活路径等。1.资源加载错误，在主应用中调用微应用的资源，导致资源找不到，需要webpack配置publicPath,手动修改。2.路由配置：在主应用中，每个微应用都有一个专属路由前缀，在微应用中，每个路由都需要加上这个前缀。2.微应用导出生命周期，以便主应用在合适的时机调用。二、加载微应用的代码。
2023-04-09 17:47:15
145
原创 vue模板编译
目标编译过程1.解析template模板，生成ast树，解析过程就是一段一段截取，根据截取到的字符串类型触发不同的钩子函数，并维护构建一个栈，以当前解析节点为父节点，在这之后的节点为父节点维护在栈中。如此循环解析template模板，生成ast树2.优化阶段，遍历找出ast中的静态子树3.代码生成阶段，生成html代码...
2022-05-21 11:50:33
53
转载 negative value of margin in css
Negative margins in CSSI’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is no systematic treatment of negative margins anywhere. So I had to figure it out for
2022-05-15 15:33:24
72
原创 垂直居中、水平居中的几种方案
公共代码HTML <div class="box"> <div class="small"></div> </div>CSS * { margin: 0; padding: 0; } .box { width: 300px; height: 300px; background: #d
2022-05-15 11:43:24
88
转载 微软、滴滴、360等前端大厂面试题
高德 滴滴 美团 网易 快手 腾讯 金山 360 百度 知乎 微软等大厂面试经验一年半以前，写了个万字前端面经，最终去了字节混饭吃，因为一些业务调整的原因，我又跑路了，没写一面二面都是一轮挂的或者后面我不想面了的，附带部门的是挂了或者我拒了之后又面了另外的部门，按照一面开始时间先后排序，还有很多优秀的公司我面了但是忘记录音，比如momenta、完美世界、掌阅等等。现已完成更新，全文共计一万三千字，每家的自我介绍和离职原因部分我就省略了~写在前面本次面试持续了整整四周，密度非常大，平均每天四家，身心俱
2022-03-27 12:04:42
816
原创 实现按数组顺序返回的Promise.all方法
Promise.all应该符合以下特征：输入的参数可以是实现Iterator接口的参数类型，可以是Array，Map、Set。返回一个Promise对象输入的可迭代可以不是promise对象，如果不是promise对象，需要转为promise对象（使用Promise.resolve处理)使用then接收到的值保持跟输入的参数一致catch捕捉到的错误是第一个reject状态的promise对象实现Promise.myAll = function (arr) { return new P
2021-10-07 13:53:09
765
原创 区间合并（leetcode56）
题目如下：思路：假设有一堆区间[[1,3],[2,6],[8,10],[15,18]],首先对区间的左端点进行升序，升序后得到的区间，左边区间的左端点肯定是最小的，也就是表明，如果右边有个区间跟左边的区间重叠，这两个区间合并后得到新的区间的起点必然是左边的起点，比如[1,3],[2,6]有重叠那么合并后新区间必然是[1,x]这种，但是新区间的右端点是不确定的，因为左区间的左端点可能小于右区间的右端点，也可能大于等于右区间的右端点。代码如下：/** * @param {number[][]} int
2021-07-31 16:00:50
105
原创 Number.isNaN 和isNaN有何区别？
需要强调NaN是一个Number类型的值(value)。表示这是一个特殊的数值。当一个值被强行转成Number类型的值时，转换失败该值变成NaN+'1' //1 字符串'1' 可被转换成number类型的 1+'a' //NaN 字符串'a'转成number类型会变成NaN+null //0 null 可被转换成number类型的 0+undefined //NaN undefined转成number类型的值变成NaNisNaN与Number.isNaN最大的区别在于isNa
2021-07-21 19:16:43
357
原创 npm ERR! could not determine executable to run
打开项目文件夹，显示隐藏的文件，找到 '.git'文件夹，找到hooks，删除hooks里全部内容，重新提交。Git Hooks就是那些在Git执行特定事件（如commit、push、receive等）后触发运行的脚本。
2021-05-24 19:07:40
6560
1
原创 js对象属性的可枚举性和所有权
1.可枚举属性是指enumerable为true的属性，对于直接赋值和初始化的属性，enumerable默认为true，对于通过Object.defineProperty等定义的属性，默认为false。一旦设置enumerable为false，就表示某些操作不可以操作该属性，该属性就好像“隐藏”起来了，忽略不可枚举属性的操作有如下：for…in循环：只遍历对象自身的和继承的可枚举的属性。Object.keys()：返回对象自身的所有可枚举的属性的键名。JSON.stringify()：只串行化对象自
2021-04-17 15:07:11
291
原创 实现图片懒加载
核心思想，预先给图片设置data-src属性，当滚动条滚动时，给首次出现在可视区域的图片设置真正的src属性，发起请求资源，因此，难点在于判断图片是否出现在可视区域。判断图片是否出现在可视区域，借助offsetTop和clientHeight以及scrollTop三个属性值来判断。offsetTop属性是元素到有position属性父元素的距离，如果父元素都没有position属性，则以body为基准，clientHeight是屏幕的可视区域高度，scrollTop则为被卷去的高度。因此，如果一张图片的o.
2021-01-31 23:12:21
54
转载 sass基本语法
作者：阮一峰日期：2012年6月19日学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。各种"C..
2021-01-25 22:20:20
87
原创 字节跳动前端社招二面
1.http解释一下2.合并数组区间3.前端缓存4.如何实现拖动？如何实现轮播图拖动？5.hook原理6.react生命周期总结一下：基础不牢固。
2021-01-23 10:18:42
1017
原创 实现一个lazyman
class _LazyMan { constructor(name) { this.task = [] this.task.push(() => { console.log('hi! i am', name); this.next() }); setTimeout(() => { this.next(); }) } n..
2021-01-19 17:21:20
73
原创 redux和react-redux
为何要引入redux？由于react仅仅是一个DOM的抽象层，并不涉及到组件间的通信，代码结构，因此不适合开发大型应用，为了解决这个问题，引入了redux。redux是什么？有何特点？redux是一个应用的状态机，所有的状态都保存在这个状态机中。redux的三大原则：1)单一数据源原则，整个应用只有一个state，由于单一数据源，来自服务端的数据可以直接注入到state中，调试react状态变得很容易。2） state是只读的，只能通过action来修改state。3）reducer是一个纯.
2021-01-19 14:26:43
81
原创 ES6 module 与commonjs和 module.exports与exports对比。
语法不同，ES6 module 导出 是export，import导入，commonjs 导出是module.exports，导入是require。module针对 前端，commonjs针对后端加载时机不同，commonjs运行时加载模块，ES6 module编译时加载模块commonjs导出一个值的拷贝，ES6 module导出一个值的引用。commonjs一个文件只能导出一个值，ES6 module 可以多个导出。同样是commonjs的语法，module.exports和exports.
2021-01-17 14:24:30
302
原创 https连接过程
https为了减少资源浪费，通信过程结合了对称加密和公开密钥加密两种算法，在交换密钥环节使用了公开密钥加密算法，建立连接后的通信则使用了对称加密方式。第一阶段是协商加密方式阶段。客户端发送ssl连接报文，报文中含有客户端支持的ssl版本、加密方式。服务器收到客户端送来的报文，筛选出客户端支持的ssl版本和加密方式，并在报文中返回给客户端。服务器返回证书，证书中包含用于加密的公钥。服务器返回结束报文，至此，客户端和服务器协商好ssl版本和对称加密的方式，同时客户端收到用于加密的公钥。第二阶段是交
2021-01-16 16:29:33
1362
原创 cdn原理？
cdn的原理是在用户和服务器之间加了一层cache缓存，获得dns域名解析权是关键，通过接管dns域名解析权，将用户的请求引导到cache缓存上。过程如下：1.用户发送请求，首先向 local dns 发送请求2.local dns 向dns授权dns发送请求3.授权dns返回cname对应的ip地址4.local dns 向dns调度系统发送请求，并综合考虑节点距离，资源，服务器负载情况为其分配最佳ip地址。5.local dns 获取dns解析的ip地址，返回给用户。6.用户向该ip地址发
2021-01-14 21:38:24
74
原创 36进制加法
function Test36Bin(s, t) { let chars = '0123456789abcdefghijklmnopqrstuvwxyz'; let carry = 0; let result = ''; let i, j; for (i = s.length - 1, j = t.length - 1; s[i] || t[j]; --i, --j) { let sum = carr..
2021-01-13 19:02:00
451
1
原创 防抖与节流
防抖：防止事件持续触发，等到持续触发的事件结束后再执行函数。比如说当滚动条滚动时候，我们并不希望在滚动期间持续执行一个函数，而是等滚动结束后的若干秒后才执行函数。实现方式 function debounce(fn,wait){ let timer = null; return function() { clearTimeout(timr); timer = setTimeout(() => {
2021-01-07 10:44:53
48
原创 js观察者模式on、emit、off、once实现
观察者模式是一种软件设计模式，观察者定义了一种一对多的关系，观察者监听被观察者，等待通知，一旦被观察者发出通知，所有观察者均会接收到通知，并做出一些具体业务。实现on、emit、off、once。class EventEmitter { constructor() { this._events = {} } on(event, cb) { if (!this._events[event]) { this._eve.
2021-01-05 19:04:36
1499
原创 前端路由实现
1.基于hash路由模式原理：hash路由模式，形如http://xxx.com/index#xx，#后面的xx就是hash值，一旦改变#的hahs值，不会发送请求，但会触发hashchange事件，因此可以通过监听hashchange事件来实现路由。简单的demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hash路由demo</t
2020-12-28 16:35:13
117
原创 博客项目记录
1.axios 的post请求要携带参数，使用data字段携带参数，且需要使用qs.stringfy格式化参数request({ url:'/article/getlist', method:'get', data:qs.stringify(data), loading:'spin' })get请求，字段使用params，axios会自动格式化处理，不需要手动格式化处理。request({ url:'/user/info', method:
2020-12-25 22:05:52
102
1
原创 前端瞄点和平滑滚动
描点定位方式1.同一个页面内描点定位，css实现，href=’#to’表示跳转到name值为to的a标签区域。 <a href="#to">跳转</a> <a name="to"> 要跳转到的区域 </a>2.同样是css实现，跳转到id为to的区域a href="#to">跳转</a> <div id="to"> 要跳转到的区域
2020-12-23 11:10:21
318
原创 Pomise
function _Promise(excutor) { let _this = this; this.status = "pending"; this.onResolveCallbackedFun = []; this.onRejectCallbackedFun = []; this.reslut = null; this.reason = null; function resolve(value) { setTimeout(()..
2020-12-18 14:12:14
86
原创 node 解析post请求
const Koa = require('koa')const app = new Koa()app.use( async ( ctx ) => { if ( ctx.url === '/' && ctx.method === 'GET' ) { // 当GET请求时候返回表单页面 let html = ` <h1>koa2 request post demo</h1> <form method="POS
2020-12-16 14:36:41
296
原创 es6之 for of 和 for in。
一 for offor of常用来遍历可迭代的对象，for of可以遍历数组Array、字符串、Sets集合等对象。与for in 的区别是，for of 遍历的是对象的键值(value)，常见例子1.遍历数组let arr = [1,3,4,1,6,42,0];for (let value of arr){ console.log(value);}/*输出1 3 4 1 6 42 0/*2.遍历字符串let str = 'helloworld'for (let ch of
2020-12-02 12:03:55
443
原创 手撕函数
一 实现apply Function.prototype._apply = function (context, args) { if (typeof this !== 'function') { throw new TypeError('not funciton') } context.fn = this; //this 指向调用_apply的函数 let result = context.fn(args);
2020-11-18 12:40:27
81
原创 扁平化数组的几种方法
方法一：递归 function flatten(arr) { let copy = []; for(let index=0;index<arr.length; index++) { if(arr[index] instanceof Array) { console.log(arr[index]); copy = copy.concat(flatten(arr[index])); //con
2020-11-11 21:42:11
65
原创 BFC的激活、布局规则、应用实例
BFC1.概念:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，BFC内部的元素互相独立存在，互不影响。避免BFC的产生或者利用BFC可以解决margin重叠、清除浮动等问题。2.如何创建BFC：1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-f...
2020-11-04 15:07:26
838
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人