目的

我们的目的就是编写一个用于创建和管理就地编辑域的可重用的模块化API。它是指网页上的一段普通文本被点击后就变成一个配有一些按钮的表单域,以便用户就地对这段文本进行编辑。

思路

当用户点击时

1.将普通文本域隐藏

2.添加表单元素

3.设置表单元素的value

当用户保存时

ajax通信保存内容

当用户取消时

1.隐藏表单域

2.显示文本域

3.设置文本域的value

类式继承实现就地编辑

superClass的实现(input)

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(){
this.containerElement = document.createElement('div');
this.parentElement.appendChild(this.containerElement); this.staticElement = document.createElement('span');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML = this.value; this.fieldElement = document.createElement('input');
this.fieldElement.type = 'text';
this.fieldElement.value = this.value;
this.containerElement.appendChild(this.fieldElement); this.saveButton = document.createElement('input');
this.saveButton.type='button';
this.saveButton.value="Save";
this.containerElement.appendChild(this.saveButton); this.cancelBtton = document.createElement('input');
this.cancelBtton.type = 'button';
this.cancelBtton.value = 'Cancel';
this.containerElement.appendChild(this.cancelBtton);
this.convertToText();
},
attachEvents: function(){
var that = this;
addEvent(this.staticElement, 'click', function(){that.convertToEditable();});
addEvent(this.saveButton, 'click', function(){ that.save();});
addEvent(this.cancelBtton, 'click', function(){that.cancel()});
},
convertToEditable: function(){
this.staticElement.style.display = 'none';
this.fieldElement.style.display = 'inline';
this.saveButton.style.display = 'inline';
this.cancelBtton.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'+this.id+'&value='+this.value, callback);
},
cancel: function(){
this.convertToText();
},
convertToText: function(){
this.fieldElement.style.display = 'none';
this.saveButton.style.display = 'none';
this.cancelBtton.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;
}
};

subClass的实现(textarea)

function EditInPlaceArea(id, parent, value){
EditInPlaceArea.superclass.constructor.call(this, id, parent, value);
}
extend(EditInPlaceArea, EditInPlaceField);
EditInPlaceArea.prototype.createElements = function(id){
this.containerElement = document.createElement('div');
this.parentElement.appendChild(this.containerElement); this.staticElement = document.createElement('p');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML = this.value; this.fieldElement = document.createElement('textarea');
this.fieldElement.type = 'text';
this.fieldElement.value = this.value;
this.containerElement.appendChild(this.fieldElement); this.saveButton = document.createElement('input');
this.saveButton.type='button';
this.saveButton.value="Save";
this.containerElement.appendChild(this.saveButton); this.cancelBtton = document.createElement('input');
this.cancelBtton.type = 'button';
this.cancelBtton.value = 'Cancel';
this.containerElement.appendChild(this.cancelBtton);
this.convertToText();
};
EditInPlaceArea.prototype.convertToEditable = function(){
this.staticElement.style.display = 'none';
this.fieldElement.style.display = 'block';
this.saveButton.style.display = 'inline';
this.cancelBtton.style.display = 'inline'; this.setValue(this.value);
};
EditInPlaceArea.prototype.convertToText = function(){
this.fieldElement.style.display = 'none';
this.saveButton.style.display = 'none';
this.cancelBtton.style.display = 'none';
this.staticElement.style.display = 'block'; this.setValue(this.value);
};

API的依赖与调用

addEvent依赖

function addEvent(el, ty, fn){
if(el.addEvetListener){
el.addEvetListener(ty, fn, false);
}else if(el.attachEvent){
el.attachEvent('on'+ty, fn);
}else{
el['on'+ty] = fn;
}
}

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

API的调用

var titleClassical = new EditInPlaceField('titleClassical', document.getElementById('titleClassical').parentNode, 'Title here');
var bodyClassical =new EditInPlaceArea('bodyClassical', document.getElementById('bodyClassical').parentNode, 'Body here');

效果展示

最开始时

点击后

保存后

取消后

原型式继承和掺元类

基本代码就那些,原型式继承和掺元类的实现只是模式的不同,所以就不再给出具体代码了。

JS设计模式——4.继承(示例)的更多相关文章

  1. JS设计模式——4.继承(概念)

    类式继承 0.构造函数 一个简单的Person类 function Person(name){ this.name = name; } Person.prototype.getName = funct ...

  2. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  3. JS如何实现继承?

    JS的继承是基于JS类的基础上的一种代码复用机制.换言之,有了代码,我们就不需要复制之前写好的方法,只要通过简捷的方式 复用之前自己写的或同事写的代码.比如一个弹出层,我们需要在上面做一些修改.同事写 ...

  4. js设计模式——5.状态模式

    js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...

  5. js设计模式——1.代理模式

    js设计模式——1.代理模式 以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...

  6. 浅谈JS中的继承

    前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...

  7. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  8. js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

  9. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

随机推荐

  1. 反向代理负载均衡-----nginx

    一:集群 1.1:集群的概念    集群是一组相互独立的.通过高速网络互联的计算机,他们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器.集群配置是用于提高 ...

  2. mysql项目路径URL编码

    jdbc_url=jdbc:mysql://127.0.0.1:3306/test?serverTimezone=UTC&useUnicode=true&characterEncodi ...

  3. vscode如何用浏览器预览运行html文件

    1,打开vscode编辑器,点击编辑器主界面左上侧第五个小图标——‘扩展’按钮: 2,进入扩展搜索右拉框,在应用商店搜索框中输入“view in browser”会自动进行搜索 3,等待几秒钟时间,扩 ...

  4. 【bzoj4372】烁烁的游戏 动态点分治+线段树

    题目描述 给一颗n个节点的树,边权均为1,初始点权均为0,m次操作:Q x:询问x的点权.M x d w:将树上与节点x距离不超过d的节点的点权均加上w. 输入 第一行两个正整数:n,m接下来的n-1 ...

  5. BZOJ3637 Query on a tree VI(树链剖分+线段树)

    考虑对于每一个点维护子树内与其连通的点的信息.为了换色需要,记录每个点黑白两种情况下子树内连通块的大小. 查询时,找到深度最浅的同色祖先即可,这可以比较简单的树剖+线段树乱搞一下(似乎就是qtree3 ...

  6. 洛谷 P3177 树上染色

    题面 题目要求将k个点染成黑色,求黑点两两距离及白点两两距离,使他们之和最大. 我们可以将距离转化为路径,然后再将路径路径拆分成边,就可以记录每条边被经过的次数,直接计算即可. 很简单对吧?那么问题来 ...

  7. P3932 浮游大陆的68号岛 【线段树】

    P3932 浮游大陆的68号岛 有一天小妖精们又在做游戏.这个游戏是这样的. 妖精仓库的储物点可以看做在一个数轴上.每一个储物点会有一些东西,同时他们之间存在距离. 每次他们会选出一个小妖精,然后剩下 ...

  8. Codeforces 906B. Seating of Students(构造+DFS)

    行和列>4的可以直接构造,只要交叉着放就好了,比如1 3 5 2 4和2 4 1 3 5,每一行和下一行用不同的方法就能保证没有邻居. 其他的可以用爆搜,每次暴力和后面的一个编号交换并判断可行性 ...

  9. NOIP2017 Day1 T3 逛公园(最短路+拓扑排序+DP)

    神tm比赛时多清个零就有60了T T 首先跑出1起点和n起点的最短路,因为k只有50,所以可以DP.设f[i][j]表示比最短路多走i的长度,到j的方案数. 我们发现如果在最短路上的和零边会有后向性, ...

  10. docker-api

    __author__ = 'zxp' import docker import sys class DockerManager_Slave(object): def __init__(self): s ...