熟悉 Angular 的同学应该 都知道 Angular 最大的特点之一是：双向数据绑定，接下来我们模拟一下其过程

数据到 html 视图

  • 我们想要实现的是 ：数据变了，视图跟着变
  • 简单分析一下，这个是比较容易解决的，可以使用下面的代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <script>
      //数据改变  导致   html元素改变
      //页面中存在一个元素 <input id="input1">
      window.onload = function () {
        let input1 = document.getElementById('input1');
        let a = '';
        
        //模拟 angular 中的 $interval 依赖
        function $interval(fn,time) {
          setInterval(function () {
            fn();
            apply();
          },time);
        }

        //数据 》 input，也就是更新数据 到页面
        function apply () {
          input1.value = a;
        }
        $interval(function () {
          a += "|";
        },100);
      };
    </script>

html 视图 到 数据

  • 在这里我们想要实现的是 ：html 视图，数据跟着变，这个可以利用 oninput 事件

    1
    2
    3
    4
    5
    //input 》 数据a
    input1.oninput = function () {
      a = this.value;
      apply();
    };

较完整的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>手写angular的双向数据绑定</title>
  <script>
    window.onload = function () {
      let $scope = {};
      let ele = document.getElementsByTagName('*');

      //数据 》 页面元素  每次元素上发生了input 事件   就去更新一下
      function apply () {
        Array.from(ele).forEach((item,index,arr)=>{
          let mod = item.getAttribute('ng-model');
          if (mod) {
            if ($scope[mod]) {
              item.value = $scope[mod];
            } else {
              item.value = '';
            }
          }
        });
      }
      
      //为有 ng-model属性 的标签 添加  input 事件，当输入改变时就去改变 $scope上面的 数据
      Array.from(ele).forEach((item,index,arr)=>{
        let model=item.getAttribute('ng-model');
        if (model) {
          item.oninput = function () {
            $scope[model] = this.value;
            apply();
          };
        }
      });
    };
  </script>
</head>
<body>
  <input ng-model="a" />
  <input ng-model="a" />
  <select ng-model="a">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
  </select>
</body>
</html>

结果示例

pic
双向数据绑定