`

JavaScript重构(十):强化对象封装和模块封装

阅读更多

1、类本身就是一种封装形式,先来看看最简单的封装,JavaScript中没有private关键字,对于私有成员,不如我们统一一个以下划线开头的命名来标识:

var User = function(name){
	this._name = name;
	this.getName = function(){
		return _name;
	};
};

 

 

2、不过,上面的办法还不够好,我依然可以用user._name访问到这个变量。现在换个思路,通过使用var来定义User中的name属性,并且通过getName方法来给它暴露访问入口,实现了private一样的效果:

var User = function(name){
	var name = arguments[0];
	this.getName = function(){
		return name;
	};
};
User.SORT = 1;

var user = new User("Test");
alert(user.getName());	//正确打印
alert(user.name);		//封装起来的私有成员,不能随意访问
alert(User.SORT);		//类变量

 

 

3、通过匿名方法,把代码块的影响范围限制在一定区域内:

(function($){
	$.fn.extend({
		sayHi : function(){
			alert("Hi: " + this.get(0).tagName);
		}
	});
})(jQuery);

jQuery("body").sayHi();

 上例中,外部由于命名冲突的关系,无法使用“$”来获取jQuery的引用,但是通过这样匿名函数的调用,在函数实现内部依然可以使用到“$”,并且给JQuery的原型增加了一个sayHi的方法。

 

 

4、命名空间带来的封装,参见这篇博客。

 

 

5、通过合理规约JS文件的依赖关系和加载执行顺序,保证区域代码执行时对外部的访问范围:

//首先加载URLUtil的类定义,再加载User的类定义,保证了依赖关系是User依赖于URLUtil,而不会倒置,避免了在URLUtil的代码区域附近去访问User对象
var URLUtil = {
	getURL : function(){
		return "http://xxx";
	}
};

……

var User = function(){
	var url;
	this.setURL = function(newUrl){
		url = newUrl;
	};
};

……

var user = new User();
user.setURL(URLUtil.getURL());

 

 

JavaScript重构系列,请访问此链接

 

文章系本人原创,转载请注明作者和出处

3
0
分享到:
评论

相关推荐

    worldwindjava源码-javascript-oop:面向对象编程和面向对象JavaScript

    世界风java源码JavaScript 中的面向对象编程 学习目标 使用构造函数生成特定类型的对象。 使用构造函数将属性附加到新对象。 回想一下在构造函数中定义方法的成本。 通过将自定义对象附加到原型来定义自定义对象的...

    《网站重构:应用Web标准进行设计(第3版)》PDF

    在重构时,应考虑使用模块系统(如CommonJS或ES6模块)来组织代码,避免全局变量污染,提高代码的封装性。同时,利用现代JavaScript特性,如箭头函数、模板字符串和async/await,可以使代码更简洁、易读。 响应式...

    JavaScript每天必学之数组和对象部分

    JavaScript中数组和对象是基础的数据结构,它们对于学习JavaScript语言至关重要。对象是JavaScript中一种复合数据类型,它可以包含属性和方法。属性是对象的变量,而方法是对象可以调用的函数。对象可以用来存储多种...

    编写可维护面向对象的JavaScript代码[翻译]

    在JavaScript中,创建类和对象有两种基本方式: 1. 使用构造函数和原型(Prototypes): ```javascript function Employee(name, title, salary) { this.name = name; this.title = title; this.salary = salary...

    小程序模块化开发——模块.zip

    3. **导入与导出**:在JavaScript中,我们使用`import`和`export`关键字来实现模块间的依赖关系。小程序虽然基于JS,但其API略有不同,采用`require`和`module.exports`或`exports`进行模块的加载和暴露。 4. **...

    onfirejs:JavaScript的封装式,无魔术字符串事件

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态内容。"Onfirejs" 是一个针对JavaScript的封装式事件处理库,旨在提供一种无魔术字符串(Magic String)的事件处理机制...

    《重构-改善既有代码的设计》书中源码

    这些重构技术不仅适用于Java、C++等面向对象语言,也适用于Python、JavaScript等其他编程语言。 1. 提取方法:当一个方法变得过于复杂,包含了多个职责时,可以将其分解为多个小方法,每个方法只负责一项任务。这有...

    JavaScript设计模式与开发实践.pdf

    第一部分讲解了JavaScript语言的面向对象和函数式编程的知识,包括静态类型语言和动态类型语言的区别及其在实现设计模式时的异同、封装、继承、多态在动态类型语言中的体现、JavaScript基于原型继承的面向对象系统的...

    JavaScript内核高级教程

    随后,为了更好地推广这一新语言,网景将其重命名为JavaScript,旨在与当时非常热门的面向对象编程语言Java建立联系,尽管这两种语言在技术和语法上并无直接关联。 #### 二、JavaScript的核心概念与特性 - **面向...

    JavaScript Best Practices & Tricks

    3. **模式与封装**:学习和应用常见的设计模式,如模块模式、闭包等,可以帮助编写更健壮的代码。Crockford的网站提供了关于私有变量的更多信息。同时,谨慎处理命名空间,避免污染全局对象。 4. **减少全局变量**...

    javascript-OOP:JavaScript OOP

    在JavaScript中,OOP主要通过类(Class)和对象(Object)来实现,同时利用了封装、继承和多态这三大面向对象的特性。 **封装**是面向对象编程的基础,它隐藏了对象内部的细节,只对外提供公共接口。在JavaScript中...

    从Kissy Gallery的重构谈JavaScript框架社区建设.pdf

    JavaScript 框架社区建设 - 从 Kissy Gallery 的重构谈起 Kissy 是阿里前端自主开发的 JavaScript 框架,它的生态圈基础建设有些薄弱,社区贡献代码的人寥寥无几。Kissy 的困境几乎是 JavaScript 框架的缩影。国内...

    see-ajax:一个ajax封装器,能够对响应Json对象进行重构,预先请求对象,后置处理响应数据等。 Ajax包装器,具有响应重构,预处理,后处理等

    看见ajax一个ajax封装器,能够对Json对象进行重构,预先请求对象,后置处理响应数据等。依赖相关注意仅适用于json数据响应。快速开始npm install see-ajax --saveimport seeAjax from 'see-ajax';// 配置应用seeAjax...

    网站重构.Web标准设计

    2. **模块化**:将重复的代码片段封装成模块,方便重用和维护。 3. **分离表现与内容**:遵循“内容与表现分离”的原则,使用CSS控制样式,HTML负责结构,JavaScript处理动态行为。 4. **优化性能**:通过压缩代码...

    基于Javascript原型的Zepto框架设计.pdf

    以Zepto前端框架为例,利用Javascript原型链的相关知识,采用原生Javascript与框架对比的方法剖析了框架整体设计思路,细致分析了框架的大致架构,重构了Zepto对象原型,并封装了可能用到的所有方法。 Zepto框架是...

    wRegexpObject:封装普通逻辑组合(expression)和正则表达式的类,可将其应用于字符串以判断字符串是否满足正则表达式和逻辑

    封装了琐碎的逻辑组合(expression)和正则表达式的类,可以将其应用于字符串以判断该字符串是否满足正则表达式和逻辑。 RegexpObject提供了以下功能:组合,组合该类的多个实例,对其进行扩展,应用于字符串等。 ...

Global site tag (gtag.js) - Google Analytics