遠(yuǎn)離JS災(zāi)難css災(zāi)難之 js私有函數(shù)和css選擇器作為容器

更新時(shí)間：2011年12月11日 22:44:05 作者：

當(dāng)一個(gè)項(xiàng)目龐大到一定階段，例如UI展示層采用了模塊化模板化之后，就會(huì)出現(xiàn)js災(zāi)難，css災(zāi)難，經(jīng)常出現(xiàn)以前從來(lái)不放在一起的兩個(gè)js或css莫名奇妙的被放到了一個(gè)頁(yè)面，基本的原因是模塊重用造成的

盡管js可以想面向?qū)ο竽菢尤?gòu)造對(duì)象，隱藏私有方法，但需求變化的往往比你寫(xiě)程序還要快時(shí)，就連設(shè)計(jì)js對(duì)象的時(shí)間也沒(méi)有了，所以我比較傾向于用js私有函數(shù)和js方法；jquery私有函數(shù)和jquery對(duì)外暴露方法的形式也可以實(shí)現(xiàn)，而頁(yè)面生成的html結(jié)構(gòu)則完全在js中生成，包括哪些id和class，這樣可以最大限度的確保統(tǒng)一和重用的方便性，但也有個(gè)缺點(diǎn)，就是在重用時(shí)，如果需要樣式發(fā)生變化（結(jié)構(gòu)是死的不能變化），就需要用div將原來(lái)的結(jié)構(gòu)包起來(lái)，相關(guān)的樣式也需要用對(duì)應(yīng)的id包裹一遍，如果是新增的事件等就只能采用綁定的方式，暫時(shí)還沒(méi)有好的方法
例如，我面要實(shí)現(xiàn) 在一個(gè)div中包含幾張圖片
這樣做也有個(gè)缺點(diǎn) 就只 css 必須得復(fù)制一次在做修改但對(duì)結(jié)構(gòu)和樣式以及js可以重用

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var publicSetDiv = function (url, id) { 
//作為對(duì)外公開(kāi)的，可以傳參就行 
this.makediv = function (j) { 
var imglist = makeimglist(url, j); 
$(id).html(imglist); 
$(id).show(); 
} 
//私有的 
function makeimglist(url, j) { 
var i = 0; 
//var j = 10; 
var html = ""; 
for (i; i < j; i++) { 
html += "<img src='" + url + "' class='item' />"; 
} 
return html; 
} 
} 
$(document).ready(function () { 
// Handler for .ready() called. 
var mytest = new publicSetDiv("http://images.cnblogs.com/logo_small.gif", "#test"); 
mytest.makediv(10); 
var mytest2 = new publicSetDiv("http://images.cnblogs.com/logo_small.gif", "#test2"); 
mytest2.makediv(10); 
}); 
</script> 
<%-- 原始默認(rèn) 的樣式--%> 
<style type="text/css"> 
.item{ width:200px; height:100px; } 
#test2 .item{ width:200px; height:100px; } 
</style> 
<%-- 第二次使用該樣式并稍作修改 --%> 
<style type="text/css"> 
#test2 .item{ width:200px; height:200px; background-color:Black; } 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
第一次使用 
<div id="test" style=" display:none;"> 
</div> 
<div id="test2" style=" display:none;"> 
</div> 
</form> 
</body> 
</html> 