摘要：
前端日志系统作为ToB业务必不可少的重要功能，现如今已是不可或缺了。 目的 后端都有日志了为啥前端还要做日志系统，主要还是考虑下面几个方面： 前端线上监控 观察线上的运行情况，在有大量错误产生的时候迅速报警 错误场景复现 很多的线上问题是不容易在非线上环境复现出来的，那么有些线上的错误需要结合业务日 阅读全文
摘要：
作为toB业务生态，长生命周期下来积累有自己的组件库是一件理所应当的事情。本文主要介绍创建和维护自己的UI组件所需要注意的方面几个方面。 开发框架 工欲善其事必先利其器，要造自己的轮子首先要有一个好用的开发框架。下面看看搭一个前端组件库需要的各方面： 本地调试 提到本地调试可能都会想到webpack 阅读全文
摘要：
在toB业务场景中，中台或云平台都会大量存在表单填写，那么低代码、可配置表单就是一个必不可少的基础能力。 动态表单 动态表单或者说json表单，一般需要具备下列能力： 动态字段 最基础能力，既通过配置指定字段的属性，包括：输入类型，标签，placeholder，静态验证规则等等，如 { key: ' 阅读全文
摘要：
SPA单项目的开发框架一般来说要么是前端组自己搭建的经过沉淀的自研架构，要么就是使用现成的开源框架，接下来看看对于这两种情况的分析。 自研积累 基于现在大部分SPA业务层项目都是使用webpack，我们看一下本地开发框架需要解决的问题和webpack已经为我们解决的问题 本地开发调试 API本地开发 阅读全文
摘要：
背景 在采用MFE架构的组织和业务中，跨项目功能复用是必须面对的一个问题，一般情景下这种情况通常可以通过npm公共包的形式来实现。但这种npm包抽取适用于更新频率较低，且具有普适性的非业务功能或模块。同时，npm包版本管理，依赖版本收集也会成为一个问题，这部分问题将会放到支撑层的脚手架一文中进行讨论 阅读全文
摘要：
对于大型或超大型公司，规范引入和实施工作通常由对应的自研Cli工具来完成。 规范引入 eslint规则检查提示 通常项目会引入eslint来检查代码，以期望能够统一代码风格。 rules用来自己来定义所有的规则，但是通常都会使用业界流行的规范，可使用extends配置来引入。 "extends": 阅读全文
摘要：
统一数据管理中心是SPA复杂数据流的管理形式。 Context 注：这里统一指16.3版本以后的新context API，16.3以前的context API存在SCU问题。 类组件中的Context context可以嵌套使用，也可以多个split使用 // index.js // 顶层Conte 阅读全文
摘要：
MFE灰度发布支持对比 前面讲了一下MFE聚合层所能采取的技术手段，现在对比一下几种聚合层机制对灰度发布和灰度策略的支持情况。 QianKun & SSPA import { loadMicroApp } from 'qiankun'; // load micro app loadMicroApp( 阅读全文
摘要：
Rollup Version: "2.56.2" 从入口开始: //cli/cli.ts import run from './run/index'; if (command.help || (process.argv.length <= 2 && process.stdin.isTTY)) { . 阅读全文
摘要：
使用 version: 5.2.0 官网的使用示例如下： import React from "react"; import { BrowserRouter, Switch, Route } from "react-router-dom"; export default function root( 阅读全文
摘要：
SSR方案 说到前端SSR大部分都会想到React+nextjs或者vue-server-renderer，或者是同构渲染，其实还有一种就是模板引擎。模板引擎是从后端编程解决前端问题的一种方式。 在微前端的落地方案中，模板引擎作为一个可选项，来看看模板引擎解决了哪些问题。 常见的ToB业务平台或Sa 阅读全文
摘要：
Webpack的核心原理应该是基于Tapable的支持复杂发布订阅流程控制的工具，内置大量的plugin，再结合loader做资源编译。 先上图： 1. 编译入口 version：webpack@4.46.0 webpack的编译命令一般是这样的： webpack --config webpack. 阅读全文
摘要：
示例 先看看官网示例： const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { await next(); const rt = ctx.response.get('X-Response-Ti 阅读全文
摘要：
构建聚合 构建聚合通常使用软件工程的方式将拆分的子应用在构建编译阶段重新聚合为一个微前端应用。 monorepo ├── packages | ├── pkg1 | | ├── package.json | ├── pkg2 | | ├── package.json ├── package.json 阅读全文
摘要：
网关聚合 网关聚合式的微前端方案根据路由将不同业务分发到不同的、独立的前端应用上，通常又称为路由分发式微前端。 实现方式有： nginx反向代理 微服务网关如Zuul或者SpringCloud Gateway K8S Ingress 自建网关，如Nodejs搭建的网关层等 根据团队技术栈和生产环境的 阅读全文
摘要：
QianKun 源码分析 QianKun MFE注册 registerMicroApps<T extends ObjectType>( apps: Array<RegistrableApp<T>>, lifeCycles?: FrameworkLifeCycles<T>, ) type Regist 阅读全文
摘要：
适用场景 先说微前端诞生的背景：SPA应用在长时间的迭代开发后，由于人员变更、业务模块变更、业务逻辑迭代等，逐渐从一个普通应用积累成一个巨石应用，随之而来的就是可维护性的问题。这些问题其实就是当年后端微服务流行起来时所同样面临和解决的问题，既包括技术问题，也包括管理问题。 而这类问题通常是S 阅读全文
摘要：
Single-SPA 源码分析 //src/application/apps.js export function registerApplication( appNameOrConfig, appOrLoadApp, activeWhen, customProps ) { const regist 阅读全文
摘要：
前段时间实在太忙, 都没时间写博客, 最新稍微好点, 必须安排一个。 思路 项目越来越大,总是感觉编译一次越来越慢,不能忍... 既然想要提速, 就需要知道webpack的整个编译的过程原理, 包括: 输入是什么 编译过程是什么 输出又是什么 输入 先来分析一下输入, 以现在流行的SPA来说, 从入 阅读全文
摘要：
1. 没有模块化的时代 在JS没有模块化标准的时代，如果存在以下依赖关系： main.js → b.js → a.js 那么我们必须把js文件的顺序按照模块的依赖关系顺序放到页面中(简单的举例，不考虑循环依赖等复杂情况) <!-- NoModule.html --> <head> <link rel 阅读全文
摘要：
源码版本: 17.0.1 1. useState在哪？ //myReact.js import { useState } from 'react'; //react\src\index.js export { useState } from './src/React'; //react\src\Re 阅读全文
摘要：
都知道React的类组件在setState的时候有异步和同步的区别，但是具体哪些是同步哪些是异步？ 原理在这里就不细说了，感兴趣的同学可以看看源码：源码有个inBatchUpdate的Flag，在React自身的事件流/生命周期中这个Flag是true，setState请求会放入一个队列里，在做更新 阅读全文
摘要：
1.JVM运行时内存分布 1.1 虚拟机栈 存储局部变量表、操作数、动态连接、方法出口等。 1.2 堆 存放所有对象实例，所有线程共享。垃圾收集器主要管理区域。 1.3 方法区 存储类型信息，常量、静态变量、即时编译器编译的代码缓存等。 2. 垃圾收集器 引用计数？NO，并不是主流。 可达性分析？Y 阅读全文
摘要：
分布式存储 一致性哈希：一致性哈希基本解决了在P2P环境中最为关键的问题——如何在动态的网络拓扑中分布存储和路由 均衡性(Balance) 单调性(Monotonicity) 分散性(Spread) 负载(Load) 一致性哈希将整个哈希值空间组织成一个虚拟的圆环 增加一台服务器Node X，对象C 阅读全文
摘要：
引用statcounter的数据： 在电脑端份额 手机端份额 毫无疑问的Chrome处于霸主地位啊。用句流行的话说-一个能打的都没有 阅读全文
摘要：
算法 排序算法 稳定排序 待排序序列中相等元素在排序完成后，原有先后顺序不变。 非稳定排序 有序度 待排序序列中有序关系的元素对个数。 逆序度 1. 插入排序 遍历有序数组,对比待插入的元素大小,找到位置。把该位置后的元素依次后移。 时间复杂度: O(N2) 2. 选择排序 区分已排序区间和未排序区 阅读全文
摘要：
复杂度分析 大O复杂度表示法 常见的有O(1), O(n), O(logn), O(nlogn) 时间复杂度除了大O表示法外,还有以下情况 最好情况时间复杂度 最坏情况时间复杂度 平均情况时间复杂度 均摊时间复杂度 代码执行效率分析 大多数情况下,代码执行的效率可以采用时间复杂度分析,但是大O表示法 阅读全文
摘要：
1. 集合对象 1.1 Object 关于Object类型的创建和底层存储原理我在另一篇文章有说明: "JavaScript 对象属性底层原理" 我们知道了大多数情况下Object底层都是Hash结构,我们再看看V8中从Object派生的继承图 1.2 Array 数组是一种类列表对象,可以存储重复 阅读全文
摘要：
1. SQL注入 虽然现在SQL注入发生的情况总的来说越来越少,还是提二句。关于什么是SQL注入大家都知道就不多说了。 1.1 原理 我们在做前端页面的时候,少不了会又各种输入框,然后通过GET或者POST发送至后端。 那么如果后端在处理时直接使用SQL拼接的话就会产生问题。 1.2 防范手段 1. 阅读全文
摘要：
1. 报文结构 1.1 请求报文结构 Start Line 单行，包括 Method + URL + HTTP Version Headers 多行，形式为 Name：Value Body 可选，主体部分 1.2 响应报文结构 Status Line 单行，包括 HTTP Version + Sta 阅读全文
摘要：
1. EventLoop 1.1 调用栈 当一个方法执行时内部调用另外的方法,则会形成调用栈,如图： 1.2 任务队列 JavaScript有一个主线程执行当前任务,主线程的代码同步执行,并把遇到的事件和回调注册到事件表中。 当事件表中的事件被触发时,将会把对应的处理函数推送到任务队列当中。 每一次 阅读全文
摘要：
Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说。 JavaScript function jsonpCallBack(data){ console.log(data.msg); } $(document).ready(fun 阅读全文
摘要：
JS中实现继承的几种方式 1. 原型链继承 核心： 将父类的实例作为子类的原型 优点： 非常纯粹的继承关系，实例是子类的实例，也是父类的实例 父类新增原型方法/原型属性，子类都能访问到 简单，易于实现 缺点： 要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造 阅读全文
摘要：
事件 1. DOM0级事件 通过函数赋值给事件处理程序属性。 注意：this指针指向当前元素(作用域为元素作用域) 2. DOM2级事件 通过addEventListener()添加的事件处理程序。 3. 事件类型 UI事件 DOMActivate,load(所有一切加载完毕),unload,abo 阅读全文
摘要：
Browser Object Model BOM是所有JavaScript的核心，所有的功能其实都建立在BOM基础之上。各浏览器提供的BOM的功能存在很大差异，BOM在HTML5中已经有很大一部分被放入了标准。 Window对象 window对象代表全局作用域。 如果页面包括frame，则每个fra 阅读全文
摘要：
Promise 1. 定义 注意：Promise构造函数的参数是一个函数，并且该函数的二个参数也是函数。 注意：Promise的实例用.then指定resolved和rejected状态的回调函数。其中，第二rejected回调函数可以为空。 注意：.then指定的回调函数是异步回调函数，需要注意运 阅读全文
摘要：
对象属性类型 1. 数据属性 [[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，特性默认值为true [[Enumberable]]：表示能否通过for in循环返回属性，特性默认值为true [[Wtiteabl 阅读全文
摘要：
webpack模块处理 1. ES6 静态Import ES6的import会被转化为commonjs格式或者是AMD格式,babel默认会把ES6的模块转化为commonjs规范的。 两种写法只需选一种，避免在代码中同时使用造成混淆。 2. ES6 动态Import 语法：Import.then 阅读全文
摘要：
1. prototype/\_\_proto\_\_/constructor JS原型链和继承网上已经烂大街了，5毛可以买一堆，这里只提一下： constructor：普通对象和函数对象都有，指向创建它的函数 prototype: 函数对象才有，指向构造函数的原型对象(另一个普通对象) \_\_pr 阅读全文
摘要：
函数调用和this指针 1. 全局环境的this指针 浏览器全局环境下this指向window对象 nodejs环境下this指向global对象 2. 函数中的this指针 2.1 全局环境下函数调用 非严格模式this指向window,严格模式除箭头函数外指向undefine 2.2 作为对象方 阅读全文