前言

本文章是基于 死磕36个手写题写出来的，感兴趣的可以去看一下呀！

生命不息，代码不止！让我们开始呗

解析 URL 参数为对象

普通解法

function urlSearch(href) {
  let name, value;
  let str = href; //取得整个地址栏
  let num = str.indexOf("?");
  str = str.substr(num + 1); //取得所有参数
  let arr = str.split("&"); //各个参数放到数组里
  let json = {};
  for (let i = 0; i < arr.length; i++) {
    num = arr[i].indexOf("=");
    if (num > 0) {
      name = arr[i].substring(0, num);
      value = arr[i].substr(num + 1);
      json[name] = value;
    }
  }
  return json;
}

正则解法

function parseParam(url) {
    const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
    //exec() 方法用于检索字符串中的正则表达式的匹配。
    const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
    let paramsObj = {};
    // 将 params 存到对象中
    paramsArr.forEach(param => {
        if (/=/.test(param)) { // 处理有 value 的参数
            let [key, val] = param.split('='); // 分割 key 和 value
            val = decodeURIComponent(val); // 解码
            val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
               //test() 方法用于检测一个字符串是否匹配某个模式.
            if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
                paramsObj[key] = [].concat(paramsObj[key], val);
                //concat() 方法用于连接两个或多个数组。
                //该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
            } else { // 如果对象没有这个 key，创建 key 并设置值
                paramsObj[key] = val;
            }
        } else { // 处理没有 value 的参数
            paramsObj[param] = true;
        }
    })
    
    return paramsObj;
}

我有话说 是不是看了正则解法有点蒙，没事我也蒙，所以我就良心的准备了普通解法，侬只要对照着看一下，然后百度一下正则看一下注释，看懂七七八八应该差不多，加油加油。

字符串模板

字符串模板是针对大批量、多频率操作dom的解决方案，比如我们要根据数据动态创建一个多嵌套的元素并将其插入到页面中，如果我们采用常规创建dom元素的方式进行插，代码量会极其庞大，

所以这里我们提供了一个模板字符串的函数来生成这个模板并最后插入到页面中

function render(template, data) {
    const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
    if (reg.test(template)) { // 判断模板里是否有模板字符串
        const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
        template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
        return render(template, data); // 递归的渲染并返回渲染后的结构
    }
    return template; // 如果模板没有模板字符串直接返回
}
    ·

测试

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let person = {
    name: '布兰',
    age: 12
}
render(template, person); // 我是布兰，年龄12，性别undefined

总结

好啦好啦，到这里差不多就讲完了，可是还有许多没发现的知识点，希望大家多多指出。加油加油！