遠離JS災難css災難之 js私人函數和css選取器作為容器

來源:互聯網
上載者:User

儘管js可以想物件導向那樣去構造對象,隱藏私人方法,但需求變化的往往比你寫程式還要快時,就連設計js對象的時間也沒有了,所以我比較傾向於用js私人函數和js方法;jquery私人函數和jquery對外暴露方法的形式也可以實現,而頁面產生的html結構則完全在js中產生,包括哪些id和class, 這樣可以最大限度的確保統一和重用的方便性,但也有個缺點,就是在重用時,如果需要樣式發生變化(結構是死的不能變化),就需要用div將原來的結構包起來,相關的樣式也需要用對應的id包裹一遍,如果是新增的事件等就只能採用綁定的方式,暫時還沒有好的方法
例如,我面要實現 在一個div中包含幾張圖片
這樣做也有個缺點 就只 css 必須得複製一次 在做修改 但對結構和樣式以及js可以重用 複製代碼 代碼如下:<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>
<%-- 原始預設 的樣式--%>
<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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.