快捷導(dǎo)航

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

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

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

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