//CB=ComponentBase
var CB={
createNew:function(cb){
var CB=$(cb);
var refList={};
//为了解决元素嵌套时，ref不能正确取得元素的问题，
//此处在加载元素时先提取出元素捕获为本地副本。
$.each(CB.find("[ref]"),function(ind,val){
if(refList[val.getAttribute('ref')] != undefined){
alert("CB ref重复定义异常！");
}
refList[val.getAttribute('ref')]=val;
});
CB.get=function(REF){
return $(refList[REF]);
}
return CB;
}
}有了CB类，我们就可以编写清爽的前端组件了。
//你可以使用自动化工具将html代码转换为js字符串（这样的工具很好找，百度一下有很多）。
var Item={
createNew:function(title,content){
var cb=CB.createNew("<div>"+
" <a ref='tabA'><a>"+
" <span ref='tabB'></span>"+
"</div>");
cb.get("tabA").html(title);
cb.get("tabB").html(content);
return cb;
}
}你可以使用类似上例的方式创造任何你需要的组件。
<html>
<body>
<div id='container'></div>
</body>
<script>
Item.createNew("hello","wold").appendTo($("#container"));
</script>
</html>