javascript --- 设计模式之单体模式

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

单体模式是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());
}

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

时间: 2024-10-29 04:18:24

javascript --- 设计模式之单体模式的相关文章

javascript设计模式之单体模式

一入前端深似海,刚入前端,以为前端只是div+css布局外加jquery操作DOM树辣么简单.伴随着对前端学习的深入,发现前端也是博大精深,而且懂得越多,才发现自己越无知,所以一定不能停下脚步的学习.原来前端也有设计模式,那么开始了解吧! 今天来学最简单的单体模式,其实就是简单的Object扩展 var calcYourShengXiao={ solar : ["甲","乙","丙","丁","午",&qu

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

在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法: var her = { property1: 'someing', property2: 'someing else', method1: function(){ console.log('hello, Javascript'); } } 如果以后要扩展该对象,你可以添加自己的私有成员和方法,然后使用闭包在其内部封装这些变量和函数声明.只暴露你想暴露的public成

【javascript设计模式】构造器模式、模块模式、单例模式

构造器模式(Constructor) 构造器模式是学习js最早接触的一种,实现主要如下: 1 function myObject(name){ 2 this.name = name; 3 } 4 5 myObect.propotype = function sayName(){ 6 alert(this.name); 7 } 使用的时候需要new一个对象. 1 var myObj = new myObject('hello'); 2 myObj.sayName(); 模块模式(Module) 模

javaScript几种设计模式之一——单体模式

javaScript是一种弱类型.动态的.基于原型的语言,这种语言特性使得它非常容易. 甚至是普通的方式实现其中的一些模式. 单体模式的思想在于保证一个特定类仅有一个实例.这就意味着当您第二次使用同一个 类创建新对象的时候,应该得到与第一次所创建对象完全相同对象. 在javaScript中没有类,只有对象.当您创建一个新对象时,实际上没有其他对象与其 类似,因此新对象已经是单体了.使用对象字面量创建一个简单的对象也是一个单体的 例子. var obj ={ myprop:'my value' }

JavaScript设计模式之策略模式(学习笔记)

在网上搜索“为什么MVC不是一种设计模式呢?”其中有解答:MVC其实是三个经典设计模式的演变:观察者模式(Observer).策略模式(Strategy).组合模式(Composite).所以我今天选择学习策略模式. 策略模式:定义了一系列家族算法,并对每一种算法单独封装起来,让算法之间可以相互替换,独立于使用算法的客户. 通常我并不会记得“牛顿第一定律”的具体内容,所以我也难保证我会对这个定义记得多久……用FE经常见到的东西来举个例子说明一下: $("div").animation(

javascript设计模式:构造器模式学习一

javascript 设计模式1.简介javascript是一种弱类型语言,不过类可以通过函数模拟出来最常见的实现方法如下:function Car(model){ this.model = model; this.color = "red"; this.year = "2012"; this.getInfo = function(){ return this.model + " " + this.year; }}接下来我们可以使用上边定义Car

JavaScript中的单体模式四种实现方式

1 /* 2 1 简单单体 3 */ 4 var Singleton = { 5 attr1: 1 , 6 method1:function(){ 7 //do sth 8 } 9 }; 10 alert(Singleton.attr1); 11 Singleton.method1(); 12 13 //单体模式一般用于划分命名空间 也就是区分是哪位开发人员的代码 例如 14 //张三工程师开发的代码 15 var Zhangsan = { }; 16 //把张三的逻辑写在这里面 17 Zhan

javascript设计模式-module(模块)模式

模块是任何强大应用程序中不可或缺的一部分,它通常能帮助我们清晰地分离和组织项目中的代码单元. js中实现模块的方法: 对象字面量表示法 Module模式 AMD模块 CommonJS模块 ECMAScript Harmony 模块 对象字面量 对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始,在对象的外部,新成员可以使用如下赋值语句添加到对象字面量上,myModule.property = "someValue". var myM

JavaScript设计模式之命令模式

一.命令模式概念 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一些列的处理.他也可以用来消除调用操作的对象和实现操作的对象之间的耦合.这为各种具体的类的更换带来了极大的灵活性. 二.命令模式的作用和注意事项 模式作用: 1.将函数的封装.请求.调用结合为一体 2.调用具体的函数解耦命令对象与接收对象 3.提高程序模块化的灵活性 注意事项: