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

单体模式是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. MMO之禅(二)职业精神

    MMO之禅(二)职业精神 --心态 目标 信仰 Zephyr 201304 继续上篇,继续讲什么?打了很多腹稿点滴,从引擎架构,到上层数据.逻辑模块规划,想了很多,临起笔,却总发觉四顾心茫然,乱不可言 ...

  2. Word2010撤销按钮失效,Ctrl+Z失效解决办法

    1.打开注册表编辑器.按Win+R,在运行框中键入regedit,然后单击“确定”. 2.在注册表编辑器中,展开到下列注册表子项: HKEY_CURRENT_USER\Software\Microso ...

  3. mono+jexus 之连接数据库

    System.ArgumentException Unable to find the requested .Net Framework Data Provider. It may not be in ...

  4. DMSFrame 之简单用法(二)

    上次说了下DMSFrame的一些查询方式,之前也有好多朋友问了下这个ORM与EF有什么样的区别. 要论区别,我自己也总结了几点.如果有其它朋友知道的,可以回复补充下. 1.不需要编辑的时候需要再次查询 ...

  5. 转载:更换zImage中的initramfs

    From: http://blog.csdn.net/linuxaxis/article/details/8769722 好吧,折腾了两三个星期,USB的问题没搞定,看来功夫还不到家,看了下efuse ...

  6. ArcGIS“一个或多个ActiveX控件无法显示...”问题的解决方案

    ArcMap启动时的一个警告信息“一个或多个ActiveX控件无法显示...”,如图 出现这种情况,有可能的原因是IE浏览器的安全选项设置被修改了.比如被手动修改过,或者被第三方系统杀毒优化软件修改了 ...

  7. MyBatis知多少(7)持久层

    持久层是适合使用MyBatis的地方.在面向对象的系统中,持久层主要关注对象(或者更精确地说应该是存储在那些对象中的数据)的存取.在企业应用程序中持久层通常用关系数据库系统来存储数据,虽然某些情况下其 ...

  8. IP Failover Setup using Keepalived on CentOS/Redhat 6

    source url:http://tecadmin.net/ip-failover-setup-using-keepalived-on-centos-redhat-6/ Keepalived is ...

  9. CSS程序思想

    CSS的设计思想,比如:CSS预处理器.CSS对像(OOCSS).SMACSS.Atomic设计和OrganicCSS等             一.CSS预处理器最重要的功能:      1.连接: ...

  10. .Net魔法堂:史上最全的ActiveX开发教程——ActiveX与JS间交互篇

    一.前言 经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS.下面一起来学习吧! 二.JS调用ActiveX方法 只需在UserContr ...