<!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. OpenGL学习-------绘制简单的几何图形

    本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念在计算机中会有所不同.数学上的 ...

  2. 消除SDK更新时的“https://dl-ssl.google.com refused”异常--（转）

    SDK更新时的“https://dl-ssl.google.com refused”错误 Download interrupted: hostname in certificate didn't ma ...

  3. git@osc使用教程

    http://my.oschina.net/openswc/blog/142321 Git初体验 http://my.oschina.net/dxqr/blog/134811 网友整理的git@osc ...

  4. 搭建网络yum源

    #!/bin/bash #Linux搭建163网络yum源 cd /etc/yum.repos.d/ echo "-------------------下载163-repo--------- ...

  5. js中：Date.utc()方法与getTime()方法返回值不相等的原因

    // Date.UTC() 方法接受的参数同日期构造函数接受最多参数时一样,返回从1970-1-1 00:00:00 UTC到指定日期的的毫秒数. var utcDate = Date.UTC(201 ...

  6. jquery.proxy的四种使用场景及疑问

    作者:zccst 其实只有两种使用方式,只不过每一种又细分是否传参. 先给一段HTML,后面会用来测试: <p><button id="test">Test ...

  7. Mysql临时表的用法 - 51CTO.COM

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  8. linux下利用curl监控web应用状态

    监控机器列表文件: server.list     建立监控脚本:  webstatus.sh     #!/bin/sh monitor_dir=/home/admin/monitor/ #Log记 ...

  9. /bin/sh 与 /bin/bash 的区别

    /bin/sh 与 /bin/bash 的区别,用 : 截取字符串不是POSIX 标准的. 区别 sh 一般设成 bash 的软链 (symlink) ls -l /bin/sh lrwxrwxrwx ...

  10. apache、nginx、iis 全球分布

    从下图(2012年8月份的数据)来看,来自俄罗斯的Nginx服务器,主要使用区域也集中在俄罗斯及周边国家.微软的IIS,在中国使用最多,占其总份额的57.6%,其他国家如埃及.沙特阿拉伯等国家也基本使 ...