obsidian_note/技术培训/培训 大纲/2022-06-10.md

2022-06-10 前端页面

样式使用

公共样式

• 样式库 elementui，bootstrap
• 自己常用的样式
• 页面 class 命名， scoped 使用

scss，less，stules，sass，原生 var()

• @include
• @mixin

工具类库

• 常量 前端常量 字典常量（ruoyi系统）
• 正则表达式

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，

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
• 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

思考

• 如何实现换肤