js到vueJs，数据绑定的故事

最新推荐文章于 2024-07-07 14:39:11 发布

陪计算机走过漫长岁月

最新推荐文章于 2024-07-07 14:39:11 发布

阅读量1.2k

点赞数

分类专栏：前端 js 文章标签： js

本文链接：https://blog.csdn.net/LuciferMS/article/details/83066559

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

时钟走到六点，A公司前端程序员老王准备收拾一下东西溜了，突然公司的后台工程师叫住了他，“哎，老王，我这里有一个REST接口，返回数据的形式是这样子的：

 [
   {name:"shayla", age:18, sex:"female", salary:4396},
   {name:"Elliot", age:20, sex:"male",salary:2200},
  ];

需要你展示在我们公司的官网上，项目紧急，明天官网就要上线了，弄完再走吧"
老王长叹一口气，心想，行吧，又要加班了。但是这个逻辑也不难吧，很快就可以写完了，问题不大。
老王对着键盘一顿猛敲，很快就写下了第一版的代码：

var _html = "";
        _html += "<table>"
        _html += `<thead>
                    <tr>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>性别</td>
                        <td>薪资</td>
                    </tr>
                 </thead>`;
        base_data.forEach(element => {
            _html += `<tr>
                 <td>` + element.name + "</td>" +
                "<td>" + element.age + "</td>" +
                "<td>" + element.sex + "</td>" +
                "<td>" + element.salary + "</td>" +
                "</tr>"
        });
        _html += "</table>"
            //console.info(_html)
        window.onload = function() {
            var node = document.getElementById("MysDiv");
            node.innerHTML = _html;
        }

老王看看官网上正常显示数据，就心满意足的下班去了，今天加班时间不是特别长，真舒服呢！！（显示如下）效果1

第二天，老板过来，“官网上这个列表啊，工资没有超过三千的小子，将他的薪资改成***，我们偌大一个公司，怎么可以显示这个数据给别人看呢…”,老王内心嗤之以鼻，但还是毕恭毕敬的改起了代码。于是第二版代码就诞生了：

 var _html = "";
        _html += "<table>"
        _html += `<thead>
                    <tr>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>性别</td>
                        <td>薪资</td>
                    </tr>
                 </thead>`;
        base_data.forEach(element => {
            element.salary = element.salary > 3000 ? element.salary : "***";
            _html += `<tr>
                         <td>` + element.name + "</td>" +
                "<td>" + element.age + "</td>" +
                "<td>" + element.sex + "</td>" +
                "<td>" + element.salary + "</td>" +
                "</tr>"
        });
        _html += "</table>"
            //console.info(_html)
        window.onload = function() {
            var node = document.getElementById("MysDiv");
            node.innerHTML = _html;
        }

老王看了看官网，
在这里插入图片描述
心里想，其实我就加多了一行代码，

 element.salary = element.salary > 3000 ? element.salary : "***";

但是如果各种各样的场景该怎么办，比如什么，只看男性的数据，筛选20岁一下的数据，那岂不是要往代码里面反复的加上条件判断？？我们软件设计有一条最基本的，也是很重要的一条原则，”Don’t repeat yourself“,不要重复造轮子，如果我反反复复的写这些，我还是工程师吗？那不是成码字员了？？
我要想个办法，避免这个问题了。。。。
哦！我知道了，大学时期，软件工程的老是曾经说过，同样的逻辑，同样的代码，可以通过抽象的办法，封装到一起，以后调用它就好了。
我可不可以，将他抽象成一个页面上的组件，他上面的标签形式是固定的，比如刚刚弄得那个，数据的展现其实是通过<td></td> 这个标签来展现数据，而且都是固定的第一个展示td展示姓名，第二个展示年龄，诸如此类的，
那我封装好数据的渲染逻辑，以后类似这样的需求，我写的代码就是这样的，

					<tr>
                        <td>{{element.name}}</td>
                        <td>{{element.age}}</td>
                        <td>{{element.sex}}</td>
                        <td>{{element.salary}}</td>
                    </tr>

他需要循环迭代一个数组，那我的循环弄成指令吧

					<tr for=”element in data“>
                        <td>{{element.name}}</td>
                        <td>{{element.age}}</td>
                        <td>{{element.sex}}</td>
                        <td>{{element.salary}}</td>
                    </tr>

nice啊！！就这样了！！如果类似于没有3000工资不给显示这种逻辑其实可以

					<tr for=”element in data“>
                        <td>{{element.name}}</td>
                        <td>{{element.age}}</td>
                        <td>{{element.sex}}</td>
                        <td>{{element.salary >  3000 ? element.salary : "***" }}</td>
                    </tr>

这样的写法，虽然将html代码跟js的逻辑混合写在一起了，但是胜在表达能力强，省了很多垃圾代码的编写，少写很多条件判断，循环迭代之类的操作…
这就是vuejs数据绑定的故事。数据驱动dom的故事，只需要将数据交给框架，并且以指令的形式告诉他，我要怎么怎么样的dom，你给我生成出来。免得我再写重复的逻辑和垃圾代码。

页面完整源代码如下：

<!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>
</head>

<body>
    <div id="MysDiv">

    </div>

    <script>
        const base_data = [{
            name: "shayla",
            age: 18,
            sex: "female",
            salary: 4396
        }, {
            name: "Elliot",
            age: 20,
            sex: "male",
            salary: 2200
        }, {
            name: "Hary",
            age: 28,
            sex: "male",
            salary: 4400
        }];
        var _html = "";
        _html += "<table>"
        _html += `<thead>
                    <tr>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>性别</td>
                        <td>薪资</td>
                    </tr>
                 </thead>`;
        base_data.forEach(element => {
            element.salary = element.salary > 3000 ? element.salary : "***";
            _html += `<tr>
                         <td>` + element.name + "</td>" +
                "<td>" + element.age + "</td>" +
                "<td>" + element.sex + "</td>" +
                "<td>" + element.salary + "</td>" +
                "</tr>"
        });
        _html += "</table>"
            //console.info(_html)
        window.onload = function() {
            var node = document.getElementById("MysDiv");
            node.innerHTML = _html;
        }
    </script>
</body>

</html>

陪计算机走过漫长岁月

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js到vueJs，数据绑定的故事

时钟走到六点，A公司前端程序员老王准备收拾一下东西溜了，突然公司的后台工程师叫住了他，“哎，老王，我这里有一个REST接口，返回数据的形式是这样子的： [ {name:&quot;shayla&quot;, age:18, sex:&quot;female&quot;, salary:4396}, {name:&quot;Elliot&quot;, age:20, sex:&quot;male&quot;,salary:2200}
复制链接

扫一扫

专栏目录