现代 Web 开发特征：数据驱动

最新推荐文章于 2024-03-05 20:13:07 发布

哎，好难

最新推荐文章于 2024-03-05 20:13:07 发布

阅读量229

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_41952131/article/details/131193151

版权

文章讲述了从Vue2向Vue3过渡的背景，强调了数据驱动在前端开发中的重要性。通过对比命令式编程和数据驱动两种界面变化方式，说明数据驱动如何简化开发，减少心智负担，提高代码可读性和测试效率，并以Vue为例展示了数据驱动的实现方式。

摘要由CSDN通过智能技术生成

写了很多年的vue2，于是决定把对vue2的理解写一下，即是为后面学习vue3打下坚实的基础，也为彻底告别vue2转向vue3做个纪念。

本文是该系列文章的第一篇，欢迎阅读。

数据驱动

前端开发发展到今天，出现了很多被广泛认同的理念，其中最具代表性的理念之一就是数据驱动。

用户交互的对象: 界面

不论 web 应用是采用jquery还是MVVM框架开发的，最终与用户产生交互的仍然是浏览器界面User Interface，简称 UI。

界面则主要由 DOM 元素来呈现，因此，归根到底，为了让用户通过 web 应用完成操作，DOM 元素需要根据实际需要来不断变化。

例如，用户通过网站页面来查询当天水果的价格，页面上有一个"查询"按钮，还有一个显示水果价格的区域，此外，在查询过程中，还有一个加载中的提示。

<div class="price">今日榴莲价格为 10.00/千克</div>
<div class="loading">加载中</div>
<button>查询</button>

在用户点击查询的过程中，DOM 实际上会经历这样几个状态：

鼠标移动到按钮上时，按钮的样式改变（通过 CSS:hover或者通过 JS）。
按通过 CSS:active或者通过 JS）。
清空价格区域的显示内容钮按下时，按钮的样式改变（。
将加载中的提示显示出来。
待查询到数据后，将数据拼装成文字"今日榴莲价格为 10.00/千克"，放入价格区域中。
将加载中的提示隐藏。

要实现上面的效果，有两种方式：一是命令式编程实现界面的变化，二是数据驱动的方式实现界面的变化。

界面变化: 命令式编程

样式的变化可以使用css来实现(步骤1-2)，后面的逻辑用JavaScript来实现，代码大概是这样：

// 3. 清空价格区域的显示内容
price.innerHTML = '';
// 4. 将加载中的提示显示出来
loading.style.display = 'block';
// 查询价格
queryPrice(function(data){
    // 5. 待查询到数据后，将数据拼装成文字“今日榴莲价格为 10.00/千克”，放入价格区域中
    price.innerHTML = '今日榴莲价格为 ' + data.price + '/千克';
    // 6. 将加载中的提示隐藏
    loading.style.display = 'none';
});

如果嫌上面写了太多DOM操作，可以引入 jQuery 之类的库，但是整个过程仍然不会有实质性的变化，主要靠每一行 JavaScript 代码命令式地修改 DOM 元素来达到修改界面的目的。

界面变化: 数据驱动

命令式修改界面如此繁琐，是否有别的方法来修改界面呢？

数据驱动的概念应运而生。它的基本思想是：使用数据来描述应用的状态，将界面的修改与数据的修改绑定起来，从而实现数据的任何修改都直接反映到界面的修改。

如果用一个公式来表示的话，可以写成UI=F(state)，UI 即指用户界面，state指应用的状态，而F则是应用状态与用户界面的映射关系定义。

因此，只要状态发生变化，界面就会发生相应的变化。

上述例子使用 Vue 来编写：

<template>
    <button @click="query">查询</button>
    <div class="price">今日榴莲价格为 {{price}}/千克</div>
    <div class="loading" v-show="isLoading">加载中</div>
</template>
<script>
    export default {
        data(){
            return {
                price: 0,
                isLoading: false
            }
        },
        methods: {
            query(){
                this.isLoading = true;
                queryPrice((data) => {
                    this.price = data.price;
                    this.isLoading = false;
                });
            }
        }
    }
</script>