置顶文章

23k 21 分钟

注:本教程总结自《设计模式之争》和《大话设计模式》,对设计模式感兴趣的同学强烈推荐这两本书。 # 23 种设计模式 # 创建型 单例模式 原型模式 工厂模式 抽象工厂模式 建造者模式 # 结构型 适配器模式 装饰器模式 代理模式 外观模式 桥接模式 组合模式 享元模式 # 行为型 观察者模式 迭代器模式 策略模式 模板方法模式 职责链模式 命令模式 备忘录模式 状态模式 访问者模式 中介者模式 解释器模式 #...
44k 40 分钟

# Node.js # 介绍 Node.js 并不是 JavaScript 应用,也不是编程语言,而是 JavaScript 的运行时。 Node.js 是构建在 V8 引擎之上的,V8 引擎由 C / C 编写,因此 JavaScript 语言需要编译为 C / C 代码之后才能执行。 Node.js 采用异步 IO 和事件驱动的设计理念,可以高效的处理大量并发请求,提供了非阻塞 IO 接口和事件循环机制,使其可以编写出高性能、高扩展的应用程序。(异步 IO 通过 libuv 库来实现) Node.js 使用 npm 作为包管理工具 Node.js 适合做一些 IO...
4.4k 4 分钟

# 微前端 # 目标 核心目标是将巨石应用拆解成若干可以自治的松耦合微应用,这样才能确保微应用真正具备独立开发、独立运行的能力(防止巨石应用) # 介绍 微前端按业务功能将一整块前端应用分解成一系列更小的、更内聚的微前端应用,同时通过明确的交互协议来管理这些应用间的依赖关系,实现不同业务的解耦合。并将每个前端应用交给独立团队负责,各自独立开发、独立部署、充分利用并行性。 微前端是一种架构风格,monorepo...
1.2k 1 分钟

# whistle 简单使用 # whistle 安装启动 安装:npm i -g whistle 使用:w2 start 访问:访问对应的页面 作用: 任何的链接都会经过工具转发一下,并记录下来 使用前需要配置代理到 whistle 服务的地址和端口上(设置代理如下) # 使用步骤 设置代理: 手机端省略 电脑端: 网络偏好设置 --- 高级 --- 代理 --- 网页代理、安全网页代理 配置代理的 ip 地址和端口号(8899) 确认证书: 一般会自动下载,也可以打开 8899 端口找到证书下载并确认信任 查看抓包情况和设置代理转发: 打开 127.0.0.1:8899...
8.1k 7 分钟

# 前端监控 # 介绍 为什么要进行前端监控: 页面的访问行为,PV、UV、IP、PV 点击率、UV 点击率、停留时长 用户的操作行为,模块曝光、 模块点击 页面的性能,首屏渲染时间、API 请求时间 异常的监控,JS Error、API 异常、业务异常 业务的监控,成交金额、每日消息数 常见的应用场景: 流量分析 常见的前端监控平台: 百度统计 阿里云...
15k 14 分钟

# 需求分析 为什么需要优化研发流程? 项目量级增加:几干行代码 -> 几万行代码 项目数量扩大:几个项目 -> 几干个项目 项目复杂度高:Wb 项目 ->H5/PC/ 小程序 / 后端 / 脚手架 团队人数增长:几个人 -> 几百人 传统的项目研发流程已经无法满足业务需求 # git 开发流程 单人 git 项目开发流程 多人 git 项目开发流程 #...
47k 43 分钟

# 软件生命周期: # 架构流程图 # 复杂项目通用方案 # 业务的复杂度 交互的复杂性 数据结构和状态的复杂性 多项目互相依赖的复杂性 打包 性能优化 第三方库的使用和调研以及二次开发 # 流程的复杂度 git flow lint 工具 单元测试 commit 信息 PR revirew CI / CD # CI / CD 的概念 业务组件库的开发和发布是随着一些列任务进化的: 本地 commit 钩子函数完成 commit 验证 代码 push 到远端之后 跑特定的 test(不仅仅是本机的 unit test,也可能有时间很长的 E2E test) test...
35k 32 分钟

# 5-1 前端性能优化 # 介绍 任何小型企业,博主或成长型公司在网上出现时面临的最大挑战之一就是 “页面加载时间” 问题。除非您能确保尽可能快速无缝地加载每个页面,您才可以拥有世界上最好最引人注目的网站,否则您仍然无法赢得关注者的尊重和忠诚度。 根据当今网络上的所有主要浏览器公司的说法,如果每个网站都想要排名靠前,表现良好并确保客户满意,那么每个网站都需要快。毕竟,如果您的网页加载速度很慢,那么您会立即增加客户开始在其他地方搜索信息,而不是坚持下去的风险。 这也是为什么很多公司去找专门的技术人员来做 SEO(Search Engine Optimization),即搜索引擎优化。...
26k 24 分钟

# 5-4 持续集成与持续部署 传统的开发过程中的坑: BUG 总是在最后才发现 越到项目后期,加班越严重 交付无法保障 变更频繁导致效率低下 无效的等待多,用户满足度低 你有没有想过 / 用过?当你哪一天... 不用为开发 / 测试环境不一致而苦恼 不用麻烦运维人员帮忙调试环境 不用手动进行测试,模拟环境中进行自测 不用手动发布、部署,自动化实现发布部署 不用管开发 / 测试环境,只用专注代码的开发? 持续集成解决了什么问题? 提高软件质量 效率迭代 便捷部署 快速交付、便于管理 介绍: 什么是 CI/CD 介绍 CI/CD 流程 前端项目:结合 CI/CD...
22k 20 分钟

# TS # 定义数据类型 /** * 定义数据类型 */let num: number = 1;let bool: boolean = false;/** * 定义固定类型数组 */let arr1: number[] = [1, 2, 3];let arr2: string[] = ["1", "2"];/** * 使用泛型定义固定类型数组 */let arr3: Array<number> = [1, 2, 3];/** * 不声明类型定义数组 */// 此时不生命类型则自动分配好了类型,不能赋值数组中不存在的类型//ts...
75k 1:08

# 数据结构视频: # 栈:后进先出 (JS 中可以使用 array 模拟栈) 【1】十进制转二进制【2】编辑器检查括号是否有效【3】JS 函数调用堆栈(相互调用的函数,最后一个函数先执行完) 、等等 【练习:20 有效的括号】(栈) function isValid(s: string): boolean { if (s.length % 2 === 1) return false; const arr: Array<string> = []; for (let i = 0; i < s.length; i++) { if...
3.7k 3 分钟

# vue 解析 # 一、响应式系统: 响应式的目的就是为了解决计算机语言的程序性 vue2 采用 Object.defineProperty 的方式来代理对象的属性,但是这个 api 有个问题就是需要先显式地去声明这个对象的属性(属性需要先写出来),就导致向对象添加属性或删除属性时兼管不到。 vue3 中通过 Proxy 来代理整个对象,就解决了这个问题,但由于我们操作的都是返回的代理对象,并且在调用时打点调用(上下文是代理对象,监听不到源对象的 get 和 set),所以需要使用 reflect 方法指定执行上下文。 代理到源对象的 get 和 set...

文章列表

1.5k 1 分钟

# 介绍 rollup 是一个 ES 模块化打包工具,可以帮助我们编译小的代码到一个大的、负责的代码中,比如一个库或者一个应用程序 # 对比 我们会发现 Rollup 的定义、定位和 webpack 非常的相似: Rollup 也是一个模块化的打包工具,但是 Rollup 主要是针对 ES Modulej 进行打包的; 另外 webpacki 通常可以通过各种 loader 处理各种各样的文件,以及处理它们的依赖关系; rollup 更多时候是专注于处理 JavaScript 代码的(当然也可以处理 css、font、vue 等文件 另外 rollup 的配置和理念相对于...
1.9k 2 分钟

# 介绍 gulp 是前端开发过程中对代码进行构建的工具,是自动化项目的理器,能在开发过程中做很多重复的任务,并使用工具自动完成,可以大大提高我们的工作效率 glup 对工程化的作用:自动压缩 JS 文件 。自动压缩 CSS 文件。自动合并文件。自动编译 sass。自动压缩图片。自动刷新浏览器 等 # 安装 使用 gulp 命令需要安装对应的脚手架工具 # 使用 根目录下创建一个 gulpfile.js 文件,在文件中定义具体流程(可以使用各种插件),导出的就是一个个任务。 # API gulp 常用的 API 有: Task:这个 API 用来创建任务,在命令下可以输入...
35 1 分钟

推荐 # 分层架构 # 管道架构 # 复制风格 # 微内核架构 # 微前端架构 # 组件化架构
14k 13 分钟

# vue 高级用法 # watchEffect 函数 立即运行传入的函数,同时自动追踪其依赖,并在依赖更改时重新执行。 watchEffect 的返回值是用于清除该副作用的函数。 const data = ref(0);const stop = watchEffect(()=>console.log(data.value,'data变化了'));stop(); // 清除响应性监听 watchEffect 的第二个参数是 options 配置项,可以配置 flush、onTrack 函数和 onTrigger...
2k 2 分钟

# 操作系统定义 操作系统(Operating System)是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件应用程序,同时也是计算机系统的内核和基石。 操作系统需要处理如管理与配置内存、决定系统资源供需的优先次序、控制输入与输出设备、操作网络与管理文件系统等基本事务。 # 进程 进程是:操作系统进行 资源分配 的基本单位 # 线程 线程是:操作系统进行 资源调度 的基本单位 #...
5.5k 5 分钟

# 虚拟化技术 虚拟化是一种计算机资源管理的技术,是将计算机的各种硬件资源,比如服务器、网络、CPU、内存、以及存储等,通过抽象和转换后呈现出的一套新的硬件资源环境,在这套资源环境中可以按照操作系统,部署应用环境等 虚拟化技术打破了计算机硬件资源不可切割的障碍,提高了计算机硬件资源的利用率 # 虚拟机 (硬件级虚拟化技术) 虚拟机是使用虚拟化的技术,使用抽象逻辑对物理计算机的模拟,包含整个操作系统和其中的应用程式。 缺点是:启动慢、使用空间很大、性能通常不高,无法完全使用计算机的性能。 # 容器...
1.5k 1 分钟

# CICD CI:持续集成 CD:持续交付 CD:持续部署 # 上线流程 发布上线流程举例:git 上传,开始跑测试,进行打包,使用 docker 容器化镜像打包,推送到 dev 开发环境,部署到 staging 测试环境,最后部署到 production 生产环境 # pipeline 一次 pipeline 就相当于一次构建任务,里面可以包含多个流程,如:安装依赖,跑测试代码,eslint 校验,编译,部署测试服务器,部署生产服务器等流程,任何提交或者 Merge Request 的合并都可以触发 Pipeline。 # runner 一个 runner...
1.6k 1 分钟

# OSI 七层网络模型 # 七、应用层(应用) 应用层就是我们最接近我们、最常用的一层,例如: ajax 调用接口发送 http 请求 使用 DNS 域名查询系统 邮件协议 SMTP websock 长连接 SSH 协议 等。 # 六、表示层(安全、压缩、翻译) 表示层做了几件重要的事情如: 压缩 安全(数据发送前进行加密,在接受者的表示层进行解密) 程序在网络中的翻译官(对图片文件等格式进行解码和编码) #...
1.1k 1 分钟

# 前端网络安全 # #1. XSS 跨站脚本攻击 原理 XSS 是常见的 Web 攻击技术之一。所谓的跨站脚本攻击指得是:恶意攻击者往 Web 页面里注入恶意 Script 代码,用户浏览这些网页时,就会执行其中的恶意代码,可对用户进行盗取 cookie...
280 1 分钟

Electron 中 preload 模块最为重要,它的源码逻辑如下: 首先 electron 中封装了 c++ 模块对接 node.js 的 addon 模块,方法是:在头文件中标注了:#include <node/addon.h> 此 c++ 模块将 app 实例绑定 (linkedBinding) 到 process 上,app 实例中有 exposeAPIInWorld 方法 接着 contextBridge 中的 expostInMainWorld 方法返回的是 process.linkedBinding.exposeAPIInWorld...