https://statics.haiwainet.cn/tpl2021/2021-03-20/js/virtualdom.js

1//虚拟Dom wx 20210318
2"use strict";
3
4function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
5
6function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
7
8function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
9
10function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
11
12function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
13
14function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
16function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
17
18function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
19
20function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
21
22var CreateEl = function () {
23  function CreateEl(tagName, props, children) {
24    _classCallCheck(this, CreateEl);
25
26    // 当只有两个参数的时候 例如 celement(el, [123])
27    if (Array.isArray(props)) {
28      children = props;
29      props = {};
30    } // tagName, props, children数据保存到this对象上
31
32
33    this.tagName = tagName;
34    this.props = props || {};
35    this.children = children || [];
36    this.key = props ? props.key : undefined;
37    var count = 0;
38    this.children.forEach(function (child) {
39      if (child instanceof CreateEl) {
40        count += child.count;
41      } else {
42        child = '' + child;
43      }
44
45      count++;
46    }); // 给每一个节点设置一个count
47
48    this.count = count;
49  } // 构建一个 dom 树
50
51
52  _createClass(CreateEl, [{
53    key: "click",
54    // value: function click() {
55    // } // 构建一个 dom 树
56     
57  },{
58    key: "render",
59    value: function render() {
60      // 创建dom
61      var el = document.createElement(this.tagName);
62      var props = this.props; // 循环所有属性，然后设置属性
63
64      for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
65        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
66            key = _Object$entries$_i[0],
67            val = _Object$entries$_i[1];
68
69        setAttr(el, key, val);
70      }
71
72      this.children.forEach(function (child) {
73        // 递归循环 构建tree
74        var childEl = child instanceof CreateEl ? child.render() : document.createTextNode(child);
75        el.appendChild(childEl);
76      });
77      return el;
78    }
79  }]);
80
81  return CreateEl;
82}();
83
84function setAttr(el, key, val) {
85  if (key === "value") {
86    // 只有input还有textarea需要value属性
87    if (el.type.toUpperCase() === "INPUT" || el.type.toUpperCase() === "TEXTAREA") {
88      el.value = key;
89    }
90  } else if (key.substring(0, 2) === 'on') {
91    //设置事件  
92    el.addEventListener(key.substring(2).toLowerCase(), val.bind(el));
93  } else {
94    // 设置属性
95    el.setAttribute(key, val);
96  }
97
98  return el;
99}