【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）