代码适用性-低耦合案例

来源：互联网发布：excel数据监控软件编辑：程序博客网时间：2024/06/04 19:09

背景：公司要写一个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>

阅读全文

0 0