记录一次修复bug的过程

记录一次修复bug的过程，11.15

背景：页面为单页面多路由，每个路由配置不同的title，因ios客户端获取title的时机较早，会出现拿不到title的情况。

router文件部分代码如下（敏感部分已🔐）

...
let routes = [
    {
        path: '/mo/q/xxx',
        name: 'a',
        component: A,
        meta: {
            keepAlive: true,
            title: 'titlea'
        }
    }
];
...

index.js

...
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
});
...

问题：如何在编译阶段拿到title放在页面上

思路：在webpack编译时，读router文件，将title解析出来，放入title位置

...
entryHtmls.forEach((filePath)=>{
    let filename = filePath.slice(0, filePath.length-1).split(path.sep).pop();
    devWebpackConfig.plugins.push(new HtmlWebpackPlugin({
        template: 'src/index.tpl.html',
        filename: filename + '.html',
        inject: true,
        chunks: ['manifest', 'vendor', filename],
        env: 'development',
        title: '123'
    }));
});
...

问题：如何读文件

使用nodejs的fs

var fs = require('fs');
var pageContent = fs.readFileSync("../src/router/" + filename + ".js")

问题：报错找不到路径

image.png

因为不支持相对路径，解决办法：修改成绝对路径

    var pageContent = fs
        .readFileSync(
            path.resolve(__dirname,"../src/router/" +
                filename +
                ".js")
        );

打印pageContent效果

打印pageContent

问题：输出的是个流文件，如何转化为我们看得懂的字符串

使用toString方法

var pageContent = fs.readFileSync("../src/router/" + filename + ".js").toString()

打印pageContent效果

打印pageContent

我们需要的title在这里，将这段代码从整体字符串中拆出来

var routesObj = _truncationString(pageContent, "let routes = [", "];")
function _truncationString(str, front, after, isComplete) {
    var a = str.indexOf(front)
    var b = str.substring(a).indexOf(after)
    return str.substring(a, a + b + after.length)
}

打印routesObj，成功

image.png

问题：如何将字符串转为对象

• JSON.parse()
• eval()

第一种 使用JSON.parse()

JSON.parse()转换校验很严格，需要是json，要将以上字符串变为对象格式，如下

image.png
打印JSON.parse结果

发现有空格会发生报错，因为空格破坏了json的格式，具体想了解的同学可以看一下JSON.parse底层校验原理

报错信息

于是我们去掉空格and换行，成功

a.replace(/\s*/g,"")

第二种 使用eval()

严格模式 eval不能有let，不然会报错

要将以上字符串变为赋值的格式，如下

image.png

问题：GiftPage有报错，报错原因是找不到GiftPage，这个GiftPage原本是router引进来的一个组件对象。

报错

这是编译环节，将组件引进来是不合理的，于是我们将这段字符串去掉，最好的办法就是正则

我替换由component:开头+驼峰单词，最后以,结尾的字符串，下面正则中 ?是为了匹配没有逗号的情况，最终正则如下

var reg = new RegExp(/component: ([A-Z])\w+,?/,"g");
var a = routesObj.replace(reg,"");

最后

var obj = eval(a);//obj即为router对象

obj即为router对象。

结论

在该次修复bug的过程中，学习到以下知识点

• JSON.parse()与eval()用法和区别
• 正则表达式
• 如何读取文件内对象的过程细节