js原生设计模式——8单例模式之简约版属性样式方法库-优快云博客

<!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>