http://statics.haiwainet.cn/tpl2021/2021-05-11/js/virtualdom.js

1"use strict";
2//虚拟Dom wx 20210318
3var reduce = Function.bind.call(Function.call, Array.prototype.reduce);
4var isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
5var concat = Function.bind.call(Function.call, Array.prototype.concat);
6var keys = function(t){
7  return Object.getOwnPropertyNames(t).concat(Object.getOwnPropertySymbols(t));
8}
9if (!Object.values) {
10  Object.values = function values(O) {
11    return reduce(keys(O), function (v, k) {
12      return concat(v, typeof k === 'string' && isEnumerable(O, k) ? [O[k]] : []);
13    }, []);
14  };
15}
16if (!Object.entries) {
17  Object.entries = function entries(O) {
18    return reduce(keys(O), function (e, k) {
19      return concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []);
20    }, []);
21  };
22}
23function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
24
25function _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."); }
26
27function _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); }
28
29function _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; }
30
31function _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; }
32
33function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
34
35function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
36
37function _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); } }
38
39function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
40
41var CreateEl = function () {
42  function CreateEl(tagName, props, children) {
43    _classCallCheck(this, CreateEl);
44
45    // 当只有两个参数的时候 例如 celement(el, [123])
46    if (Array.isArray(props)) {
47      children = props;
48      props = {};
49    } // tagName, props, children数据保存到this对象上
50
51
52    this.tagName = tagName;
53    this.props = props || {};
54    this.children = children || [];
55    this.key = props ? props.key : undefined;
56    var count = 0;
57    this.children.forEach(function (child) {
58      if (child instanceof CreateEl) {
59        count += child.count;
60      } else {
61        child = '' + child;
62      }
63
64      count++;
65    }); // 给每一个节点设置一个count
66
67    this.count = count;
68  } // 构建一个 dom 树
69
70
71  _createClass(CreateEl, [{
72    key: "click",
73    // value: function click() {
74    // } // 构建一个 dom 树
75     
76  },{
77    key: "render",
78    value: function render() {
79      // 创建dom
80      var el = document.createElement(this.tagName);
81      var props = this.props; // 循环所有属性，然后设置属性
82
83      for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
84        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
85            key = _Object$entries$_i[0],
86            val = _Object$entries$_i[1];
87
88        setAttr(el, key, val);
89      }
90

91      this.children.forEach(function (child) {
92        // 递归循环 构建tree
93        var childEl = child instanceof CreateEl ? child.render() : document.createTextNode(child);
94        el.appendChild(childEl);
95      });
96      return el;
97    }
98  }]);
99
100  return CreateEl;
101}();
102
103function setAttr(el, key, val) {
104  if (key === "value") {
105    // 只有input还有textarea需要value属性
106    if (el.type.toUpperCase() === "INPUT" || el.type.toUpperCase() === "TEXTAREA") {
107      el.value = key;
108    }
109  } else if (key.substring(0, 2) === 'on') {
110    //设置事件  
111    el.addEventListener(key.substring(2).toLowerCase(), val.bind(el));
112  } else {
113    // 设置属性
114    el.setAttribute(key, val);
115  }
116
117  return el;
118}