javascript设计模式-继承
javascript继承分为两种：类式继承（原型链、extend函数）、原型式继承（对继承而来的成员的读和写的不对等性、clone函数）。
- 类式继承-->prototype继承：
function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
} //继承
function Author(name,books){
Person.call(this,name);
this.books = books;
}
Author.prototype = new Person();
Author.prototype.constructor = Author;
Author.prototype.getBooks = function(){
return this.books;
} var author = new Author("zap","javascript程序设计");
console.log(author); - 类式继承-->extend函数：
function extend(subClass,superClass){
var F = function(){};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass; subClass.superClass = superClass.prototype;
if(superClass.prototype.constructor == Object.prototype.constructor){
superClass.prototype.constructor = superClass;
}
} /*Class Person*/ function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
} function Author(name,books){
Author.superClass.constructor.call(this,name);
// Person.call(this,name);
this.books = books;
}
extend(Author,Person);
Author.prototype.getBooks = function(){
return this.books;
} var author = new Author("zap","javascript程序设计");
console.log(author);
console.log(author.getName());
console.log(author.getBooks()); - 原型式继承-->clone函数：(原型式继承更能节约内存)
var Person ={
name:"zap",
age:"26",
toString:function(){
console.log(this.name + "@" + this.age);
}
} var author = clone(Person);
author.name = "zap";
author.toString(); function clone(object){
function F(){}
F.prototype = object;
return new F;
}附上以类式继承实现的就地编辑demo，原型式方式实现和类式继承方式相差无几，不在此列举。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类式继承解决方案</title>
<style type="text/css">
#doc{width:500px; height:300px; border:1px solid #ccc; margin:10px auto;}
</style>
</head>
<body>
<div id="doc"></div>
</body>
</html>
<script type="text/javascript"> function EditInPlaceField(id,parent,value){
this.id = id;
this.value = value || "default value";
this.parentElement = parent; this.createElements(this.id);
this.attachEvents();
} EditInPlaceField.prototype = {
createElements:function(id){
this.createContainer();
this.createShowPanel();
this.createEnterPanel();
this.createControlBtns();
this.convertToText();
},
//创建容器
createContainer:function(){
this.containerElement = document.createElement("div");
this.parentElement.appendChild(this.containerElement);
},
createShowPanel:function(){
this.staticElement = document.createElement("span");
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML = this.value;
},
createEnterPanel:function(){
this.fieldElement = document.createElement("input");
this.fieldElement.type = "text";
this.fieldElement.value = this.value;
this.containerElement.appendChild(this.fieldElement);
},
createControlBtns:function(){
this.saveButton = document.createElement("input");
this.saveButton.type = "button";
this.saveButton.value = "Save";
this.containerElement.appendChild(this.saveButton); this.cancelButton = document.createElement("input");
this.cancelButton.type = "button";
this.cancelButton.value = "Cancel";
this.containerElement.appendChild(this.cancelButton);
},
attachEvents:function(){
var that = this;
addEvent(this.staticElement,"click",function(){that.convertToEditable();});
addEvent(this.saveButton,"click",function(){that.save();});
addEvent(this.cancelButton,"click",function(){that.cancel();});
},
convertToEditable:function(){
this.staticElement.style.display = "none";
this.fieldElement.style.display = "inline";
this.saveButton.style.display = "inline";
this.cancelButton.style.display = "inline"; this.setValue(this.value);
},
save:function(){
this.value = this.getValue();
var that = this;
var callback = {
success:function(){
that.convertToText();
},
failure:function(){
alert("Error saving value.");
}
}; ajaxRequest("get","save.php?id=",callback);
},
cancel:function(){
this.convertToText();
},
convertToText:function(){
this.fieldElement.style.display = "none";
this.saveButton.style.display = "none";
this.cancelButton.style.display = "none";
this.staticElement.style.display = "inline"; this.setValue(this.value);
},
setValue:function(value){
this.fieldElement.value = value;
this.staticElement.innerHTML = value;
},
getValue:function(){
return this.fieldElement.value;
}
} //事件绑定
function addEvent(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on" + type,fn);
}else{
element["on" + type] = fn;
}
}
//ajax请求
function ajaxRequest(type,url,callback){
callback.success();
}
//extend
function extend(subClass,superClass){
var F = function(){};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass; subClass.superClass = superClass.prototype;
if(superClass.prototype.constructor == Object.prototype.constructor){
superClass.prototype.constructor = superClass;
}
} //子类
function EditInPlaceArea(id,parent,value){
EditInPlaceArea.superClass.constructor.call(this,id,parent,value);
};
extend(EditInPlaceArea,EditInPlaceField); //override
EditInPlaceArea.prototype.createShowPanel = function() {
this.staticElement = document.createElement("p");
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML = this.value;
} EditInPlaceArea.prototype.createEnterPanel = function(){
this.fieldElement =document.createElement("textarea");
this.fieldElement.value = this.value;
this.containerElement.appendChild(this.fieldElement);
} EditInPlaceArea.prototype.convertToEditable = function(){
this.staticElement.style.display = "none";
this.fieldElement.style.display = "block";
this.saveButton.style.display = "inline";
this.cancelButton.style.display = "inline"; this.setValue(this.value);
} EditInPlaceArea.prototype.convertToText = function(){
this.fieldElement.style.display = "none";
this.saveButton.style.display = "none";
this.cancelButton.style.display = "none";
this.staticElement.style.display = "block";
this.setValue(this.value);
} var titleClassical = new EditInPlaceArea("titleClassical",document.getElementById("doc"),"title here"); </script>
javascript设计模式-继承的更多相关文章
- JavaScript设计模式 Item 4 --继承
1.继承 在javascript中继承是一个非常复杂的话题,比其他任何面向对象语言的中的继承都复杂得多.在大多数其他面向对象语言中,继承一个类只需要使用一个关键字即可.与它们不同,在javascrip ...
- 《JavaScript设计模式 张》整理
最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- 常用的Javascript设计模式
<parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...
- JavaScript设计模式学习笔记
1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...
- JavaScript的学习--JavaScript设计模式的总结
这篇博客只是自己对设计模式的理解的备忘~ 看完了<JavaScript设计模式>这本书,一直没有写博客记录一下,最近抽出时间来重读了一下,就顺便记录一下~ 如果你只是想粗略了解一下Java ...
- Javascript类继承-机制-代码Demo【原创】
最近看到<Javascript设计模式>,对js模拟的”继承方式“有了更深一步的了解,虽然之前也总是用到prototype.new ,但只是知其然不知所以然,现在将类继承的方法整理如下,暂 ...
随机推荐
- 【Oracle】redo与undo
一 .redo(重做信息) 是Oracle在线(或归档)重做日志文件中记录的信息,万一出现失败时可以利用这些数据来“重放”(或重做)事务.Oracle中记录这些信息的文件叫做redo log file ...
- 【Linux】连接CRT
linux中出现crt连接不上多数是ip地址设置不正确. window中命令行界面(cmd进入),输入ipconfig,查看虚拟机的ip. 打开linux终端,命令行下输入:ifconfig eth0 ...
- DNN：windows使用 YOLO V1，V2
本文有修改,如有疑问,请移步原文. 原文链接: YOLO v1之总结篇(linux+windows) 此外: YOLO-V2总结篇 Yolo9000的改进还是非常大的 由于原版的官方YOLOv ...
- 点云处理软件Pointscene
转载于PCL中国:点云处理软件Pointscene 软件官网:https://pointscene.com/ 笔者评: Pointscene是目前的点云处理软件之一,其主要是操作简单直观 ...
- Java 将File转换为MultipartFile类型
首先转换时需要用到commons-fileupload-1.3.2.jar包,若项目中没有就先加入jar包,实现代码如下: 1.根据File创建FileItem import java.io.File ...
- 【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
//V1.0 : 实现棋子的布局,画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 :实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源 ...
- open-ldap服务安装（1）
LDAP简介 LDAP 代表 轻量级目录访问协议.在我的理解中ldap就是一个数据库. 在LDAP中,目录条目以分层树状结构排序. 传统上,这种结构反映了地理和组织边界,表示国家/地区的条目显示在树的 ...
- 我理解的数据结构（三）—— 队列（Queue）
我理解的数据结构(三)-- 队列(Queue) 一.队列 队列是一种线性结构 相比数组,队列对应的操作是数组的子集 只能从一端(队尾)添加元素,只能从另一端(队首)取出元素 队列是一种先进先出的数据结 ...
- python爬虫09 | 上来，自己动 ！这就是 selenium 的牛逼之处
作为一个男人 在最高光的时刻 就是说出那句 之后 还不会被人打 ... 虽然在现实生活中你无法这样 但是在这里 就让你体验一番 那种呼风唤雨的感觉 我们之前在爬取某些网站的时候 使用到了一些 pyth ...
- tp5 封装百度地图api接口
//服务器端api extend\Map <?php /** * 百度地图业务封装 */ class Map{ /** * 根据地址来获取经纬度 * @param $address */ pub ...