体是一个用来划分命名空间并将一些相关的属性与方法组织在一起的对象,如果她可以被实例化的话,那她只能被实例化一次(她只能嫁一次,不能二婚)。

单体模式是javascript里面最基本但也是最有用的模式之一。

特点:1. 可以用来划分命名空间,从而清除全局变量所带来的危险或影响。

   2. 利用分支技术来来封装浏览器之间的差异。

     3. 可以把代码组织的更为一体,便于阅读和维护。

单体模式的基本写法:

/* 最基本的单体模式 */
var her = {
   name: 'Anna',
   sex: 'women',
   say: function(){
        // 一些处理逻辑......
   },
   doing: function(){
        // 另一些处理函数......
    }
}

 1. 划分命名空间:

var box = {
    width: 0,
    height: 0,
    getArea: function(){
         return this.width * this.width; // js中对象成的访问必须是显示的,即this是不能省略的
    },
    init: function(w, h){
         // width = w;
         // height = h;这种方式相当于定义了两个全局变量,(没加var声明的变量为全局变量)
         // 并不是对对象width和height的赋值
         // 下面是正确的
         this.width = w;
         this.height = h;
    }
} //box划分了一个命名空间,命名空间里的变量只在空间里有效

上面的单体中的所有的成员以及方法都是公有的(public),也就是在单体的外部可以对她们进行任意的改动(但不能访问其中的局部变量),那为什么说单体提供了一个命名空间呢?

别急,我们接着往下看:

var box = {
        width:0,
        height:0,//单体的变量
        getArea:function(){
            return width * height;// width,height其实并不是单体的变量,而是在init中定义的全局变量
        }
        init:function(w,h){
            width = w;
            height = h;
        }
}// init中width,height其实并不是单体的变量
window.onload = function(){
    var init = box.getArea();
    alert(init);
}

由于没有对init中的width,height进行初始化,所以会报错,这样改一下:

var box = {
        width:0,
        height:0,
        getArea:function(){
            return width * height;
        },
        init:function(w,h){
            width = w;
            height = h;
        }
    }
window.onload = function(){
        width = 0;
        height = 0;
        //or box.init(0,0);
        var init = box.getArea();
    alert(init);
}

发现可以了,由于init和 getArea所用的width和height并不是归单体所有的变量,而是一个全局变量,所以我们可以在单体外面进行随意调用而不受影响、

var box = {
        width: 0,
        height: 0,
        getArea: function(){
            return width * height;//js中对象成的访问必须是显示的,即this是不能省略的
        },
        init:function(w,h){
            width = w;
            height = h;
        }
    }//这里的width,height其实并不是单体的对象
window.onload = function(){
        width = 0;
        height = 0;
        var width = box.getArea();
        alert(width);
}

这样写又会报错了,可见我们以上的方式对于全局变量并没有建立起一个命名空间,全局变量为我们带来了危险。所以最上面的写法是对的,我们来验证一下:

var box = {
        width: 2,
        height: 2,
        getArea: function(){
            return this.width * this.height;/ /js中对象成的访问必须是显示的,即this是不能省略的
        },
        init:function(w,h){
            this.width = w;
            this.height = h;
        }
    }
window.onload = function(){
        width = 0; // 不会影响单体中的局部变量也就是命名空间
        height = 0; // 不会影响单体中的局部变量也就是命名空间
        var width = box.getArea();
        alert(width);
}

可见在window.onload中的width 和height已经没有干扰了,因为单体为单体中的width和height建立了一个命名空间。

2. 成员的属性:

虽然在javascript中没有这么严格的面向对象(oop),但是我们可以借助闭包来进行一个模仿,毕竟有的变量设为public是很不好的。

var her = (function(){
    var name  = 'Anna';
    var sex = 'women';
    return {
         getArea: function(){
             return name + 'is a'  + sex;
         },
         init:function(b){
               name = b;
         }
    }
})();

window.onload = function(){
    her.name = 'Jock'; // 无法访问
    alert(ger.getArea());
    her.init('Lous');
    alert(her.getArea());
}

私有变量、方法是只读的,公有变量、方法是可读可写的。

访问:
对于私有成员,直接访问即可,前面不用加任何修饰,
对于公有的访问在单体作用域内前面要加上“this.”,在单体作用域外前面要加上“her.”(单体名字.)

3.利用分支技术来来封装浏览器之间的差异

注意的地方:

  a. 一定要用闭包,实现即时绑定

  b. 每个分支之间用分号隔开

  c. 最后返回的是分支的名字

  d. 调用的时候用单体名+分支的方法名;

// 利用单体的分支技术来定义XHR(XMLHttpRequest)对象,必须要用闭包才可以实现
var XHR = (function(){
    //The three branches
    var standard = {
        cXHR:function(){
                return new XMLHttpRequest();
            }
    };
    var activeXNew = {
        cXHR:function(){
                return new ActiveXObject('Msxml2.XMLHttp');
            }
    };
    var activeXOld = {
        cXHR:function(){
                return new ActiveXObject('Microsoft.XMLHttp');
            }
    };
    //To assign(分配) the branch, try each method;return whatever doesn't fail
    var testObject;
    try{
        testObject = standard.cXHR();
        return standard;// return this branch if no error was thrown
    }catch(e){
        try{
            testObject = activeXNew.cXHR();
            return activeXNew;
        }catch(e){
            try{
                testObject = activeXOld.cXHR();
                return activeXOld;
            }catch(e){
                throw new Error('Create the XMLHttpRequestObject failed!');
            }
        }
    }
})();
window.onload = function(){
    alert(XHR.cXHR());
}

共同进步吧!!!话说又星期五了

javascript --- 设计模式之单体模式(一)的更多相关文章

  1. javascript设计模式之单体模式

    一入前端深似海,刚入前端,以为前端只是div+css布局外加jquery操作DOM树辣么简单.伴随着对前端学习的深入,发现前端也是博大精深,而且懂得越多,才发现自己越无知,所以一定不能停下脚步的学习. ...

  2. javascript设计模式(单体模式)

    主要内容: js中最基本.应用最广的模式就是单体模式,实现原理是将代码组织为一个逻辑单元,这个逻辑单元中的代码可以通过单一的变更进行访问,确保对象只存在一份实例. 单体模式的特点: 在网页中使用全局变 ...

  3. Javascript设计模式(2)-单体模式

    单体模式 1. js最简单的单体模式 对象字面量:把一批有一定关联的方法和属性组织在一起 // 对象字面量 var Singleton = { attr1: true, attr2: 10, meth ...

  4. javascript --- 设计模式之单体模式(二)

    在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法: var her = { property1: 'someing', ...

  5. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  6. JavaScript设计模式之----组合模式

    javascript设计模式之组合模式 介绍 组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式.使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更 ...

  7. JS设计模式之单体模式(Singleton)

    单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对 ...

  8. 从ES6重新认识JavaScript设计模式(三): 建造者模式

    1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...

  9. JavaScript 设计模式之----单体(单例)模式

    设计模式之--单体(单例)模式 1.介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工 ...

随机推荐

  1. php XML 读写 创建

    一 .XML 读 1.1. 首先同目录定义好一个XML文件 : book.xml <?xml version="1.0" encoding="utf-8" ...

  2. SNF开发平台WinForm之十一-程序打包-SNF快速开发平台3.3-Spring.Net.Framework

    原来我们用的是微软自带的打包工具去打包,但感觉好像也是第三方做的打包并且很是麻烦,还有时不成功报错.那综合考虑就找一个简单实用的打包工具吧,就找到了NSIS这个.具体打包步骤如下: 1.安装NSIS ...

  3. [0x01 用Python讲解数据结构与算法] 关于数据结构和算法还有编程

    忍耐和坚持虽是痛苦的事情,但却能渐渐地为你带来好处. ——奥维德 一.学习目标 · 回顾在计算机科学.编程和问题解决过程中的基本知识: · 理解“抽象”在问题解决过程中的重要作用: · 理解并实现抽象 ...

  4. 字体文件放入CDN服务器中,跨域问题(IIS版)

    Font from origin 'http:/XXXX' has been blocked from loading by Cross-Origin Resource Sharing policy: ...

  5. .NET转Java

    懂C#的话,转Java也不是那么难,毕竟,语言语法还是相似的.尝试了下Java,说说自己的体会吧. 一,Java和C#都是完全面向对象的语言.在面向对象编程的三大原则方面,这两种语言接近得不能再接近. ...

  6. codeforce A. Design Tutorial: Learn from Math

    题意:将一个数拆成两个合数的和, 输出这两个数!(这道题做的真是TMD水啊)开始的时候不知道composite numbers是啥意思,看了3遍才看懂.... 看懂之后又想用素数筛选法来做,后来决定单 ...

  7. fork()函数详解

    原文链接:http://blog.csdn.net/jason314/article/details/5640969  一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函 ...

  8. [linux]记录如何设置一个新的vps

    背景 我正在做一个小项目,做好了打算上线,所有需要买个服务器,看了一圈,发现还是卖个vps合算.买了之后,进行了一些列的设置,这里记录一下,以便后面查看. 系统: ubuntu 内存:1G 一.更改时 ...

  9. SQL Server中的事务日志管理(2/9):事务日志架构概述

    当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...

  10. Java魔法堂:打包知识点之META-INF/MAINFEST.MF

    一.前言     通过执行形如 jar -cvf src.jar src 命令将多个.class文件打包成JAR包时,你会发现JAR包中除了src目录外还多了个MATE-INF/MAINFEST.MF ...