代码适用性-低耦合案例

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