本文不是讲如何优化项目的性能，而是介绍自己在工作中总结的一些开发经验，旨在通过提高开发习惯的效率来改进工作。这是麦泰。jpg东北人有个词很有意思，叫麦太。哈哈，不知道各位老铁有没有听身边的朋友说。在生活中，我们绝对不希望别人嫌弃我们。同样，我们的项目也不应该被“埋没”。开发一个优秀的项目结构，不仅可以让我们看着舒服，也为我在日常的代码维护中提供了极大的方便。所以在工作中总结了一些优化前端项目结构的小建议，献给大家。1.项目目录优化这可能是很多人最不关心的地方，但这里却是你开发视觉效果的关键。正确使用static文件夹static，就是static的意思，也就是一些固定的资源要放到static里面，比如vue-cli提供的static文件夹，一些固定的资源，比如404图片等图片资源，应该是存储在区号.js文件等。这些资源放在static中，不仅导入方便，而且static中的文件不会被webpack处理，进一步节省打包时间。应该有一个util工具箱util，tool，顾名思义，这是一个存放各种工具功能的文件夹。项目中难免会用到重复的处理函数，比如deepClone、floatCheck、moneyFormat等，每个页面都复制这些函数显然是不合理的，因为它们用的地方很多。所以我们把这些常用的工具函数放在util文件夹下，这样在使用的时候直接导入，修改一个函数的时候统一修改，根据参数进行特殊处理。util.png中按函数function合理分类注意util也要按function功能合理分类。所以你的util应该是一个工具箱，而不是工具栏。注意文件夹的合理分类。我想，看完这篇文章，一定有很多人在处理文件时遇到以下问题。可以把一个类别下的所有文件都堆到一个文件夹里.png上面的例子还不错，文件数量不多，命名格式一致。但是如果文件很多，命名又不一致，可想而知，在进行代码维护的时候，可能需要一段时间才能找到目标代码。因此，建议按功能对文件进行如下细分（但要注意细粒度的划分，适可而止，不能划分得太细），这样我们回过头来review代码的时候，我们可以根据文件夹锁定我们的目标文件的位置，快速定位目标。不要怕文件夹太多，提高工作效率才是我们的最终目标。按功能划分.png统一管理requests和interfaces在每个项目中，我都会专门单独出来这样一个文件夹。光看名字就知道，这是一个管理请求的文件夹。image.png我会把http请求相关的处理全部放到http.js中管理。比如如下，参数的处理，请求方法的处理等等，都在内部进行了封装。一个方法是暴露出来的，使用时只需要传入相关接口、参数、请求方法即可，不需要考虑其他逻辑处理。image.png我觉得有必要提一下请求接口的管理。因为有一次在接项目的时候，发现所有请求的API都硬编码在request方法中。这真是写的时候一时激动，修改了半天，费了好大劲才完成的作品。目前我对请求接口的管理是把所有的接口放在一个统一的文件中。调用相关接口时，直接从request.js文件中获取。这样做的好处是避免了硬编码，这是非常忌讳的。同时，当一个接口被调用较多时，只需要引入即可获取，维护起来特别方便。其实image.png据说容易维护，但这是相对而言的。当接口数量达到一定数量后，将所有接口放在一个文件中有点臃肿（上图右侧可以看到密集的接口），但这个问题似乎并没有那么严重。因此，这里如何平衡可以参考上面第3点。config文件夹，把你的配置操作移到这里（注意：上面说的config文件夹一般指的是配置，不是具体的名字，因为使用config这个名字很可能会和一些脚手架名字冲突）不管应用大小，初始化工程量一定不能少。如果需要配置的选项很多，比如Vue中axios的初始化，请求拦截器，对应的拦截器，路由初始化，全局钩子设置，以及其他基础配置等等，我们总不能把这些东西都放在一起吧在main.js中。于是就有了下面的结构体初始化和配置操作。png将初始化操作、固定枚举值或其他配置内容放在一个统一的位置。这样可以方便我们修改配置内容，尤其是在添加新配置的时候，我们会带着目标直接添加对应的内容。这里有一点。比如项目中两个文件都需要导入Vue，那么在每个文件中都写importVuefrom'vue'，这样会导致项目在打包的时候再次导入Vue，增加了项目。体积。因此，在引入Vue时，建议暴露Vue的引用exportlet_Vue=Vue，而不是重复使用import语法。2.代码习惯组件命名：/area-selector/area-selector.vuevs./area-selector/index.vue在项目开发的早期，我用的是前面的写法，后来改成了后一种方式。原因很简单。组件文件夹的命名可以充分表达组件的功能，组件无需重复此描述。而且，使用index.vue风格，引入组件时可以省略index.vue，比如importareaSelectorfrom'/xx/area-selector'。3、代码风格拒绝复制粘贴鲁迅说过，复制粘贴是万恶之源。是的，在我现在看来，复制粘贴确实是很多问题的根源。在写同一个页面或者写同一个验证脚本的时候，相信很多懒老铁都是点一下复制粘贴大段的。至少我身边有很多这样的鸡贼同事。看起来做东西的速度挺快的，其实是在给自己挖坑，因为到头来你可能连自己的代码用在了哪些页面都不知道。一旦需要改，改代码就哭。在我的项目中，我通常会对需求进行简单的分析。当涉及到相同或相似的内容时，将进行标记。然后在开发过程中，公共内容将被提取和重用。就算有BUG或者需求调整了，都可以改，两个字效率。评论会让您想起您曾经拥有的代码。关于代码注释存在两种完全不同的观点。相当一部分关于代码注释的文章认为“代码中最好的注释就是没有注释”，或者“代码就是最好的注释”。但在我看来，这纯粹是胡说八道。真的，不要太看好自己的记忆力。一段时间后，你可能真的想不起来你原来定义的方法是干什么的了。因此，一定要为代码写好注释。《代码大全》介绍说“好的代码，注释应该占2/5”。我写的代码在处理一般问题的时候可能只达到1/5的水平，就当做一个简单的注释。但是在处理一些复杂的逻辑时，会写很多注释。设计的数据格式、处理思路、技术坑等都会详细记录下来。回去修改的时候可以根据注释跳过很多不需要检查的代码。我的一些代码comments.png详细习惯说到习惯，这里是我的三个习惯：合理使用&&，||和三元运算符来替换if...else让我们大大简化我们的代码！FunctiongetValue(value){letresif(value){res=value}else{res=-1}returnres}改为functiongetValue(value){letres=value||-1returnres}用于内部调用函数“_”来标记，如由于将页面初始化函数initPage()改为_initPage()，这样做并没有特别突出的好处，但是会让你知道代码内部调用了哪些方法。消除魔术字符串所谓魔术字符串是指使用硬编码写入代码中的字符串。这样的魔术字符串通常会降低代码的可维护性，因为如果不小心修改代码，您可能会遗漏一个。//消除硬编码letpreText='hello'letnextText='world'if(xx){//console.log('hello')//魔术字符串维护不善console.log(preText)}else{//console.log('helloworld')console.log(preText+''+nextText)}好了，以上就是我要分享的内容了。整篇文章的内容并没有那么新鲜，但是是我在实际操作中的感悟。一部分是自己的总结，一部分是对熟悉的理论的重新认识。真诚地希望它能给你带来一些价值。
