使用Typescript進行結構性開發（建立Table）

vincent2018發表於2018-01-23
TypeScript
第一次寫文章。。。哈哈哈

本來現在做的專案是多頁面用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();複製程式碼

先建立mode的資料結構，將其傳入view層，使用開始方法，生成表格




相關文章