每日思考（2020/07/16）

题目概览

• HTML5的应用程序缓存与浏览器缓存有什么不同？
• 对BEM规范的理解
• 举例说明什么是IIFEs？它有什么好处？

题目解答

HTML5的应用程序缓存与浏览器缓存有什么不同？

• 浏览器缓存针对单个文件,H5离线缓存针对整个应用
• H5缓存断网还能用,浏览器缓存断网就用不了
• H5缓存核心是applicationCache对象,浏览器缓存核心是cache-control
• MDN文档：使用应用缓存
• 注意： 在此刻使用这里描述的应用程序缓存功能高度不鼓励; 它正在处于从Web平台中被删除的过程。请改用Service Workers 代替

对BEM规范的理解

• block、Element、Modifier的缩写，中文意思是块、元素、修饰。在某种程度上，BEM和OOP是相似的。它是一种用代码和一系列模式来描述现实情况的方法，它只考虑程序实体而无所谓使用什么编程语言

  .block { /* styles */ }
  .block__element { /* styles */ } 
  .block--modifier { /* styles */ }
  

• 在规范中，块表示一个组件的意思，这样看上去有点抽象，我们可以通过例子来学习，假设你要写一个按钮的组件。我们只需要设置了一个 .button 类的按钮，然后可以在任何<button>按钮上使用该类，就可以生成该组件的传统样式。使用.button而不是用button的原因是因为类允许无限的可重用性，而即使是最基本的元素也可能改变样式。但是在实际的项目使用中，我们会发现一个按钮可能是大按钮，可能是小按钮，也可能是红色的，或者黄色的。于是就引申出了BEM的modifier

• 修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。假如我们要添加一个默认按钮，一个主要按钮，一个大按钮，一个小按钮，一个主要的小按钮。我们可以这样

  <button class=".button .button--default"></button>  
  <button class=".button .button--primary"></button>
  <button class=".button .button--large"></button>   
  <button class=".button .button--small"></button> 
  <button class=".button .button--primary .button--small"></button>
  

• 元素是块的子节点。为了表明某个东西是一个元素，你需要在块名后添加 __element。所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。

  <form class="form" action="">
     <div class="form__row"> 
    </div> 
  </form> 
  <style>
     .form__row { /* styles */ }
  </style>
  

• 优点：

  • 可以让 CSS 的优先级保持相对扁平
  • 能立即知道哪些东西是一个子元素

举例说明什么是IIFEs？它有什么好处？

• Instantly Invoked Function Expression 即时调用函数表达式

  ;(function () {
      // ... statements
      return ...
  )()
  //最好在 IIFE 前追加分号 ; 来避免解析时与前一个表达式合并出现问题
  

• 好处：

  • 创建一个局部作用域隔离变量；但在 ES6 拥有了块级作用域后变得没有必要，可以用语句块 { ... } 配合 let/const 替代

  • 将运行逻辑转化为可求值的表达式，弥补 JavaScript 基本逻辑语句不是表达式的缺陷

    const a = (() => {
        if (...) return 1
        else return 0
    })()
    

    let a
    if (...) a = 1
    else a = 0
    

  • 节约变量

    // 还有更多节约变量的方式
    var getInfo = (function() {
      var info = null;
      return function(callback) {
        if (info) callback();
        ajax(api, function(res){
          info = res.data; callback();
        });
      }
    })();