vue项目实践003

前言

通过本问将看到我在vue的项目中,进行的一系列的项目优化,然后看到不同的维度将这些点进行分类。

这里更多的指的是设计考虑的思路,是大纲,暂不涉及实际代码。

项目架构

分模块设计思想

在接到项目之后,首先将store,router,xhr的对应三个部分分别分子模块,每个子模块的划分维度有所差别。 – 其中store划分modules划分维度是数据关联性,由于store本身支持modules的组合,而且使用是混合在一起的,所以我们还是会在index中将模块进行混入的。 – 其中router是按照业务进行分模块的,或者说是按照页面维度分的,每个一级路由分一个路由模块,二级路由为页面名称,其中将一级路由设置为文件夹名称,二级路由路径与页面名称同名,为了简化这部分,一级路由的名称定为‘scope’,而且为了同时支持懒加载和优化引入组件的写法,写了_import的优化方法,可以批量按照文件名引入对应的组件,在生产环境将进行路由代码分割。然后不同模块也是最后汇总到router的modules中。 – 其中xhr的部分按照后端的微服务进行拆分模块,方便查看和维护。按照后端的接口层次再决定是否划分二级对象属性,其中暴露出来的方法与后端同名,后续也是决定采用easymock进行批量生成api方法来优化这部分手写代码的工作。考虑到几乎没有一个页面或者组件会用到多余两个的api微服务请求,所以这就决定了我在index.js中并没有收集聚合每个业务的api,而是选择开发时按需加载。而对于通用性比较高的api,我一方面会定义在index.js中,另一方面会把这部分数据暴露在vuex中来达到目的。 – 额外介绍,除了以上三个,我针对src根目录也设置了过滤器的分业务模块实现方案。这部分由于各个业务耦合情况比较少,所以也是仅仅针对核心的工具过滤器暴露在index.js中,其他的都是按需引入。

业务内公共组件

与有的同学考虑不同的是,我在写一些组件的时候,针对业务性比较强,但是针对当前业务公用的一些拆分组件会定义在每个业务的components目录下,而不是放在src/components,我称之业务内公共组件。

业务内枚举 与 全局枚举

其实很多时候会遇到枚举数据,或者是后端定义好的,或者是前端定义好的,或者是接口请求的但是基本不做更改的。也许枚举字段少的也还好,但如果一个数据项有超过十个枚举项,有超过2个页面使用的时候,你应该考虑的是单独的放在枚举字典文件中去维护。 那么首先,我是建议基于这个业务的枚举建在业务的根目录下新建一个enum的js枚举文件,单独用来承载业务中的枚举。但较多时候会有一些比较让人烦恼的部分:

1 业务中的枚举发现另外的页面中也有用,不单单属于这个一级业务页面。那么你可以这样考虑下:首先肯定是维护一份数据的,那么维护在哪里,如果是核心业务,那就维护在全局枚举仓库,然后业务中进行按需引入或者改装。如果是周边业务,偶尔用下,我个人觉得维护在业务中的枚举是比较好的。

2 枚举与过滤器与字段翻译的关系。其实枚举字段不仅仅是用于做枚举的,还必然的会充当一些下拉框,显示值的遍历来源,也可以当做字段翻译的翻译来源,同时还可以当做我们一些业务字段的过滤器。这部分理解好之后,对于我们优化整理项目中的业务数据类型有着极大的好处。

3 全局枚举业务过滤器,通用性过滤器,当然这些过滤器功能除了按照基本的部分,还会按照业务中收集到的部分进行业务过滤器的维护。同时也作为对应的方法来获得对应值转换值的语法,一者两得。

common组件

  • 纯ui组件,elementui组件进行进一步的封装,按照其官方的维护方式进行自己项目需求的一些分类。
  • 布局内基本布局组件,这里面包括了页面架构,菜单,顶部,主题页面。
  • 可分解于任何页面任何位置的特征业务组件,支持其展现到任何位置任何页面中,只要求其对应的业务数据要求即可。
  • 功能性组件,包括图片上传,自定义的模态框

theme

为了维护基本的风格,设置了一些基本的主题变量,然后针对elementui的核心组件修改器风格颜色。

axios拦截

针对axios的部分进行请求前后拦截,针对特定状态码进行翻译,在这个设置中进行vuex必要的接口token必要性的验证以及引入提示组件进行必要的接口提示。

针对业务的整合需求,进行接口的串联、并联的请求优化。

mixins

将常用的优化方法进行mixins进行混入。

典型代码段优化

用数据做逻辑,减少标签的显示控制

看到很多前端会根据数据的某个字段,然后写v-if 决定这个标签是否显示,然后不是这个字段,另外一个显示。建议在不管是对象还是数组的显示控制中,直接根据需要的数据进行数据改装,不用多条件判断类似的组件渲染。这种代码简单的可以用一个标签承载,内容的显示区别简单的可以用三目,复杂的就应该在js方法中进行改造完之后或者过滤器实现。

<span v-if="sex===male" >男</span>
<span v-else >女<span>

挥之不去的静态复制写法

vue提供了良好的数组循环和对象循环的方法,在我们实现类似的页面需求的时候,不建议再和之前一样,写很多维护性不强的页面列表了。把它用一个数组维护,然后v-for循环实现,对于因为大量的这种代码占据篇幅的话,说明还是 没有很好的理解vm的含义。

<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3 </option>

除了if,else想不到其他逻辑方式

然后就看到一大波人会if,age===0,判断,else if 等等。其实除了这些你还有switch,对象属性字面量方式,switch方式,等等。不要让if,else的嵌套循环成为我们写代码的唯一方式。

<option value='0'>0</option>
<option value='18'>未成年</option>
<option value='60'>老年 </option>

待更新中

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏高性能服务器开发

『腾讯后台开发』实习生技能要求

1462
来自专栏Pulsar-V

PHP微信开发入门(二)

微信服务器消息推送 微信的消息推送方式是客户操作微信发生一系列事件,然后腾讯微信服务器发送一个XML数据POST请求把事件描述发送到你填写的服务器URL上,你的...

3866
来自专栏玄魂工作室

老司机教你下载tumblr上视频和图片的正确姿势

本文面向初学者。 很多同学问我:“我非常想学Python编程,但是找不到兴趣点”。 还有的同学呢,找到了很好的兴趣点,但是无从下手,“玄魂老师,我想下载tumb...

1.1K7
来自专栏Java架构

深入理解Java虚拟机到底是什么什么是Java虚拟机从进程的角度解释JVM

1765
来自专栏小樱的经验随笔

BugkuCTF web基础$_POST

2663
来自专栏JetpropelledSnake

Python入门之PyCharm中目录directory与包package的区别

对于Python而言,有一点是要认识明确的,python作为一个相对而言轻量级的,易用的脚本语言(当然其功能并不仅限于此,在此只是讨论该特点),随着程序的增长,...

59312
来自专栏JAVA高级架构

深入理解Java虚拟机到底是什么

什么是Java虚拟机 作为一个Java程序员,我们每天都在写Java代码,我们写的代码都是在一个叫做Java虚拟机的东西上执行的。但是如果要问什么是虚拟机,恐怕...

3037
来自专栏开发与安全

linux系统编程之基础必备(四):C 标准库IO缓冲区和内核缓冲区的区别

1.C标准库的I/O缓冲区          UNIX的传统 是Everything is a file,键盘、显示器、串口、磁盘等设备在/dev 目录下都有...

28610
来自专栏pangguoming

Ubuntu安装nodeJS

安装环境 ubuntu12.04 64bit  nodejs-v0.8.14.tar.gz  Node.js是一个基于google v8+javascript的...

4294
来自专栏Python中文社区

Python爬虫:模拟登录知乎完全详解

專 欄 ❈ sunhaiyu,Python中文社区专栏作者 专栏地址: http://www.jianshu.com/u/4943cb2c6ea4 ❈ 这几天...

7009

扫码关注云+社区