<!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. 词链(link)

    词链(link) 题目描述 给定一个仅包含小写字母的英文单词表,其中每个单词最多包含50个字母.如果一张由一个词或多个词组成的表中,每个单词(除了最后一个)都是排在它后面的单词的前缀,则称此表为一个词 ...

  2. jdb 调试

    C:\Users\Reverse>adb shell am start -D -n lwf.lc.pncdd/lwf.lc.pncdd.MainC 查看内存情况: cat /proc/N/map ...

  3. IMCP网际控制协议

    IP协议是TCP/IP协议使用的在网络层传输机制,它是一种不可靠的无连接的数据报协议,但是IP协议假定了底层是不可靠的,因此,要尽最大的努力传输到目的地,但正因为如此,IP协议则没有了保证,也就是说, ...

  4. Using StructureMap DI and Generic Repository

    In this post, i will show how to use generic repository and dependency injection using structuremap. ...

  5. ural1890 Money out of Thin Air

    Money out of Thin Air Time limit: 1.0 secondMemory limit: 64 MB Each employee of the company Oceanic ...

  6. [算法] dijkstra单源无负权最小路径算法

    #include <stdio.h>#include <stdlib.h>#include <string.h> #define INF 1000000#defin ...

  7. A/C模式 是什么意思啊汽车知识问题_PCauto快问

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

  8. 基于LNMP的Zabbbix之Zabbix Server源码详细安装，但不给图

    Zabbix Server安装 看到那里有错或者有什么问题的话,求指点 邮箱:losbyday@163.com 上一篇PHP源码安装参见基于LNMP的Zabbbix之PHP源码安装:https://i ...

  9. Ubuntu Apache2 配置简单介绍

    debian系列的(如Ubuntu,本人是Ubuntu 12.04的)Apache 通过 apt-get 方式安装的是 Apache2 的,是 httpd 的 2.x 版本,名字直接叫 apache2 ...

  10. python函数的参数传递问题---传值还是传引用？

    摘要:在python中,strings, tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象.不可更改对象的传递属于传值,可更改对象属于传引用.想要在函数中传递 ...