前端架构技术要点解析一

前言

现代前端开发不仅需要具备扎实的技术功底，还需要具备良好的团队协作能力和创新意识，以应对快速变化的市场需求和技术发展，在造轮子时代已经过去、国内前端环境很卷的情况下，前端工程师的成长路径困难重重，用前端技术去真正解决难题，提升工程师实力，让自己以最不卷的方式成长起来，下面一些前端架构技术做一些总结，希望能对这个繁杂的前端开发岗做一些技术引导

技术要点

本篇技术要点主要包括组件库架构设计、monorepo架构设计、微内核架构设计、大前端、项目监控、脚手架开发、CI/CD与Nginx这几大模块

技术介绍

组件库架构设计

目的

组件库的架构设计，实现一个类似element-ui或Ant组件库，需要具备一定的环境搭建的技术知识，其本质是基于vue开发的组件构建组件库的安装包完成跨项目引入组件库的能力，目的是实现输出一份受任何项目都可以引入的静态资源

核心逻辑

一、有一个button文件夹下的button.vue组件，导入button文件夹下的index.js;其他组件都和button组件一样类似这样导出

import Button from "./button.vue"
Button.install = function(app) {
    app.component(Button.name,Button)
}
export const XButton = Button;
export default Button;

二、统一在一个index.js文件内导入并导出

export * from "./button"

三、指定一个核心逻辑页面

export * from "../packages";
import * as Components from "../packages";
export default {
    version: require("../package.json").version,
    name: require("../package.json").name,
    ...Components,
    install: function(app) {
        Object.keys(Components).forEach((item)=>{
            app.use(Components[item])
        })
    }
}

如上，代码进行了全量导出和单个导出的操作

生产环境打包

指定一个webpack生产环境打包配置文件，配置文件中的入口文件把所有的组件一一打包并全量打包，出口文件设置library的name和type，name是打包后的组件库的全局对象名称 css使用gulp构建 把打包后的文件地址设置在package.json上，意思当import的时候引入的就是这个文件； 最后npm pack打包发布即可

monorepo架构设计

monorepo是一个代码组织思想，它可以只用一个代码库管理一个大项目的所有资源和子项目，也就是说以前放在多个库里的现在放在一个里面就可以，比如组件库一个项目，组件库的说明文档vue-press构建的一个项目，还有其他的一些项目，这些都可以统一放在一个库下进行管理

lerna管理工具

用来管理多个软件包

微内核架构设计

微内核架构设计有利于构建松耦合高扩展的系统，一个程序只做一件事，对扩展开放，对修改关闭；使用只关注接口，不关注具体实现；

理解策略模式

简单例子如下

省去了if else的条件选择，把策略抽离出来，其中validate相当于策略调度器，实现了系统的高扩展性

插件系统与微内核架构设计的关系

插件化系统设计核心在于插件调度器，主要使用策略模式和职责链模式等，调度器内核我们称之为kernel插件我们称之为plugin，插件化系统设计就是针对kernel和plugin的设计； 常见的基于插件化设计的优秀框架有webpack， babel，vue等等

大前端

什么是大前端？

大前端是前端开发之外涵盖了更多的技术领域和应用场景，拓展了前端开发的边界和能力，他不仅仅局限于传统的网页开发，还涵盖了移动端桌面端，小程序，智能设备，等多种平台和终端的开发；

影响大前端发展的几个因素：

多终端：移动端，桌面端，小程序的兴起，需要适配不同的设备，掌握不同的技术；

技术融合：前端的发展使得前端开发不仅仅局限于html js css还涉及到了各种框架库工具和语言

应用场景的不确定性：前端应用除了开发网页，还应用到了更多场景，如移动端，跨平台，可视化，物联网等不同领域

大前端领域技术总览

移动端

h5＋原生

cordova、phoneGap、微信小程序

javaScript＋原生渲染

ReactNative、Wexx

自绘UI＋原生

Flutter

增强版WebApp

PWA

桌面端

Electron、NW.js

可视化

D3.js、ECharts、Highcharts、Canvas和SVG、WebGL、响应式设计技术

监控平台需求分析及实现原理

需求分析

常见的监控平台需求包括日志采集，日志上报，日志处理，日志汇总，日志落库，日志告警；

收集细节

错误

使用window.onerror捕获JS运行时错误

使用window.addEventListener('unhandledrejection')捕获未处理的promise reject错误

window.addEventListener('error')捕获资源加载错误，但它也能捕获js运行时错误

try-catch中代码发生语法错误或异步错误时，则无法正常捕捉

接口异常

通过重写XMLHttpRequest和fetch的原生方法来实现

资源异常

页面内的图片、css、JS等Assets资源加载失败在捕获类型的error事件里可以拿到资源加载失败回调

window.addEventListener( 'error ', function(e){
//排除JSError 
if( ! (e instanceof ErrorEvent)){
    //资源路径 
    e.target.src || e.target.href 
    //资源类型
    e.target.tagName 
} }, true)

addEventListener第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数

性能检测

const timing = performance.timing 
// DNS 解析耗时 
timing.domainLookupEnd - timing.domainLookupStart 
// TCP 连接耗时 
timing.connectEnd - timing.connectStart 
// SSL 安全连接耗时 
timing.connectEnd - timing.secureConnectionStart 
// 网络请求耗时 
timing.responseStart - timing.requestStart 
// 数据传输耗时 
timing.responseEnd - timing.responseStart 
// DOM 解析耗时 
timing.domInteractive - timing.responseEnd 
// 资源加载耗时 
timing.loadEventStart - timing.domContentLoadedEventEnd 
/* 关键性能指标 */ // 首包时间 
timing.responseStart - timing.domainLookupStart 
// 白屏时间 
timing.responseStart - timing.navigationStart 
// 首次可交互时间 
timing.domInteractive - timing.requestStart 
// HTML 加载完成时间， 即 DOM Ready 时间 
timing.domContentLoadedEventEnd - timing.navigationStart 
// 页面完全加载时间 
timing.loadEventStart - timing.navigationStart

响应速度

var observer = new PerformanceObserver(function(list){
     list.getEntries().forEach(entry =>{ 
        //name: entry.name 
        //整体耗时: entry.duration 
        //事件处理函数耗时: entry.processingEnd - entry.processingStart) 
  })
observer.observe({type: "event", buffered: true});

卡顿

PerformanceLongTask提供了检测卡顿的能力，可以检测到浏览器内核主线程卡顿时间超过50ms的异常

var observer = new Performanceobserver(function(list) {
list.getEntries().forEach(entry => { 
    //开时时间: entry.startTime 
    //持续时间: entry.duration 
    } 
}); 
observer.observe({type: "longtask", buffered: true});

在VUE应用中脚本错误的捕获

Vue.config.errorHandler = function(error, vm, info){},这个方法中的 error 和 window.onerror 吐出来的格式是不一样的，需要用 TraceKit这个包来转换下

信息上报

使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其他技术简单许多！

window.addEventListener('unload', logData, false);
function logData() { 
    navigator.sendBeacon("/log", analyticsData);
}