Javascript设计模式学习(一)封装和信息隐藏

在我们编程的过程中,我们应该尽可能的把数据和函数处理信息隐藏在对象内部,在Javascript中,我们怎样来做呢?

虽然Javascript中没有其他面向对象语言的声明共有和私有的关键字,但是我们仍可以通过一些手段来达到这样的效果。我们可以这样理解封装和信息隐藏,信息隐藏是我们的目标,因为我们不想太多无关的信息暴露在对象之外,而封装就是实现我们目标的方法。封装就可以被定义为在对象内部隐藏数据表达和具体实现的细节。

下面来学习下怎么用Javascript来实现接口:

 

第一种是:Fully Exposed Method

 

 看例子

Code
var HouseItem = function(hid,hname,address){
    if(hid == undefined) throw new Error('Hid is not defined!')
                
    this.hid = hid;
    this.hname = hname || "暂无";
    this.address = address || "暂无";
}

HouseItem.prototype.display = function(container){
    document.getElementById(container).innerHTML = "楼盘名称:" + this.hname + "<br />";
}

 这个中,我们讲一个楼房的项目封装到了一类中,只是我们对于他的属性的有效性检查还不是很完整,而且此时属性的获取或者赋予完全是公开的。

 

 我们可以继续将这个例子完善为

Code
var HouseItem = function(hid,hname,address){
    this.setHid(hid);
    this.setHname(hname);
    this.setAddress(address);
}

   HouseItem.prototype = {
    getHid: function(){
        return this.hid;
    },
    setHid: function(hid){
        if (!this.isValid(hid)) 
        throw new Error('Hid is not defined!');
        this.hid = hid;
    },
    getHname: function(){
        return this.hname;
    },
    setHname: function(hname){
        this.hname = hname || "暂无";
    },
    getAddress: function(){
        return this.address;
    },
    setAddress: function(address){
        this.address = address || "暂无";
    },
    isValid: function(hid){
        if (hid != null && hid != undefined && hid != "") {
        return true;
        }
        else {
        return false;
        }
    },
    showHouse: function(){
        document.getElementById("container").innerHTML += "楼盘名称:" + this.hname + "<br />";
    }
    }

 

怎么样,现在是不是看起来完善很多了,但这还不是最好的方法,不过这种方法很容易理解,也比较容易上手。

时间: 2024-10-22 20:25:59

Javascript设计模式学习(一)封装和信息隐藏的相关文章

JavaScript设计模式学习之“类式继承”

 这篇文章主要介绍了JavaScript设计模式学习之"类式继承",本文直接用代码实例讲解类式继承的实现方法,需要的朋友可以参考下     在做一件事情之前,首先要清楚做这件事情的好处有什么,相信不会有哪个人愿意无缘无故的去做事情.一般说来,我们在设计类的时候,实际上就是希望能减少重复性的代码,使用继承可以完美的做到这一点,借助继承机制,你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法,而对设计的修改也更为轻松.废话不多说了,举例说明: 代码如下: function

面向对象的Javascript之三(封装和信息隐藏)_js面向对象

同时,我们知道在面向对象的高级语言中,创建包含私有成员的对象是最基本的特性之一,提供属性和方法对私有成员进行访问来隐藏内部的细节.虽然JS也是面向对象的,但没有内部机制可以直接表明一个成员是公有还是私有的.还是那句话,依靠JS的语言灵活性,我们可以创建公共.私有和特权成员,信息隐藏是我们要实现的目标,而封装是我们实现这个目标的方法.我们还是从一个示例来说明:创建一个类来存储图书数据,并实现可以在网页中显示这些数据. 1. 最简单的是完全暴露对象.使用构造函数创建一个类,其中所有的属性和方法在外部

javascript设计模式:JavaScript设计模式学习一之接口

看完了<JavaScript王者归来>,在图书馆找了<JavaScript设计模式>来看,之前设计模式方面的书看过:<Head First 设计模式>.<设计模式之禅>,GOF的<Design Patterns: Elements of Reusable Object-Oriented Software>看了一部分.记得以前没这些基础的时候,看<JavaScript设计模式>简直是不知道作者在说什么.言归正传:准确的说,JavaScr

javascript设计模式 封装和信息隐藏(上)_javascript技巧

本文分上下两部分,上部讲基本模式(basic patterns):完全暴露法,下划线标记法和使用闭包:下部讲高级模式(Advanced Patterns),如何实现静态方法和属性,常量还有其他一些知识点. 封装是面向对象语言很基本也是很有用的特性,虽然javascript也可以称的上是面向对象语言,但他对封装的支持并不是很好,不像其他语言,只要使用private.protected就可以实现.但这并不是说就没有办法了,下面我就介绍下如何在javascript中实现封装. 一.基本模式(basic

Javascript设计模式学习(三)更多的高级样式

  静态方法和属性   直接上代码吧 //静态成员的例子 var House = (function(){ //私有的静态属性 var numOfHouse = 0; //私有的静态方法 function isValid(hid){ if (hid != null && hid != undefined & hid != "") { return true; } else { return false; } }   //返回构造器 return function

JavaScript设计模式学习(四)单件(Singleton Pattern)

  单件是JavaScript中最基本.最有用的设计模式,而你今后也会经常的使用这个模式.通过单件,我们可以把统一到一个逻辑单元中并且提供一个唯一的入口,这就保证你所有的引用都是用的这个全局资源.   单件的用途有:一.提供一个Namespacing.二.提供一种被称为branching的技术.   单件的基本形式:   /* Basic Singleton Pattern */ var Map = {     name:"Map G",     createdate:"20

JavaScript设计模式学习之“类式继承”_javascript技巧

在做一件事情之前,首先要清楚做这件事情的好处有什么,相信不会有哪个人愿意无缘无故的去做事情.一般说来,我们在设计类的时候,实际上就是希望能减少重复性的代码,使用继承可以完美的做到这一点,借助继承机制,你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法,而对设计的修改也更为轻松.废话不多说了,举例说明: 复制代码 代码如下: function Person(name){     this.name = name; } Person.prototype.getname = func

JavaScript 设计模式学习 Singleton_js面向对象

复制代码 代码如下: /* Basic Singleton. */ var Singleton = { attribute1: true, attribute2: 10, method1: function() { }, method2: function(arg) { } }; 单件模式最主要的用途之一就是命名空间: /* GiantCorp namespace. */ var GiantCorp = {}; GiantCorp.Common = { // A singleton with c

JavaScript 设计模式学习 Factory_javascript技巧

复制代码 代码如下: /* DisplayModule interface. */ var DisplayModule = new Interface('DisplayModule', ['append', 'remove', 'clear']); /* ListDisplay class. */ //通过接口实现工厂,这是通过List方式显示RSS var ListDisplay = function(id, parent) { // implements DisplayModule this