怎么开发前端才更优雅

本文主要讲述对命名规范、工具、插件的一些建议,具体内容参见【参见】字样的超链接

本文将带你调整开发姿势,先来看以下几点

  1. 让公司给你配备三台显示器,第一台用来看浏览器效果,第二台用来写代码,第三台用来看开发者工具
  2. 让公司给你配备电竞椅,要可以躺下的那种,方便中午睡午觉
  3. 让公司给你配备独立办公室,并且可以抽烟
  4. 要弹性工作时间,前后可弹两个小时

如果公司都不同意(你不敢说不赖我),那只好在自己这边下手了。一些看起来繁琐的事情,有时反而让我们轻松。

文件夹、文件、变量、函数命名以及CSS选择器命名

如果你说这个不重要我不会反驳你的,因为每个人有自己的想法。但是有一套自己的命名规范,对在一段时间以后回头来看代码有很大的帮助。

文件夹

在vscode中下载 vscode-icons插件后,一些关键词文件夹图标会被替换成特殊图标,例如:

怎么开发前端才更优雅插图

利用好关键词文件夹命名(注意不要滥用),会提升你找文件的速度

不要重复文件夹功能,意思就是,如果你有这么一个文件夹 srcassetsimgs,就不要再创建srcassetsimages了。

如果有图片没有放在 srcassetsimgs 而放在了另外的文件夹,也是不可取的,这样会导致图片的路径难以追踪,如果想对图片进一步分类,可以 srcassetsimgsicons,以此类推,其他类型的文件也是如此。

如果你想做一个第三方小工具的 js 文件夹,那么可以 srcplugins ,自己写的公共方法,可以创建成srcutils或者srctools等

注意:

  1. 如果你已经创建了 srctools ,就不要再创建 srcxxxtools 了,这样在列表中看起来很混乱,并且难以追踪
  2. 不要创建框架中自带的关键词文件夹,比如 vue 项目中,不要创建 srcviewshomecomponents ,因为已经有了srccomponents ,如果想创建home页专属的components ,可以创建srccomponentshome
  3. 避免用文件格式命名文件夹,时间长了可能就忘了这个文件夹的功能,例如 srcutilsjson 、srcutilsscript
  4. 避免使用短横线,可以使用下划线,下划线不推荐用在开头或结束
  5. 统一使用大驼峰、小驼峰下划线命名,不要混用,下划线命名是兼容性比较高的,小驼峰命名是识别性比较强的,大驼峰是比较美观的
  6. 拼音和英文不要混用,要么全用英文,要么全用拼音

文件

一个文件夹中的主文件最好和文件夹同名,如 srcviewsremoteBDremoteBD.vue ,不要使用 srcviewsremoteBDindex.vue 或者 srcviewsremoteBDmain.vue

  1. 避免使用短横线,可以使用下划线,下划线不推荐用在开头或结束
  2. 统一使用大驼峰、小驼峰下划线命名,不要混用,下划线命名是兼容性比较高的,小驼峰命名是识别性比较强的,大驼峰是比较美观的
  3. 拼音和英文不要混用,要么全用英文,要么全用拼音
  4. 不要以框架项目的关键字命名 如 vue.config.js
  5. 不要以简单的、无意义的字符命名 如: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是微软开发的一款小工具合集,功能如图所示

怎么开发前端才更优雅插图1

简直是前端开发必备工具

使用浏览器插件

浏览器插件可以帮你完成很多工作,比如接口测试、管理cookie和本地缓存,甚至可以做到自动化流水线,如果你还不会开发浏览器插件,参见:一文学会浏览器插件 不要重复造轮子!

另外

学习node.js(或任何一个后端语言)和mysql(或任何一个数据库)都对前端开发有帮助,至少你应该知道应该把锅甩给谁,而不是唯唯诺诺不敢说话,个人推荐学习后端语言从node.js(好上手)学起,数据库从mysql(好上手)学起。这里推荐一个学习全栈开发的开源项目:Vue-Admin-Xmw-Pro ,后端使用的egg.js(node.js框架)也是好上手的一款,钻透这个项目,就可以独立开发一个全栈项目了

学习强类型的语言可能会给你带来一些好处,但是在前端开发中的效率提升不明显。比如,一些小型项目如果使用TS开发,只会徒增负担和降低效率。所以不用担心不会TS会影响你的仕途,大部分项目是用不到的。如果希望学一款强类型语言,也不推荐学习TS(TS不能称之为一门语言,它只是js的类型检查工具),可以考虑从java入手,更完整的体验强类型的语言。

当你掌握了上述内容,你就拥有了打败80%的人的快速面向业务的能力,加油,召唤师 前端人

文章来源于互联网:怎么开发前端才更优雅

THE END
分享
二维码