设计模式-发布订阅.js

  1. class Sub {
  2.     construct(){
  3.         this.obj = {};
  4.         this.events = {
  5.             key1: [],
  6.             key2: [],
  7.         }
  8.     }
  10.     change(key, value) {
  11.         this.obj[key] = value
  12.         if (this.events[key]) {
  13.             this.events[key].forEach(fn => fn(value));
  14.         }
  15.     }
  17.     watch(key, fn = () => {}) {
  18.         if (this.events[key]) {
  19.             this.events[key].push(fn);
  20.         } else {
  21.             this.events[key] = [fn];
  22.         }
  23.     }
  25.     unWatch(key, fn) {
  26.         if (!this.events[key]) return;
  27.         // 此处应做严谨的事件相等判断
  28.         this.events[key].filter(a => a !== fn);
  29.     }
  30. }

设计模式-实现模版渲染.js

  1. // problem
  2. let template = "我是{{name}}，年龄{{age}}，性别{{sex}}";
  3. let data = {
  4.   name: "姓名",
  5.   age: 18,
  6. };
  7. render(template, data); // 我是姓名，年龄18，性别undefined
  9. // answer
  10. function render(template, data) {
  11.   const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
  12.   if (reg.test(template)) {
  13.     // 判断模板里是否有模板字符串
  14.     const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
  15.     template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
  16.     return render(template, data); // 递归的渲染并返回渲染后的结构
  17.   }
  18.   return template; // 如果模板没有模板字符串直接返回
  19. }

设计模式-实现虚拟DOM.js

  1. // problem
  2. let domNode = {
  3.   tagName: "ul",
  4.   props: { class: "list" },
  5.   children: [
  6.     {
  7.       tagName: "li",
  8.       children: ["item1"],
  9.     },
  10.     {
  11.       tagName: "li",
  12.       children: ["item1"],
  13.     },
  14.   ],
  15. };
  17. // 构建一个 render 函数，将 domNode 对象渲染为 以下 dom
  18. <ul class="list">
  19.   <li>item1</li>
  20.   <li>item2</li>
  21. </ul>;
  23. //  answer
  24. function render(domNode) {
  25.   if (!domNode) return document.createDocumentFragment();
  26.   let $el;
  27.   if (typeof domNode === "object") {
  28.     $el = document.createElement(domNode.tagName);
  30.     if (domNode.hasOwnProperty("props")) {
  31.       for (let key in domNode.props) {
  32.         $el.setAttribute(key, domNode.props[key]);
  33.       }
  34.     }
  36.     if (domNode.hasOwnProperty("children")) {
  37.       domNode.children.forEach((val) => {
  38.         const $childEl = render(val);
  39.         $el.appendChild($childEl);
  40.       });
  41.     }
  42.   } else {
  43.     $el = document.createTextNode(domNode);
  44.   }
  46.   return $el;
  47. }