javascript --- 类、class、事件委托的编程风格

类风格:

// 父类
function Widget(width, height) {this.width = width || 50;this.height = height || 50;this.$elem = null;
}
Widget.prototype.render = function($where) {if(this.$elem) {this.$elem.css({width: this.width + "px",height: this.height + "px"}).appendTo($where);}
};// 子类
function Button(width, height, label) {// 调用父类(Widget)的构造函数Widget.call(this, width, height);this.label = label || "Default";this.$elem = $("<button>").text(this.label);
}// 让Button"继承"Widget(Button可以使用Widget原型上的方法,本例中是render方法)
Button.prototype = Object.create(Widget.prototype);// 重写render
Button.prototype.render = function($where) {// 调用父类(Widget)的render方法Widget.prototype.render.call(this, $where);  this.$elem.click(this.onClick.bind(this)); // 监听点击事件
};Button.prototype.onClick = function(evt) {console.log("Button '" + this.label + " 'clicked!" );
};$(document).ready(function() {var $body = $(document.body);var btn1 = new Button(125, 30, "Hello" );var btn2 = new Button(150, 40, "World");btn1.render($body);btn2.render($body);
});// 注:用到了jquery故需要导入cdn <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

上述代码,首先定义了一个Widget的父类,然后使用使用在constructor中使用call方法(作用域绑定到当前)调用父类Widget的初始化…并添加了一个新的$elem(即Butoon标签).
在Button的原型上,使用Object.create()方法继承父类的原型方法(render).并新增了一个(按钮特有的)点击功能.

说明:上面是一个仿照类实现的方法,其实就是使用Widget.call 和Widget.prototype.render.call在Button函数中调用Widget…
用书上的原话说就是…丑陋的显示多态

ES6的class语法糖实现:

class Widget{constructor(width, height) {this.width = width || 50;this.heigth = height || 50;this.$elem = null;}// 很巧妙的render...render($where) {if(this.$elem) {this.$elem.css({width: this.width + "px",height: this.height + "px"}).appendTo($where);}}
}
class Button extends Widget{constructor(width, height, label) {super( width, height);this.label = label || "Default";this.$elem = $("<button>").text(this.label);  // 生成一个<button> 内容是label}render($where) {  // $where 是调用时传入的参数super.render($where);   // 调用父类Widget的renderthis.$elem.click(this.onClick.bind(this));}onClick(evt) {console.log("Button ' " + this.label + " ' clicked!");}
}
$(document).ready(function(){var $body = $(document.body);var btn1 = new Button(125, 30, "Hello" );var btn2 = new Button(150, 40, "World" );btn1.render($body);btn2.render($body);})
//说明: 关键是super替代了伪类中的call方法...变得更简洁(at least看上去是这样...)

委托控件对象:

var Widget = {init: function(width, height){this.width =width || 50;this.height = height || 50;this.$elem = null;},insert: function($where) {if(this.$elem){this.$elem.css({width: this.width + "px",height: this.heigth + "px"}).appenTo($where);}}
};
// 还是定义一个Widget对象,, 使用委托(Object.create)顺着原型链[[prototype]]由下而上读取方法
var Button = Object.create(Widget);Button.setup = function(width, height, label) {this.init(width, height);  // Button无init方法,顺着原型链找到了Widget中的init.this.label = label || "Default";this.$elem = $('<button>').text(this.label);
};
Button.build = function($where) {this.insert($where);this.$elem.click(this.onClick.bind(this));  // this.onClick实际上是Button.onClick
};
Button.onClick = function(evt) {console.log("Button '" + this.label + "' clicked!" );
};
$(document).ready(function(){var $body = $(document.body);var btn1 = Object.create(Button);btn1.setup(123, 30, 'Hello');var btn2 = Object.create(Button);btn2.setup(150, 40, 'World');btn1.build($body);btn2.build($body);
});
// 很美的方式

参考《你不知道的JavaScript》(上卷) P174 ~P177

javascript --- 类、class、事件委托的编程风格相关推荐

javascript举例介绍事件委托的典型使用场景
在了解什么是DOM事件以及给DOM事件绑定监听器的几种方法后,我们来谈谈事件委托. 1. e.target 和 e.currentTarget 当我们给目标元素target 绑定一个事件监听器targ ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
javascript编程风格（粗略笔记）
1.空格紧凑型: project.MyClass = function(arg1, arg2){ 松散型: for( i = 0; i < length; i++ ){ 2.代码行长度最多8 ...
面向对象编程风格基于对象编程风格
本文主要通过实现Thread 类来展现两种编程风格的不同点. 很多人没有区分"面向对象"和"基于对象"两个不同的概念.面向对象的三大特点(封装,继承,多态)缺一 ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
5选项卡(封装插件版)加事件委托版选项卡
HTML代码(两款HTML选项卡代码): 第一款:非事件委托版HTML代码: <!DOCTYPE html> <html> <head><meta chars ...
JavaScript中的经典题型（类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码）
JavaScript中的经典题型一.JavaScript中的经典题型 1..如何判断一个数组和类数组? 首先要明白什么是类数组. 类数组:类数组是一个普通对象,他的原型是Object.而真实的数组是 ...
【译】JavaScript面试问题：事件委托和this
JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由于有着各种各样的背景,所以不是每个人都对JavaScrip ...

javascript --- 类、class、事件委托的编程风格

javascript --- 类、class、事件委托的编程风格相关推荐

最新文章

热门文章