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

Posted 2022-11-30 「已注销」

上一章节已经讲了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()在页面绘制出该表格，你可以改变这个参数来测试一下封装的对象哦。