每日思考（2019/12/31）

题目概览

• 对属性data-的理解
• 对CSS预处理器的理解
• 如何快速让一个数组乱序

题目解答

对属性data-的理解

• 定义和用法：data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。用户代理会完全忽略前缀为 "data-" 的自定义属性。data-* 属性包括两部分：

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

• 之前的做法：在标签里面加上我们自己设置的一些属性，然后获取里面的值是使用getAttribute来获取自定义属性里面的值

  <div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>
  <script>
  	var myDiv = document.getElementById("myDiv");
  	var theValue = myDiv.getAttribute("user-defined-attribute");
  </script>
  

• 使用自定义属性：只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放

  <div id="myDiv" data-other-attribute="value">在标签里设置H5新增的自定义属性</div>
  

  //使用getAttribute来获取
  var myDiv = document.getElementById("myDiv");
  var theValue = myDiv.getAttribute("user-defined-attribute");
  //使用Html5自定义属性对象Dataset来获取
  var myDiv = document.getElementById("myDiv");
  var theValue = myDiv.dataset.otherAttribute;
  

• 处理多个自定义元素：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量，

  <div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>
  
  

  //使用循环遍历
  var myDiv = document.getElementById("myDiv");
  var attrs = myDiv.attributes,
  var expense = {}, i, j;  
  for (i = 0, j = attrs.length; i < j; i++) {
    if(attrs[i].name.substring(0, 5) == 'data-') {
      expense[attrs[i].name.substring(5)] = attrs[i].value;
    }
  //使用dataset属性
  var expense = document.getElementById('myDiv').dataset;
  //让所有的自定义的属性值塞到一个数组中
  var chartInput = []; 
  for (var item in expense) {
    chartInput.push(expense[item]);
  }
  //删掉一个data属性
  delete myDiv.dataset.attribute;
  //增加一个data属性
  myDiv.dataset.attribute4 = 'value4';
  

• data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）

  <div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
  <style>	
  #myDiv{
    position: ralative;
  }
  #myDiv:hover:after{
    position: absolute;
    top: 0px;
    left: 0px;
    content: attr(data-attribute);
    color: red;
  }
  <style>
  

• dataset的兼容性处理

  if(myDiv.dataset) {
    myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
    var theValue = myDiv.dataset.attribute; // 获取自定义属性
  } else {
    myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
    var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
  

对CSS预处理器的理解

• 表现层（CSS）：CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持。语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
  没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率

• CSS 预处理器：其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”

• 常用的 CSS 预处理器：

  • SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS
  • LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS

• 原理：AST 抽象语法树，是源代码的抽象语法结构树状表现形式，Webpack、ESLint、JSX、TypeScript 的编译和模块化规则之间的转化都是通过 AST 来实现对代码的检查、分析以及编译等操作。通过在线编译工具，可以将 function fn(a, b) {} 编译为下面的结构

  {
      "type": "Program",
      "body": [
          {
              "type": "FunctionDeclaration",
              "id": {
                  "type": "Identifier",
                  "name": "fn"
              },
              "params": [
                  {
                      "type": "Identifier",
                      "name": "a"
                  },
                  {
                      "type": "Identifier",
                      "name": "b"
                  }
              ],
              "body": {
                  "type": "BlockStatement",
                  "body": []
              },
              "generator": false,
              "expression": false,
              "async": false
          }
      ],
      "sourceType": "script"
  }
  

如何快速让一个数组乱序

• sort排序法（最简单的打乱数组顺序的方法）

  // ES5:
  let arr = [1, 2, 3, 4, 5];
  function randFun(arr) {
      arr.sort(function () {
          return Math.random() - 0.5;
      });
  }
  let newArr = randFun(arr);
  
  // ES6：
  let arr = [1, 2, 3, 4, 5];
  let newArr = arr => arr.sort(() => Math.random() - 0.5);
  
  // 引申：
  let arr = [1, 2, 3, 4, 5];
  let newArr = arr => arr.sort(() => Math.random() - Math.random());
  

• 循环随机位交换法：循环遍历该数组，在每次遍历中产生一个(0 ~ length - 1)之间的随机下标的数，该数代表本次循环要随机交换的位置。将本次循环当前位置的数和随机位置的数进行交换

  let arr = [1, 2, 3, 4, 5];
  function randFun(arr) {
      for(let i=0, len = arr.length; i < len; i++) {
          let index = parseInt(Math.random() * (len - 1));
          let tempValue = arr[i];
          arr[i] = arr[index];
          arr[index] = tempValue;
      }
      return arr;
  }
  let newArr = randFun(arr);
  

• Fisher–Yates 洗牌算法

  //ES6：
  function shuffle(arr) {
      let i = arr.length;
      while (i) {
          let j = Math.floor(Math.random() * i--);
          [arr[j], arr[i]] = [arr[i], arr[j]];
      }
  }
  
  //ES5:
  function shuffle(arr) {
    var i = arr.length, t, j;
    while (i) {
      j = Math.floor(Math.random() * i--);
      t = arr[i];
      arr[i] = arr[j];
      arr[j] = t;
    }
  }