<!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. VMware克隆CentOS虚拟机后固定IP的问题

    由于克隆虚拟机,VMware只是修改了虚拟机的名字等信息,并没有修改虚拟硬盘中的任何信息,导致克隆后网卡的MAC地址和操作系统中记录的mac地址不符,导致eth0启动不起来.操作系统记录了一个新网卡的 ...

  2. uboot1.1.6之NOR FLASH 出现的问题解决方法

    U-BOOT移植,structure has no member named `CAMDIVN speed.c: In function `get_HCLK':speed.c:114: error: ...

  3. iOS多视图传值方式之通知传值（NSNotification；NSNotificationCenter）

    iOS传值方式之5:通知传值 第一需要发布的消息,再创建NSNotification通知对象,然后通过NSNotificationCenter通知中心发布消息(NSNotificationCenter ...

  4. CentOS 7 源码编译安装 Mysql 5.7

    1.创建 mysql 用户,用户组,以及相关目录 /usr/sbin/groupadd mysql /usr/sbin/useradd -g mysql mysql mkdir -p /opt/loc ...

  5. Sencha Extjs4.2 皮肤制作

    1                 UI组件基础 学习ExtJs就是学习组件的使用.ExtJs4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. E ...

  6. [Java]局域网五子棋

    提示: 下面给的代码有问题哦,可以自己去调试 可用版下载 请点击这里 密码:x6ve(退出程序,端口并没有被关闭,可自行修改代码实现) img

  7. mac系统不能使用127.0.0.2的解决方案

    英语学得不好,国外这位大神的精彩解释不是特能看的懂.我模仿的试了一下. 解决方案: 1.打开mac终端 2.输入:sudo ifconfig lo0 alias 127.1.1.1 netmask 0 ...

  8. OC语言的特性(一)-消息传递与调用函数的表现形式

    我们在初学Objective-C时,都会觉得ObjC中的消息传递和其他语言的调用函数差不多,只是在OC中,方法调用用消息传递这一概念来代替. 那么到底怎样区别OC中的消息传递与其他语言的调用函数呢. ...

  9. JS实现标签页效果(配合css)不同标签下对应不同div

    显示页面tab.jsp </ div ></ body > </ html >   tab.css ul ,li { margin:0px; padding:0px ...

  10. COM问题

    因为应用程序正在发送一个输入同步呼叫,所以无法执行传出的呼叫.