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

简介: 在我们编程的过程中,我们应该尽可能的把数据和函数处理信息隐藏在对象内部,在Javascript中,我们怎样来做呢? 虽然Javascript中没有其他面向对象语言的声明共有和私有的关键字,但是我们仍可以通过一些手段来达到这样的效果。

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

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


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

 

第一种是:Fully Exposed Method

 

 看例子

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 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 />";
}

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

 

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

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 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 />";
    }
    }

 

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

相关文章
|
13天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
1月前
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
|
4天前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
9 1
|
7天前
|
JavaScript 前端开发
javascript获取url信息的常见方法
javascript获取url信息的常见方法
15 2
|
7天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
14天前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
|
14天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
14天前
|
SQL 存储 前端开发
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
|
18天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
22 0
|
20天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
13 1