代码适用性-低耦合案例

背景：公司要写一个js方法，要求处理一写数据，然后显示在页面上。

这个是最开始写的，重要的是LCTShow（obj）方法，以后还要被其他人引用，所以要尽量做到低耦合。但是很明显，这段代码是一段失败的代码

document.getElementById("content").innerHTML = '<table><tr id="lct"></tr><tr id="ms"></tr></table>';

因为doucument.getElemnetById("content")这一句代码依赖于 html页面上的id=“content”的标签

所以要尽量在通用方法内部不出现像doucument.getElemnetById()之类的代码。

跳到修改完最终的代码，再看红色部分。

<script type="text/javascript">

        //搜狗、chrome、360、IE 兼容
        function LCTShow(obj) {
            document.getElementById("content").innerHTML = '<table><tr id="lct"></tr><tr id="ms"></tr></table>';
            var $lct = document.getElementById("lct");
            var $ms = document.getElementById("ms");
            if (obj.length > 0) {
                        for (var i = 0; i < obj.length; i++) {
                            if (obj[i].netState == '1') {
                                $lct.innerHTML = $lct.innerHTML  //后面几个一样的红色就不标注可
                                + '<td class="lct_1" ><image src="Images/DGBtn/y1.png" alt="无"></image></td>'
                            }
                            else {
                                $lct.innerHTML = $lct.innerHTML
                                + '<td class="lct_1""><image src="Images/DGBtn/y2.png" alt="无"></image></td>'
                            }
                            if (i != obj.length - 1) {
                                if (obj[i].netState == '1') {
                                    $lct.innerHTML = $lct.innerHTML
                                + '<td class="lct_2"><image src="Images/DGBtn/d1.png" alt="无"></image></td>'
                                }
                                else {
                                    lct.innerHTMLL = lct.innerHTML
                                + '<td class="lct_2"><image src="Images/DGBtn/d2.png" alt="无"></image></td>'
                                }
                            }

                            $ms.innerHTML = $ms.innerHTML
                            + '<td class="lct_3">' + '<p>' +obj[i].notes.slice(0,2) + obj[i].notes.slice(5, 7) + '</p>'
                            + '<p>' + obj[i].userName + '</p>'
                            + '</td>' + '<td></td>'

                        }
                    }
        }


        function fun(tn) {;
            var s = "4f57f884937c4cf086c5489b070da7f6";   //测试数据可以不理会
            var $url = "http://192.168.180.8:8001/CCServer/WebService/Webservice1.asmx/GetWorkFlow";    //测试用的接口可以不理会

           // var tn = "zxcg_sq";
       
            $.ajax({
                type: "post",
                url: $url,
                data: { guid: s, tableName: tn },
                success: function (result) {
                    var obj = eval('(' + result + ')');
                    LCTShow(obj);  //这里为什么标注红色？想想看。
                }
            })
        } 
        
    </script>

这个是最后版本

这里讲要显示的html代码用一个table变量记录下来再返回，这样这个js方法就算拿到其他地方也不会有人和的问题。

总结：写一个通用的方法，或者以后要被常用，写代码时就不得不考虑到耦合性问题，代码低耦合的考察标注一般可以这样来看：

你写的代码，别人拿过去用(处理同类问题，和数据类型)，需要修改的地方多不多。如果一段通用代码的可植入性很低那就要仔细思考下，这个通用方法是不是有什么地方没考虑周全，他依赖于这个页面的元素是不是太多。

<script type="text/javascript">

        //搜狗、chrome、360、IE 兼容
        function LCTShow(obj) {
            var table = "";
            var lct = "";
            var ms = "";
            if (obj.length > 0) {
                        for (var i = 0; i < obj.length; i++) {
                            if (obj[i].netState == '1') {
                                lct = lct
                                + '<td class="lct_1" ><image src="Images/DGBtn/y1.png" alt="无"></image></td>';
                            }
                            else {
                                lct = lct
                                + '<td class="lct_1""><image src="Images/DGBtn/y2.png" alt="无"></image></td>';
                            }
                            if (i != obj.length - 1) {
                                if (obj[i].netState == '1') {
                                    lct = lct
                                + '<td class="lct_2"><image src="Images/DGBtn/d1.png" alt="无"></image></td>';
                                }
                                else {
                                    lct = lct
                                + '<td class="lct_2"><image src="Images/DGBtn/d2.png" alt="无"></image></td>';
                                }
                            }
                            ms = ms
                            + '<td class="lct_3">' + '<p>' + obj[i].notes.slice(0, 2) + obj[i].notes.slice(5, 7) + '</p>'
                            + '<p>' + obj[i].userName + '</p>'
                            + '</td>' + '<td></td>';
                        }
                    }
                    table = '<table><tr class="lct">'+lct+'</tr><tr class="ms">'+ms+'</tr></table>';
             return table;        
        }


        function fun(tn) {
            var s = "4f57f884937c4cf086c5489b070da7f6";
            var url = "http://192.168.180.8:8001/CCServer/WebService/Webservice1.asmx/GetWorkFlow";
           // var tn = "zxcg_sq";
       
            $.ajax({
                type: "post",
                url: url,
                data: { guid: s, tableName: tn },
                success: function (result) {
                    var obj = eval('(' + result + ')');
                    document.getElementById("content").innerHTML = LCTShow(obj);
                }
            })
        } 
        
    </script>