标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单例模式——在js中就是指的单个对象，可用于命名空间声明</title>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
/***
*此示例就是典型的js单例模式，是简约版属性样式方法库
*/
var A = {
//获取元素，并返回
getid:function(id){
return document.getElementById(id);
},
//设置元素css属性
css:function(id,key,value){
document.getElementById(id).style[key] = value;
},
//设置元素属性
attr:function(id,key,value){
document.getElementById(id)[key] = value;
},
//设置元素显示内容
html:function(id,html){
document.getElementById(id).innerHTML = html;
},
//为元素绑定事件处理程序
on:function(id,type,fn){
document.getElementById(id)[‘on‘+type] = fn;
}
};
//测试用例:通过这个代码库我们再操作元素样式属性就方便多了
A.css(‘box‘,‘background‘,‘olive‘);
A.css(‘box‘,‘width‘,‘400px‘);
A.css(‘box‘,‘height‘,‘400px‘);
A.css(‘box‘,‘border‘,‘2px solid blue‘);
// A.attr(‘box‘,‘className‘,‘boxstyle‘);
A.html(‘box‘,‘这里添加要显示的内容文本‘);
A.on(‘box‘,‘click‘,function(){
A.css(‘box‘,‘width‘,‘500px‘);
A.css(‘box‘,‘background‘,‘green‘);
});
//本例已经通过验证
</script>
</html>
标签：
原文地址：http://www.cnblogs.com/koleyang/p/4939985.html
