前端错误监控
最近一直在做前端js错误监控的工作，在不断的打磨和完善中，发现里面还是知识点不少，现在就前端js错误监控做一些笔记和总结
为什么要做前端错误监控?
为了保证产品的质量
有些问题只存在于线上特定的环境
后端错误有监控,前端错误没有监控
下面会讲：
前端错误的分类
错误的捕获方式
上报错误的基本原理
一. 前端错误的分类
即时运行错误：代码错误
资源加载错误：（js、css、图片加载失败）
二. 错误的捕获方式
即时运行错误的捕获方式
try….catch
window.onerror
资源加载错误的捕获方式
object.onerror
performance.getEntries
Error事件捕获
1.即时运行错误的捕获方式
1.try…catch通过try…catch我们能够知道出错的信息,并且也有堆栈信息可以知道在哪个文件第几行第几列发生错误。
12345try { // 代码段 } catch (err) { console.log(err.message) } ...
CSS盒模型详解
CSS盒模型
基本概念： 标准模型 + IE 模型
标准模型和IE模型的区别
CSS 如何设置这俩种模型
JS 如何设置获取盒模型对应的宽和高
实例 （根据盒模型解释边距重叠）
BFC （边距重叠的解决方案）
1.基本概念CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子一共有四部分：
Margin(外边距) - 清除边框外的区域，外边距是透明的。（虽然margin不是盒子宽度 但却占用 像素）
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
根据浏览器的不同将盒子模型分为俩种： 标准模型和IE模型
2.标准模型和IE模型的区别在做出区别之前我们在这里先了解CSS盒子模型是怎么计算的！
示例子：
123456div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px;}
...
DOM事件详解
DOM事件
基本概念： DOM事件的级别
DOM 事件模型
DOM 事件流
描述 DOM 事件捕获的具体流程
Event 对象的常见应用
自定义事件
1.基本概念12345678910111213DOM事件类 DOM1标准制定的时候没有涉及任何和事件相关的东西;事件级别 DOM0 element.onclick=function(){}; //-->true,false指定冒泡还是捕获 //IE attachEvent DOM2 element.addEventListener('click',function(){},false); //-->默认是false(冒泡),true是捕获 //事件类型增加了很多； DOM3 element.addEventListener('keyup',function(){},false);
2.DOM 事件模型事件模型过程：
捕获（从上往下）element.addEvent ...
三栏布局的5种方案
题目：
假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应的设置方案有几种？
这里考察的是你对CSS的理解
首先初始化样式1234body{ margin:0; padding:0;}
HTML编写由于三栏布局HTML代码几乎差不多，下面就不过多重复编写了。
12345678910111213<body> <section> <h2>三栏布局</h2> <article class='container1'> <div class='left'></div> <div class='center'> <h3>这是xxx解决方案</h3> <p>这是三栏布局左右固定中间自适应</p> ...
一文说清「VirtualDOM」的含义与实现
摘要随着 React 的兴起，Virtual DOM 的原理和实现也开始出现在各大厂面试和社区的文章中。其实这种做法早在 d3.js 中就有实现，是 react 生态的快速建立让它正式进入了广大开发者的视角。
在正式开始前，抛出几个问题来引导思路，这些问题也会在不同的小节中，逐步解决：
🤔️ 怎么理解 VDom？
🤔️ 如何表示 VDom？
🤔️ 如何比较 VDom 树，并且进行高效更新？
⚠️ 整理后的代码和效果图均存放在github.com/dongyuanxin。
如何理解 VDom？曾经，前端常做的事情就是根据数据状态的更新，来更新界面视图。大家逐渐意识到，对于复杂视图的界面，频繁地更新 DOM，会造成回流或者重绘，引发性能下降，页面卡顿。
因此，我们需要方法避免频繁地更新 DOM 树。思路也很简单，即：对比 DOM 的差距，只更新需要部分节点，而不是更新一棵树。而实现这个算法的基础，就需要遍历 DOM 树的节点，来进行比较更新。
为了处理更快，不使用 DOM 对象，而是用 JS 对象来表示，它就像是 JS 和 DOM 之间的一层缓存。
如何表示 VDom？借助 ES ...
前端跨域学习
通信
什么是同源策略限制
前后端如何通信
如何创建Ajax
跨域通信的几种方式
一. 什么是同源策略及限制同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同才能加载脚本，比如当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执。
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
一个源包括：协议、域名、**端口 ** : 这三个有一个不一样就是源不一样，就是我们所说的跨域了, 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
限制：不是一个源的文档没有权利去操作另一个源的文档；
主要限制在几个方面
Cookie、LocalStorage 和 IndexDB 无法读取 （如我在自己的站点无法读取博客园用户的cookie）
DOM 无法获得
AJAX 请求不能发送（同源下的通 ...
一文彻底搞懂react hooks的原理和实现
摘要当使用 Hook 特性编写组件的时候时候，总能感觉到它的简洁和方便。当然，「天下没有免费的午餐」，它牺牲了可读性并且存在内存泄漏风险（最后有提到）。但这并不妨碍探索它的魔力。
在正式开始前，希望您读过 Hook 的文档或者在项目使用过它。但如果只对函数编程感兴趣，也可能有所收获。
为了让行文更流畅，我打算先抛出几个问题，这些问题会在源码实现的过程中，逐步解决：
🤔️ useState 的实现原理
🤔️ 为什么不能在循环、判断内部使用 Hook
🤔️ useEffect 的实现原理
🤔️ useEffect 的应用场景
🤔️ Class vs Hooks
⚠️ 代码均由TypeScript来实现，文中全部 demos 均在 gist.github.com/dongyuanxin/
useState 的实现原理当调用 useState 的时候，会返回形如 (变量, 函数) 的一个元祖。并且 state 的初始值就是外部调用 useState 的时候，传入的参数。
理清楚了传参和返回值，再来看下 useState 还做了些什么。正如下面代码所示，当点击按钮的时候，执行set ...
React Router 进阶技巧
在 TypeScript 中使用有时候会需要使用编程式导航，比如上方导航栏里面选项，响应按钮事件，进行路由跳转。react 的做法是通过高阶函数，函数体内部向组件的 props 注册一些路由的方法，最后返回一个新的组件。
下面是一个结合 TypeScript 使用 withRouter 的例子：
123456789101112131415161718192021222324252627282930313233interface NavigationState { routes: Array<{ path: string; name: string; key: string; }>; selectedKey: string;}interface NavigationProps { name: string;}class Navigation extends Component< RouteComponentProps & NavigationProps, // 使用「交叉类型 ...
TypeScript基础篇
这篇笔记，主要记录了自己最近在 typescript 实践中的经验。总结了常见的用法。
联合类型与交叉类型联合类型：使用|作为标记，常用于对象类型是多种类型之一。
交叉类型：使用& 作为标记，创建新类型，拥有多个类型的所有定义。
123456789101112131415161718192021interface Student { name: string; school: string;}interface People { name: string; age: number;}// 作为交叉类型，两个接口的定义必须都符合const a: Student & People = { name: "", school: "", age: 1};// 作为联合类型，只能访问接口公有定义let b: Student | People = a;console.log(b.name);// console.log(b.age) // error：编译错误
数组、元 ...
Typescript实战篇
最近在做运营侧中台项目的重构，目前的选型是 koa2+typescript。在实际生产中，切实体会到了 typescript 类型带来的好处。
为了更形象说明 typescript 的优势，还是先来看一个场景吧：
BUG 现场作为一门灵活度特别大的语言，坏处就是：复杂逻辑编写过程中，数据结构信息可能由于逻辑复杂、人员变更等情况而丢失，从而写出来的代码含有隐含错误。
比如这次我在给自己的博客编写node 脚本的时候就遇到了这种情况：
1234567891011121314151617const result = [];function findAllFiles(root) { const files = fs.readdirSync(root); files.forEach(name => { const file = path.resolve(root, name); if (isFolder(file)) { findAllFiles(file); } else { result.pus ...