使用TypeScript编写Vue项目也已经有了一段时间,笔者在刚刚使用TypeScript时候也是很茫然,不知道从何下手,感觉使用TypeScript写项目感觉很累赘并不像JavaScript那么灵活,因为TypeScript对于代码限制太多,在写代码的过程中时不时的就会抛出一个令你意想不到的错误,这一点笔者也是爬了不小的坑。可以使用了TypeScript一段时间之后,才知道TypeScript那是真的香(谁都逃不过的真香定理,O(∩_∩)O)。

笔者在之前使用Vue的时候,曾经提到过如何在项目中使用依赖注入的概念,使用依赖注入主要有两个目的:

  1. 解放Vuex
  2. 将页面表现与业务逻辑相互拆分

同样在使用TypeScript编写项目的过程中同样也是使用了这种思路,但是也有些许的不一样的地方,笔者对于项目结构是这样划分的:

├─api           //  请求数据接口
├─assets // 静态资源
├─components // 组件
│ ├─base // 基础组件
│ └─business // 业务组件
├─domain // 业务逻辑
├─interface // 接口
│ ├─other // 其他接口
│ ├─public // 公用接口
│ └─views // 页面接口
├─middleware // 中间件
├─mixins // 混入层
├─router // 路由层
├─store // 全局状态管理
├─style // 样式
│ ├─components // 组件
│ │ ├─base // 基础组件样式
│ │ └─business // 业务组件样式
│ ├─public // 公用样式
│ └─views // 页面样式
└─views // 页面

这样看上去,每一层都有其自己的职责不会项目影响只是相互依赖,对于项目的维护来说是很友好的,这里会出现一个问题,为什么要对项目结构进行划分呢?笔者所理解的是:

  1. 降低各个功能之间的耦合
  2. 灵活调配各个模块之间的依赖
  3. 每个模块各尽其责
  4. 使项目有利于维护以及团队协作

也已经说过各个分层之间有依赖关系,他们之间如何依赖又应该如何调配呢?对于前端来讲无论是什么项目,都是依赖于页面展开工作的,那么必定是以views层为中心,views又需要依赖于routerrouter需要注入到vue实例当中。

上图中assets没有提及到,对于assets用来存储一些静态文件,这一层尽量不要去与基础组件之间耦合在一起,这样做的话若其他项目用到该组件的时候,该组件就变了味道。

其实这里笔者想着重说的一点是,domainviews之间的引用,对于我来说业务层是用来拆分业务,使viewsdomain之间各做自己的事情,views更加的去关注页面该如何去展示数据,然而domain更加的关注业务逻辑部分。

domeDomain.ts

//  引入api
import domeAPI from "@/api/domainAPI.ts";
// 引入intaerface
import {tableItemInterface,queryDataInterface} from "@/interface/domeInterface.ts"; class DomeDomain { public async getTableList (target: Object, propertyName: string, propertyDescriptor: PropertyDescriptor):PropertyDescriptor{
const data:queryDataInterface = propertyDescriptor.value();
propertyDescriptor.value = async function ():Promise<tableItemInterface[]>{
// 这里是业务逻辑
const {result:tableItemInterface[]} = await domeAPI.getTableList(data);
return result as Promise<tableItemInterface[]>; }
return propertyDescriptor;
}
}
export default DomeDomain;

dome.vue

<template>
<div>
<el-table :data="list"/>
</div>
</template> <script lang="ts">
import { Component, Vue} from 'vue-property-decorator'; // 引入intaerface
import {tableItemInterface,queryDataInterface} from "@/interface/domeInterface.ts"; // 引入业务类
import DomeDomain from "@/domain/DomeDomain.ts";
const domeDomain = new DomeDomain(); @Component()
export default class AddChargesButton extends Vue { private tableList:tableItemInterface[] = [];
private queryData:queryDataInterface = {};
private pageInfo:{page:number,size:number}:{ page:1,
size:20}; @domeDomain.getTableList
private async getTableList(data:queryDataInterface):Promise<{pageInfo:any,query:queryDataInterface}>{
let {queryData:query,pageInfo} = this;
return {query,pageInfo};
} private async queryTableList():Promise<void>{
try{
this.pageInfo.page = 2;
let {list} = await this.getTableList();
this.tableList = list;
}catch(error){
this.$message.error(error.message || error);
}
} }
</script>

在上面的代码中,domeDomain中定义了一个getTableList的方法,因为这个地方需要使用修饰符的形式去修饰方法,用于去请求数据,然而在页面中的方法,可以无限次的复用,调用该方法的时候也可以对其参数进行调整之后再进行数据请求。

不用再去担心参数的的传递,只需要把所有的参数整合好,调用其对应的获取数据的方法就行了很方便。同样也达到了业务和页面表现的拆分。然而好处并不仅仅只有这些。相对应的在项目中同样解脱了store。让store做应该做的事情。

如果只是为了拆分业务的话不仅仅只限定于这一中方法,同样也可以直接再页面中使用domain业务类的实例,去调用实例的方法,或者是使用混入把业务部分使用混入的形式混入到对应的页面中。

对于装饰器还有很多更高深的用法,我也在不断的摸索中,个人觉得这些东西都是有利于项目的开发的。写这篇文章只是想和更多同学一起交流学习,若文章中又什么不对的地方,可以在下方留言讨论。

TypeScript编写Vue项目结构解析的更多相关文章

  1. vue(16)vue-cli创建项目以及项目结构解析

    vue-cli创建项目 上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目 1.进入一个目录,创建项目 创建项目命令如下: vue create <Project Name&g ...

  2. ionic项目结构解析

    ionic项目结构解析 原始结构 创建一个IonicDemo项目 'ionic start IonicDemo sidemenu' 这种结构多模块开发比较麻烦,因为view跟controller分开路 ...

  3. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

  4. 使用TypeScript创建Vue项目

    Vue的灵活性总是让代码看起来非常洗练,对TypeScript来说也是一种挑战, 好在Vue对TypeScript进行了一次全方位的适配. 相对于React严谨的代码,Redux啰嗦的样板代码,Vue ...

  5. 教你搭建基于typescript的vue项目

    自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...

  6. vue项目结构

    前言 我在 搭建vue项目环境 简单说明了项目初始化完成后的目录结构. 但在实际项目中,src目录下的结构需要跟随项目做一些小小的调整. 目录结构 ├── src 项目源码目录 │ ├── api 所 ...

  7. Vue项目结构梳理

    Vue项目结构图: 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 sr ...

  8. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  9. 03 vue项目结构

    上一篇已介绍根据vue-cli创建项目,本篇介绍根据vue-cli官方脚手架创建的项目的项目结构. 一.图看结构 build  [webpack配置]         webpack相关配置,都已经配 ...

随机推荐

  1. java判断指定路径文件夹是否存在,若不存在则创建新的文件夹

    File file = new File(dirPath); if (!file.exists()) { file.mkdirs(); }

  2. JS实现统一社会信用代码的效验(组织机构代码效验)

    参考原文https://blog.csdn.net/hdhxby/article/details/56015370 部分错误,修改整合了下 想查询数据的,请点击:统一信用代码查询地址 查看效验规则点击 ...

  3. Logstash动态模板映射收集Nginx的Json格式日志

    Logstash传输给ES的数据会自动映射为5索引,5备份,字段都为text的的索引.这样基本上无法进行数据分析.所以必须将Logstash的数据按照既定的格式存储在ES中,这时候就要使用到ES模板技 ...

  4. java判断是excel2003还是2007以上

    public static Workbook create(InputStream in) throws IOException,InvalidFormatException { if (!in.ma ...

  5. Python统计数据库中的数据量【含MySQL、Oracle】

    Python程序文件如下: # -*- coding: utf-8 # File : start.py # Author : baoshan import json import pymysql im ...

  6. 利用nvidia-smi 管理和监控NVIDIA GPU设备

    NVIDIA系统管理界面介绍 原文来源:https://developer.nvidia.com/nvidia-system-management-interface NVIDIA系统管理界面(nvi ...

  7. Superset配置impala数据源

    1.安装impyla pip install impyla 2.在superset页面配置如下,此时impala是有kerberos认证的 impala://xxxx:xx/default?auth_ ...

  8. 转 java 8 lamba stream

    一直在写中间件相关的代码,提供SDK给业务方使用,但很多业务方还一直停留在1.7版本,迟迟不升级,为了兼容性,不敢在代码中使用Java8的一些新特性,比如Stream之类的,虽然不能用,但还是要学一下 ...

  9. MySQL5.7的sql脚本导入到MySQL5.5出错解决

    今晚有人让我将他的数据库导入到我的mysql里,执行导入后发现有报错 想了下可能是版本的问题,询问了下,他的数据库是5.7而我的是5.5 他给我提议升级mysql版本,但是我就是不想换版本 那怎么在不 ...

  10. 超详尽-QThread的正确使用姿势-以及信号槽的跨线程使用

    贴上两篇博文 一.http://www.cnblogs.com/findumars/p/5031239.html 循序渐进介绍了,怎样正确的让槽函数工作在子线程中. 同时介绍了信号槽的绑定与线程的关系 ...