JS扩展类,克隆对象与混合类实例分析


Posted in Javascript onNovember 26, 2016

本文实例讲述了JS扩展类,克隆对象与混合类。分享给大家供大家参考,具体如下:

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方法。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
JS自定义混合Mixin函数示例
Nov 26 #Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 #Javascript
JS匿名函数类生成方式实例分析
Nov 26 #Javascript
正则表达式替换html元素属性的方法
Nov 26 #Javascript
js初始化验证实例详解
Nov 26 #Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 #Javascript
JS匿名函数实例分析
Nov 26 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP微信支付开发实例
2016/06/22 PHP
php实现微信企业转账功能
2018/10/02 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Python编程中的文件操作攻略
2015/10/16 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python网络应用开发知识点浅析
2019/05/28 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Python读取表格类型文件代码实例
2020/02/17 Python
如何验证python安装成功
2020/07/06 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
Ajax的优点和缺点
2014/11/21 面试题
周年庆典邀请函范文
2014/01/24 职场文书
房产委托公证书
2014/04/08 职场文书
出纳岗位职责
2015/01/31 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL