怎么开发前端才更优雅

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

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

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

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

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

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

文件夹

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

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

不要重复文件夹功能，意思就是，如果你有这么一个文件夹 src\assets\imgs，就不要再创建src\assets\images了。

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

如果你想做一个第三方小工具的 js 文件夹，那么可以 src\plugins ,自己写的公共方法，可以创建成src\utils或者src\tools等

注意：

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

文件

一个文件夹中的主文件最好和文件夹同名，如 src\views\remoteBD\remoteBD.vue ，不要使用 src\views\remoteBD\index.vue 或者 src\views\remoteBD\main.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是微软开发的一款小工具合集，功能如图所示

简直是前端开发必备工具

使用浏览器插件

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

另外

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

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

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