# 2022-06-10 前端页面
## 样式使用
### 公共样式
* 样式库 elementui，bootstrap
* 自己常用的样式
* 页面 class 命名， scoped 使用
### scss，less，stules，sass，原生 var()
* @include
* @mixin

## 工具类库
* 常量  前端常量  字典常量（ruoyi系统）
* 正则表达式
```javascript
const PATTERN = {  
    justNum: /^([1-9]\d*|[0]{1,1})$/, // 正整数  ，不能为小数  
    imagePattern: /^.*[^a][^b][^c]\.(?:png|jpg|bmp|gif|jpeg)$/,  
    number: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, // 大于零的数 包括小数  
    email: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@([a-zA-Z0-9]+[.])+[a-zA-Z]{2,3}$/, // 邮箱验证规则  
    username: /^([a-zA-Z]|[0-9]|[-._@])+$/, // 用户名验证规则  
    phone: /^1[3456789]\d{9}$/, // 手机号验证规则  
    limit2Decimal: /^\d+(\.\d{1,2})?$/, // 不超过2位小数  
    sptm: /^([a-zA-Z]|[0-9]){1,20}$/, // 商品条码  
    includeHanzi: /[\u4e00-\u9fa5]/, // 包含汉字  
    longitude: /^-?(?:(?:180(?:\.0{1,20})?)|(?:(?:(?:1[0-7]\d)|(?:[1-9]?\d))(?:\.\d{1,20})?))$/, // 经度验证（范围：-180~180）  
    latitude: /^-?(?:90(?:\.0{1,20})?|(?:[1-8]?\d(?:\.\d{1,20})?))$/, // 纬度验证（范围：-90~90）  
    url: /^(http|https):\/\/([\w.]?\/?)\S*/ // URL 验证  
}  
  
export default PATTERN
```
* 缓存
* 请求节流，ajax abort，axios cancelToken，
```javascript
function throttleFun (fn, args = [], time = 1000) {  
    clearTimeout(fn.timer)  
    fn.timer = setTimeout(() => {  
        fn.apply(this, args)  
    }, time)  
}    
```
* 数组操作 lodash 工具类 #https://www.lodashjs.com/
* 金融计算   bignumber/bigdecemal

## 公共组件
* 哪些公共组件可以封装
* 业务的公共组件封装

## git 
### 常用命令
* git clone
* git config --local(global) ***  [https://blog.csdn.net/weixin_29661213/article/details/111982694](https://blog.csdn.net/weixin_29661213/article/details/111982694)
* git pull
* git rebase
* git push
* git commit
* git add ***
* git status 
* git rm --cached
* git reset (history hash) --hard
* git stash
* git remote *** 
* git fetch
* git cherrypick
* .gitignore 文件
### 问题
* 禁止使用 -f/ --force
* 合并的时候，借助可视化工具，或者与冲突的同事一起合并。确保代码都已合并进来
* 前端   大文件资源
* windows 凭据

## 开发工具
* webstorm
* vscode

## 项目上
* 按钮的submitting
* 表格的loading
* v-show/v-if 的使用
* Promise.all

## webserver
* express

# 思考
* 如何实现换肤