1.类扩展

  1. /* EditInPlaceField类 */
  2. /* 扩展函数 */
  3. function extend(subClass, superClass) {
  4.   var F = function() {};
  5.   F.prototype = superClass.prototype;
  6.   subClass.prototype = new F();
  7.   subClass.prototype.constructor = subClass;
  8.  
  9.   subClass.superclass = superClass.prototype;
  10.   if(superClass.prototype.constructor == Object.prototype.constructor) {
  11.     superClass.prototype.constructor = superClass;
  12.   }
  13. }
  14.  
  15. function EditInPlaceField(id, parent, value) { // 构造函数
  16.   this.id = id;
  17.   this.value = value || 'default value';
  18.   this.parentElement = parent;
  19.  
  20.   this.createElements(this.id);
  21.   this.attachEvents();
  22. };
  23.  
  24. EditInPlaceField.prototype = {
  25.   createElements: function(id) {
  26.     this.containerElement = document.createElement('div');
  27.     this.parentElement.appendChild(this.containerElement);
  28.  
  29.     this.staticElement = document.createElement('span');
  30.     this.containerElement.appendChild(this.staticElement);
  31.     this.staticElement.innerHTML = this.value;
  32.  
  33.     this.fieldElement = document.createElement('input');
  34.     this.fieldElement.type = 'text';
  35.     this.fieldElement.value = this.value;
  36.     this.containerElement.appendChild(this.fieldElement);
  37.  
  38.     this.saveButton = document.createElement('input');
  39.     this.saveButton.type = 'button';
  40.     this.saveButton.value = 'Save';
  41.     this.containerElement.appendChild(this.saveButton);    
  42.  
  43.     this.cancelButton = document.createElement('input');
  44.     this.cancelButton.type = 'button';
  45.     this.cancelButton.value = 'Cancel';
  46.     this.containerElement.appendChild(this.cancelButton);    
  47.  
  48.     this.convertToText();
  49.   },
  50.   attachEvents: function() {
  51.     var that = this;
  52.     addEvent(this.staticElement, 'click', function() { that.convertToEditable(); });
  53.     addEvent(this.saveButton, 'click', function() { that.save(); });
  54.     addEvent(this.cancelButton, 'click', function() { that.cancel(); });
  55.   },
  56.  
  57.   convertToEditable: function() {
  58.     this.staticElement.style.display = 'none';
  59.     this.fieldElement.style.display = 'inline';
  60.     this.saveButton.style.display = 'inline';
  61.     this.cancelButton.style.display = 'inline';        
  62.  
  63.     this.setValue(this.value);
  64.   },
  65.   save: function() {
  66.     this.value = this.getValue();
  67.     var that = this;
  68.     var callback = {
  69.       success: function() { that.convertToText(); },
  70.       failure: function() { alert('Error saving value.'); }
  71.     };
  72.     ajaxRequest('GET', 'save.php?id=' + this.id + '&value=' + this.value, callback);
  73.   },
  74.   cancel: function() {
  75.     this.convertToText();
  76.   },
  77.   convertToText: function() {
  78.     this.fieldElement.style.display = 'none';
  79.     this.saveButton.style.display = 'none';
  80.     this.cancelButton.style.display = 'none';
  81.     this.staticElement.style.display = 'inline';
  82.  
  83.     this.setValue(this.value);
  84.   },
  85.  
  86.   setValue: function(value) {
  87.     this.fieldElement.value = value;
  88.     this.staticElement.innerHTML = value;
  89.   },
  90.   getValue: function() {
  91.     return this.fieldElement.value;
  92.   }
  93. };
  94.  
  95. var titleClassical = new EditInPlaceField('titleClassical', $('doc'), 'Title Here');
  96. var currentTitleText = titleClassical.getValue();
  97.  
  98. /* EditInPlaceArea类 */
  99.  
  100. function EditInPlaceArea(id, parent, value) {
  101.   EditInPlaceArea.superclass.constructor.call(this, id, parent, value);
  102. };
  103. extend(EditInPlaceArea, EditInPlaceField);
  104.  
  105. // Override certain methods.
  106.  
  107. EditInPlaceArea.prototype.createElements = function(id) {
  108.   this.containerElement = document.createElement('div');
  109.   this.parentElement.appendChild(this.containerElement);
  110.  
  111.   this.staticElement = document.createElement('p');
  112.   this.containerElement.appendChild(this.staticElement);
  113.   this.staticElement.innerHTML = this.value;
  114.  
  115.   this.fieldElement = document.createElement('textarea');
  116.   this.fieldElement.value = this.value;
  117.   this.containerElement.appendChild(this.fieldElement);
  118.  
  119.   this.saveButton = document.createElement('input');
  120.   this.saveButton.type = 'button';
  121.   this.saveButton.value = 'Save';
  122.   this.containerElement.appendChild(this.saveButton);
  123.  
  124.   this.cancelButton = document.createElement('input');
  125.   this.cancelButton.type = 'button';
  126.   this.cancelButton.value = 'Cancel';
  127.   this.containerElement.appendChild(this.cancelButton);
  128.  
  129.   this.convertToText();
  130. };
  131. EditInPlaceArea.prototype.convertToEditable = function() {
  132.   this.staticElement.style.display = 'none';
  133.   this.fieldElement.style.display = 'block';
  134.   this.saveButton.style.display = 'inline';
  135.   this.cancelButton.style.display = 'inline';
  136.  
  137.   this.setValue(this.value);
  138. };
  139. EditInPlaceArea.prototype.convertToText = function() {
  140.   this.fieldElement.style.display = 'none';
  141.   this.saveButton.style.display = 'none';
  142.   this.cancelButton.style.display = 'none';
  143.   this.staticElement.style.display = 'block';
  144.  
  145.   this.setValue(this.value);
  146. };

2.对象克隆

  1. /* EditInPlaceField对象*/
  2. /* 克隆函数 */
  3. function clone(object) {
  4.     function F() {}
  5.     F.prototype = object;
  6.     return new F;
  7. }
  8.  
  9. var EditInPlaceField = {
  10.   configure: function(id, parent, value) {
  11.     this.id = id;
  12.     this.value = value || 'default value';
  13.     this.parentElement = parent;
  14.  
  15.     this.createElements(this.id);
  16.     this.attachEvents();
  17.   },
  18.   createElements: function(id) {
  19.     this.containerElement = document.createElement('div');
  20.     this.parentElement.appendChild(this.containerElement);
  21.  
  22.     this.staticElement = document.createElement('span');
  23.     this.containerElement.appendChild(this.staticElement);
  24.     this.staticElement.innerHTML = this.value;
  25.  
  26.     this.fieldElement = document.createElement('input');
  27.     this.fieldElement.type = 'text';
  28.     this.fieldElement.value = this.value;
  29.     this.containerElement.appendChild(this.fieldElement);
  30.  
  31.     this.saveButton = document.createElement('input');
  32.     this.saveButton.type = 'button';
  33.     this.saveButton.value = 'Save';
  34.     this.containerElement.appendChild(this.saveButton);    
  35.  
  36.     this.cancelButton = document.createElement('input');
  37.     this.cancelButton.type = 'button';
  38.     this.cancelButton.value = 'Cancel';
  39.     this.containerElement.appendChild(this.cancelButton);    
  40.  
  41.     this.convertToText();
  42.   },
  43.   attachEvents: function() {
  44.     var that = this;
  45.     addEvent(this.staticElement, 'click', function() { that.convertToEditable(); });
  46.     addEvent(this.saveButton, 'click', function() { that.save(); });
  47.     addEvent(this.cancelButton, 'click', function() { that.cancel(); });
  48.   },
  49.  
  50.   convertToEditable: function() {
  51.     this.staticElement.style.display = 'none';
  52.     this.fieldElement.style.display = 'inline';
  53.     this.saveButton.style.display = 'inline';
  54.     this.cancelButton.style.display = 'inline';        
  55.  
  56.     this.setValue(this.value);
  57.   },
  58.   save: function() {
  59.     this.value = this.getValue();
  60.     var that = this;
  61.     var callback = {
  62.       success: function() { that.convertToText(); },
  63.       failure: function() { alert('Error saving value.'); }
  64.     };
  65.     ajaxRequest('GET', 'save.php?id=' + this.id + '&value=' + this.value, callback);
  66.   },
  67.   cancel: function() {
  68.     this.convertToText();
  69.   },
  70.   convertToText: function() {
  71.     this.fieldElement.style.display = 'none';
  72.     this.saveButton.style.display = 'none';
  73.     this.cancelButton.style.display = 'none';
  74.     this.staticElement.style.display = 'inline';
  75.  
  76.     this.setValue(this.value);
  77.   },
  78.  
  79.   setValue: function(value) {
  80.     this.fieldElement.value = value;
  81.     this.staticElement.innerHTML = value;
  82.   },
  83.   getValue: function() {
  84.     return this.fieldElement.value;
  85.   }
  86. };
  87.  
  88. var titlePrototypal = clone(EditInPlaceField);
  89. titlePrototypal.configure(' titlePrototypal ', $('doc'), 'Title Here');
  90. var currentTitleText = titlePrototypal.getValue();
  91.  
  92. /* EditInPlaceArea对象*/
  93.  
  94. var EditInPlaceArea = clone(EditInPlaceField);
  95.  
  96. // Override certain methods.
  97.  
  98. EditInPlaceArea.createElements = function(id) {
  99.   this.containerElement = document.createElement('div');
  100.   this.parentElement.appendChild(this.containerElement);
  101.  
  102.   this.staticElement = document.createElement('p');
  103.   this.containerElement.appendChild(this.staticElement);
  104.   this.staticElement.innerHTML = this.value;
  105.  
  106.   this.fieldElement = document.createElement('textarea');
  107.   this.fieldElement.value = this.value;
  108.   this.containerElement.appendChild(this.fieldElement);
  109.  
  110.   this.saveButton = document.createElement('input');
  111.   this.saveButton.type = 'button';
  112.   this.saveButton.value = 'Save';
  113.   this.containerElement.appendChild(this.saveButton);
  114.  
  115.   this.cancelButton = document.createElement('input');
  116.   this.cancelButton.type = 'button';
  117.   this.cancelButton.value = 'Cancel';
  118.   this.containerElement.appendChild(this.cancelButton);
  119.  
  120.   this.convertToText();
  121. };
  122. EditInPlaceArea.convertToEditable = function() {
  123.   this.staticElement.style.display = 'none';
  124.   this.fieldElement.style.display = 'block';
  125.   this.saveButton.style.display = 'inline';
  126.   this.cancelButton.style.display = 'inline';
  127.  
  128.   this.setValue(this.value);
  129. };
  130. EditInPlaceArea.convertToText = function() {
  131.   this.fieldElement.style.display = 'none';
  132.   this.saveButton.style.display = 'none';
  133.   this.cancelButton.style.display = 'none';
  134.   this.staticElement.style.display = 'block';
  135.  
  136.   this.setValue(this.value);
  137. };

3.混合类

  1. /* 混合类 */
  2. /* 混合函数 */
  3. function augment(receivingClass, givingClass) {
  4.   for(methodName in givingClass.prototype) {
  5.     if(!receivingClass.prototype[methodName]) {
  6.       receivingClass.prototype[methodName] = givingClass.prototype[methodName];
  7.     }
  8.   }
  9. }
  10.  
  11. /* 改进的增加函数 */
  12.  
  13. function augment(receivingClass, givingClass) {
  14.   if(arguments[2]) { // Only give certain methods.
  15.     for(var i = 2, len = arguments.length; i < len; i++) {
  16.       receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
  17.     }
  18.   }
  19.   else { // Give all methods.
  20.     for(methodName in givingClass.prototype) {
  21.       if(!receivingClass.prototype[methodName]) {
  22.         receivingClass.prototype[methodName] = givingClass.prototype[methodName];
  23.       }
  24.     }
  25.   }
  26. }
  27.  
  28. var EditInPlaceMixin = function() {};
  29. EditInPlaceMixin.prototype = {
  30.   createElements: function(id) {
  31.     this.containerElement = document.createElement('div');
  32.     this.parentElement.appendChild(this.containerElement);
  33.  
  34.     this.staticElement = document.createElement('span');
  35.     this.containerElement.appendChild(this.staticElement);
  36.     this.staticElement.innerHTML = this.value;
  37.  
  38.     this.fieldElement = document.createElement('input');
  39.     this.fieldElement.type = 'text';
  40.     this.fieldElement.value = this.value;
  41.     this.containerElement.appendChild(this.fieldElement);
  42.  
  43.     this.saveButton = document.createElement('input');
  44.     this.saveButton.type = 'button';
  45.     this.saveButton.value = 'Save';
  46.     this.containerElement.appendChild(this.saveButton);
  47.  
  48.     this.cancelButton = document.createElement('input');
  49.     this.cancelButton.type = 'button';
  50.     this.cancelButton.value = 'Cancel';
  51.     this.containerElement.appendChild(this.cancelButton);
  52.  
  53.     this.convertToText();
  54.   },
  55.   attachEvents: function() {
  56.     var that = this;
  57.     addEvent(this.staticElement, 'click', function() { that.convertToEditable(); });
  58.     addEvent(this.saveButton, 'click', function() { that.save(); });
  59.     addEvent(this.cancelButton, 'click', function() { that.cancel(); });
  60.   },
  61.  
  62.   convertToEditable: function() {
  63.     this.staticElement.style.display = 'none';
  64.     this.fieldElement.style.display = 'inline';
  65.     this.saveButton.style.display = 'inline';
  66.     this.cancelButton.style.display = 'inline';
  67.  
  68.     this.setValue(this.value);
  69.   },
  70.   save: function() {
  71.     this.value = this.getValue();
  72.     var that = this;
  73.     var callback = {
  74.       success: function() { that.convertToText(); },
  75.       failure: function() { alert('Error saving value.'); }
  76.     };
  77.     ajaxRequest('GET', 'save.php?id=' + this.id + '&value=' + this.value, callback);
  78.   },
  79.   cancel: function() {
  80.     this.convertToText();
  81.   },
  82.   convertToText: function() {
  83.     this.fieldElement.style.display = 'none';
  84.     this.saveButton.style.display = 'none';
  85.     this.cancelButton.style.display = 'none';
  86.     this.staticElement.style.display = 'inline';
  87.  
  88.     this.setValue(this.value);
  89.   },
  90.  
  91.   setValue: function(value) {
  92.     this.fieldElement.value = value;
  93.     this.staticElement.innerHTML = value;
  94.   },
  95.   getValue: function() {
  96.     return this.fieldElement.value;
  97.   }
  98. };
  99.  
  100. /* EditInPlaceField class. */
  101.  
  102. function EditInPlaceField(id, parent, value) {
  103.   this.id = id;
  104.   this.value = value || 'default value';
  105.   this.parentElement = parent;
  106.  
  107.   this.createElements(this.id);
  108.   this.attachEvents();
  109. };
  110. augment(EditInPlaceField, EditInPlaceMixin);
  111.  
  112. /* EditInPlaceArea class. */
  113.  
  114. function EditInPlaceArea(id, parent, value) {
  115.   this.id = id;
  116.   this.value = value || 'default value';
  117.   this.parentElement = parent;
  118.  
  119.   this.createElements(this.id);
  120.   this.attachEvents();
  121. };
  122.  
  123. // Add certain methods so that augment won't include them.
  124.  
  125. EditInPlaceArea.prototype.createElements = function(id) {
  126.   this.containerElement = document.createElement('div');
  127.   this.parentElement.appendChild(this.containerElement);
  128.  
  129.   this.staticElement = document.createElement('p');
  130.   this.containerElement.appendChild(this.staticElement);
  131.   this.staticElement.innerHTML = this.value;
  132.  
  133.   this.fieldElement = document.createElement('textarea');
  134.   this.fieldElement.value = this.value;
  135.   this.containerElement.appendChild(this.fieldElement);
  136.  
  137.   this.saveButton = document.createElement('input');
  138.   this.saveButton.type = 'button';
  139.   this.saveButton.value = 'Save';
  140.   this.containerElement.appendChild(this.saveButton);
  141.  
  142.   this.cancelButton = document.createElement('input');
  143.   this.cancelButton.type = 'button';
  144.   this.cancelButton.value = 'Cancel';
  145.   this.containerElement.appendChild(this.cancelButton);
  146.  
  147.   this.convertToText();
  148. };
  149. EditInPlaceArea.prototype.convertToEditable = function() {
  150.   this.staticElement.style.display = 'none';
  151.   this.fieldElement.style.display = 'block';
  152.   this.saveButton.style.display = 'inline';
  153.   this.cancelButton.style.display = 'inline';
  154.  
  155.   this.setValue(this.value);
  156. };
  157. EditInPlaceArea.prototype.convertToText = function() {
  158.   this.fieldElement.style.display = 'none';
  159.   this.saveButton.style.display = 'none';
  160.   this.cancelButton.style.display = 'none';
  161.   this.staticElement.style.display = 'block';
  162.  
  163.   this.setValue(this.value);
  164. };
  165.  
  166. augment(EditInPlaceArea, EditInPlaceMixin);

点评：

js分为类和对象、函数。

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

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

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

  1. 0604-面向对象、类与对象、类、static、构造方法/析构方法

    一.面向对象 1.面向过程:一个人分步骤完成某个事情 2.面向对象:某件事情拆分为多个任务,由每个对象独立完成,最后调用整合为一个完整的项目 3.三要素:继承.封装.多态. 封装:私有化属性 提供公共 ...

  2. c++中的类的对象与类的指针

    以上内容来自:http://wenku.baidu.com/link?url=haeRBhswlEcqddk48uW8YVMsdFNWsllimn_dzUYchb6G9NdT4pqgluCpnLQId ...

  3. 【学习笔记】【oc】类和对象及类的三大基本特征

    1.类和对象 类是抽象化,对象是具体化. (1)定义类: 分为两个步骤,类的声明:定义类的成员变量和方法:@interface 用于声明定义类的接口部分,@end表面定义结束:. 成员变量的定义:{} ...

  4. python的类和对象（类的静态字段）

    转自:http://www.cnblogs.com/Eva-J/p/5044411.html 什么是静态字段 在开始之前,先上图,解释一下什么是类的静态字段(我有的时候会叫它类的静态变量,总之说的都是 ...

  5. python: 面向对象:类和对象调用类中的变量和方法

    一. 面向对象初识 我们在生活中做事都是面向过程的,前面实现一些基本逻辑功能代码也是用面向过程的语句实现的,后来学了函数,把这些功能又装到了函数里.但用面向过程的方法去写程序,只能实现一个功能,我们要 ...

  6. C#类，对象，类成员简介

    本节内容 1.类(class)是现实世界事物的模型 2.类与对象的关系,什么时候叫“对象”什么时候叫“实例” 3.引用变量与实例的关系 4.类的三大成员: ①属性(Property): ②方法(Met ...

  7. C++类的对象和类的指针的区别

    #include <iostream> #include <string> using namespace std; class Student { public: stati ...

  8. php函数、类和对象以及类的封装、继承、类的静态方法、静态属性

    1.函数     php内置函数可以直接使用,如果没有安装php扩展即可     自定义函数 //函数function 函数名 function dump($var = null){ //支出默认参数 ...

  9. python__高级 : 动态添加 对象属性, 类属性, 对象实例方法, 类静态方法, 类方法

    给对象添加实例属性,可以直接这样  t.age = 18   ( 假设 t = Test() )  给类添加类属性 , 也可以直接这样  Test.age = 18 那给对象添加实例方法,可以在类外面 ...

随机推荐

  1. C++中使用stringstream进行类型转换操作

    stringstream包括istringstream和ostringstream,提供读写string的功能,使用时需包含stream文件.4个操作:1. stringstream strm; 创建 ...

  2. Button 对象

    <html> <form> <input type="button" value="提交" accesskey="b&q ...

  3. CSS常用选择器

    关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...

  4. 单源最短路径（dijkstra算法）php实现

    做一个医学项目,当中在病例评分时会用到单源最短路径的算法.单源最短路径的dijkstra算法的思路例如以下: 如果存在一条从i到j的最短路径(Vi.....Vk,Vj),Vk是Vj前面的一顶点.那么( ...

  5. android4.4 settings 中控制卡1 卡2都振动

    在package/app/Settings/src/com/android/settings/SoundSettings.java

  6. UDP C/S编程

    UDP C/S编程的步骤如下图所示与TCP C/S通信的区别在于:服务端没有设置监听和等待连接的过程.客户端没有连接服务端的过程.基于UDP的通信时不可靠地,面向无连接的,发送的数据无法确切知道对方收 ...

  7. Spring简单的小例子SpringDemo，用于初略理解什么是Spring以及JavaBean的一些概念

    一.开发前的准备 两个开发包spring-framework-3.1.1.RELEASE-with-docs.zip和commons-logging-1.2-bin.zip,将它们解压,然后把Spri ...

  8. js判断值是否为数字

    js判断是否是数字 第一种方法 isNaN isNaN 返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字). NaN 即 Not a Number isNaN(numValu ...

  9. OC基础 NSDate

    OC基础  NSDate #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @auto ...

  10. iOS项目名称、版本号与屏幕分辨率

    iOS的版本号,一个叫做Version,一个叫做Build,这两个值都可以在Xcode 中选中target,点击“Summary”后看到. Version在plist文件中的key是“CFBundle ...