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 />";
    }
    }

 

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

相关文章
|
1月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
33 8
|
2月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
127 33
|
4月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
70 2
|
4月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
99 5
|
4月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
54 2
|
4月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
79 1
|
5月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
62 2
|
5月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
103 0
|
10月前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
设计模式 算法 JavaScript

热门文章

最新文章