- 浏览: 27157 次
最新评论
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 对象创建模式
介绍
本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码。
模式:函数语法糖
函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用prototype的特性,代码比较简单,我们先来看一下实现代码:
if (typeof Function.prototype.method !== "function") {
Function.prototype.method = function (name, implementation) {
this.prototype[name] = implementation;
return this;
};
}
扩展对象的时候,可以这么用:
var Person = function (name) {
this.name = name;
}
.method('getName',
function () {
return this.name;
})
.method('setName', function (name) {
this.name = name;
return this;
});
这样就给Person函数添加了getName和setName这2个方法,接下来我们来验证一下结果:
var a = new Person('Adam');
console.log(a.getName()); // 'Adam'
console.log(a.setName('Eve').getName()); // 'Eve'
模式7:对象常量
对象常量是在一个对象提供set,get,ifDefined各种方法的体现,而且对于set的方法只会保留最先设置的对象,后期再设置都是无效的,已达到别人无法重载的目的。实现代码如下:
var constant = (function () {
var constants = {},
ownProp = Object.prototype.hasOwnProperty,
// 只允许设置这三种类型的值
allowed = {
string: 1,
number: 1,
boolean: 1
},
prefix = (Math.random() + "_").slice(2);
return {
// 设置名称为name的属性
set: function (name, value) {
if (this.isDefined(name)) {
return false;
}
if (!ownProp.call(allowed, typeof value)) {
return false;
}
constants[prefix + name] = value;
return true;
},
// 判断是否存在名称为name的属性
isDefined: function (name) {
return ownProp.call(constants, prefix + name);
},
// 获取名称为name的属性
get: function (name) {
if (this.isDefined(name)) {
return constants[prefix + name];
}
return null;
}
};
} ());
验证代码如下:
// 检查是否存在
console.log(constant.isDefined("maxwidth")); // false
// 定义
console.log(constant.set("maxwidth", 480)); // true
// 重新检测
console.log(constant.isDefined("maxwidth")); // true
// 尝试重新定义
console.log(constant.set("maxwidth", 320)); // false
// 判断原先的定义是否还存在
console.log(constant.get("maxwidth")); // 480
介绍
本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码。
模式:函数语法糖
函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用prototype的特性,代码比较简单,我们先来看一下实现代码:
if (typeof Function.prototype.method !== "function") {
Function.prototype.method = function (name, implementation) {
this.prototype[name] = implementation;
return this;
};
}
扩展对象的时候,可以这么用:
var Person = function (name) {
this.name = name;
}
.method('getName',
function () {
return this.name;
})
.method('setName', function (name) {
this.name = name;
return this;
});
这样就给Person函数添加了getName和setName这2个方法,接下来我们来验证一下结果:
var a = new Person('Adam');
console.log(a.getName()); // 'Adam'
console.log(a.setName('Eve').getName()); // 'Eve'
模式7:对象常量
对象常量是在一个对象提供set,get,ifDefined各种方法的体现,而且对于set的方法只会保留最先设置的对象,后期再设置都是无效的,已达到别人无法重载的目的。实现代码如下:
var constant = (function () {
var constants = {},
ownProp = Object.prototype.hasOwnProperty,
// 只允许设置这三种类型的值
allowed = {
string: 1,
number: 1,
boolean: 1
},
prefix = (Math.random() + "_").slice(2);
return {
// 设置名称为name的属性
set: function (name, value) {
if (this.isDefined(name)) {
return false;
}
if (!ownProp.call(allowed, typeof value)) {
return false;
}
constants[prefix + name] = value;
return true;
},
// 判断是否存在名称为name的属性
isDefined: function (name) {
return ownProp.call(constants, prefix + name);
},
// 获取名称为name的属性
get: function (name) {
if (this.isDefined(name)) {
return constants[prefix + name];
}
return null;
}
};
} ());
验证代码如下:
// 检查是否存在
console.log(constant.isDefined("maxwidth")); // false
// 定义
console.log(constant.set("maxwidth", 480)); // true
// 重新检测
console.log(constant.isDefined("maxwidth")); // true
// 尝试重新定义
console.log(constant.set("maxwidth", 320)); // false
// 判断原先的定义是否还存在
console.log(constant.get("maxwidth")); // 480
发表评论
-
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 677本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 861本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 630本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 565本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1321本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1216本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 804本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 927本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1082本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 802本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 594本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1243本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1410本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1129本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 833本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 853本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 484本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 651本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 661本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 568本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
- **数据类型**: JavaScript中有两种主要的数据类型——原始类型(如Number、String、Boolean等)和对象类型(包括Array、Object等)。需要注意的是,在JavaScript中null和undefined也是两种特殊的类型。 **1.2 ...
- **Struts2视频教程**:Struts2是一个基于MVC模式的Java Web框架。 - **Hibernate4视频教程**:Hibernate是一个强大的对象-关系映射(ORM)框架,用于简化Java应用程序中的数据访问层。 - **Spring4视频教程**:...
- **严格模式**:ES5 引入了一种新的执行上下文——严格模式,这种模式下 JavaScript 的运行会受到更多限制,从而有助于避免一些常见的编程错误。例如,在严格模式下,变量必须先声明后使用,否则会抛出错误。 ####...
例如,单例模式确保类只有一个实例,工厂模式提供对象创建的抽象,观察者模式用于实现事件监听。理解和应用设计模式,可以使代码更易维护、扩展,提高代码复用性。 在准备面试时,对这些知识点的深入理解和实践是...
- 研究 Java 设计模式,如外观模式、适配器模式、单例模式、观察者模式、装饰模式等。 - 了解 Web 服务架构,如 WebService、SCA、SOA、ESB、EAI,理解面向服务的架构。 - 探索面向资源架构(ROA)和 RESTful ...
是一个结合了Python、Matter.js 和 TensorFlow.js 的创新应用,旨在演示如何使用深度强化学习(Deep Q-Network,简称DQN)训练一个智能体来玩一个简单的游戏——落球躲避。该项目的核心目标是通过AI算法让一个角色...
国土违法线索管理系统是针对当前我国土地资源管理中存在的一大问题——土地违法行为而设计的信息化工具。随着社会经济的快速发展,土地资源的利用变得日益紧张,非法占用、转让土地使用权、破坏耕地等问题层出不穷,...
11. **portlet模式和状态**:portlet可以处于多种模式,如编辑、帮助和查看模式,每种模式对应不同的用户交互。此外,portlet窗口可以有多种状态,如最大化、正常和最小化。 12. **缓存管理**:portlet可以通过API...
在Rocketseat Ignite训练营中,学员们将从基础出发,深入探索JavaScript的核心概念,例如变量声明、数据类型、控制流结构、函数的定义和使用、对象的创建与操作以及原型链和闭包等。这些内容是构成JavaScript语言的...
本篇文章将深入探讨如何利用JavaScript的两大利器——Node.js和Express,结合非关系型数据库MongoDB,创建一个功能齐全的地址簿应用程序。我们将围绕“AddressExpressBook”这一项目进行讲解,带你了解整个开发过程...
首先,我们要理解该系统的核心技术栈——JavaEE、Spring和Struts。JavaEE(Java Platform, Enterprise Edition)是Java平台的企业版,用于构建和部署企业级应用程序,如Web应用和分布式应用。它提供了丰富的API和...
本文将深入探讨一个基于JavaScript的EHR项目——"alpha-ehr",并着重分析其使用TypeScript进行开发的关键技术和应用。 一、TypeScript在alpha-ehr中的重要性 TypeScript是JavaScript的一个超集,它引入了静态类型...
《学生宿舍管理系统——基于Java技术实现》 学生宿舍管理系统是一款运用Java编程语言开发的应用软件,旨在提高高校对学生宿舍管理的效率和准确性。Java作为一种广泛应用于企业级应用开发的语言,具有跨平台、安全性...
《Parsley框架详解——基于AS3的Flex/Flash/AIR应用开发》 Parsley,这个曾经在AS3(ActionScript 3)编程领域备受推崇的框架,为Flex、Flash以及AIR应用程序的构建提供了强大的支持。尽管自2012年2月宣布停产,但...
Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...
9. **表单**:Angular提供了两种表单模式——模板驱动和响应式表单,用于处理用户输入。这两种方式都可以实现验证和数据管理。 10. **CLI工具**:Angular CLI(命令行接口)是开发过程中的强大工具,它可以快速生成...
6. **表单**:Angular提供了两种表单模式——模板驱动和响应式表单,用于处理用户输入和验证。 7. **管道(Pipes)**:管道是用于转换数据的小型可复用组件,例如`date`管道用于格式化日期,`currency`用于货币格式...