场景
Blockly是在前端现代化革命之前诞生的拼图化编程库。其中,它的下拉菜单支持实时获取,即向构造函数中传入dynamicOptions函数,每次点击下拉菜单,都会触发dynamicOptions。
示例如下:
function dynamicOptions() {
var options = [];
var now = Date.now();
for (var i = 0; i < 7; i++) {
options.push([String(new Date(now)).substring(0, 3), 'DAY' + i]);
now += 24 * 60 * 60 * 1000;
}
return options;
}
var dropdown = new Blockly.FieldDropdown(dynamicOptions);
input.appendField(dropdown, 'DATE');
坑点
这个动态更新的坑点在于,它只实现了在点击时,执行dynamicOptions方法,但如果dynamicOptions有异步部分,它是不会理会的。而动态更新是离不开异步请求数据的。
解决
为了解决这样的坑点,我们不得不使用“异步请求数据->点击->执行同步函数判断是否完成数据请求,返回对应数据”的流程来绕过。
以下是将blockly场景抽象到一般场景的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
p {
text-align: center;
}
#infoShow {
margin: 0 auto;
width: 500px;
height: 200px;
border: solid;
}
</style>
</head>
<body>
<p><button id="get">获取最新信息</button></p>
<div id="infoShow"></div>
<script>
let done = false
let getBtn = document.getElementById("get")
let infoShow = document.getElementById("infoShow")
let text =""
setTimeout(() => {
text="uun^^nuu"
done = true
}, 2000);
getBtn.onclick = function() {
if (!done) {
infoShow.innerText = "loading.."
} else {
infoShow.innerText = text
}
}
</script>
</body>
</html>
补充
因为本问题的出发点和落脚点都是解决blockly 下拉框异步更新的问题,所以限于blockly封装的问题,若不修改源码,没法引入事件发布订阅的模式,故抽象场景也未进一步延申。
数据驱动
通过blockly的这个小问题,也感受到了数据驱动的优势。异步非阻塞是JS最大的特征,是它最大的优势,也是最大的坑点。而数据驱动,动态更新DOM的现代技术栈则帮我们极大地缓解了这一问题。因为DOM的变化不再依赖事件,而是数据,那么只有数据变化的时候,才会触发DOM变化,就不会因为异步完成时差而遭遇流程上的麻烦了。
以下,以vue为例,同样是异步更新数据,DOM不用做任何操作,就会因为检查到数据更新而相应更新。
<template>
<div>
<ul v-for='(info,index) in infoList' :key="index">
<li>{{info}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
infoList: []
};
},
mounted(){
setTimeout(() => {
this.infoList=[1,2,3,4,5]
}, 1000);
}
};
</script>