怎么开发前端才更优雅
本文主要讲述对命名规范、工具、插件的一些建议,具体内容参见【参见】字样的超链接
本文将带你调整开发姿势,先来看以下几点
- 让公司给你配备三台显示器,第一台用来看浏览器效果,第二台用来写代码,第三台用来看开发者工具
- 让公司给你配备电竞椅,要可以躺下的那种,方便中午睡午觉
- 让公司给你配备独立办公室,并且可以抽烟
- 要弹性工作时间,前后可弹两个小时
如果公司都不同意(你不敢说不赖我),那只好在自己这边下手了。一些看起来繁琐的事情,有时反而让我们轻松。
文件夹、文件、变量、函数命名以及CSS选择器命名
如果你说这个不重要我不会反驳你的,因为每个人有自己的想法。但是有一套自己的命名规范,对在一段时间以后回头来看代码有很大的帮助。
文件夹
在vscode中下载 vscode-icons插件后,一些关键词文件夹图标会被替换成特殊图标,例如:
利用好关键词文件夹命名(注意不要滥用),会提升你找文件的速度
不要重复文件夹功能,意思就是,如果你有这么一个文件夹 src\assets\imgs,就不要再创建src\assets\images了。
如果有图片没有放在 src\assets\imgs 而放在了另外的文件夹,也是不可取的,这样会导致图片的路径难以追踪,如果想对图片进一步分类,可以 src\assets\imgs\icons,以此类推,其他类型的文件也是如此。
如果你想做一个第三方小工具的 js 文件夹,那么可以 src\plugins ,自己写的公共方法,可以创建成src\utils或者src\tools等
注意:
- 如果你已经创建了 src\tools ,就不要再创建 src\xxx\tools 了,这样在列表中看起来很混乱,并且难以追踪
- 不要创建框架中自带的关键词文件夹,比如 vue 项目中,不要创建 src\views\home\components ,因为已经有了src\components ,如果想创建home页专属的components ,可以创建src\components\home
- 避免用文件格式命名文件夹,时间长了可能就忘了这个文件夹的功能,例如 src\utils\json 、src\utils\script
- 避免使用短横线,可以使用下划线,下划线不推荐用在开头或结束
- 统一使用大驼峰、小驼峰下划线命名,不要混用,下划线命名是兼容性比较高的,小驼峰命名是识别性比较强的,大驼峰是比较美观的
- 拼音和英文不要混用,要么全用英文,要么全用拼音
文件
一个文件夹中的主文件最好和文件夹同名,如 src\views\remoteBD\remoteBD.vue ,不要使用 src\views\remoteBD\index.vue 或者 src\views\remoteBD\main.vue
- 避免使用短横线,可以使用下划线,下划线不推荐用在开头或结束
- 统一使用大驼峰、小驼峰下划线命名,不要混用,下划线命名是兼容性比较高的,小驼峰命名是识别性比较强的,大驼峰是比较美观的
- 拼音和英文不要混用,要么全用英文,要么全用拼音
- 不要以框架项目的关键字命名 如 vue.config.js
- 不要以简单的、无意义的字符命名 如:a.png、b.png、topBtnBg.png、innerData.json、config.json、tools.js等,正确命名如:meatInAView.png、meatInBView.png、sendMsgBtnInTopBg.png、foodInnerData.json、foodConfig.json、eatTools.js,看起来长了一些,但是意义更加明确了
做到以上两个方面,你将拥有一个干净整洁、分类明确的文件树,恭喜。
变量和函数
见名知意是唯一的要求,千万不要怕名字长,还有一件事,动词名词的前后顺序一定要固定,比如:sendMsgToServer,是动词在前,名词在后,serverMsgSender就是名词在前,动词在后。
这个虽然无伤大雅,但是在日常的阅读中会稍微增加一点负担。
变量的命名也不能以简单的、无意义的字符命名,比如:let data = {}、let str1 = "" 、let newArr = []。改成 let originalData= {}、let msg= "" 、let recArr= [] 更好一点
CSS选择器
推荐使用less作为预处理器,你可以完全不用学习less,而只使用它的嵌套功能,更多的功能还需要你在实际开发中探索。
css选择器命名只需要见名知意即可,不推荐使用短横线("-")分类,推荐使用更多的class名来分类,很多人可能习惯
&-xxx这种写法,但是这种写法可读性极差,如果想为某些元素加同样的样式,可以令起一个类,比如
.flex{
display:flex;
}
这样,把flex类加到任何元素即可。摒弃了短横线后,还可以便捷的双击选中并搜索。这里推荐一个vscode插件:CSS Navigation
使用ES6
很多人只知道es6新语法有 let const、箭头函数、数组对象解构什么的,很多小的实用功能却很少有人用过。
可选链操作符
//const name = obj && obj.name;
const name = obj?.name;
字符串模板和对象属性表达式
//let obj = {};
//let index = 1;
//let key = `topic${index}`;
//obj[key] = '话题内容';
let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';
非空判断
//if(value !== null && value !== undefined && value !== ''){
//...
//}
if((value??'') !== ''){
//...
}
更多实用语法,参见:你会用ES6,那倒是用啊! 、ES6基本全部语法
使用工具(powerToys)
powerToys是微软开发的一款小工具合集,功能如图所示
简直是前端开发必备工具
使用浏览器插件
浏览器插件可以帮你完成很多工作,比如接口测试、管理cookie和本地缓存,甚至可以做到自动化流水线,如果你还不会开发浏览器插件,参见:一文学会浏览器插件 不要重复造轮子!
另外
学习node.js(或任何一个后端语言)和mysql(或任何一个数据库)都对前端开发有帮助,至少你应该知道应该把锅甩给谁,而不是唯唯诺诺不敢说话,个人推荐学习后端语言从node.js(好上手)学起,数据库从mysql(好上手)学起。这里推荐一个学习全栈开发的开源项目:Vue-Admin-Xmw-Pro ,后端使用的egg.js(node.js框架)也是好上手的一款,钻透这个项目,就可以独立开发一个全栈项目了
学习强类型的语言可能会给你带来一些好处,但是在前端开发中的效率提升不明显。比如,一些小型项目如果使用TS开发,只会徒增负担和降低效率。所以不用担心不会TS会影响你的仕途,大部分项目是用不到的。如果希望学一款强类型语言,也不推荐学习TS(TS不能称之为一门语言,它只是js的类型检查工具),可以考虑从java入手,更完整的体验强类型的语言。
当你掌握了上述内容,你就拥有了打败80%的人的快速面向业务的能力,加油,召唤师 前端人