<!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. ural1037 Memory Management

    Memory Management Time limit: 2.0 secondMemory limit: 64 MB Background Don't you know that at school ...

  2. Hadoop集群搭建的密钥配置SSH实现机制的配置（2）

    [hadoop@weekend110 ~]$ ssh-keygen -t rsa 用来生产密钥对 Generating public/private rsa key pair. Enter file ...

  3. IO口输入输出模式理解

    1.IO输入输出模式 2.有上拉,下拉,弱上拉,推挽,开漏输出:不同的单片机有不同的输出模式 3.以最简单的51单片机为例 P0:开漏型双向IO口,通常需要添加外部上拉电阻 P1~P3:准双向IO口, ...

  4. MAC 调整Launchpad 图标大小

    1.调整每一列显示图标数量 defaults write com.apple.dock springboard-rows -int 7 2.调整每一行显示图标数量 defaults write com ...

  5. Selinux是什么?

    在新的基于RHEL一般都自带了selinux,多数情况下我们把selinux禁用了,事实上既然RHEL要集成它,必然有他的优点和长处,我们通过下文来了解selinux,也许你会喜欢用上它. 英文原文来 ...

  6. 基于Keepalvied的Mysql主主漂移（切换）

    Keepalived实现原理:Keepalived详细介绍简介 实验环境 Master1.Amoeba--IP:192.168.1.5 Master2---IP:192.168.1.10 同时安装ke ...

  7. LED调光，PFM即pulse frequence modulation

    PWM不是唯一的调制方式,可以PWM,也可以PFM,也可以混合调制. PWM即pulse width modulation的缩写,脉冲宽度调制,保持开关周期不变,调节开关导通时间. PFM即pulse ...

  8. WINDOWS动态链接库--MFC规则动态链接库

    第一代window程序员使用windows api进行编程,到了后来,微软推出MFC类库,于是,动态链接库进行了升级,可以在动态连接库中使用MFC的API,这就叫做MFC动态链接库, 其中MFC动态链 ...

  9. OSX下编译安装opencv3.1.0与opencv_contrib_master

    OSX版本10.11.3 1.安装homebrew,打开终端,写入指令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Hom ...

  10. C socket udp方式发数据

    #define HOST_SERVER_IP "192.168.3.35" #define HOST_PORT 9501 #define SLEEP_TIME 1 #define ...