参考文档

1. 【整理】几种解决inline-block间隙的方案

在 websocket 连接被建立后，如果一段时间未活动，服务器或防火墙可能会超时或终止连接。想要解决这个问题， 我们可以周期性地给服务器发消息。我们需要两个方法实现：一个来确保连接不会中断，，另一个用来取消此设定。同我们也需要一个 timerID 变量.

让我们来看一下具体实现：

var timerID = 0; 
function keepAlive() { 
    var timeout = 20000;  
    if (webSocket.readyState == webSocket.OPEN) {  
        webSocket.send('');  
    }  
    timerId = setTimeout(keepAlive, timeout);  
}  
function cancelKeepAlive() {  
    if (timerId) {  
        clearTimeout(timerId);  
    }  
}

现在我们实现了我们需要的两个方法，我们可以在 onOpen() 的最后面调用 keepAlive() ，在 onClose() 的组后面调用 cancelKeepAlive() 。

参考文档

• CSS网格布局（Grid）完全教程
• 10分钟理解CSS3 Grid
• CSS 网格布局学习指南

先放大，再缩小

方法1：

.box:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        right: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #e2e2e2;
    }

方法2：

.box:before{
    content: "";
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border:1px solid #000;
    -webkit-transform(scale(0.5));
    -webkit-transform-origin: 0 0;
    transform(scale(0.5));
    transform-origin: 0 0;
}

缺点：

1. 占据了该元素的伪元素，代码量相对较多
2. input元素没有伪元素

其他

1. 7 种方法解决移动端 Retina 屏幕 1px 边框问题

js 实现无缝轮播图原理以及实践

无缝轮播的原理

问题： 在第一张或者最后一张图片切换时，会显示空白

解决方案： 使用无限滚动的技巧，即实现循环无缝切换。

1）在页面图片列表的开始加上最后一张图片的附属图，在最后加上第一张图片的附属图
2）每次切换时判断切换后的位置是否大于 -1610px 或是小于 -4830px (加上附属图总大小是 8050, 每张大小是 1610px, 总5张)， 即是否切换到附属图的位置：
如果大于 -1610px, 就把图片重新定位到真正的最后一张图的位置：-4830px;
如果小于 -4830px, 就把图片重新定位到真正的第一张图的位置：-1610px;

实践

html:

参考文档

1. https://segmentfault.com/a/1190000006265894

如果你定义了一个数组，然后你想清空它。 通常，你会这样做：

// 定义一个数组
var list = [1, 2, 3, 4];
function empty() {
    //清空数组
    list = [];
}
empty();

但是，这有一个效率更高的方法来清空数组。 你可以这样写:

var list = [1, 2, 3, 4];
function empty() {
    //empty your array
    list.length = 0;
}
empty();

• list = [] 将一个新的数组的引用赋值给变量，其他引用并不受影响。 这意味着以前数组的内容被引用的话将依旧存在于内存中，这将导致内存泄漏。

• list.length = 0 删除数组里的所有内容，也将影响到其他引用。

然而，如果你复制了一个数组（A 和 Copy-A），如果你用 list.length = 0 清空了它的内容，复制的数组也会清空它的内容。

考虑一下将会输出什么：

var foo = [1,2,3];
var bar = [1,2,3];
var foo2 = foo;
var bar2 = bar;
foo = [];
bar.length = 0;
console.log(foo, bar, foo2, bar2);

//[] [] [1, 2, 3] []

React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

1、React.Children.map

object React.Children.map(object children, function fn [, object context])

使用方法：
React.Children.map(this.props.children, function (child) {
    return <li>{child}</li>;
})

其他方法
this.props.children.forEach(function (child) {
    return <li>{child}</li>
})

在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。

function Title({text, children}) {
  console.log('children: ',  children, React.Children.count(children))
  React.Children.map(children, function (child) {
    console.log('child: ', child)
    return child
  })
  return (
  <h1>
    { text }
    { children }
  </h1>);
}

React.render(
  <Title>
    <span>hello</span>
    <span>hello</span>
  </Title>,
  document.body
);

这里需要注意, this.props.children 的值有三种可能：如果
当前组件没有子节点，它就是 undefined；如果有一个子节点，数据类型就是 object；如果有多个节点，数据类型就是 array。所以
，处理 this.props.children 的时候要小心。

React 提供了一个工具方法 React.Children 来处理 this.props.children。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

传入如下 ReactElement:

<Title>
  <span>hello</span>
  <span>hello</span>
</Title>
// 返回两个子节点，数据类型是 `array`

<Title></Title>
// 返回 undefined

<Title>
  null
</Title>
// 返回 null

2、React.Children.forEach

React.Children.forEach(object children, function fn [, object context])

类似于 React.Children.map(), 但是不返回对象。

3、React.Children.count

number React.Children.count(object children)

返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。

不同的 ReactElement, 输出 count 值：

<Title>
  <span>hello</span>
  <span>hello</span>
</Title>
console.log(React.Children.count(this.props.children)) // 2

<Title></Title>
console.log(React.Children.count(this.props.children)) // 0

<Title>null</Title>
console.log(React.Children.count(this.props.children)) // 1

4、React.Children.only

object React.Children.only(object children)

返回 children 中仅有的子级。否则抛出异常。
这里仅有的子级，only方法接收的参数只能是一个对象，不能说多个对象（数组）。

console.log(React.Children.only(this.props.children[0]))
// 输出对象 this.props.children[0]

参考文档

1. React.Children

1. 侧边栏不会刷新

解决方案：给 $route.query 设置一个任意值即可，如：

const qparams = this.$route.query;
    qparams.tmp_randomTime = isNaN(parseInt(qparams.tmp_randomTime))
      ? ''
      : parseInt(qparams.tmp_randomTime);

2. 分页ajax拉取表格数据，el-pagination 中的 page无法正确高亮

解决方案：total(总条数)默认值必须设置为 null。例如：

      searchForm: {
        page: 1,
        size: 10,
        total: null
      },

3. 列表页跳转到详情页，再从详情页回到列表页，保留原来的滚动条高度

解决方案：在列表页跳转前，在params中携带 scrollTop 参数，返回时再返回即可。例如：

params.scrollTop =
        document.querySelector('.main-container').scrollTop || 0;

4. ElementUI el-form 内嵌 vue-preview 会导致vue-preview点击关闭按钮或者切换到下一张图片时路由切换
   解决方案：
   不要在 el-form 内嵌 vue-preview, 并且配置 vue-preview的参数 history: false。

Vue.use(VuePreview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {
    top: 0,
    bottom: 0
  },
  captionEl: false,
  fullscreenEl: true,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: false,
  tapToToggleControls: false,
  history: false
});

el-date-picker 内嵌在 el-dropdown 下，当选择完日期后，el-dropdown也会跟随着关闭

解决方案：修改 el-dropdown 的 hide()方法

      hide () {
        if (this.triggerElm.disabled) return;
        // console.log('dropdown_showDatePicker: ', this.showDatePicker)
        if (this.showDatePicker) return; // 展开事件组件时，禁止关闭下拉弹框
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.visible = false;
        }, this.hideTimeout);
      },

回车自动提交表单

详情：做列表搜索的时候当表单只有单个输入框时，回车会自动提交表单

解决：(组织表单提交)

<el-form :inline="true" :model="params" @submit.native.prevent>
</el-form>

监听 input 回车

<el-input v-on:keyup.enter.native="login"></el-input>

table组件expand每次只展开一项

解决：但是我在Stack Overflow找了个更简单的方法，要直接操作table树๑乛◡乛๑，只需要用到expand的方法

<el-table @expand="handleExpandRow" ref="row_table">
</el-table>
//method:
handleExpandRow(row,expanded){
    this.$refs.row_table.store.states.expandRows = expanded ? [row] : [];
}

附上Stack Overflow原地址：大神在此
————

以上是v1.4版本的，由于v2.0版本修改了返回参数，仿照上例修改了新的：

handleExpandRow(row,expandRows){
    this.$refs.raw_table.store.states.expandRows = expandRows.length !== 0 ? [row] : [];
}

其他

1. 『表单开发』一次即通关的5个技巧

前端面试常见问题汇总

CSS

1. @mixin 中的 @include 和 @extend 的区别(sass)

列举不同的清除浮动的技巧

/*  1. 添加新元素  */
<div class="outer">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="clearfix"></div>
</div>

.clearfix {
  clear: both;
}

/* 2. 为父元素增加样式 */
.clearfix {
  overflow: auto;
  zoom: 1; // 处理兼容性
}

/* 3. :after 伪元素方法（作用于父元素） */
.outer {
  zoom: 1;
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

CSS 实现移动端 1px 线条的绘制

• 先放大，再缩小

方法1：

.box:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        right: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #e2e2e2;
    }

方法2：

.box:before{
    content: "";
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border:1px solid #000;
    -webkit-transform(scale(0.5));
    -webkit-transform-origin: 0 0;
    transform(scale(0.5));
    transform-origin: 0 0;
}

缺点：

1. 占据了该元素的伪元素，代码量相对较多
2. input元素没有伪元素

2. 用 css 实现垂直居中(子元素宽高不确定？)(兼容ie8？)

• 方案一：使用css3的新属性transform:translate(x,y)属性

.eight {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: green;
}

这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好

3. 如果设计中使用了非标准的字体，你该如何去实现？

• 图片替代
• web: fonts在线字库
• @font-face

4. 行内元素有哪些？块级元素有哪些？空元素有哪些？

• 行内元素有：span、img、input、select、strong
• 块级元素有：div、ul、ol、dl、dt、dd、h1、h2、h3、h4、p...
• 常见的空元素有：br、hr、img、input、link、meta、、base、area、command、embed、keygen、param、source、track、wbr...

5. 两个div进行两列布局，要求高度不定（父元素也是），我需要两个div实时等高，即左边div高度被其内子元素撑高时，右边的div高度和左边同步【等高布局】

• 父元素 display: table； 左边定宽 width: 200px; display: table-cell；右边 width: 100%;
• 父元素 display: flex; align-item: stretch; 左边定宽 width: 200px; 右边设置项伸展属性: flex-grow: 1；

6. 按照下图，说说flexbox的原理

JavaScript

1、编写一个函数将列表子元素顺序反转

2、请实现一个Event类,继承自此类的对象都会拥有两个方法on,off,once和trigger

3、如何创建一个ajax请求(https://zhuanlan.zhihu.com/p/27776535)

创建Ajax的过程：
1）创建XMLHttpRequest对象（异步调用对象）

var xhr = new XMLHttpRequest();

2）创建新的Http请求（方法、URL、是否异步）

xhr.open('get', 'example.php', false);

3）设置响应HTTP请求状态变化的函数
onreadystatechange事件中readyState属性等于4。响应的HTTP状态为 200(OK)或者304(Not Modified)。
4）发送http请求

xhr.send(data);

5）获取异步调用返回的数据

详细过程：

const xhr = new XMLHttpRequest();
xhr.open(method, url, async);

// send 方法发送请求，并接受一个可选参数
// 当请求方式为 post 时，可以将请求体的参数传入
// 当请求方式为 get 时，可以不传或传入 null
// 不管是 get 还是 post，参数都需要通过 encodeURIComponent 编码后拼接
xhr.send(data);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    // HTTP 状态在 200 -300 之间表示请求成功
    // HTTP 状态为 304 表示内容未发生改变，可直接从缓存中获取
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
      console.log('请求成功', xhr.responseText);
    }
  }
}

// 超时时间单位为毫秒
xhr.timeout = 1000

// 当请求超时时，会触发 ontimeout 方法
xhr.ontimeout = () => console.log('请求超时')

4. javascript 连等赋值问题

var a = { n: 1 };
var b = a;
a.x = a = { n: 2 }
console.log(a.x); // undefined
console.log(b.x); // {n:2}

解析：
解析器在接收到 a = a.x = { n: 2 } 这个语句后，会这样子做：

1. 在找到 a 和 a.x 的指针。如果已有指针,那么不改变它。如果没有指针, 即那个变量还没被申明，那么就创建它，指向 null。
   a 是有指针的，指向 {n: 1}; a.x 是没有指针的，所以创建它，指向 null。

2. 然后把上面找到的指针，都指向最右赋值的那个指，即是 {n: 2}。

5. JS数组深浅复制

浅拷贝：

• slice 实现

var arr = ['old', '1' , true, null, undefined];
var new_arr = arr.slice();
new_arr[0] = 'new';
console.log(arr);
console.log(new_arr);

• concat 实现

var arr = ['old', '1' , true, null, undefined];
var new_arr = arr.concat();
new_arr[0] = 'new';
console.log(arr);
console.log(new_arr);

注释：如果数组元素是基本类型，就会拷贝一份新的；但是如果数组元素是对象或者数组，就只会拷贝引用（类似指针），修改其中一个就会影响另外一个。例如：

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}];
var new_arr = arr.concat();
new_arr[0] = 'new';
new_arr[3][0] = 'new1';
console.log(arr) // ["old", 1, true, ['new1', 'old2'], {old: 1}]
console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}]

深拷贝

• JSON.stringify 实现数组深拷贝

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}];
var new_arr = JSON.parse(JSON.stringify(arr));
new_arr[0] = 'new';
new_arr[3][0] = 'new1';
console.log(arr) // ["old", 1, true, ['old1', 'old2'], {old: 1}]
console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}]

缺点：简单粗暴，但是不能拷贝函数，不推荐。

手动实现深浅拷贝

• 浅拷贝

var shallowCopy =  function (obj) {
  // 判断是否是数组或者对象
  if (typeof obj !== 'object') {
        return obj;
  }
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key]
        }
  }
  return newObj;
}

• 深拷贝

var deepCopy = function (obj) {
    // 判断是否是数组或者对象
    if (typeof obj !== 'object') {
        return obj;
    }
    var newObj =  obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

实现一个深度复制的deepCopy 函数

6. 实现dom的增删改查复制

// 创建节点
createDocumentFragment()
createElement()
createTextNode()

// 添加 移除 替换 插入
appendChild()
removeChild()
replaceChild()
insertBefore()

// 查找
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
document.getElementById()
document.querySelector()
document.querySelectorAll()

7. 谈谈您对 MVC、MVVM 的理解

MVC

- 视图(View)：用户界面。
- 控制器(Controller)：业务逻辑。
- 模型(Model)：数据保存。

各部分之间的通讯方式如下：

1、View 传送指令到 Controller
2、Controller 完成业务逻辑后，要求 Model 改变状态
3、Model 将新的数据发送到 View，用户得到反馈

特点：

所有通讯都是单向的。

MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

1、各部分之间的通讯，都是双向的。
2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，被称为 “被动视图”（Passive View），即没有任何主动性，而 Presenter 非常厚，所有逻辑都部署在那里。

MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反应在 ViewModel，反之亦然。

8. vue 的生命周期钩子函数

• 1. beforeCreate
• 2. created
• 3. beforeMount
• 4. mounted
• 5. beforeUpdate
• 6. updated
• 7. actived
• 8. deactivated
• 9. beoforeDestory
• 10. destoryed

9. 使用正则实现电话号码和邮箱的验证

10. 使用正则实现trim函数删除字符串前后空格

function trim(str) {
  return str.replace(/(^\s*)|(\s*$)/g, '');
}

11. BOM对象，DOM对象

BOM对象：

• window对象
• location对象
• navigator对象
• screen对象
• history对象

DOM对象

• 常用的DOM方法：

  • getElementById(id)
  • getElementsByTagName()
  • appendChild(node)
  • removeChild(node)
  • replaceChild()
  • insertChild()
  • createELement()
  • createTextNode()
  • getAttribute()
  • setAttribute()

• 常用的DOM属性：

  • innerHTML 节点(元素)的文本值
  • parentNode 节点(元素)的父节点
  • childNodes
  • attributes 节点(元素)的属性节点

参考: HTML DOM 方法

12. 任务队列优先级（Promise、setTimout、setImmediate）

下面代码输出结果？为什么？

demo1:

setTimeout(() => console.log('a'), 0);
var p = new Promise((resolve) => {
  console.log('b');
  resolve();
});
p.then(() => console.log('c'));
p.then(() => console.log('d'));
console.log('e');
// 结果：b e c d a
// 任务队列优先级：promise.Trick()>promise的回调>setTimeout>setImmediate

demo2:

async function async1() {
    console.log("a");
    await  async2(); //执行这一句后，await会让出当前线程，将后面的代码加到任务队列中，然后继续执行函数后面的同步代码
    console.log("b");

}
async function async2() {
   console.log( 'c');
}
console.log("d");
setTimeout(function () {
    console.log("e");
},0);
async1();
new Promise(function (resolve) {
    console.log("f");
    resolve();
}).then(function () {
    console.log("g");
});
console.log('h');
// 谁知道为啥结果不一样？？？？？？？？？？？？？
// 直接在控制台中运行结果：      d a c f h g b e
// 在页面的script标签中运行结果：d a c f h b g e

13. js中事件代理：

  <ul id="ui-test">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
  </ul>

  <script>
  document.addEventListener('DOMContentLoaded', function(event) {
  var oUL = document.querySelector('#ui-test')
  // var oLI = document.querySelectorAll('#ui-test > li')
  // for (var i = 0, len = oLI.length; i < len; i++) {
  //   console.log(oLI[i]);
  //   oLI[i].addEventListener('click', function() {
  //     console.log(this.innerHTML)
  //   })
  // }

  // 代理模式
  oUL.addEventListener('click', function(ev) {
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if (target.nodeName.toLowerCase() === 'li') {
      console.log(target);
      console.log(target.innerHTML)
    }
  })
});
  </script>

14. js实现数组去重怎样实现？

• 1、创建一个临时数组来保存数组中已有的元素
• 2、使用哈希表存储已有的元素
• 3、使用 indexOf 判断数组元素第一次出现的位置是否为当前位置
• 4、先排序再去重
• 5、使用 Set

找出数组中的最大值

• reduce

var arr = [6, 4, 1, 8, 2, 11, 3];
function max (prev, next) {
    return Math.max(prev, next)
}
console.log(arr.reduce(max));

• apply

var arr = [6, 4, 1, 8, 2, 11, 3];
console.log(Math.max.apply(null, arr)); // 11

• ES6

var arr = [6, 4, 1, 8, 2, 11, 3];
function max (arr) {
    return Math.max(...arr);
}
console.log(max(arr));

打乱数组的方法

var arr = [];
for(var i = 0; i < 100; i++) {
    arr[i] = i;
}
arr.sort(function() {
    return 0.5 - Math.random();
})
console.log(arr)

数组扁平化

var arr = [1, [2, [3, 4]]]
function flatten(arr) {
    while(arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }

    return arr;
}

console.log(flatten(arr)); // [1, 2, 3, 4]

简单的字符串模板

var TemplateEngine = function(tpl, data) {
    var re = /<%([^%>]+)?%>/g,
        match;
    while(match = re.exec(tpl)) {
        console.log('match0: ', match[0]);
        console.log('match1: ', match[1]);
        tpl = tpl.replace(match[0], data[match[1]])
    }
    return tpl;
}

var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.<p>';
console.log(TemplateEngine(template, {
    name: 'ly2011',
    age: 16
}))

函数函数柯里化

函数柯里化：在一个函数中首先填充几个参数（然后再返回一个新函数）的技术称为柯里化(Currying)。

• 通用的柯里化方法

// 通用的函数柯里化构造方法
function curry(fn) {
  // 新建 args 保存参数，注意，第一个参数应该是要科利华的函数，所以 args 里面去掉第一个
  var args = [].slice.call(arguments, 1);

/*  // 新建 _fn 函数作为返回值
  var _fn = function() {
    // 参数长度为 0, 执行 fn 函数，完成该函数的功能
    if(arguments.length === 0) {
      return fn.apply(this, args)
    } else {
      // 否则，存储参数到闭包中，返回本函数
      [].push.apply(this, arguments);
      return _fn;
    }
  }

  return _fn;*/
  return function() {
    var newArgs = args.concat([].slice.call(arguments))
    return fn.apply(null, newArgs)
  }
}
function add() {
  return [].reduce.call(arguments, function(a, b) {
    return a + b;
  } )
}

function multiply() {
  return [].reduce.call(arguments, function(a, b) {
    return a * b;
  })
}
console.log(curry(add, 1, 2, 3, 4, 5)(1)) // 16
console.log(curry(multiply, 1, 2, 3, 4)(5)) // 120

• 简单的用法

function multiply(x, y) {
  if (y === undefined) {
    return function(z) {
      return x * z
    }
  } else {
    return x * y
  }
}

console.log(multiply(3, 4)); // 12
console.log(multiply(3)(4)); // 12

柯里化的作用

• 延迟计算
• 参数复用
• 动态创建函数

多个标签页之间通信（如何实现浏览器中多个标签页之间的通信？）

websocket协议、localstorage、以及使用 html5浏览器的新特性 SharedWorker。

请描述一下 cookies, sessionStorage 和 localStorage 的区别？

• cookie 是网站为了标示用户身份而储存在用户本地终端(Client Slide) 上的数据（通常经过加密）
• cookie 数据始终在同源的 http 请求中携带（即使不需要），既会在浏览器和服务器间来回传递
• sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

存储大小：

• cookie 数据大小不能超过 4k
• sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或 更大

有效时间：

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非浏览器主动删除数据。
• sessionStorage 数据在当前浏览器窗口关闭后自动删除
• cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

js实现循环 setTimeout输出 0, 1, 2, 3, 4

for(var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

结果为： 5,5,5,5,5

解决办法

• 第一种：闭包

for(var i = 0; i < 5; i++) {
  (function(j) { // j = i
    setTimeout(function() {
      console.log(j)
    }, 1000)
  })(i)
}

• 第二种：值类型传递

var output = function(i) {
  setTimeout(function() {
    console.log(i)
  }, 1000)
}

for(var i = 0; i < 5; i++) {
  output(i) // 这里传过去的 i 被复制了
}

• 第三种：es6 let

for(let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000);
}

如果要让0-4一秒一秒地输出来呢？

• 第一种：

for(var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j)
    }, 1000 * j ) // 这里修改 0-4 的定时器时间
  })(i)
}

第二种：

const tasks= []
const output = (i) => new Promise((resolve) => {
  setTimeout(() => {
    console.log(i)
    resolve() // 这里一定要 resolve, 否则代码不会按预期 work
  }, 1000 * i)
})
// 生成全部的异步操作
for(var i = 0; i < 5; i++) {
  tasks.push(output(i))
}
// 异步操作完成之后，输出最后的i
Promise.all(tasks).then(() => {
  setTimeout(() => {
    console.log(i)
  }, 1000)
})

• 第三种

// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

15. 谈谈对this的理解

1）this总是指向函数的直接调用者（而非间接调用者）
2）如果有new关键字，this指向new出来的那个对象
3）在事件中，this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window。

16. eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

17. ['1', '2', '3'].map(parseInt)答案是多少？

[1, NaN, NaN]

解析：

1. Array.prototype.map()
   array.map(callback[, thisArg])
   callback函数的执行规则
   参数：自动传入三个参数
   currentValue(当前被传递的元素)
   index(当前被传递的元素的索引)
   array(调用map方法的数组)

2. parseInt
   parseInt方法接收两个参数
   第三个参数['1', '2', '3']将被忽略。parseInt方法将会通过以下方式被调用
   parseInt('1', 0)
   parseInt('2', 1)
   parseInt('3', 2)

parseInt的第二个参数radix为0时，ECMAScript5将string作为十进制数字的字符串解析。
parseInt的第二个参数radix为1时，解析结果为NaN;
parseInt的第二个参数radix在2-36之间时，如果string参数的第一个字符（除空白以外），不属于radix指定进制下的字符，解析结果为NaN。
parseInt('3', 2)执行时，由于 '3' 不属于二进制字符，解析结果为 NaN。

18. 什么是闭包(closure)，为什么要用它？

闭包指的是一个函数可以访问另一个函数作用域中变量。常见的构造方法，是在一个函数内部定义另外一个函数。内部函数可以引用外层的变量；外层变量不会被垃圾回收机制回收。
注意：闭包的原理是作用域链，所以闭包访问的上级作用域中的变量是个对象，其值为其运算结束后的左后一个值。
优点：避免全局变量污染。
缺点：容易造成内存泄漏。

例子：

function makeFunc() {
  var name = 'Mozilla'
  function displayName() {
    console.log(name)
  }
  return displayName
}
var myFunc = makeFunc()
myFunc() // 输出Mozilla

myFunc变成一个闭包。闭包是一种特殊的对象。它由两部分构成： 函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。在我们的例子中，myFunc是一个闭包，由displayName函数和闭包创建时存在的 'Mozilla' 字符串组成。

19. JS延迟加载的方式有哪些？

defer和async、动态创建DOM方式、按需异步载入JS
defer: 延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。
async: 异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。

20. 什么是跨域问题，如何解决跨域问题？

21. 页面编码和被请求的资源编码不一致如何处理？

若请求的资源编码，如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为 charset="utf-8"或"gbk"。
比如：http://www.yyy.com/a.html 中嵌入了一个http://www.xxx.com/test.js
a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就需要在引入的时候

22. 渐进增强与优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

23. 在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

• 该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）
• 如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获
• 如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

24. 事件的代理/委托

• 事件委托是指将事件绑定目标元素到父元素上，利用冒泡机制触发该事件

优点：

• 可以减少事件注册，节省大量内存占用
• 可以将事件应用于动态添加的子元素上

缺点：

• 使用不当会造成事件在不应该触发时触发

26. javascript如何实现继承?

27. 给出一个字符串 'abfecg', 如何快速反转？

28.给出一个不存在重复元素的数组 [...'item'...], 如何最快速插入一个新元素 'itemNew'?

29. 说说普通函数与箭头函数的区别？

30. 说说循环数组和对象，你用过哪些方法？

• for

• forEach

• map

• filter

• some

对象循环:
for ... in

• every

31. 你对浏览器的兼容性有了解过吗?

32. 哪些操作会引起浏览器重绘(repaint)和重排(reflow), 延伸：重绘和重排谁更消耗性能？

• postion:absolute; left:100px;会不会引起？
• translateX:100px;会不会引起？
• getBoundingClientRect会不会引起？
• getClientWidth、getClientHeight会不会引起？

原理：

触发重排
页面布局和元素几何属性的改变就会导致重排
下列情况会发生重排

• 页面初始渲染
• 添加/删除可见DOM元素
• 改变元素位置
• 改变元素尺寸（宽、高、内外边距、边框等）
• 改变元素内容（文本或图片等）
• 改变窗口尺寸

以下属性或方法会刷新渲染队列

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• clientTop、clientLeft、clientWidth、clientHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• getComputedStyle()（IE中currentStyle）

减少重绘和重排的原理很简单：

• 元素脱离文档
• 改变样式
• 元素回归文档

如何在浏览器中查看页面渲染时间

HTTP

1、从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

主要过程是：
浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交户(DOMContentLoaded)->加载完成(load)

1. 在浏览器地址栏输入URL
2. 浏览器查看 缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
   1. 如果资源未缓存，发起新请求
   2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
   3. 检验新鲜通常有两个HTTP头进行控制 Expires 和 Cache-Control：
      • HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
      • HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器解析URL获取协议，主机，端口，path
4. 浏览器组装一个HTTP（GET）请求报文
5. 浏览器获取主机ip地址，过程如下：
   1. 浏览器缓存
   2. 本机缓存
   3. hosts文件
   4. 路由器缓存
   5. ISP DNS缓存
   6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
   1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
   2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   3. 客户端发送ACK=Y+1， Seq=Z
7. TCP链接建立后发送HTTP请求
8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11. 服务器将响应报文通过TCP连接发送回浏览器
12. 浏览器接收HTTP响应，然后根据情况选择 关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
    1. 主动方发送Fin=1， Ack=Z， Seq= X报文
    2. 被动方发送ACK=X+1， Seq=Z报文
    3. 被动方发送Fin=1， ACK=X， Seq=Y报文
    4. 主动方发送ACK=Y， Seq=X报文
13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14. 如果资源可缓存，进行缓存
15. 对响应进行解码（例如gzip压缩）
16. 根据资源类型决定如何处理（假设资源为HTML文档）
17. 解析HTML文档，构建DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
18. 构建DOM树：
    1. Tokenizing：根据HTML规范将字符流解析为标记
    2. Lexing：词法分析将标记转换为对象并定义属性和规则
    3. DOM construction：根据HTML标记关系将对象组成DOM树
19. 解析过程中遇到图片、样式表、js文件，启动下载
20. 构建CSSOM树：
    1. Tokenizing：字符流转换为标记流
    2. Node：根据标记创建节点
    3. CSSOM：节点创建CSSOM树
21. 根据DOM树和CSSOM树构建渲染树:
    1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
22. js解析如下：
    1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
    2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
    3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
    4. 当文档完成解析，document.readState变成interactive
    5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
    6. 浏览器在Document对象上触发DOMContentLoaded事件
    7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
23. 显示页面（HTML解析过程中会逐步显示页面）

安全

综合

1、如何进行网站性能优化

• content 方面

1. 减少 HTTP 请求：合并文件、CSS 精灵、inline Image
2. 减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名
3. 减少 DOM 元素数量

• server 方面

1. 使用 CDN
2. 配置 ETag
3. 对组件使用 Gzip 压缩

• cookie 方面

1. 减少 Cookie 大小

• css 方面

1. 将样式表放到页面顶部
2. 不使用 CSS 表达式
3. 使用 不使用 @import

• javascript 方面

1. 将脚本放到页面底部
2. 将 javascript 和 css 从外部引入
3. 压缩 javascript和css
4. 删除不需要的脚本
5. 减少 DOM 访问

• 图片方面

1. 优化图片：根据实际颜色需要选择色深、压缩
2. 优化 css 精灵
3. 不要在 HTML 中拉伸图片

渲染

• 浏览器渲染原理

如何提高webpack的编译速度？

• 版本升级
• 利用多核(happypack)
• 利用缓存(dll)
• 开发环境去掉组件懒加载、不压缩图片、不分离css文件

算法

• 冒泡排序

解析：
1. 比较相邻的两个元素，如果前一个比后一个大，则交换位置。
2. 第一轮的时候最后一个元素应该是最大的一个。
3. 按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。

function sort(elements) {
  for(var i = 0; i < elements.length - 1; i++) {
    for(var j = 0; j < elements.length - i - 1; j++) {
      if (elements[j] > elements[j + 1]) {
        var swap = elements[j];
        elements[j] = elements[j + 1];
        elements[j + 1] = swap;
      }
    }
  }
}

var elements = [3, 1, 5, 7, 2, 4, 9, 6, 10, 8];
console.log('before: ', elements)
sort(elements)
console.log('after: ', elements)

• 快速排序

解析：
快速排序是对冒泡排序的一种改进，第一趟排序时将数据分成两部分，一部分比另一部分的所有数据都要小。然后递归调用，在两边都实行快速排序。

function quickSort(elements) {
  if (elements.length <= 1) {
    return elements;
  }
  var pivotIndex = Math.floor(elements.length / 2);
  var pivot = elements.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
  for (var i = 0; i < elements.length; i++) {
    if (elements[i] < pivot) {
      left.push(elements[i])
    } else {
      right.push(elements[i])
    }
  }
  return quickSort(left).concat([pivot] , quickSort(right))
}

var elements = [5, 6, 2, 1, 3, 8, 7, 1.2, 5.5, 4.5]
console.log(quickSort(elements))

• 查找字符串中出现次数最多的字符和次数

例如：sdddrtkjsfkasjdddj中出现最多的字符是d,出现了6次

var str = "sdddrtkjsfkkkasjdddj";
var max = 0;
var char;

function Search(str) {
   var json = {};
   for (var i = 0; i < str.length; i++) {
       if (!json[str[i]]) {
           json[str[i]] = str[i];
       } else {
           json[str[i]] += str[i];
       }
   }

   for (var i = 0; i < str.length; i++) {
       if (json[str[i]].length > max) {
           max = json[str[i]].length;
           char = str[i];
       }
   }
   console.log('json: ', json)
   console.log("出现次数最多的字符是" + char + ",出现了" + max + "次")
}
Search(str);

• 计算数组中每个元素出现的次数

// 计算数组中每个元素出现的次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
var countedNames = names.reduce(function(allNames, name) {
  if(name in allNames) {
    allNames[name]++
  } else {
    allNames[name] = 1
  }
  return allNames;
}, {})
console.log(countedNames)

• for(var i=0,j=0;i<10,j<6;i++,j++) { sum = i+j }, sum值最后是多少？

var sum = 0;
for(var i=0,j=0;i<10,j<6;i++,j++) {
  sum = i+j
}
console.log(sum)

解析：
答案是: 10, 首先每次for循环的i和j值是相等的：
第一次：i=0, j =0; 符合条件, sum = i + j = 0;
第二次：i=1,j=1;符合条件, sum = i + j = 2;
第三次：i=2,j=2;符合条件, sum = i + j = 4;
第四次：i=3,j=3;符合条件，sum = i + j = 6;
第五次：i=4,j=4;符合条件, sum = i + j = 8;
第六次：i=5,j=5;符合条件,sum = i + j =10;
第七次：i=6,j=6;不符合条件（(这里需要注意，循环继续的判断依据以分号前的最后一项为准，即判断j<6符不符合条件）,循环结束。

注意：
这里值得一提的是 如果把条件i<10,j<6;改成i<6,j<10;
结果将完全不同，此时循环执行到j<10才会结束，此时sum=18。
参考地址

• 说下你所知道的排序方法？
  冒泡排序、快排、二分法、广度遍历、深度遍历...

情景题

如何限制用户在一定时间内（例如2~3s）重复点击按钮？

• 利用防抖/节流(推荐)
• 利用setTimeout定时器
• rxjs

平常你是如何保证前端代码质量的？

参考文档

1. 2018美团前端面试题
2. 2017前端面试题及答案总结
3. 【面试】2018前端常见问题整理
4. js十大排序算法
5. 前端面试之道
6. 在酷家乐做面试官的日子

1. mouseover 和 mouseenter 两个事件有何区别？

二者的区别是 mouseenter 不会冒泡(bubble)。

详细解析一下：

当两者绑定的元素都没有子元素时，两者的行为是一直的。但是当两者内部都包含子元素时，行为就不一样了。

在 mouseover 绑定的元素中，鼠标每次进入一个子元素就会触发一次 mouseover 事件，而 mouseenter 只会触发一次。

mouseover 事件对应 mouseout事件
mouseenter 事件对应 mouseleave 事件

demo:

    <style type="text/css" media="screen">
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        overflow: hidden;
    }

    .over {
        background-color: lightgray;
        padding: 20px;
        width: 40%;
        float: left;
    }

    .enter {
        background-color: lightgray;
        padding: 20px;
        width: 40%;
        float: right;
    }

    .over h2, .enter h2 {
      background-color: #fff;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="over">
          <!-- <h2 class="over-counter"></h2> -->
        </div>
        <div class="enter">
          <!-- <h2 class="enter-counter"></h2> -->
        </div>
    </div>
    <script type="text/javascript">
    function $(ele) {
        return document.querySelector(ele)
    }
    var x = 0,
        y = 0;
    var $over = $('.over');
    var $enter = $('.enter');
    $over.addEventListener('mouseover', function(e) {
        $over.innerText = ++x;
        // $('.over-counter').innerText = ++x;
    });
    $enter.addEventListener('mouseenter', function(e) {
        $enter.innerText = ++y;
        // $('.enter-counter').innerText = ++y;
    });
    </script>
</body>

2. 移动端的click时间行为与PC端有什么不同？如何屏蔽这个不同？

移动端的click事件会延迟300ms触发事件回调(只在部分手机浏览器上出现)。

解决办法：

引入 fastlick.js 来解决。它的原理是 fastlick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

3. Event对象中, target和currentTarget的区别？

currentTarget是当前事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素（事件代理对象上），而不是 event.target, event.target标识事件发生的元素。

有个简单的验证方法，你会在下面的例子中看到 e.currentTarget 一直返回的是 body元素，而e.target则随着你点击的位置的不同而变化。

<body>
    <ul id="test">
        <li>
            <ul class="enter-sensitive">
                <li>item 1-1</li>
                <li>item 1-2</li>
            </ul>
        </li>
        <li>
            <ul class="enter-sensitive">
                <li>item 2-1</li>
                <li>item 2-2</li>
            </ul>
        </li>
    </ul>
    <script>
        document.body.addEventListener('click', function (e) {
            console.log(e.target, e.currentTarget)
        })
    </script>
</body>

4. 说一说什么是事件冒泡，如何阻止事件冒泡？如何阻止默认事件？

事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。

阻止事件冒泡的方法：

调用当前时间对象的 stopPropagation() 方法
IE10及其以下 cancelBubble = true

function cancelBubble(e) {
  var evt = e ? e : window.event;
  if (evt.stopPropagation) { // W3C
     evt.stopPropagation();
  }else { // IE
     evt.cancelBubble = true;
  }
}

阻止默认事件：

调用当前事件对象的 preventDefault() 方法
IE下：returnValue = false

function preventDefaultAction(event){
  var event = window.event || event;
  if(document.all){
    // 支持IE
    event.returnValue = false;
  }else{
    // IE不支持
    event.preventDefault();
  }
}

5. 是否了解移动端的点击穿透，原理及解决方法？

点击穿透是指在移动端，由于click事件延迟300ms触发，那么如果300ms内，页面显示变化（主要是指DOM的隐藏和显示）的话，会出现实际点击元素触发了touch事件，而300ms后该位置的实际元素又被再次触发了click事件的情况。

避免方法：
引入 fastlick.js

6. 是否了解事件委托？

事件委托是指利用 "事件冒泡"，止痛膏指定一个事件处理程序，来管理某一类型的所有事件。

7. 什么是事件循环？

8. css3中有哪些属性可以直接影响JS中的事件？（可以讲一下pointer-events和touch-action属性吗？）

参考文档

1. 关于事件的前端面试题总结
2. 前端面试题之mouseover和mouseenter的区别

Scroll Into View 滚动入视图内

在 Elements 标签内，查看页面元素的时候，如果当前这个元素不在视图内，可以通过这个方法让这个元素快速滚入视图中。

操作：

• 在 Elements 标签页中选择一个不在视图内的元素 -右击，选择 Scroll into view
  

Copy As Fetch 复制为 Fetch

在Network 标签下的所有请求，都可以复制为一个完整的Fetch` 请求的代码。
操作：

• 在 Network 标签中，选中一个请求
• 右击，选择 Copy --> Copy as Fetch
  

阻塞请求

在 Network 标签页下，选中一个请求，右击该请求，选择 Block request domain 或 Block request URL, 可以分别阻塞该请求在 domain 下的所有请求和该请求。

手动给元素添加一个点击事件监听

在debug的时候，有时候需要在元素的点击事件监听函数中，将该点击事件对象打印出来。有个更方便的方式，是可以直接在 Elements 标签页为页面元素添加事件监听事件。
操作：

• Elements 标签页中选中一个页面元素（选中之后，默认可以通过 $0 变量获取到该元素）
• 在Console标签页中，调用函数 monitorEvents, 输入两个参数，第一个是当前元素($0), 第二个是事件名(click)
• 按 Enter 后，当被选中的元素触发了点击事件之后，Console 标签页会将该点击事件对象打印出来
  

拖动页面元素

在 Elements 标签页，你可以拖动任何 HTML 元素，改变它在页面中的位置。
操作：如下图。

DOM 断点调试

基本上大家都会用JavaScript 的断点调试，但是应该很多人不知道 DOM 节点也可以进行断点调试。
Chrome DevTools 提供了三种针对 DOM 元素的断点调试：子元素改变时、属性改变时和元素被移除时。
操作：

• 在Elements标签页，选中一个元素
• 右击，选择Break on --> subtree modifications (或 attribute modifications 或 node removal)
  

截屏

在新版本的 Chrome中，提供了一个截图的 API,你可以将整个页面截图或者截取部分页面元素，且截取的图片尺寸跟浏览器当前视图中要截取的内容所占尺寸一致。截图输出的是 png 格式的图片，会自动通过浏览器下载到默认的目录下。现在有三种截取的方式：

截取页面部分元素的操作：

• CMD + SHIFT + P(windows 中用 CTRL + SHIFT + P) 打开命令菜单
• 在 Elements 标签页，选中要截取的页面元素
• 选中 Capture node screenshot
  

截取完整页面的操作

• CMD + SHIFT + P(windows 中用 CTRL+SHIFT+P)打开命令菜单
• 选择 Capture full size screenshot (不需要选择页面元素)

截取当前视图内的页面

• CMD + SHIFT + P(windows 中用 CTRL + SHIFT + P)打开命令菜单
• 选择 Capture screenshot (不需要选择页面元素)

缓存上一步操作的结果

在 Chrome DevTools 上运行 JavaScript 表达式的时候，可以使用 $_ 来获取到上一步操作的返回值。

Overrides 重写

在 Chrome DevTools 上调试 CSS 或 JavaScript, 修改的属性值在重新刷新页面时，所有的修改都会被重置。如果你想把修改的值保存下来，刷新页面的时候不会被重置，那就看看下面这个特性 Overrides 吧。 Overrides 默认是关闭的，需要手动开启，开启的步骤如下。
开启的操作：

• 打开 Chrome DevTools 的 Sources 标签页
• 选择 Overrides 子标签
• 选择 +Select folder for overrides， 来为 Overrides 设置一个保存重写属性的目录

下面是将多位数组转化为单一数组的三种不同方法：
对于此数组：

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

我们需要的结果是：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

• 解决方案1： 使用 concat() 和 apply()

var myNewArray = [].concat.apply([], myArray)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

• 解决方案2：使用 reduce()

var myNewArray = myArray.reduce(function (prev, curr) {
  return prev.concat(curr)
})
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

• 解决方案3: for循环

var myNewArray3 = [];
for (var i = 0; i < myArray.length; ++i) {
  for (var j = 0; j < myArray[i].length; ++j)
    myNewArray3.push(myArray[i][j]);
}
console.log(myNewArray3);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

• 解决方案4: 使用es6的展开运算符

var myNewArray4 = [].concat(...myArray)
console.log(myNewArray4)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

• 解决方案5: 使用es6自带的flat

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// 使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);

对于无限嵌套的数组请使用 Lodash 的 flattenDeep()。

现象描述

img标签在HTML5和HTML4.0.1的严格模式渲染的时候，下面会有几像素的空白，如图所示：

原因

图片默认是行内元素（inline-block），行内元素默认是baseline(第三条线)对齐的，和底部会有一段距离，如图所示：

解决方法

解决方法有很多种，根据场景需要选择合适的处理方式

1. img标签增加vertical-align:top

img {
  vertical-align: top;
}

2. img标签的父标签增加font-size:0;

.parent {
  font-size: 0;
}

3. img标签增加display:block;

img {
  display:block;
}

After fixed

参考资料

1. 著名的 img标签3像素问题
2. img下几像素空白产生原因

事件循环机制

js中存在一个叫做执行栈的东西。JS的所有同步代码都在这里执行，当执行一个函数调用时，会创建一个新的执行环境并压入到栈中开始执行函数中的代码，当函数中的代码执行完毕后将执行环境从栈中弹出，当栈空了，也就代表执行完毕。

这里有一个问题是代码中不只是同步代码，也会有异步代码。当一个异步任务执行完毕后会将任务添加到任务队列中。例如：

setTimeout(_ => {}, 1000)

代码中 setTimeout 会在一秒后将回调函数添加到任务队列中。事实上异步队列也分两种类型：微任务、宏任务。

微任务和宏任务的区别是，当执行栈空了，会检查微任务队列是否有任务，将微任务队列中的任务依次拿出来执行一遍。当微任务队列空了，从宏任务队列中拿出来一个任务去执行，执行完毕后检查微任务队列，微任务队列空了之后再从宏任务队列中拿出来一个任务执行。这样持续的交替执行任务叫做 事件循环。

属于微任务(microtask)的事件有以下几种：

• Promise.then
• MutationObserver
• Object.observe
• process.nextTick

属于宏任务(macrotask)的事件有以下几种：

• setTimeout
• setInterval
• setImmediate
• MessageChannel
• requestAnimationFrame
• I/O
• UI交互事件

参考文档

1. 为什么Vue使用异步更新队列？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
 width: 0;
 height: 0;
 border-width: 20px;
 border-style: solid;
 border-color: transparent transparent red transparent;
}

[TOC]

1.指令

循环

循环数组

<!-- Vue1 这么写-->
<li v-for="item in items"> 第 {{$index}} 条: {{item.message}}</li>
<div v-for="item in items" track-by="id"></div>

<!-- Vue2 这么写 -->
<li v-for="(item, index) in items">第 {{index}} 条: {{item.message}}</li>
<div v-for="item in items" v-bind:key="item.id"></div>

循环对象

<!-- Vue1 这么写 -->
<li v-for="(key, value) in obj"></li>

<!-- Vue2 这么写 -->
<li v-for="(value, key) in obj"></li>

循环数字

<!-- Vue1 从 0 开始, Vue2 从 1 开始 -->
<span v-for="n in 10">{{n}}</span>

条件

<!-- 如果ok为false, 不输出在HTML中 -->
<div v-if="ok">Yes</div>
<div v-else>No</div>

<!-- 如果ok为false, 只是 display: none 而已 -->
<h1 v-show="ok">Hello!</h1>

2. 事件绑定

<button v-on:click="say('hi')">点击</button>

<!-- 简写 -->
<button @click="say('hi')">点击</button>

<!-- 传入 event 对象 -->
<button @click="say('hi', $event)">点击</button>

<!-- 阻止单击事件冒泡 -->
<button @click.stop="doSth">点击</button>

<!-- 阻止默认行为 -->
<button @submit.prevent="doSth">单击</button>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 按键修饰符: 回车才会执行 -->
<input @keyup.13="submit"><!-- 13 为 keycode -->
<input @keyup.enter="submit">
<!-- 支持的全部按钮为 enter, tab, delete, space, up, down, left, right 字母 -->

3. 表单的双向绑定

<input type="text" v-model="message">
<!-- 自定义选中值。否则选中为value值, 不选为空 -->

<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b"
>

4. 绑定属性

<div v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

<!-- classArr是一个数组 -->
<div v-bind:class="classArr"></div>

<!-- 简写 -->
<div :class="{ 'class-a': isA, 'class-b': isB }"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<img :src="imgSrc">
<a :href="baseURL + '/path'"></a>

在 Vue2 中, 如果属性值是变量, 必须用绑定属性的写法。

<!-- wrong -->
<img src="{{imgSrc}}">

<!-- right -->
<img :src="imgSrc">

5. 避免闪烁: v-cloak

[v-cloak] {
  display: none;
}

<div v-cloak>
{{message}}
</div>

不会显示 <div> 的内容, 直到编译结束。

6. 单向绑定

单向绑定的意思是, 即使绑定变量的值发生变化, 显式的内容仍旧就是最初绑定时候的值。

<!-- Vue1 这么写 -->
<span>This will never change: {{* msg}}</span>

<!-- Vue2 不支持 -->

7. 输出HTML

<!-- Vue1 这么写-->
<div>{{{ raw_html }}}</div> <!-- {{}} 中的 HTML 内容会转化为纯文本 -->
<!-- 或者 -->
<div v-html="raw_html"></div>


<!-- Vue2 这么写 -->
<div v-html="raw_html"></div>

8. 计算属性

<div id="demo">{{ fullName }}</div>

new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

9. 自定义指令

Vue.directive('my-directive', {
  bind: function () {
    // 准备工作
    // 例如, 添加事件处理器或只需要运行一次的高耗任务
    this.el; // 添加指令的元素
    this.vm.$get(name); // 或得该指令的上下文 ViewModel
    this.expression; // 指令的表达式的值
  },
  update: function (newValue, oldValue) {
    // 值更新时的工作
    // 也会以初始值为参数调用一次
  },
  unbind: function () {
    // 清理工作
    // 例如, 删除 bind() 添加的事件监听器
  }
})

<div v-my-directive="someValue"></div>

10. 监听数据变化

new Vue({
  data: {
    firstName: 'Foo'
  },
  watch: {
    firstName: function (val, oldVal) {}
  }
})

11. 过滤器

{{ msg | capitalize }} // 'abc' => 'Abc'

常见内置过滤器

capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。

Vue2 中把这些内置的过滤器都删除了。

自定义过滤器

Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})

<!-- 'hello' => 'before hello after' -->

<!-- Vue1 这么写 -->
<span v-text="message | wrap 'before' 'after'"></span>

<!-- Vue2 这么写 -->
<span v-text="message | wrap('before', 'after')"></span>

this.$options.filters.filter名称 可以获取到具体的 filter

12. 生命周期相关的钩子函数

// Vue1
new Vue({
  created: function () {},
  beforeCompile: function () {},
  compiled: function () {},
  ready: function () {}, // DOM 元素已经加入到HTML中(可以在这里调用ajax获取数据)
  beforeDestroy: function () {},
  destroyed: function () {}
})

// Vue2
new Vue({
  created: function () {},
  mounted: function () {}, 相对于 Vue1 中的 ready
  beforeDestroy: function () {},
  destroyed: function () {}
})

13. 过渡效果

<!-- Vue1 这么写 -->
<div v-if="show" transition="my-transition"></div>

<!-- Vue2 这么写 -->
<transition v-bind:name="my-transition">
  <!-- ... -->
</transition>

/* 必须 */
.my-transition-transition {
  transition: all .3s ease;
}

/* .my-transition-enter 定义进入的开始状态 */
.my-transition-enter {}

/* .my-transition-leave 定义离开的结束状态 */
.my-transition-leave {}

14. 组件

Vue2 与 Vue1 的组件区别有点大。

Vue1

定义和调用组件

this.$parent 访问它的父组件。
this.$root 访问它的根组件。
this.$children 访问它的子组件。

15. 小技巧

Vue.set 和 Vue.delete

用于解决 不能检测到属性添加、属性删除的限制。

Vue.nextTick

// 修改数据
vm.msg = 'Hello'

// DOM 没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

Vue 在检测到数据变化时是异步更新 DOM 的。vm 上也有 this.$nextTick。

16. Vue 插件

vue-resource(Vue2推荐使用 axois)

拦截

Vue.http.interceptors.push(function(request, next) {
  var data = request.data;
  // 添加 url 前缀
  request.url = serverPrefix + request.url;
  // 加请求参数
  request.data.sessionid = localStorage.getItem('sessionid');

  next(function (response) {
    if(登陆超时){
      setTimeout(function () {
        router.go('/login');
      });
    } else {
      // modify response
      response.body = '...';
    }
  });
});

支持 Promise

Vue.http.post('/someUrl', [optinos])
  .then(function(res) {
    var data = res.data;
    return new Promise(function(resolve, reject) {
      if (!data.error) {
        reject()
      } else {
        resolve(data);
      }
    }.bind(this));
  })
  .then(function(res) {
    var data = res.data;
    return new Promise(function(resolve, reject) {
      Vue.http.post('/someUrl', data).then(function (res) {
        if(res.data){
          resolve();
        }
      });
    }.bind(this));
  }, failFn)
  .then(succFn, failFn);

• 垂直居中(absolute)

div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

• 水平垂直居中一(relative/absolute)

确定容器的宽高 宽500 高300 的层
设置层的外边距

div {
    position: relative;        /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;         /* 外边距为自身宽高的一半 */
    background-color: pink;         /* 方便看效果 */

}

• 水平垂直居中二(transform)

未知容器的宽高，利用 transform 属性

div {
    position: absolute;        /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;         /* 方便看效果 */

}

• 水平垂直居中三(flex)

.container {
    display: flex;
    align-items: center;         /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;        /* 方便看效果 */
}

参考文档

1. 用 CSS 实现元素垂直居中，有哪些好的方案？

用 ~ / + 兄弟选择器来美化表达元素

**选择器解析**
- `~` 选择器：查找某一个元素的后面的所有兄弟元素
- `+` 选择器：查找某一个元素的后面紧邻的兄弟元素

• switch 开关

• radio 美化

demo:

  <div class="container goods-info">
    <div class="row goods-tags">
      <div class="col-md-2 tag-label">选择版本</div>
      <div class="col-md-10">
        <div class="tags-select">
          <label class="tag-select">
            <input type="radio" name="version" value="1">
            <span class="name">全网通(2GB 16GB)</span>
          </label>
          <label class="tag-select">
            <input type="radio" name="version" value="2">
            <span class="name">全网通(3GB 32GB)</span>
          </label>
          <label class="tag-select">
            <input type="radio" name="version" value="3" disabled>
            <span class="name">联通版(2GB 16GB)</span>
          </label>
        </div>
      </div>
    </div>
    <div class="row goods-tags">
      <div class="col-md-2 tag-label">购买方式</div>
      <div class="col-md-10">
        <div class="tags-select">
          <label class="tag-select">
            <input type="radio" name="bye-type" value="1">
            <span class="name">官方标配</span>
          </label>
          <label class="tag-select">
            <input type="radio" name="bye-type" value="2">
            <span class="name">移动优惠购</span>
          </label>
          <label class="tag-select">
            <input type="radio" name="bye-type" value="3" disabled>
            <span class="name">联通优惠购</span>
          </label>
          <label class="tag-select">
            <input type="radio" name="bye-type" value="4">
            <span class="name">电信优惠购</span>
          </label>
        </div>
      </div>
    </div>
  </div>

.goods-info {
  margin-top: 50px;
  margin-bottom: 50px;

  .tag-label {
    padding-top: 7px;
  }

  .goods-tags {
    margin-top: 2rem;
  }
}

.tags-select {
  font-size: 0;

  > .tag-select {
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    position: relative;
    font-weight: normal;

    .name {
      display: block;
      line-height: 20px;
      padding: 8px 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }

    input[type='radio'] {
      position: absolute;
      opacity: 0;
      z-index: -1;

      &:checked + .name {
        border-color: #e3393c;
      }

      &:disabled + .name {
        background: #eee;
        color: #999;
        cursor: not-allowed;
      }
    }
  }
}

• checkbox 美化

用 font-size: 0 来清除间距

inline-block 的元素之间会受空白区域的影响，也就是元素之间差不多会有一个字符的空隙。你可以利用元素浮动float， 或者压缩html、清除元素间的空格来解决。但最简单有效的方法还是设父元素的 font-size 属性为 0。

demo:

* {
  box-sizing: border-box;
}

.items {
  font-size: 0;

  > .item {
    display: inline-block;
    width: 25%;
    height: 50px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
    background-color: #eee;
    font-size: 16px; // 不要忘了给子元素设置字号
  }
}

  <div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

用 boder 来绘制三角形

**原理：**
只需要将其他三个边的颜色设置为透明(`transparent` 或者 `rgba(0, 0, 0, 0)`)，就会只保留一个三角形了。

## 用垂直方向的 `padding` 来实现等比缩放的盒子

固定图片百分比是一个针对响应式布局很有效的方案。简单来说，就是根据容器的宽度，按照宽高比例自动计算出容器的大小，并且让容器内的如 `img` 等子元素自适应宽高。

假设图片的比例是 4:3:
图片父容器宽度 100%，父容器的高度百分比为：`100 * 3 / 4 = 75%`；图片 `absolute` 并且完全铺满父容器。

```scss
.image-aspect-ratio {
  width: 100%;
  position: relative;
  padding-top: 75%;

  > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

 <figure class="image-aspect-ratio">
    <img src="http://via.placeholder.com/640x384">
 </figure>

用 pointer-event 来禁用事件

pointer-event 属性更像是一个 JavaScript 事件，利用该属性，可以做以下事情：

• 阻止任何点击动作的执行
• 使链接显示为默认光标(cursor: default)
• 阻止触发 hover 和 active 状态
• 阻止 JavaScript 点击事件的触发

// 使用该类，任何点击事件将无效
.disabled { pointer-events: none;} 

用max-width来防止图片撑破容器

img {
    display: inline-block;
    max-width: 100%;
}

未知高度容器的多种垂直居中方法

在已知父子高度的情况下，实现垂直居中是很容易的事。margin、padding、absolute + 负margin，甚至 line-height 都是可行的方案。

这里主要介绍在父容器高度固定，子容器高度自适应的情况下，来实现其垂直居中于父盒子的几种方案。

html结构：

  <div class="container-fluid">
    <div class="row">
      <!-- :before -->
      <div class="col-md-6">
        <div class="vh-modal vh-modal-1">
          <div class="vh-modal-content">
            <h3 class="vh-modal-title">模态框</h3>
            <div class="vh-modal-body">
              <h4>（伪）元素占位</h4>
              <p>使用（伪）元素占位法可以实现子元素在父元素上的垂直居中，然后利用父元素设置
                <code>text-align: center</code>实现水平居中，这是一种有效的实现水平垂直居中的方案</p>
            </div>
            <div class="vh-modal-foot">
              <button class="btn btn-primary">确定</button>
            </div>
          </div>
        </div>
      </div>

      <!-- transform -->
      <div class="col-md-6">
        <div class="vh-modal vh-modal-2">
          <div class="vh-modal-content">
            <h3 class="vh-modal-title">模态框</h3>
            <div class="vh-modal-body">
              <h4>absolute + transform</h4>
              <p>
                <span>利用
                  <code>absolute</code>绝对定位和css3的
                  <code>transform</code>位移属性配合，也可以实现子元素在父元素上的水平垂直居中。但是，如果子元素已经在高度上超过视窗高度，那它的顶部会被浏览器窗口裁掉。</span>
              </p>
            </div>
            <div class="vh-modal-foot">
              <button class="btn btn-primary">确定</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <!-- table -->
      <div class="col-md-12">
        <div class="vh-modal vh-modal-3">
          <div class="vh-modal-cell">
            <div class="vh-modal-content">
              <h3 class="vh-modal-title">模态框</h3>
              <div class="vh-modal-body">
                <h4>table-cell</h4>
                <p>
                  利用div模拟table属性，也是一种很实用的实现子元素垂直居中的方法，确定是table的不可控属性以及要给子元素再包裹一层父元素
                </p>
              </div>
              <div class="vh-modal-foot">
                <button class="btn btn-primary">确定</button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="row">
      <!-- flex -->
      <div class="col-md-6">
        <div class="vh-modal vh-modal-4">
          <div class="vh-modal-content">
            <h3 class="vh-modal-title">模态框</h3>
            <div class="vh-modal-body">
              <h4>flex</h4>
              <p>
                在移动端中优先推荐
                <code>flex</code>方案，目前，除了部分机型的UC浏览器，
                <code>flex</code>在手机浏览器中已经得到了很好的支持。
              </p>
            </div>
            <div class="vh-modal-foot">
              <button class="btn btn-primary">确定</button>
            </div>
          </div>
        </div>
      </div>

      <!-- flex+margin:auto -->
      <div class="col-md-6">
        <div class="vh-modal vh-modal-5">
          <div class="vh-modal-content">
            <h3 class="vh-modal-title">模态框</h3>
            <div class="vh-modal-body">
              <h4>flex+margin:auto</h4>
              <p>
                当子元素处于
                <code>flex</code>盒模型中，仅仅给子元素设置一个
                <code>margin:auto</code>的属性也完全可以实现水平和垂直方向的垂直居中，很神奇对吧？
              </p>
            </div>
            <div class="vh-modal-foot">
              <button class="btn btn-primary">确定</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

• (伪)元素占位方案（推荐）
  利用 （伪）元素和 display: inline-block 的方案来实现垂直居中。

.vh-modal-1 {
  text-align: center;
  font-size: 0;

  &::before,
  > .vh-modal-content {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
  }

  &::before {
    content: '';
    height: 100%;
  }
}

如上图中的 ::before 你也可以使用一个真实的元素代替。

• absolute + transform 方案

使用 absolute 决定定位子元素，并且设置其 top:50%;left:50%，然后再利用 css3 的 transform: translate(-50%, -50%); 设置负值偏移回来也是一种有效的垂直居中方案，但是要注意其兼容性以及不要将子元素置于父容器半个像素的位置上（如 500.5px），否则子容器会出现模糊。

.vh-modal-2 {
  > .vh-modal-content {
    // 尽可能的不要让该元素的宽度出现奇数，否则可能会导致模糊
    display: inline-block; // 为了自适应宽度，也可以固定宽度
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

transform 法还有一个缺点，就是当子元素容器高度超出视窗高度的时候，它会被直接截断（如下图），而不是想象中的随着浏览器滚动到顶部而滚动显示完全（模态框的头部被截掉了）。

• table-cell 方案
  使用div来模拟table的行为也可以实现垂直居中。缺点是要在子容器外层再包裹一个父元素vh-modal-cell用来模拟table-cell。

// table-cell
.vh-modal-3 {
  display: table;
  width: 100%;

  .vh-modal-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .vh-modal-content {
    display: inline-block;
  }
}

<div class="vh-modal vh-modal-3">
  <div class="vh-modal-cell">
    <div class="vh-modal-content">
       ...
    </div>
  </div>
</div>
<!-- 
模拟了table布局
<table style="width: 100%;">
  <tr>
      <td style="text-align: center; vertical-align: middle;">
          类似于直接使用table布局
      </td>
  </tr>
</table>
-->

• 基于 flex 的方案 强烈推荐

毫无疑问，flex 盒模型是最佳的实践方案。目前几乎所有现代浏览器都支持 flex 布局，尤其是移动端（部分机型UC浏览器效果太差）。基于 flex 盒模型的水平垂直居中有如下两种方案：

<div class="vh-modal vh-modal-4(5)">
          <div class="vh-modal-content">
            ...
          </div>
</div>

align-items & justify-content 方案

.vh-modal-4 {
  display: flex;
  align-items: center;
  justify-content: center;

  > .vh-modal-content {
  }
}

flex + margin 方案
这个方案是最神奇的，仅仅给子元素设置了 margin: auto; 属性，一切就这么发生了。

.vh-modal-5 {
  display: flex;
  margin: 0;

  > .vh-modal-content {
    margin: auto;
  }
}

用 counter 来模拟/装饰有序清单

类似于截图中这种多层级的数字，我们大概第一反应就是使用 JavaScript 循环列表，利用其 index 拼接而成的。事实上，仅仅使用 css 的 counter 属性也可以实现该功能，甚至实现起来更高效。

ol {
  counter-reset: decimal; /* 为每个ol元素创建新的计数器实例， 重置计数器成0 */
  list-style-type: none; // 去掉默认的list-style
  margin-left: 2rem;

  li {
    &::before {
      counter-increment: decimal; /* 只增加计数器的当前实例 */
      content: counters(decimal, '.') ' '; /* 显示计数器，并且为所有计数器实例增加以"."分隔的值 */
    }
  }
}

CSS计数器是CSS2.1中自动计数编号部分的实现。作为由CSS维护的变量，counter属性还有很多有趣的使用场景，具体就不展开了。请参考MDN上的 使用CSS计数器章节。

用 table-layout 来控制表格单元格宽度

你也许遇到过给表格设置了宽度，但是不起作用的问题。这是因为单元格的宽度是根据其内容进行调整的。刨根到底，是因为表格有个叫做 table-layout 的属性，其浏览器默认值是 auto 在作怪。当我们把这个值设置为 fixed 的时候，我们给 th/td 标签设置的宽度就起作用了。用法很简单：

table {
  table-layout: fixed;
  width: 100%;
}
![](https://img.smohan.net/9563fb79d019dcbc0e81875ca258c8ad.png?imageView2/1/interlace/1/q/100)

截图是设置table-layout: fixed;前后对比图，左边用蓝色标注的是默认行为的表格，右边是设置了table-layout: fixed;后的样式。显而易见的，默认情况下，单元格宽度受其内容约束。而设置了table-layout: fixed;后，其单元格宽度变得可控了。

.table {
  width: 100%;

  &.fixed {
    table-layout: fixed;
  }

  td.overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

  <div class="container-fluid">
    <!-- row -->
    <div class="row">
      <div class="col-md-6">
        <table class="table">
          <thead>
            <tr>
              <th width="10%">#</th>
              <th width="20%">用户</th>
              <th width="70%">内容</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td class="overflow">[email protected]@[email protected]</td>
              <td>通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式
                -- 例如应用了 .sr-only 类而隐藏的文本 -- 来表达出来</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-6">
        <table class="table fixed">
          <thead>
            <tr>
              <th width="10%">#</th>
              <th width="20%">用户</th>
              <th width="70%">内容</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td class="overflow">[email protected]@[email protected]</td>
              <td>通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式
                -- 例如应用了 .sr-only 类而隐藏的文本 -- 来表达出来</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>