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

　　本文将带你调整开发姿势，先来看以下几点让公司给你配备三台显示器，第一台用来看浏览器效果，第二台用来写代码，第三台用来看开发者工具让公司给你配备电竞椅，要可以躺下的那种，方便中午睡午觉让公司给你配备独立办公室，并且可以抽烟要弹性工作时间，前后可弹两个小时
　　如果公司都不同意（你不敢说不赖我），那只好在自己这边下手了。一些看起来繁琐的事情，有时反而让我们轻松。文件夹、文件、变量、函数命名以及CSS选择器命名
　　如果你说这个不重要我不会反驳你的，因为每个人有自己的想法。但是有一套自己的命名规范，对在一段时间以后回头来看代码有很大的帮助。文件夹
　　在vscode中下载vscodeicons插件后，一些关键词文件夹图标会被替换成特殊图标，例如：
　　利用好关键词文件夹命名（注意不要滥用），会提升你找文件的速度
　　不要重复文件夹功能，意思就是，如果你有这么一个文件夹srcassetsimgs，就不要再创建srcassetsimages了。
　　如果有图片没有放在srcassetsimgs而放在了另外的文件夹，也是不可取的，这样会导致图片的路径难以追踪，如果想对图片进一步分类，可以srcassetsimgsicons，以此类推，其他类型的文件也是如此。
　　如果你想做一个第三方小工具的js文件夹，那么可以srcplugins，自己写的公共方法，可以创建成srcutils或者srcools等
　　注意：如果你已经创建了srcools，就不要再创建srcxxxools了，这样在列表中看起来很混乱，并且难以追踪不要创建框架中自带的关键词文件夹，比如vue项目中，不要创建srcviewshomecomponents，因为已经有了srccomponents，如果想创建home页专属的components，可以创建srccomponentshome避免用文件格式命名文件夹，时间长了可能就忘了这个文件夹的功能，例如srcutilsjson、srcutilsscript避免使用短横线，可以使用下划线，下划线不推荐用在开头或结束统一使用大驼峰、小驼峰下划线命名，不要混用，下划线命名是兼容性比较高的，小驼峰命名是识别性比较强的，大驼峰是比较美观的拼音和英文不要混用，要么全用英文，要么全用拼音文件
　　一个文件夹中的主文件最好和文件夹同名，如srcviewsremoteBDremoteBD。vue，不要使用srcviewsremoteBDindex。vue或者srcviewsremoteBDmain。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就是名词在前，动词在后。
　　这个虽然无伤大雅，但是在日常的阅读中会稍微增加一点负担。
　　变量的命名也不能以简单的、无意义的字符命名，比如：letdata｛｝、letstr1、letnewArr〔〕。改成letoriginalData｛｝、letmsg、letrecArr〔〕更好一点CSS选择器
　　推荐使用less作为预处理器，你可以完全不用学习less，而只使用它的嵌套功能，更多的功能还需要你在实际开发中探索。
　　css选择器命名只需要见名知意即可，不推荐使用短横线（）分类，推荐使用更多的class名来分类，很多人可能习惯
　　xxx这种写法，但是这种写法可读性极差，如果想为某些元素加同样的样式，可以令起一个类，比如。flex｛display：flex；｝
　　这样，把flex类加到任何元素即可。摒弃了短横线后，还可以便捷的双击选中并搜索。这里推荐一个vscode插件：CSSNavigation使用ES6
　　很多人只知道es6新语法有letconst、箭头函数、数组对象解构什么的，很多小的实用功能却很少有人用过。
　　可选链操作符constnameobjobj。name；constnameobj？。name；
　　字符串模板和对象属性表达式letobj｛｝；letindex1；letkeytopic｛index｝；obj〔key〕话题内容；letobj｛｝；letindex1；obj〔topic｛index｝〕话题内容；
　　非空判断if（value！nullvalue！undefinedvalue！）｛。。。｝if（（value？？）！）｛。。。｝
　　更多实用语法，参见：你会用ES6，那倒是用啊！、ES6基本全部语法使用工具（powerToys）
　　powerToys是微软开发的一款小工具合集，功能如图所示
　　简直是前端开发必备工具使用浏览器插件
　　浏览器插件可以帮你完成很多工作，比如接口测试、管理cookie和本地缓存，甚至可以做到自动化流水线，如果你还不会开发浏览器插件，参见：一文学会浏览器插件不要重复造轮子！另外
　　学习node。js（或任何一个后端语言）和mysql（或任何一个数据库）都对前端开发有帮助，至少你应该知道应该把锅甩给谁，而不是唯唯诺诺不敢说话，个人推荐学习后端语言从node。js（好上手）学起，数据库从mysql（好上手）学起。这里推荐一个学习全栈开发的开源项目：VueAdminXmwPro，后端使用的egg。js（node。js框架）也是好上手的一款，钻透这个项目，就可以独立开发一个全栈项目了
　　学习强类型的语言可能会给你带来一些好处，但是在前端开发中的效率提升不明显。比如，一些小型项目如果使用TS开发，只会徒增负担和降低效率。所以不用担心不会TS会影响你的仕途，大部分项目是用不到的。如果希望学一款强类型语言，也不推荐学习TS（TS不能称之为一门语言，它只是js的类型检查工具），可以考虑从java入手，更完整的体验强类型的语言。
　　当你掌握了上述内容，你就拥有了打败80的人的快速面向业务的能力，加油，前端人。
　　文章来源：https：www。cnblogs。comKayLarryp17010977。html