【interview】2020.07.20

1. 说说关于 this 的理解

参考：https://blog.crimx.com/2016/05/12/understanding-this/

执行上下文对象 分为

全局执行上下文对象
函数执行上下文对象

2. 谈谈 BFC

3. flex 的属性以及相关知识

4. 多种方案实现水平垂直居中

5. HTML/CSS/JS基本编码规范

（1）统一命名规范：

驼峰命名法
见名知义
布尔变量不用以is/do之类的开头

（2）函数写注释

（3）声明变量时要赋初始值

（4）使用 === 代替 ==
（5）使用箭头函数取代简单的函数
（6）函数嵌套不要太深，最多 4 层

（7）在必要的地方添加非空判断，可以提高代码的稳健性

//弹框时显示other monthly charge
showOtherMonthlyCharge: function(otherCharges, $dialog){
    if(!otherCharges || !otherCharges.length){
        return;
    }   
}

（8）该写分号的时候写分号

（9）使用 window.location 跳转需要先转义

let searchContent = encodeURIComponent(form.search.value.trim());
window.location.href = `/search?key=${searchContent}`;

（10）点击跳转使用 a 标签替代 onclick 跳转（更好的 SEO）

// 点击一个容器的时候做跳转，有些人喜欢这么写：
<div onclick="window.locatioin.href='/listing/detail?id={{listingId}}'">
    <img />
    <div></div>
</div>
//其实这样写不好，不利于SEO

// 如果是一个跳转应该用a标签，如下：
<a href="window.locatioin.href='/listing/detail?id={{listingId}}'">
    <img />
    <div></div>
</a>

（11）不要直接使用 localStorage（为了兼容Safari，不能直接使用localStorage，要做个兼容）

Data.hasLocalStorage = true;
try{
    window.localStorage.trySetData = 1;
}catch(e){
    Data.hasLocalStorage = false;
}
setLocalData: function(key, value){ 
    if(Data.hasLocalStorage){
        window.localStorage[key] = value;
    }
    else{   
        util.setCookie("_LOCAL_DATA_" + key, value, 1000);
    }
},
getLocalData: function(key){
    if(Data.hasLocalStorage){
        return window.localStorage[key];
    }
    else{
        return util.getCookie("_LOCAL_DATA_" + key);
    }
}

（12）

（13）

（14）

（15）