js深入研究之扩展类，克隆对象，混合类（自定义的extend函数，clone函数，与augment函数）

1.类扩展

/* EditInPlaceField类 */

/* 扩展函数 */

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 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.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.cancelButton = document.createElement('input');

    this.cancelButton.type = 'button';

    this.cancelButton.value = 'Cancel';

    this.containerElement.appendChild(this.cancelButton);    

    this.convertToText();

  },

  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=' + this.id + '&value=' + this.value, 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;

  }

};

var titleClassical = new EditInPlaceField('titleClassical', $('doc'), 'Title Here');

var currentTitleText = titleClassical.getValue();

/* EditInPlaceArea类 */

function EditInPlaceArea(id, parent, value) {

  EditInPlaceArea.superclass.constructor.call(this, id, parent, value);

};

extend(EditInPlaceArea, EditInPlaceField);

// Override certain methods.

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.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.cancelButton = document.createElement('input');

  this.cancelButton.type = 'button';

  this.cancelButton.value = 'Cancel';

  this.containerElement.appendChild(this.cancelButton);

  this.convertToText();

};

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

};

2.对象克隆

/* EditInPlaceField对象*/

/* 克隆函数 */

function clone(object) {

    function F() {}

    F.prototype = object;

    return new F;

}

var EditInPlaceField = {

  configure: function(id, parent, value) {

    this.id = id;

    this.value = value || 'default value';

    this.parentElement = parent;

    this.createElements(this.id);

    this.attachEvents();

  },

  createElements: function(id) {

    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.cancelButton = document.createElement('input');

    this.cancelButton.type = 'button';

    this.cancelButton.value = 'Cancel';

    this.containerElement.appendChild(this.cancelButton);    

    this.convertToText();

  },

  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=' + this.id + '&value=' + this.value, 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;

  }

};

var titlePrototypal = clone(EditInPlaceField);

titlePrototypal.configure(' titlePrototypal ', $('doc'), 'Title Here');

var currentTitleText = titlePrototypal.getValue();

/* EditInPlaceArea对象*/

var EditInPlaceArea = clone(EditInPlaceField);

// Override certain methods.

EditInPlaceArea.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.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.cancelButton = document.createElement('input');

  this.cancelButton.type = 'button';

  this.cancelButton.value = 'Cancel';

  this.containerElement.appendChild(this.cancelButton);

  this.convertToText();

};

EditInPlaceArea.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.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);

};

3.混合类

/* 混合类 */

/* 混合函数 */

function augment(receivingClass, givingClass) {

  for(methodName in givingClass.prototype) {

    if(!receivingClass.prototype[methodName]) {

      receivingClass.prototype[methodName] = givingClass.prototype[methodName];

    }

  }

}

/* 改进的增加函数 */

function augment(receivingClass, givingClass) {

  if(arguments[2]) { // Only give certain methods.

    for(var i = 2, len = arguments.length; i < len; i++) {

      receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];

    }

  }

  else { // Give all methods.

    for(methodName in givingClass.prototype) {

      if(!receivingClass.prototype[methodName]) {

        receivingClass.prototype[methodName] = givingClass.prototype[methodName];

      }

    }

  }

}

var EditInPlaceMixin = function() {};

EditInPlaceMixin.prototype = {

  createElements: function(id) {

    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.cancelButton = document.createElement('input');

    this.cancelButton.type = 'button';

    this.cancelButton.value = 'Cancel';

    this.containerElement.appendChild(this.cancelButton);

    this.convertToText();

  },

  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=' + this.id + '&value=' + this.value, 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;

  }

};

/* EditInPlaceField class. */

function EditInPlaceField(id, parent, value) {

  this.id = id;

  this.value = value || 'default value';

  this.parentElement = parent;

  this.createElements(this.id);

  this.attachEvents();

};

augment(EditInPlaceField, EditInPlaceMixin);

/* EditInPlaceArea class. */

function EditInPlaceArea(id, parent, value) {

  this.id = id;

  this.value = value || 'default value';

  this.parentElement = parent;

  this.createElements(this.id);

  this.attachEvents();

};

// Add certain methods so that augment won't include them.

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.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.cancelButton = document.createElement('input');

  this.cancelButton.type = 'button';

  this.cancelButton.value = 'Cancel';

  this.containerElement.appendChild(this.cancelButton);

  this.convertToText();

};

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

};

augment(EditInPlaceArea, EditInPlaceMixin);

点评：

js分为类和对象、函数。

其中又包含多种形式，属性，数组属性，函数，私有函数，公有函数，静态函数。

小的基础方法，可以有大的用途，比如extend方法，clone方法，还有augment方法。

js深入研究之扩展类，克隆对象，混合类（自定义的extend函数，clone函数，与augment函数）的更多相关文章

0604-面向对象、类与对象、类、static、构造方法/析构方法
一.面向对象 1.面向过程:一个人分步骤完成某个事情 2.面向对象:某件事情拆分为多个任务,由每个对象独立完成,最后调用整合为一个完整的项目 3.三要素:继承.封装.多态. 封装:私有化属性提供公共 ...
c++中的类的对象与类的指针
以上内容来自:http://wenku.baidu.com/link?url=haeRBhswlEcqddk48uW8YVMsdFNWsllimn_dzUYchb6G9NdT4pqgluCpnLQId ...
【学习笔记】【oc】类和对象及类的三大基本特征
1.类和对象类是抽象化,对象是具体化. (1)定义类: 分为两个步骤,类的声明:定义类的成员变量和方法:@interface 用于声明定义类的接口部分,@end表面定义结束:. 成员变量的定义:{} ...
python的类和对象（类的静态字段）
转自:http://www.cnblogs.com/Eva-J/p/5044411.html 什么是静态字段在开始之前,先上图,解释一下什么是类的静态字段(我有的时候会叫它类的静态变量,总之说的都是 ...
python: 面向对象:类和对象调用类中的变量和方法
一. 面向对象初识我们在生活中做事都是面向过程的,前面实现一些基本逻辑功能代码也是用面向过程的语句实现的,后来学了函数,把这些功能又装到了函数里.但用面向过程的方法去写程序,只能实现一个功能,我们要 ...
C#类，对象，类成员简介
本节内容 1.类(class)是现实世界事物的模型 2.类与对象的关系,什么时候叫“对象”什么时候叫“实例” 3.引用变量与实例的关系 4.类的三大成员: ①属性(Property): ②方法(Met ...
C++类的对象和类的指针的区别
#include <iostream> #include <string> using namespace std; class Student { public: stati ...
php函数、类和对象以及类的封装、继承、类的静态方法、静态属性
1.函数 php内置函数可以直接使用,如果没有安装php扩展即可自定义函数 //函数function 函数名 function dump($var = null){ //支出默认参数 ...
python__高级 : 动态添加对象属性, 类属性, 对象实例方法, 类静态方法, 类方法
给对象添加实例属性,可以直接这样 t.age = 18 ( 假设 t = Test() ) 给类添加类属性 , 也可以直接这样 Test.age = 18 那给对象添加实例方法,可以在类外面 ...

随机推荐

素数与素性测试（Miller-Rabin测试）
转载自Matrix大牛的博客把代码翻译成C++ http://www.matrix67.com/blog/archives/234 题目链接: http://hihocoder.com/proble ...
SVN权限修复
Description : Commit failed (details follow): Suggestion : The operation could not be completed. Tec ...
setNeedsDisplay setNeedsLayout
setNeedsDisplay调用drawRect方法来实现view的绘制,而setNeedsLayout则调用layoutSubView来实现view中subView的重新布局转自 http:/ ...
angularJS怎么实现与服务端的PHP进行数据交互
//{params: 要传的参数obj },params这个是关键字不能换别的变量 $http.get(url, {params: {id: categoryid, key: keys} }).suc ...
[Javascript] JSON.parse API
JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is common ...
void*指针
C++提供了一种特殊的指针类型void*,它可以保存任何类型对象的地址: void*表明该指针与一地址值相关,但不清楚存储在此地址上的对象的类型. void*指针只支持几种有限的操作: 1)与另一个指 ...
JS跨域请求之JSONP
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...
F# 既能解释执行，也能编译执行
F# 除了是函数式语言和面向对象语言之外,还有个突出的特点是:既能解释执行,也能编译执行. 一般说来,一种语言只能选择其一种.比如说C++.C#是编译执行,不能解释执行,象Matlab.R是解释执 ...
SpringMVC学习简单HelloWorld实例
首先还是从一个简单的Hello World项目说起: 我机器的开发环境为: Ubuntu12.04(不同操作系统对本系列项目没有影响): 开发工具:Eclipse For JavaEE: 数据库:My ...
notification:object not locked by thread before notify()
今天写notification练习时,误将NotificationManager.notify(0, notification);写成notification.notify(); 代码如下 publi ...

js深入研究之扩展类，克隆对象，混合类（自定义的extend函数，clone函数，与augment函数）

js深入研究之扩展类，克隆对象，混合类（自定义的extend函数，clone函数，与augment函数）的更多相关文章

随机推荐

热门专题