Abbr. & Shorthand

abbreviation /ə'brivɪ'eʃən/ 缩写；缩写词

操作系统（OS）

• OS

OS Operator System
REPL Read Eval Print Loop 读取-求值-输出-循环|交互式顶层构件
CLI Command-Line Interface 命令行界面
VCS Version Control System 版本控制系统
CDN Content Delivery Network 内容分发网络
SemVer Semantic Versioning 语义化版本

• Keyboard

esc escape 逃避，避免
ctrl control
cmd command
alt /ɔːlt/ alternate 交替
tab tabulator
TLDR | tldr Too Lone, Don't Read

编程（Programme）

• Design

POP Procedure Oriented Programming 面向过程编程
OOP Object Oriented Programming
SOA Service Oriented Architecture
AOP Aspect Oriented Programming 面向切面编程
COP Concurrency Oriented Programing 面向并发编程
FP Functional Programming
IoC Inversion of Control 控制反转
DI Dependency Injection 依赖注入
GC Garbage Collection
spec specification 载明、详述、说明

• JavaScript

JS JavaScript
TS TypeScript
npm Node Package Manager
IIFE Immediately Invoked Function Expression
UMD Universal Module Definition 通用模块定义
AMD Asynchronous Module Definition
CMD Common Module Definition
JSON JavaScript Object Notation

• Node

arch architecture
env environment

前端（FE - FrontEnd）

• Architecture & Libs

SSR Server-side Rendering
CSR Client-side Rendering
SSG Static Side Generation
SPA Single Page Application
MPA Multi-page Application

• Browser

BOM Browser Object Model 浏览器对象模型
DOM Document Object Model 文档对象模型
XML Extensible Markup Language 可拓展标记语言

• HTML

attr. attribute
div division 分界，划分；层
HTML Hypertext Markup Language 超文本标记语言
href Hypertext Reference
rel Relationship
src Source | Source Code | Sparse Coding
pic Picture
img Image
alt Alert

• CSS

CSS Cascading Style Sheets 层叠样式表
CSSOM CSS Object Modal
OOCSS Object Oriented CSS
SMACSS Scalable and Modular Architecture for CSS
BEM Block-Element-Modifier BEM 命名规范（块-元素-修饰符）
ITCSS Inverted Triangle CSS 倒三角结构 CSS

• Libs | Vue | React

VM Virtual DOM
ref reference
HOC Higher-Order Component
SFC Single File Component

• Performance

RAIL Response Animation Idle Load Chrome RAIL 模型
FP First Paint 首次绘制
FCP First Contentful Paint 首次有内容绘制
LCP Largest Contentful Paint 最大内容绘制
DCL DOM Content Loaded
FMP First Meaningful Paint 首次有效绘制
L onLoad 加载
TTI Time to Interactive 可交互时间
TBT Total Blocking Time 页面阻塞总时长
FID First Input Delay 首次输入延迟
CLS Cumulative Layout Shift 累积布局偏移
SI Speed Index 首屏展现平均值
VC Visual Complete 视觉完备

网络（NetWork）

• Network

www World Wide Web
WAN Wide Area Network 广域网
WLAN Wireless LAN 无线局域网
LAN Local Area Network 局域网

• Protocol 协议

HTTP Hypertext Transfor Protocol 超文本传输协议
HTTPS Hypertext Transfor Protoco over Secure Sockets Layer
SSL Secure Scokets Layer 安全套接层协议
TLS Transport Layer Security 传输层安全性协议
UDP User Datagram Protocol 用户数据包协议
TCP Transfor Control Protocol 传输控制协议
URI Unifoerm Resource Identifier 统一资源标识
URL Uniform Resource Locator 统一资源定位符
URN Uniform Resource Name 统一资源名
RPC Remote Procedure Call 远程过程调度
Restful API Representational state transfer API
DNS Domain Name System
NAT Network Address Translation 网络地址转换
DHCP Dynamic Host Configuration Protocol 主机动态配置协议
VPN Virtual Private Network

• Security 安全

XSS Cross Side Script
CSP Content Security Policy
CSRF Cross Site Request Forgrey

• Analy

IP Internet Protocol 独立 IP
UV Unique Visitor 独立访客
PV Page View 访问量

其他

• 技术产品

CMS Content Management System
ERP Enterprise Resource Planning 企业资源计划
SaaS Software as a Service
PaaS Platform as a Service
IaaS Infrastructure as a Service
BOSS Business & Operation Support System BSS + OSS

• 别名 | Shorthand

a11y accessibility 可访问性；辅助功能
i18n internationalization
k8s kubernetes
3w www | world wide web

• Jobs

hc Head Count 名额

Regular Expression Cheatsheet

Character classes

1
2
3
4
5
6

.       # any character except newline
\w\d\s  # word, digit, whitespace
\W\D\S  # not word, digit, whitespace
[abc]   # any of a, b, or c
[^abc]  # not a, b, or c
[a-g]   # character between a & g

Anchors

1
2

^abc$  # start/end of the string
\b\B   # word, not-word boundary

Escaped characters

1
2

\.\*\\  # escaped special characters
\t\n\r  # tab, linefeed, carriage return

MacOS 装机

「Level ｜ Type ｜ Origin」：建议程度｜类型｜安装源

• Level（建议程度）
  • M（Must） 必须
  • S（Shall） 要
  • R（Recommend） 推荐
• Type（类型）
  • Env（Lang、CLI、Global、REPL、Compiler、Tool、PM）
  • APP（Desktop、GUI Client、IDE、Product）
  • VM（Runtime、VM、Container）
  • Extension（Plugin、Configuration）
• Origin（安装源）
  • App Store
  • Github
  • Official Website
  • Homebrew（System PM）
  • Docker Hub
  • Package Manager（MVN、NPM、Inner Registry）

Unix 哲学

拿不准就穷举 — Ken Thompson（Unix \ Go 作者之一）

• 模块原则(Modularity): 写简单的程序，并用好的接口连接它们
• 清晰原则(Clarity): 清楚透明的算法比“高明”的算法更好
• 组装原则(Composition): 写能够跟其他程序一起工作的程序
• 隔离原则(Separation): 分离接口（使用引擎的方法）和引擎
• 简单原则(Simplicity): 尽量简化算法，不到必要的时候不要增加复杂度
• 简约原则(Parsimony): 只要在必要的时候才写大型程序，通常小程序已经足够了
• 透明原则(Transparency): 写容易测试和纠错的代码
• 健壮原则(Robustness): 这是简单和简约的副产物

Git Cli CheatSheet

一、新建代码库

1
2
3
4
5
6
7
8

# 在当前目录新建一个Git代码库
$ git init

# 新建一个目录，将其初始化为Git代码库
$ git init [project-name]

# 下载一个项目和它的整个代码历史
$ git clone [url]

二、配置
Git的设置文件为.gitconfig

它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）
全局配置: ~/.gitconfig ，项目配置: $/.git/config

Command Line for Linux

常用命令行

Folder operation

1
2
3
4
5
6
7

mkdir #创建一个目录
rmdir # 删除一个目录
mvdir # 移动或重命名一个目录
cd # 改变当前目录
pwd # 显示当前目录的路径名
ls # 显示当前目录的内容
dircmp # 比较两个目录的内容

Command Line for macOS

常用命令行

Folder Operation

1
2
3
4
5
6
7

mkdir #创建一个目录
rmdir # 删除一个目录
mvdir # 移动或重命名一个目录
cd # 改变当前目录
pwd # 显示当前目录的路径名
ls # 显示当前目录的内容
dircmp # 比较两个目录的内容

前端性能优化

• 前端性能优化
  • 移动端
    • 保持单个文件小于25KB
    • 打包内容为分段multipar文档
  • 图片
    • 优化图片
    • 优化CSS Sprite
    • 不要在HTML中缩放图片
    • 使用体积小、可缓存的 favicon.ico
  • 渲染层面
    • 服务端渲染的探索和实践
    • 浏览器的渲染机制解析
      • CSS性能方案
      • JS性能方案
    • DOM优化
      • 原理与基本思路
      • 事件循环与异步更新
      • 回流与重绘
    • 首屏渲染提速
      • 懒加载初探
  • 页面内容
    • 减少HTTP请求数
    • 减少DNS查询
    • 避免重定向
    • 缓存Ajax请求
    • 延迟加载
    • 预加载
    • 减少DOM元素数量
    • 划分内容到不用域名
    • 尽量减少iframe使用
    • 避免404错误
  • 服务器
    • 使用CDN
    • 添加Expires或Cache-Control响应头
    • 启用Gzip
    • 配置Etag
    • 尽早输出缓冲
    • Ajax请求使用GET方法
    • 避免图片src为空
  • Cookie
    • 减少Cookie大小
    • 静态资源使用Cookie域名
  • CSS
    • 样式表放在中
    • 不要使用CSS表达式
    • 使用替代@import
    • 不要使用filter
  • Javascript
    • 把脚本放在页面底部
    • 使用外部Javascript&CSS
    • 压缩Javascript&CSS
    • 移除重复脚本
    • 减少DOM操作
    • 使用高效的事件处理
  • 网络层
    • 请求过程的优化
      • HTTP请求优化
        • 构建工具性能调优
        • Gzip压缩原理
        • 图片优化
    • 减少网路请求
      • 本地存储（存储篇）
        • 浏览器的缓存机制
        • 利离线存储技术
    • 性能检测
      • 可视化工具
        • Performance
        • LightHouse
      • W3C性能API

前端规范

• Clean Code JS
  • 简介
    • 原则&指南
    • 目的
      • 生产可读的、可重用的、可重构的软件指南
  • 变量
    • 使用有意义并且可读的变量名称
    • 为相同类型的变量使用相同的词汇
    • 使用可搜索的名称
    • 使用解释性的变量
    • 避免心理映射
    • 不添加不必要的上下文
    • 使用默认变量替代短路运算或条件
  • 函数
    • 函数参数 (两个以下最理想)
    • 函数应当只做一件事情
    • 函数名称应该说明它要做什么
    • 函数应该只有一个抽象级别
    • 移除冗余代码
    • 使用 Object.assign 设置默认对象
    • 不要使用标记位做为函数参数
    • 避免副作用
    • 不要写入全局函数
    • 函数式编程优于指令式编程
    • 封装条件语句
    • 避免负面条件
    • 避免条件语句
    • 避免类型检查 (part 1)
    • 避免类型检查 (part 2)
    • 不要过度优化
    • 移除僵尸代码
  • 对象和数据结构
    • 使用 getters 和 setters
    • 让对象拥有私有成员
  • 类
    • ES2015/ES6 类优先与 ES5 纯函数
    • 使用方法链
    • 组合优先于继承
  • SOLID
    • 单一职责原则 (SRP)
    • 开闭原则 (OCP)
    • 里氏代换原则 (LSP)
    • 接口隔离原则 (ISP)
    • 依赖反转原则 (DIP)
  • 测试
    • 一个测试一个概念
  • 并发
    • 使用 Promises, 不要使用回调
    • Async/Await 比 Promises 更加简洁
  • 错误处理
    • 不要忽略捕捉到的错误
    • 不要忽略被拒绝的 promise
  • 格式化
    • 使用一致的大小写
    • 函数的调用方式与被调用方应该靠近
  • 注释
    • 仅仅对包含复杂业务逻辑的东西进行注释
    • 不要在代码库中保存注释掉的代码
    • 不要有日志式的注释
    • 避免占位符

VSCode 常用快捷键

command + p > shell command 开始 code 命令行