小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
感谢 Jake 和 Surma 分享视频的《old vs new JavaScript - HTTP203》因为个人技术和英语理解的局限性可能会出入,如果大家对下面难题有好的解释希望大家踊跃讨论。
今天我们来看一看那些落地的 JS 新特性可以帮助我们更优雅写 replace 现有代码。
function Car(doors){
Vehicle.call(this,{doors:doors,wheels:4});
}
Car.prototype = (function(){
function tmp(){}
tmp.prototype = Vehicle.prototype;
return new tmp();
})();
复制代码
这个代码一下子就给我们带回到了 2015 年,我记得那时自己学到 7、8 种用 JS 实现继承的方式。看到 prototype
的下伙伴会问这是什么东西,毕竟现在大家在 vue 、react 和 Angular 这样框架包裹下,已经很少接触一些 native JavaScript 了。而且 ES6 或者 TS 都不建议你去碰这个东西。
定义一个函数,然后更新了函数原型(prototype),使用带有 new 关键字调用函数时,会用到这个原型,新对象会被执行 prototype 连接,也就是 car.__proto__
,也就是希望 Car
的 prototype 是一个 Vehicle 的实例。
其实上面代码就是实现了继承和调用父类的 super
函数, 现在只要这么几行代码就搞定了。
class Car extends Vehicle{
constructor(doors){
super({doors:doors,wheels:4})
}
}
复制代码
接下来
function spin(options){
if(!options) options = {};
var duration = ('duration' in options) ? options.duration :100;
var direction = ('direction' in options) ? options.direction :'clockwise';
var easing = ('easing' in options) ? options.easing :'ease-out';
var iterations = ('iterations' in options) ? options.iterations :1;
}
复制代码
定义函数接收一个参数 options, 然后对 options 进行检查其格式,对于缺失的属性进行采用默认值补全。
function spin({
duration = 1000,
direction = 'clockwise',
easing = 'ease-out',
iterations = 1
} = {}){
}
复制代码
正如上面代码所示,这里用到 ES6 解构赋值了 options 这个对象,并且给这个对象一个各个属性默认值。
function spin(options = {}){
const {
duration = 1000,
direction = 'clockwise',
easing = 'ease-out',
iterations = 1
}=options
}
复制代码
不喜欢在函数的参数进行解构赋值,这样看起来有点拥挤,在函数中其他位置单独定义了 options 对象的结构。然后我在我的函数中的第一行将分配默认值。
const ulEle = document.querySelector("#container");
ulEle.addEventListener('click', function (event) {
let li = event.target;
while (li && li.tagName !== 'LI') {
li = li.parentNode;
console.log(li)
}
if (!li) return;
})
复制代码
用途就是当在一个 ul 列表每一个项目 li 可能包裹一个 a 标签在其中,这样处理就是让点击事件对象落在 li 而不是其中包裹的元素。
ulEle.addEventListener('click', function (event) {
const li = event.target.closest('li');
console.log(li)
if (!li) return;
})
复制代码