前端开发实战技巧汇总

Spider Cat 蜘蛛猫

已于 2022-07-06 09:42:34 修改

阅读量364

点赞数

分类专栏：前端知识点汇总文章标签： npm 前端 javascript

于 2022-06-30 11:37:01 首次发布

本文链接：https://blog.csdn.net/oschina_41559824/article/details/125537341

版权

前端知识点汇总专栏收录该内容

12 篇文章 1 订阅

订阅专栏

参考资料

原生 js 系列

01-冴羽大佬

JavaScript 深入系列
 ES6 系列
 JavaScript 专题系列
 underscore 系列
 TypeScript 系列

02-完全熟练掌握 eventLoop。

06-插件机制

07-设计模式

08-开发思想

09-代码规范

10-算法

11-框架篇

Vue 方面的话，我主要是师从黄轶老师，跟着他认真走，基本上在 Vue 这方面你可以做到基本无敌。
熟练运用

对于 Vue 你必须非常熟练的运用，官网的 api 你基本上要全部过一遍。并且你要利用一些高级的 api 去实现巧妙的封装。举几个简单的例子。

你要知道怎么用 slot-scope 去做一些数据和 ui 分离的封装。
以 vue-promised 这个库为例。
Promised 组件并不关注你的视图展示成什么样，它只是帮你管理异步流程，并且通过你传入的 slot-scope，在合适的时机把数据回抛给你，并且帮你去展示你传入的视图。

你需要熟练的使用 Vue.extends，配合项目做一些命令式 api 的封装。并且知道它为什么可以这样用。（需要具备源码知识）
confirm 组件

你要开始使用 JSX 来编写你项目中的复杂组件了，比如在我的网易云音乐项目中，我遇到了一个复杂的音乐表格需求，支持搜索文字高亮、动态隐藏列等等。
当然对于现在版本的 Vue，JSX 还是不太好用，有很多属性需要写嵌套对象，这会造成很多不必要的麻烦，比如没办法像 React 一样直接把外层组件传入的 props 透传下去，Vue3 的 rfc 中提到会把 vnode 节点的属性进一步扁平化，我们期待得到接近于 React 的完美 JSX 开发体验吧。

你要深入了解 Vue 中 nextTick 的原理，并且知道为什么要用微任务队列优于宏任务队列，结合你的 eventloop 知识深度思考。最后融入到你的异步合并优化的知识体系中去。
Vue 源码详解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！

你要能理解 Vue 中的高阶组件。关于这篇文章中为什么 slot-scope 不生效的问题，你不能看他的文章讲解都一头雾水。（需要你具备源码知识）
探索 Vue 高阶组件 | HcySunYang

推荐一下我自己总结的 Vue 高阶组件文章，里面涉及到了一些进阶的用法。
Vue 进阶必学之高阶组件 HOC

对于 Vuex 的使用必须非常熟练，知道什么时候该用 Vuex，知道怎么根据需求去编写 Vuex 的 plugin，合理的去使用 Vuex 的 subscribe 功能完成一些全局维度的封装，比如我对于 Vuex 中 action 的错误处理懒得一个个去 try catch，就封装了一个 vuex-error-plugin。代码很简单，重要的是去理解为什么能这样做。这里用了 monkey patch 的做法，并不是很好的实践，仅以此作为引子。

对于 vue-router 的使用必须非常熟练，知道什么需求需要利用什么样的 router 钩子，这样才能 hold 住一个大型的项目，这个我觉得官方仓库里的进阶中文文档其实很好，不知道为什么好像没放在官网。
vue-router-advanced

理解虚拟 DOM 的本质，虚拟 DOM 一定比真实 DOM 更快吗？这篇是尤雨溪的回答，看完这个答案，相信你会对虚拟 DOM 有更进一步的认识和理解。
网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？

源码深入

你不光要熟练运用 Vue，由于 Vue 的源码写的非常精美，而且阅读难度不是非常大，很多人也选择去阅读 Vue 的源码。视频课这里推荐黄轶老师的 Vue 源码课程。这里也包括了 Vuex 和 vue-router 的源码。
Vue.js 源码全方位深入解析（含 Vue3.0 源码分析）

推荐 HcySunYang 大佬的 Vue 逐行分析，需要下载 git 仓库，切到 elegant 分支自己本地启动。
Vue 逐行级别的源码分析

当然，这个仓库的 master 分支也是宝藏，是这个作者的渲染器系列文章，脱离框架讲解了 vnode 和 diff 算法的本质
组件的本质

优秀博主

springleo’s blog

云息的面试资料库

书栈网

实战资料

1.Node

1.1Node.js版本切换最终方案（亲测有效）

nvm是node.js的版本管理器，可以安装和切换不同版本node.js

第一步：下载
下载地址：Releases · coreybutler/nvm-windows · GitHub
第二步：安装
按照提示完成安装即可，安装完成后可以检测一下是否安装成功

在cmd命令行输入nvm,如果出现nvm版本号和一系列帮助指令，则说明nvm安装成功。

第三步：修改settings.txt
在你安装的目录下找到settings.txt文件，打开后加上
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

这一步主要是将npm镜像改为淘宝的镜像，可以提高下载速度。

-第四步：node.js 安装
可以先使用 num list 查看本地已安装的版本

然后使用 nvm list available 查看所有版本

NVM常用命令
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm version 查看当前的版本
nvm install 安装最新版本nvm
nvm use <version> ## 切换使用指定的版本node
nvm ls 列出所有版本
nvm current显示当前版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名
nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包
nvm on 打开nodejs控制
nvm off 关闭nodejs控制
nvm proxy 查看设置与代理
nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.
nvm uninstall <version> 卸载制定的版本
nvm use [version] [arch] 切换制定的node版本和位数
nvm root [path] 设置和查看root路径

1.2技巧二：

vue 项目在运行时控制台报：Error from chokidar (D:): Error: EBUSY: resource busy or locked, lstat ‘D:\pagefile.sys’ 错误，上网查阅解决方案：

1.将项目文件在属性的只读设置去掉，让命令行有最大权限
1.删除 node_modules，再重新进行安装需要的依赖包(npm install 或者 cnpm install)；
2.删除 node_modules ，然后运行npm cache clean 或者npm cache clean --force;再重新进行安装需要的依赖包

2.常用类库

2.1.JS或TS常用工具类库

sn-js-utils这是一个通用的 JS 工具类库
以下为常用方法

CommonUtil 常用工具类
phoneIsValid 检查手机号是否合法
maskPhone 对手机号进行脱敏处理
idcardIsValid 检查身份证是否合法
maskIDCard 对身份证进行脱敏处理
mask 通用脱敏方法
maskName 对姓名脱敏
maskEMail 对电子邮箱脱敏


NumberUtil 数字工具类
isInteger 是否为整数
isFloat 是否为小数
inRange 是否在范围内
random 随机数


ArrayUtil 数组工具类
chunk 数组分块
slice 数组切片
group 对象数组分组


DateUtil 日期工具类
parseDate 将 字符串/时间戳 解析成日期对象
formatDate 将日期格式化成指定格式的字符串
formatDateToFriendly 日期格式化成友好格式
timestamp 获取时间戳
dateBefore 日期向前偏移
dateAfter 日期向后偏移
isLeapYear 判断是否闰年
getDaysInMonth 给定的月份有多少天
getDateStart 获取日期指定时间维度的开头
getDateEnd 获取日期指定时间维度的结尾
getDayCountOfYear 获取给定日期所在当年总共有多少天
getDayIndexOfYear 获取给定日期在当年的第几天
getWeekIndexOfYear 获取给定日期在当年的第几周
getWeekIndexOfMonth 获取给定日期在当月的第几周
getDateDiff 计算两个日期的差


StringUtil 字符串工具类
isEmpty 判断字符串是否为空
isNotEmpty 判断字符串是否不为空
trim 将字符串去除空格
startsWith 判断字符串是否以某个字符串开头
endsWith 判断字符串是否以某个字符串结束
contains 判断字符串是否包含某个字符串
equals 判断两个字符串是否相等
equalsIgnoreCase 忽略大小写判断两个字符串是否相等
containsWhitespace 判断字符串是否含有空格
repeat 按指定数量生成给定字符串字符
deleteWhitespace 去除字符串中的空格
rightPad 将给定字符串进行右侧填充
leftPad 将给定字符串进行左侧填充
capitalize 将字符串首字母转大写
unCapitalize 将字符串首字母转小写
swapCase 将字符串中的字母大写转小写，小写转大写
countMatches 统计含有的子字符串的个数
isAlpha 判断字符串是否为字母
isAlphaSpace 判断字符串是否为字母、空格
isAlphanumeric 判断字符串是否为字母、数字
isAlphanumericSpace 判断字符串是否为字母、数字、空格
isNumeric 判断字符串是否为数字
isDecimal 判断字符串是否为小数
isNegativeDecimal 判断字符串是否为负小数
isPositiveDecimal 判断字符串是否为正小数
isInteger 判断字符串是否为整数
isPositiveInteger 判断字符串是否为正整数
isNegativeInteger 判断字符串是否为负整数
isNumericSpace 判断字符串是否为数字、空格
isWhitespace 判断字符串是否为空格
isAllLowerCase 判断字符串是否为小写字母
isAllUpperCase 判断字符串是否为大写字母
defaultIfEmpty 如果字符串为空则使用默认字符串, 否则不变
reverse 字符串反转
removeSpecialCharacter 删掉特殊字符(英文状态下)
isSpecialCharacterAlphanumeric 只包含特殊字符、数字和字母（不包括空格，若想包括空格，改为[ -~]）
format 消息格式化后的字符串
isChinese 中文校验
removeChinese 去掉中文字符
escapeMetacharacter 转义元字符
escapeMetacharacterOfStr 转义字符串中的元字符
camelize 将中划线分隔形式的字符串转换为驼峰式的字符串
hyphenate 将驼峰式的字符串转换为中划线分隔形式的字符串