每日思考（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;
  }
}