使用Typescript进行结构性开发（创建Table）-CSDN博客

第一次写文章。。。哈哈哈

本来现在做的项目是多页面用Typescript+jquery来编写的

但随着开发量的增加发现多页面实在是愚蠢，之前也写过vue，可以说是非常之喜爱了。

但是基于页面的简单性还有项目强制要求用Ts，jQuery 于是乎就这么来了

进入正题：如何使用ts进行结构性的开发，ts用过的童鞋都应该知道这是种面向对象语法所封装的js。是巨硬爸爸搞得事情

既然是面向对象那我们就得用OOP的方式来做

我是MVC的方式 mode,view,controller

先创建个mode class,咱这个table类用什么数据结构合适呢

首先table有哪些子类，thead->th | tbody->tr->td 这些是最基本的，一般就足够了。

这些子项中主要用到的，需要动态生成的，也就是 th tr td 了，所以将其组装成一个mode

export class TableMode{

    public ths:Map<string,string>;
    public tds:Map<string,string>[];    
    constructor(ths:Map<string,string>,tds:Map<string,string>[])
    {        
        this.ths = ths;       
        this.tds = tds;    
    }
}复制代码

没错就这么简单。。。足够了

为什么要用Map 呢，Map是es6新的语法中出现的数据结构，其由 <key,value>这两个参数所组成。一个map中可以存多个key,value对应的参数。

由于这个特质。我的td 就可以在排序上和th对应了[{<th,td><th,td><th,td><th,td>},{<th,td>...}

就是这样。。。当然我这是很愚蠢的做法，希望大家能给出更好的意见

之前th考虑只用数组就可以了，但是考虑到后期修改如果是纯数组的话，th参数动了td就要跟着修改所以就采用key，value的形式，这样改代码的时候只要修改th的value，key不需要动

这里写了个map的test，因为之前没怎么用过，这里贴一下

function test(){    let div:HTMLDivElement = <HTMLDivElement>document.getElementById("blocks-page");    let map:Map<string,string> = new Map();    let arr:Map<string,string>[] = new Array<Map<string,string>>();    let map1 = new Map();    map1.set('test','aaaaa1');    map1.set('test2','bbbbb1');    let map2 = new Map();    map2.set('test','aaaaa2');    map2.set('test2','bbbbb2');    arr.push(map2);    map.set('test','test1.0');    map.set('test2','test2.0');    arr.push(map1);    arr.push(map);    arr.forEach((tes)=>{        let i:number =1;        console.log(i++);        map.forEach((val,key)=>{            console.log(tes.get(key));        })    })}test();复制代码

1
aaaaa2
bbbbb2
1
aaaaa1
bbbbb1
1
test1.0
test2.0复制代码

以上是log

好了言归正传

Model层准备好了下一步view层，直接贴代码吧

export class TableView{    private table:HTMLTableElement;    private thead:HTMLTableSectionElement;    private tbody:HTMLTableSectionElement;    constructor(){        this.table = document.createElement('table');        this.thead  = document.createElement('thead');        this.tbody = document.createElement('tbody');        this.table.appendChild(this.thead);        this.table.appendChild(this.tbody);    }    start(div:HTMLDivElement,tableMode:TableMode){                tableMode.ths.forEach((th)=>{            let thv:HTMLTableHeaderCellElement = document.createElement('th');            thv.textContent = th;            this.thead.appendChild(thv);        });        tableMode.tds.forEach((tdMap)=>{            let tr:HTMLTableRowElement = document.createElement("tr");            tableMode.ths.forEach((val,key)=>{                let tdv:HTMLTableDataCellElement = document.createElement("td");                tdv.textContent = tdMap.get(key);                tr.appendChild(tdv);            })            this.tbody.appendChild(tr);        });        div.appendChild(this.table);    }    set className(className:string){        this.table.className = className;    }}复制代码

根据刚刚的例子，为了保证td和th对应，于是乎做了个这样的循环对比整好用map的get方法取对应的值。

set className是为了保证表格的样式，这里直接使用这个方法就可以改变表格样式了

最后使用方法

function test(){    let div:HTMLDivElement = <HTMLDivElement>document.getElementById("blocks-page");    let ths:Map<string,string> = new Map();    let tds:Array<Map<string,string>> = new Array<Map<string,string>>();    let map1 = new Map();    map1.set('test','aaaaa1');    map1.set('test2','bbbbb1');    let map2 = new Map();    map2.set('test','aaaaa2');    map2.set('test2','bbbbb2');    tds.push(map2);    ths.set('test2','test2.0');    ths.set('test','test1.0');    tds.push(map1);
    let tbmode:TableMode = new TableMode(ths,tds);    let tbview:TableView = new TableView();    tbview.className = "table cool table-hover";    tbview.start(div,tbmode);}test();复制代码