Aaron
  • 3.5k

TypeScript编写Vue项目结构解析

使用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业务类的实例,去调用实例的方法,或者是使用混入把业务部分使用混入的形式混入到对应的页面中。

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

阅读 1.7k

推荐阅读
Web邦邦堂
用户专栏

欢迎订阅前端邦邦堂专栏前端邦邦堂是一群初入IT编程的人共同组成。用意是互帮互助,共同成长。Qq群号:1...

1222 人关注
19 篇文章
专栏主页