2022.05.10

//题目一 /实现一个方法，拆解 URL 参数中 queryString，返回一个 key - value 形式的 object/

const getQueryString = (url) => {
  // 1. 切割出？后面的参数 ?a=1&b=测试&c=xx&d=*%￥
  const queryString = url.split("?")[1];
  if (!queryString) return;
  const queryArr = [];
  const queryObj = {};
  // 2. &获取分割 = 做键值对的切分
  // string 对象转成数组 ['a=1', 'b=测试', 'c=xx']
  queryArr = queryString.split("&");
  // 3.循环数组里面的形成对象形式
  for (let o in queryArr) {
    // 内部得到的是字符串
    var key = queryArr[o].split("=")[0];
    var value = queryArr[o].split("=")[1];
    queryObj[key] = value;
  }
  return queryObj;
};

// 测试用例： console.log(getQueryString('https://google.com/search?a=1&b=测试&c=xx&d=%￥')); // { a: '1', b: '测试', c: 'xx', d: '%￥' } //注意处理各种边界情况，如中文、特殊字符、Query 参数没有值的情况等

//题目二 /_ 实现一个方法 camel()，将输入的下划线风格的字符串转换成驼峰风格，举例： • user*name 转换成 userName • fate_stay_night 转换成 fateStayNight • you_are_LUCKY 转换成 youAreLucky 出现在其他位置的 * 直接忽略，举例： • _page_title 转换成 pageTitle • mem_cache 转换成 memCache _/

1. 方法一：正则表达式 （推荐）

const camel = (str) => {
  if (str.slice(0, 1) === "_") {
    str = str.slice(1);
  }
  return str.replace(/\_(\w)/g, function (all, str) {
    return str.toUpperCase();
  });
};

1. 方法二：利用数组 reduce 实现

function doCamel(preVal, curVal, curIndex, arr) {
  if (curVal === "_") {
    curVal = arr[curIndex + 1];
    arr.splice(curIndex + 1, 1);
    return preVal + curVal.toUpperCase();
  } else {
    return preVal + curVal;
  }
}
function underlineToHump(str) {
  if (typeof str === "string" && str.length) {
    str = str.split("");
    // 如果首字母是_，执行 replace 时会多一个_，这里需要去掉
    const fir = str.slice(0, 1)[0];
    if (fir === "_") {
      str = str.slice(1);
    }
    return str.reduce(doCamel);
  }
}

1. 方法三：利用数组 map 实现

function doHump(val, index, arr) {
  if (val === "_") {
    val = arr[index + 1];
    arr.splice(index + 1, 1);
    return val.toUpperCase();
  } else {
    return val;
  }
}
function underlineToHump(str) {
  if (typeof str === "string" && str.length) {
    str = str.split("");
    // 如果首字母是_，执行 replace 时会多一个_，这里需要去掉
    const fir = str.slice(0, 1)[0];
    if (fir === "_") {
      str = str.slice(1);
    }
    return [].map.call(str, doHump).join("");
  }
}

//题目三 /_ 实现一个方法，找出一个字符串中，所有长度为 n 且出现超过 1 次的子串 findChildStr('AAAAAAAABBAAAAAAAA', 8); // ['AAAAAAAA'] findChildStr('AAACCCAAACCCAAA', 2); // ['AA', 'AC', 'CA', 'CC'] _/

为什么要用微前端

微前端接入笔记

vue 生命周期

1. beforeCreate 实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用

2. created 实例已经创建完成之后被调用。在这一步，实例以完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调,然而，挂载阶段还没开始，$el 属性目前不可见。

3. beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

5. beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6. updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。

7. beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。

8. destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

有什么捕获事件

简易版本

驼峰下划线互转