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

最新推荐文章于 2024-10-30 15:37:42 发布
最新推荐文章于 2024-10-30 15:37:42 发布
阅读量97 收藏
点赞数
文章标签： php

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

weixin_33868027
关注
javascript如何扩展类
hly990990的专栏
11-16 590
JavaScript的继承是使用类。 假设你有一个类Animal。 class Animal { breathe() { //... } } 所有的动物都会呼吸 。我们可以把它作为这个例子的一般规则。 但有些动物会走路，有些动物会飞等等。 所以我们可以扩展这个类，形成物种，我们从基类中扩展继承breathe()方法，并提供具体的方法和属性。 class Fish extends Animal { swim() { //... } } class Bird
JavaScript学习笔记——扩展类
陈敏琼的专栏
09-24 399
本文参考：http://www.cnblogs.com/xdp-gacl/p/3702898.html 实际需求：在开发过程中，JavaScript内置的类所提供的动态方法和动态属性不满足我们的需求。 具体方法：通过"prototype"属性给自定义类添加方法和属性或者扩展原有的类中的方法和属性。 一、扩展JavaScript内置类，添加动态方法 语法格式：
JavaScript学习总结(十四)——JavaScript编写类的扩展方法
weixin_34006965的博客
05-02 269
　　在​J​a​v​a​S​c​r​i​p​t​中​可以使​用​类的p​r​o​t​o​t​y​p​e属性来​扩​展​类的属​性​和​方​法，在实际开发当中，当JavaScript内置的那些类所提供的动态方法和动态属性不满足我们实际开发时，我们就可以通过"prototype"属性给自定义类添加方法和属性或者扩展原有的类中的方法和属性。 一、扩展JavaScript内置类，添加动态方法 语法格式...
《javascript设计模式》笔记之第四章：继承
weixin_30871905的博客
03-20 56
一：首先，一个简单的继承实例： 首先是创建一个父类Person： function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; } 下面是创建一个子类Author，用于继承Person： 分两步，第一步继...
YOLOV5训练代码train.py注释与解析
热门推荐
Q1u1NG的博客
07-20 7万+
YOLOV5训练代码train.py注释与解析训练参数以及main函数解析train函数解析 本文主要对ultralytics\yolov5的训练代码train.py的解析，由于yolov5还在开发当中，平常多多少少都会修复一些bug或者有一些代码和功能的更新，但基本上不会有很大的改动，故以下注释与解析都是适用的；当然如果有大改动，笔者也会更新注释。 训练参数以及main函数解析 训练的时候可以设置进行超参数进化算法(默认不使用)。 值得一提的是，由于现在yolov5还在开发当中，训练文件的–resume还
YOLOV5代码train.py文件解读
limengshi138392的博客
05-25 605
【代码】YOLOV5代码train.py文件解读。
YOLO代码解读_model.py
必修居士的博客
06-09 2370
1 概述 这个文件主要由 两个类Darknet YOLOLayer， 几个函数create_modules，get_yolo_layers，load_darknet_weights，save_weights，convert，attempt_download 组成 Darknet的构造函数先是调用了parse_model_cfg，create_modules，get_yolo_layers三个函数，所以我们先从他们入手，再进一步分析。 2 导入库文件 utils里面有很多重要的工具，后面要了解了解 fro
Unity Manual阅读记录——Animation(version 2019.4)
alexhu2010q的博客
02-21 2566
Animation简介 Unity提供的动画系统的主要功能： retargetable animations：重定向动画 full control of animation weights at runtime： runtime控制动画的权重 event calling from within the animation playback ：动画播放途中调用event sophisticated state machine hierarchies and transitions：精妙的动画状态机，包括hi
JS扩展类，克隆对象与混合类实例分析
10-21
在JavaScript编程中，扩展类、克隆对象以及混合类是经常会用到的技术，它们各自有其特定的用途和实现方式。 首先我们来探讨“JS扩展类”。在JavaScript中，没有传统意义上的类继承机制，但可以通过原型链...
JS自定义扩展、克隆与混合类实践解析
"本文将深入探讨JavaScript中的类扩展、对象克隆以及混合类的概念，并通过自定义的`extend`、`clone`和`augment`函数来阐述这些技术的实现和应用。我们将首先介绍如何使用`extend`函数来实现类的继承，然后讨论如何...
【YOLOv10改进[Neck]】小目标遮挡检测的性能提升（MultiSEAM）- 目标遮挡检测 + 含全部代码和详细修改方式 + 手撕结构图 + 全网首发
静谧、淡雅
06-03 1532
小目标遮挡检测的性能提升（MultiSEAM）- 目标遮挡检测 + 含全部代码和详细修改方式 + 手撕结构图 + 全网首发 + 遥遥领先
【YOLOv10改进[Neck]】小目标遮挡检测的性能提升（SEAM）- 目标遮挡检测 + 含全部代码和详细修改方式 + 手撕结构图 + 全网首发
静谧、淡雅
06-03 1739
小目标遮挡检测的性能提升（SEAM）- 目标遮挡检测 + 含全部代码和详细修改方式 + 手撕结构图 + 全网首发 + 遥遥领先
Vue源码分析——第一章
Lee的博客
09-09 2032
Vue最新版本源码分析，每个函数功能注释的很清楚，重点模块逐行注释！ /*! * Vue.js v2.6.9 * (c) 2014-2019 Evan You * Released under the MIT License. */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : .
JavaScript实现继承---extend函数
●﹏●
04-19 285
/* Extend Function */ function extend(subClass,superClass){ var Func = function(){} ; Func.prototype = superClass.prototype ; subClass.prototype = new Func() ; subClass.prototype.constructo...
PHP文件包含漏洞
佛系摆烂
10-29 456
PHP 文件包含漏洞（File Inclusion Vulnerability）是一种常见的 Web 安全漏洞，发生在用户对 PHP 文件包含函数（如 include、require、include_once、require_once）的输入缺乏过滤和验证时。攻击者可以利用这个漏洞来包含服务器上任意文件，甚至是远程文件（如果服务器允许），从而获取敏感信息或执行任意代码。
文件上传漏洞-通过.htaccess文件绕过
最新发布
m0_73902453的博客
10-30 205
3.先将.htaccess上传上去，然后再打开抓包上传木马文件（1.php），然后将名字修改成1.jpg，因为刚刚的.htaccess已经上传到服务器，告诉服务器.jpg文件可以当作.php文件执行。通过这个文件，网站管理员可以进行各种配置，例如重定向、访问控制、URL重写等。结尾的文件都当作 PHP 脚本来处理，而不是作为普通文本文件或图像文件。这意味着，即使它们有文本或影像文件的扩展名，服务器将尝试执行其中的 PHP代码。2.这里以upload-labs（less-4）为例，我们先来看看靶场的源代码。
除了wordpress CMS外，还有什么CMS值得我们使用？
weixin_42832157的博客
10-28 446
因为考虑到扩展和安全的问题，开始使用PageAdmin CMS，大概使用了大概2年，发觉它基本能满足我所有的建站需求，重要一点是，它安全性高，能满足等级定级备案的二级和三级，而且它的扩展方式也是我所喜欢的，跟手机APP一样的，随着使用者的需求，任意通过应用中心下载和安装，随着使用。作为建站的小白，前端不会开发、后台不会编写，用CMS来搭建网站是最理想的建站方式，经过线上的站长推荐，我认识了wordpress CMS，来自国外的一套CMS，使用上非常方便，熟悉时间不需要太长，也能快速进入建站的过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值