TypeScript编写Vue项目结构解析入门基础教程_结构入门百科

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

TypeScript编写Vue项目结构解析入门基础教程

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

TypeScript编写Vue项目结构解析入门基础教程_结构入门百科

笔者在之前使用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又需要依赖于router,router需要注入到vue实例当中。

TypeScript编写Vue项目结构解析入门基础教程_结构入门百科

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

其实这里笔者想着重说的一点是,domain和views之间的引用,对于我来说业务层是用来拆分业务,使views和domain之间各做自己的事情,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业务类的实例,去调用实例的方法,或者是使用混入把业务部分使用混入的形式混入到对应的页面中。

原文:https://segmentfault.com/a/1190000021285842

海计划公众号
(0)
上一篇 2020/03/21 08:14
下一篇 2020/03/21 08:14

您可能感兴趣的内容

  • js算法小白知识js判断一个字符串是否是回文字符串_算法入门基础知识

    什么是回文字符串?即字符串从前往后读和从后往前读字符顺序是一致的。例如:字符串aba,从前往后读是a-b-a;从后往前读也是a-b-a方法一function palindRome(str){var len = str.length;var str1 = “”;for(var i=len-1; i>=0;i–){str1+=str[i];}console.l

    2020/04/03
  • http协议的发展历史小白教程_http基础知识教程

    http/0.9在最早的时候,第一个定稿的http协议是http/0.9版本,在这个版本里面,http协议,它的内容,非常非常的简单 只有一个命令,就是GET 对应的就是我们现在经常用到的get请求,post请求,这些统称为http的命令或者叫做方法,那么后面会有一节课会有详细的讲解,关于http命令的内容然后那个时候是 没有header等描述数据信息的一些

    2020/04/03
  • Js柯里化菜鸟知识_柯里化小白帮助

    简介柯里化(Currying),又称部分求值(Partial Evaluation),是把接收多个参数的函数变成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受剩余的参数而且返回结果的新函数的技术。核心思想: 把多参数传入的函数拆成单参数(或部分参数)函数,内部再返回调用下一个单参数(或部分参数)函数,依次处理剩余的参数。按照Stoyan Ste

    2020/03/24
  • Web前端知识体系精简入门基础教程_web菜鸟指南

    Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自

    2020/04/05
  • JS合并两个有序数组菜鸟教程_数组入门基础教程

    代码如下:function merge(nums1, nums2) {var len1 = nums1.length – 1;var len2 = nums2.length – 1;var len = nums1.length + nums2.length – 1;while (len1 >= 0 && len2 >= 0) {nums1[len–] =

    2020/03/26
  • 深入理解Js回调函数菜鸟教程_回调菜鸟指南

    JavaScript回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信,在阅读本文之后,你将能够克服以前使用回调方法遇到的所有障碍。在开始之前,首先要确保我们对函数的理解是扎实的。快速回顾:JavaScript 函数什么是函数?函数是在其中有一组代码的逻辑构件,用来执行特定任务。实际上为了易于调试和维护,函数允许以更

    2020/03/23
  • 10个非常实用的Js工具函数教程视频_函数菜鸟知识

    10个非常实用的Js工具函数教程视频 生成一周时间 new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环 func…

    2020/03/19
  • ctolib码库攻略教程_每日更新收录实用的开源项目和资源

    ctolib码库攻略教程 官方网址:https://www.ctolib.com/ 简介描述:每日更新收录实用的开源项目和资源 CTOLib码库分类收集GitHub上的开源项目,并…

    2020/03/07
  • js中的Symbol数据类型基础知识_Symbol攻略教程

    这是一种在ES6 中新添加的数据类型,Symbol 本质上是一种唯一标识符,可用作对象的唯一属性名,这样其他人就不会改写或覆盖你设置的属性值。声明方法:let id = Symbol(“id”);Symbol 数据类型的特点是唯一性,即使是用同一个变量生成的值也不相等。let id1 = Symbol(‘id‘);
    let id2 = Symbol(‘id‘

    2020/03/20
  • JS底层机制小白入门_机制小白基础

    JavaScript的执行机制-eventloopsetTimeout(function(){console.log(‘set1’);
    })new Promise(function(resolve){ console.log(‘pr1’); // 相当于同步代码resolve()
    }).then(function(){console.log(‘then1

    2020/03/23
  • 搜外6系统菜鸟攻略_为群站、SEO、企业官网建站系统而生

    搜外6系统菜鸟攻略 官方网址:https://6.seowhy.com/ 简介描述:为群站、SEO、企业官网建站系统而生 搜外6系统是夫唯学院,搜外网生态,借助于十余年的SEO基础…

    2020/03/11
  • 抖音怎么拨打客户服务热线基础知识教程_活动基础入门

    “:00861-6689579425抖音服务电话:00861-6689579425业务办理还款失败、允许线下还款、投诉、查询、认证、账户激活、投诉、信用评价等相关业务。信用评价等相关业务。注:亲,您的满意,是对我们慷慨的奖励和支持。信誉第一欢迎您的来电!。客户100%满意,只要您拨打公司,本公司将时间竭诚服务!真诚欢迎您的光临!季节在变—-我们的服务不变

    2020/03/20
  • pakutaso小白知识_日本免费写真素材站

    pakutaso小白知识 官方网址:https://www.pakutaso.com/ 简介描述:日本免费写真素材站 Pakutaso 是日本的一家这里高品质照片素材免费分享的站点…

    2020/03/06
  • Jest单元测试框架小白教程_测试使用说明

    Jest
    facebook推出的js单元测试的语言
    1.首先需要在项目文档中安装jest包
    2.创建需要进行单元测试的源代码函数
    3.创建测试文件,包含实际的测试代码
    1 安装Jest
    1.1 初始化package.json
    在命令行工具中输入以下命令,初始化前端项目并生成package.json:npm init -y
    1.2 安装Jest及相关依赖
    在命

    2020/03/20
  • wikiHow菜鸟指南_一个综合技能搜索网站

    wikiHow菜鸟指南 官方网址:https://zh.wikihow.com/ 简介描述:一个综合技能搜索网站 一个综合技能搜索网站,前面分享的偏向于工作,网站的slogan:“…

    2020/03/11
  • 十五个常用的 Laravel 集合(Collection)小白入门_Laravel小白基础

    Laravel Eloquent 通常返回一个集合作为结果,集合包含很多有用的、功能强大的方法。你可以很方便的对集合进行过滤、修改等操作。本次教程就一起来看一看集合的常用方法及功能。集合并不仅限于 eloquent ,也可以单独使用。但 Eloquent 的结果就是一个集合。你可以使用助手函数 collect 将数组转化为集合。下面所列出的集合的方法适用于

    2020/03/30