_hyperscript:jQuery和JavaScript替代方案

2021-04-22 11:43:58

以下是如何在vanilla javascript,jQuery和hyperscript中实施各种常见UI模式的比较。

jQuery版本会更好,但会将逻辑分开来自题目的逻辑。这是一些人被认为是良好的练习,以令人担忧的分开的名义,但它违反了行为的局部性,我们的感觉通常对系统可维护性更为重要。 (如果你'在jQuery中不得不追捕一个晦涩的事件处理程序,你知道我们的意思。)

Vanillajs和jQuery Verisons都经常需要回调,使逻辑的尴尬表达是直接和线性的鼠标。这在更复杂的承诺或回调链中变得特别明显。

< div onclick =" this.style.transition ='所有500ms易于出局&#39 ;; RequestAnimationFrame(()=> RequestAnimationFrame(()=> {this.style.opacity =' 0&#39 ;; this.addeventlistener(' Trannitionend',()=> {这个.remove();},{一次:真实})}))">删除我< / div>

< onclick ="获取(' / clickedmessage /').then(response => response.text()).then(data => {document.geteLementById(&# 39;获取目标-1')。innerhtml = data})">提取它< /按钮>< div id =">< / div>

< script> $(function(){var debounce = null; $("#debounceinput")。keyup(函数(){cleartimeout(去抖动); var self = $(this); debouppe = settimout (函数(){$('#39;#demoupt-target-2' self.val());},300);});});};};};};};};< / script><输入占位符="输入一些数据..." ID =" debounceDinput" />>< div id ="跳动 - 目标-2">< / div>

< onclick =" document.geteLementById('事件目标-1').dispatchEvent(新事件(' dooit'))">触发事件< /按钮>< div id ="事件目标-1">事件目标< / div>< script> document.getElementByID('事件 - 目标-1')。addeventlistener(" dooit",()=> {document.getelementbyid('事件 - 目标-1&#39 ;)。删除()});< / script>

<按钮_ ="单击发送doit到#事件目标-3"> 触发事件< /按钮>< div id ="事件目标-3" _ ="在dooit上取消了我"> 事件目标< / div>