legacy | 非数据驱动场景下的数据实时获取

最新推荐文章于 2023-12-19 13:21:17 发布

MGsniper

最新推荐文章于 2023-12-19 13:21:17 发布

阅读量258

点赞数 1

分类专栏： legacy 文章标签：数据驱动数据实时获取 blockly

本文链接：https://blog.csdn.net/qq_36145914/article/details/93970241

版权

legacy 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

场景
坑点
解决
补充
数据驱动

场景

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>

MGsniper

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
legacy | 非数据驱动场景下的数据实时获取

文章目录场景坑点解决补充数据驱动场景Blockly是在前端现代化革命之前诞生的拼图化编程库。其中，它的下拉菜单支持实时获取，即向构造函数中传入dynamicOptions函数，每次点击下拉菜单，都会触发dynamicOptions。示例如下：function dynamicOptions() { var options = []; var now = Date.now(); f...
复制链接

扫一扫

专栏目录