JavaScript高手之路：封裝css方法和Table表格

上一章節已經講了JS定義類的兩種方式，並嘗試着封裝了兩個類，這一章節我們來封裝兩個與頁面特效相關的類。第一個是仿jQuery的css方法來操作div的樣式，第二個是封裝一個table表格對象。

字面量封裝css方法

前面已經講解如何通過字面量來定義對象，下面我們就通過字面量的方式來封裝css方法，首先在body標籤裏面定義一個div

<div id="box"></div>

然後給這個div加上樣式

        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

上訴代碼的就定義了一個div，並將該div的長寬設置爲200px，並且把背景顏色設置爲紅色，頁面效果如圖：

接下來我們定義一個Util工具類，該類具有$()方法和css()方法，$()方法的作用是返回給定id的div對象，而css的作用是設置/獲取div對象的屬性值。

Util工具類的代碼如下：

        var Util = {
            //根據id獲取dom節點
            $:function(id) {
                return document.getElementById(id);
            },
            css:function (object, name, value) {
                if(arguments.length == 2) { //如果參數個數等於2,則獲取參數值
                    //判斷瀏覽器類型
                    if(object.currentStyle) {//屬於IE瀏覽器
                        return object.currentStyle[name];
                    } else { //非IE內核
                        return getComputedStyle(object, false)[name];
                    }
                } else if(arguments.length == 3) { //如果參數個數等於3,則設置參數值
                    object.style[name] = value;
                }
            }
        }

$()的實現方式很簡單，調用了JS自有對象document的getElementById()方法來獲取節點。然後css方法中定義了3個參數，分別是object、name和value，第一個參數是Dom節點對象，第二個參數是屬性名，第三個參數是屬性值。通過判斷參數的長度arguments.length來判斷是設置屬性值還是獲取屬性值，其中在獲取屬性值的時候還需要判斷瀏覽器類型。如果是IE瀏覽器則使用object.currentStyle[name]來獲取屬性值，如果是非IE瀏覽器則用getComputedStyle(object, false)[name]來獲取屬性值。

測試的代碼如下：

        window.onload = function () {
            var obj = Util.$("box");
            Util.css(obj, "width", "250px"); //設置div長度爲300px
            Util.css(obj, "height", "300px");//設置div寬度爲300px
            console.log("box的width屬性:" + Util.css(obj, "width"));
            console.log("box的height屬性:" + Util.css(obj, "height"));
        }

這裏我們沒有引入js文件，也就是說沒有引入任何框架，那個window.onload定義的方法是當頁面加載完畢的時候執行函數裏面的代碼。函數體裏面首先通過Util.$(‘box’)傳入id來獲取節點，然後通過Util.css()將該節點的長度和寬度分別設置爲250px和300px。刷新一下你的瀏覽器，看看剛纔那個紅色的Div長和寬是不是變化啦？

後面兩行console.log的作用是在控制檯輸出剛纔我們賦值的div的屬性，分別輸出節點的長度和寬度。如果不出意外，你的瀏覽器控制檯將輸出如下：

box的width屬性:250px
box的height屬性:300px

字面量封裝Table表格

接下來我們來封裝一個表格對象，該對象能根據rows和cols屬性動態生成table表格。該對象的uml類圖大致如下

Table對象有一個類成員變量args,該變量記錄了rows和cols屬性，而args是通過init方法來賦值的。

        var Table = {
            args:{},    //定義了args成員變量
            init:function() {   //init初始化函數
                this.args = arguments[0];  
            }
        };

那個showTable()函數的作用是循環在頁面輸出table表格

            showTable:function() {
                document.write("<table>");
                for(var i = 0; i < this.args.rows; i++) {  //第一層循環輸出tr行
                    document.write("<tr >");
                        for(var j = 0; j < this.args.cols; j++) {  //第二層循環，輸出td
                            document.write("<td>第"+(i+1)+"行,第"+(j+1)+"列</td>");
                        }
                    document.write("</tr>")
                }
                document.write("</table>");
            }

這裏可以看到我用了兩層循環，第一層的作用是輸出tr標籤，第二層循環的作用是輸出td標籤以及td標籤裏面的內容，別忘了在循環前和循環後輸出table標籤本身。完整的Table表格類代碼封裝如下：

        var Table = {
            args:{},
            init:function() {
                this.args = arguments[0];
            },
            showTable:function() {
                document.write("<table>");
                for(var i = 0; i < this.args.rows; i++) {  //第一層循環輸出tr行
                    document.write("<tr >");
                        for(var j = 0; j < this.args.cols; j++) {  //第二層循環，輸出td
                            document.write("<td>第"+(i+1)+"行,第"+(j+1)+"列</td>");
                        }
                    document.write("</tr>")
                }
                document.write("</table>");
            }
        };

這裏還需要給我們的表格添加一點樣式，不然待會兒表格的邊框出不來，無法直觀的觀察效果。

    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000000;
            padding: 5px 10px;
        }
    </style>

測試代碼：

        Table.init({rows:3,cols:3});
        Table.showTable();

我的測試代碼Table.init({rows:3,clos:3})讓該對象擁有3行3列，然後調用Table.showTable()在頁面繪製出該表格，你可以改變這個參數來測試一下封裝的對象哦。