vue2进阶知识汇总整理

{
  value: undefined, // 属性的值
  get: undefined,   // 获取属性值时触发的方法
  set: undefined,   // 设置属性值时触发的方法
  writable: false,  // 属性值是否可修改，false不可改
  enumerable: false, // 属性是否可以用for...in 和 Object.keys()枚举
  configurable: false  // 该属性是否可以用delete删除，false不可删除，为false时也不能再修改该参数
}
var obj = { name:'Vue是响应式吗？' }
Object.defineProperty(obj, "name",{
  get(){       
    console.log("get方法被触发");
    dep.depend(); // 这里进行依赖收集
    return value;
  },
  set(val){       
    console.log("set方法被触发");
    value = newValue;
    // self.render();
    dep.notify();  // 这里进行virtualDom更新，通知需要更新的组件render
  }
})
var str = obj.name;         // get方法被触发
obj.name = "Vue是响应式的";  // set方法被触发

class Solution {
  static repeatStr(str) {
    let p = 0;
    let stack = [], cache = [];
    let rest = str;
    let regNum = /^(\d+)\[/; // 匹配并捕获数字开头的正括号模式
    let regWord = /^(\w+)\]/; // 匹配并捕获字符开头的反括号模式
    while(p < str.length - 1) {
      rest = str.substring(p); // 跟随p指针每次返回剩余的字符串
      if(regNum.test(rest)){ // 匹配到数字模式
        let times = rest.match(regNum)[1]; // 提取数字
        stack.push(Number(times)); // 字符转数字入栈
        cache.push(''); // 使用空字符串作为容器压入缓存栈中
        p += times.length + 1; // 移动指针数字长度外加'['长度
      } else if (regWord.test(rest)){ // 匹配到字符模式
        let word = rest.match(regWord)[1]; // 提取字符
        cache[cache.length - 1] = word; // 将字符放入栈顶容器
        p += word.length; // 移动指针字符长度
      } else if (rest[0] == ']') { // 匹配到反括号
        let times = stack.pop(); // 出栈频次
        let word = cache.pop(); // 出栈字符容器
        // 将出栈字符word重复times次放入新的栈顶
        cache[cache.length - 1] += word.repeat(times);
        p++ // 移动指针']'长度
      }
    }
    return cache[0].repeat(stack[0]); // 遍历结束后还剩最后的容器和频次
  }
  static test() { // 测试用例
    let data = '03[02[3[a]1[b]]4[d]]';
    console.log(Solution.repeatStr(data)==='aaabaaabdddd'.repeat(3));
  }
}
Solution.test();

class Solution {
  static parse(str) {
    let p = 0;
    let rest = '';
    let startRegExp = /^\<([a-z]+[1-6]?)(\s[^\<]+)?\>/; // 开始标记;
    let endRegRxp = /^\<\/([a-z]+[1-6]?)\>/; // 结束标记
    let wordRegExp = /^([^\<]+)\<\/[a-z]+[1-6]?\>/; // 结束标记结束前的文字;
    let stack = [];
    let cache = [ { 'children': [] } ]; // 初始容器中预设children属性
    while(p < str.length - 1) {
      rest = str.substring(p);
      if(startRegExp.test(rest)){ // 处理开始标签
        let tag = rest.match(startRegExp);
        let attrsString = tag[2]; // 提取标签中的属性
        tag = tag[1];
        stack.push(tag); // 入栈标签名
        cache.push({
          'tag':tag, 'children':[], 'attrs': Solution.parseAttrs(attrsString) // 解析标签中的属性
        })
        const attrsLength = attrsString != null ? attrsString.length : 0;
        p += tag.length + 2 + attrsLength; // 移动指针，'<>'长度为2所以加2
      } else if (endRegRxp.test(rest)){ // 处理结束标签
        let tag = rest.match(endRegRxp)[1];
        let pop_tag = stack.pop();
        if(tag === pop_tag){ // 检查结束标签是否与栈顶弹出的标签相同，相同则继续处理
          let pop_arr = cache.pop();
          if(cache.length > 0) { // 将弹出的标签对象添加到新栈顶的children属性上
            cache[cache.length - 1].children.push(pop_arr);
          }
        } else { // 不同则抛出语法错误
          throw new Error(pop_tag + '标签未封闭!!');
        }
        p += tag.length + 3; // 移动指针 '</>'长度为3，需要额外移动3个单位
      } else if (wordRegExp.test(rest)) { // 处理文本节点
        let word = rest.match(wordRegExp)[1];
        if(!/^\s+$/.test(word)) { // 若文本节点不为空，则进行处理
          cache[cache.length - 1].children.push({ // 对于文本节点直接加入栈顶children属性中即可
            'text': word, 'type':3
          });
        }
        p += word.length; // 移动指针
      }else{
        p++;
      }
    }
    return cache[0].children[0]; // 遍历结束后返回最初容器中的内容
  }
  static parseAttrs(str){ // 解析标签的属性字符串
    if(str == undefined) return [];
    let inQuotes = false; // 是否处于引号中的标志位
    let point = 0; // 断点位置指针
    let result = [];
    for(let i =0; i < str.length; i++){
      let char = str[i];
      if(char == '"'){ // 若遇到引号则将引号中标志位进行翻转，保证引号内为true
        inQuotes = !inQuotes; // 保证属性值中出现空格不会出错，但出现引号则会有问题
      } else if (char == ' ' && !inQuotes){ // 发现空格且不在引号内则断点至当前位置需要处理
        if(!/^\s*$/.test(str.substring(point, i))) { // 断点至当前位置子串不为空则处理
          result.push(str.substring(point, i).trim()); // 直接取的key="value"键值对
          point = i; // 移动断点指针继续遍历
        }
      }
    }
    result.push(str.substring(point).trim()); // 将最后的键值对推入结果数组
    result = result.map(item => { // 将key="value"键值对进行分离形成新数组
      let cache = item.match(/^(.+)="(.+)"$/);
      return {
        name: cache[1],
        value: cache[2]
      };
    });
    return result;
  }
  static test() {
    var templateString = `<div>
      <h3 class="aa bb cc" data-n="7" id="mybox">你好</h3>
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>`;
    console.log(Solution.parse(templateString));
  }
}
Solution.test();

let data = {
  students: [
    { 'name': '小明', 'hobbies': ['编程', '游泳'] },
    { 'name': '小红', 'hobbies': ['看书', '弹琴', '画画'] },
    { 'name': '小强', 'hobbies': ['锻炼'] }
  ]
}