发表于 | 分类于

盒模型分为 IE 盒模型和 W3C 标准盒模型。

IE 盒模型和 W3C 标准盒模型的区别是什么？

W3C 标准盒模型：
属性width,height只包含内容content，不包含border和padding。

IE 盒模型：
属性width,height包含border和padding，指的是content+padding+border。

盒模型的设置

盒模型由 box-sizing 属性控制，默认值为 content-box ，即W3C 标准模型。box-sizing 设为border-box 则是IE 盒模型。

参考文献

发表于 | 分类于

在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。
看下图没有用div标签来布局：

header 元素

header 元素代表“网页”或“section”的页面。

footer 元素代表“网页”或“section”的页脚。

nav 元素代表页面的导航链接区域。用于定义页面的导航部分。

aside 元素

aside 元素被包含在 article 元素中作为主要内容的附属信息部分。在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏。

section 元素

section 元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

article 元素

article 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。
注释：article 元素不能成 address 元素的子元素。

address 元素

address 元素代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

hgroup元素

hgroup 元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内。

参考文献1
参考文献2

发表于 | 分类于

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
pop() 方法用于删除并返回数组的最后一个元素。

实现isValid() 函数

给定一个只包括’(‘，’)’，’{‘，’}’，’[‘，’]’的字符串，判断字符串是否有效。
有效字符串需满足：
1、左括号必须用相同类型的右括号闭合。
2、左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。
注意：空字符串可被认为是有效字符串。
示例1：

1
2
输入："()"
输出：true

示例2：

1
2
输入："()[]{}"
输出：true

示例3：

1
2
输入："(]"
输出：false

示例4：

1
2
输入："([)]"
输出：false

示例5：

1
2
输入："([{}])"
输出：true

思路如下

使用出栈入栈，就是来一个括号当条件满足是就在声明数组 stack 中进行 push，否则就在声明数组 stack 中进行 pop，等判断满足是就一起推出。直到最后，如果数组内还有剩余的元素，那就返回 false,如果为空，那就返回 true。
JS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var isValid = function(s) {
  let valid = true;
  const stack = [];
  const mapper = {
    '{': '}',
    '[': ']',
    '(': ')'
  }
    
  for(let i in s) {
    const v = s[i];
    if (['(', '[', '{'].indexOf(v) > -1) {
      stack.push(v);
    } else {
      const peak = stack.pop();
      if (v !== mapper[peak]) {
        return false;
      }
    }
  }

  if (stack.length > 0) return false;

  return valid;
};

参考文档1
参考文档2
参考文档3

发表于 | 分类于

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

1、浮动解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<section class="layout float">
  <style media="screen">
    .layout.float .left{
      float: left;
      width: 300px;
      background: red;
    }
    .layout{
      margin-top: 10px;
    }
    .layout.float .right{
      float: right;
      width: 300px;
      background: aqua;
    }
    .layout.float .center{
      background: yellow;
    }
  </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>浮动解决方案</h1>
      1.这是三栏布局中间部分
      1.这是三栏布局中间部分
      1.这是三栏布局中间部分
    </div>
  </article>
</section>

2、绝对定位解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position: absolute;
    }
    .layout.absolute .left{
      left: 0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center{
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right{
      right: 0;
      width: 300px;
      background: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>绝对定位解决方案</h1>
      1.这是三栏布局绝对定位中间部分
      2.这是三栏布局绝对定位中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

3、flexbox解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<section class="layout flexbox">
  <style>
    .layout.flexbox{
      margin-top: 120px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex: 1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
        <h1>flexbox解决方案</h1>
        1.这是三栏布局flexbox中间部分
        2.这是三栏布局flexbox中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

4、表格布局解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width: 100%;
      display: table;
      height: 100px;
    }
    .layout.table .left-center-right>div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background: red;
    }
    .layout.table .center{
      background: yellow;
    }
    .layout.table .right{
      width: 300px;
      background: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>表格布局解决方案</h1>
      1.这是三栏布局表格布局中间部分
      2.这是三栏布局表格布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

5、网格布局解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<section class="layout grid">
  <style>
    .layout.grid .left-center-right{
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background: red;
    }
    .layout.grid .center{
      background: yellow;
    }
    .layout.grid .right{
      background: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>网格布局解决方案</h1>
      1.这是三栏布局网格布局中间部分
      2.这是三栏布局网格布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

参考文献1
参考文献2

发表于 | 分类于

WEB应用的快速发展，前端对于本地存储一些数据也成为一种重要的需求，例如保存账户登录的用户名、密码等，既提高了用户体验，也省去了跟后端交互所需的步骤，还不影响网站的性能。

cookie是一种会话跟踪技术，用于在进行网页访问的时候，存储页面中的客户端的用户信息。

Session

session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构（也可能就是使用散列表）来保存信息。

cookie数据存放在客户的浏览器上，session数据放在服务器上。
cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
建议：将登陆信息等重要信息存放为SESSION；其他信息如果需要保留，可以放在cookie中。

localStorage

这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。

sessionStorage

和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。使用方法（和localStorage完全相同）。

localStorage 和 sessionStorage 的区别

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。
essionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。
参考文档1
参考文档2

发表于 | 分类于

简单介绍

1
2
3
var 是全局变量。
const 是常量，一般固定不会变的，就存为常量。
let 是变量，你设为了 let ，那就必须要使用这个变量，不然会出警告或者报错。

let 和 const 是 ES6 发布以后新的变量声明方式。
let 的用法类似于 var，但是 let 只在所在的代码块内有效，所以我们一般使用 let 替代 var。而 const 用来声明常量。
我们根据这几个方面来介绍 var、let和const的区别：变量提升、暂时性死区、重复声明、初始值和作用域。

一、变量提升

概述：变量可在声明之前使用。
var 命令经常会发生变量提升现象，在变量未声明之前可以使用，不会报错。在ES6 规定 let 和 const 命令不发生变量提升，使用 let 和 const 命令声明变量之前，该变量是不可用的，否则会报错。

二、暂时性死区

概述：如果在代码块中存在 let 或 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

三、重复声明

概述：指在相同作用域内，重复声明同一个变量。
let 和 const 命令声明的变量不允许重复声明；var 是允许重复定义的，但这样会导致后声明的同变量（变量名相同）覆盖掉前声明的同变量（变量名相同）。

四、初始值

由于 const 声明的是只读的常量，一旦声明，就必须立即初始化，声明之后值不能改变。

五、作用域

在 ES5 中只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
第一种场景，var 声明的内层变量可能会覆盖 var 声明的外层变量。

1
2
3
4
5
6
7
8
9
10
var tmp = new Date(); // 处于全局作用域

function f() {
  console.log(tmp); // 处于函数作用域
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

第二种场景，用来计数的循环变量泄露为全局变量。

1
2
3
4
5
6
var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}

console.log(i); // 输出 5

参考文献

发表于 | 分类于

作用域（scope），是指变量的生命周期（一个变量在哪些范围内保持一定值）。

  1. 全局作用域
  2. 函数作用域
  3. 块级作用域
  4. 词法作用域
  5. 动态作用域 动态作用域跟 this 引用机制相关

全局作用域

1
2
3
4
全局变量：
生命周期将存在于整个程序之内。
能被程序中任何函数或者方法访问。
在 JavaScript 内默认是可以被修改的。
  1. 显式声明：
    带有关键字 var 的声明。
  2. 隐式声明：
    不带有声明关键字的变量，JS 会默认帮你声明一个全局变量！！！

函数作用域：

函数作用域内，对外是封闭的，从外层的作用域无法直接访问函数内部的作用域！！！

1
2
3
4
5
function bar() {
  var testValue = 'inner';
}

console.log(testValue); // 报错：ReferenceError: testValue is not defined

块级作用域：

  1. 在 ES6 之前，是没有块级作用域的概念的。
1
2
3
4
5
for(var i = 0; i < 5; i++) {
  // ...
}

console.log(i); // 5

用 var 关键字声明的变量，在 for 循环之后仍然被保存这个作用域里。

  1. 如果想要实现 块级作用域 那么我们需要用 let 关键字声明！！！
1
2
3
4
5
for(let i = 0; i < 5; i++) {
  // ...
}

console.log(i); // 报错：ReferenceError: i is not defined

在 for 循环执行完毕之后 i 变量就被释放了，它已经消失了！！！

  1. 同样能形成块级作用域的还有 const 关键字：
1
2
3
4
5
if (true) {
  const a = 'inner';
}

console.log(a); // 报错：ReferenceError: a is not defined

let 和 const 关键字，创建块级作用域的条件是必须有一个 { } 包裹。

词法作用域：

当我们要使用声明的变量时：JS引擎总会从最近的一个域，向外层域查找。

1
2
3
4
5
6
7
8
9
10
11
12
13
var testValue = 'outer';

function foo() {
  console.log(testValue); // "outer"
}

function bar() {
  var testValue = 'inner';
  
  foo();
}

bar();

当 JS 引擎查找这个变量时，发现全局的 testValue 离得更近一些，这恰好和 动态作用域 相反。

动态作用域：

1
2
动态作用域，作用域是基于调用栈的，而不是代码中的作用域嵌套；
作用域嵌套，有词法作用域一样的特性，查找变量时，总是寻找最近的作用域；

同样是，词法作用域，同一份代码，如果是，动态作用域：

1
2
3
4
5
6
7
8
9
10
11
12
13
var testValue = 'outer';

function foo() {
  console.log(testValue);		// "inner"
}

function bar() {
  var testValue = 'inner';
  
  foo();
}

bar();

参考文献

发表于 | 分类于

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end）。原始数组不会被改变。

实现strStr() 函数。

给定一个 haystack 字符串和一个 needle 字符串，在 haystack 字符串中找出 needle 字符串出现的第一个位置（从0开始）。如果不存在，则返回-1。
示例1：

1
2
输入：haystack="hello"，needle="11"
输出：2

示例2：

1
2
输入：haystack="aaaaa"，needle="bbal"
输出：-1

JS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var strStr = function (haystack, needle) {
  if (needle === '') {
  	return 0;
  }
  const length = needle.length;
  let index = 0;
  while (index + length <= haystack.length) {
    const str = haystack.slice(index, index + length);
    if (str === needle) {
    return index;
    }
	index++;
  }
  return -1;
}
var haystack = "20190818";
var needle = "1953";

参考文献

发表于 | 分类于

在Vue.js页面中使用了Element组件，它会自动给我们生产虚拟DOM，我们无法设置高度100%；这时候可以利用javascript，来设置100%高度问题。
HTML代码如下：

1
2
3
<div>
  <div id="order-list">DIV高度为100%</div>
</div>

JS代码如下：

1
2
3
4
mounted: function () {
  var orderHeight = document.body.clientHeight;
  document.getElementById("order-list").style.height=orderHeight+'px';
},

参考文献:视口的宽高与滚动高度.

发表于 | 分类于

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

1
x => x * X

上面的箭头函数相当于：

1
2
3
function (x) {
  return x * x;
}

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
JS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var factory = function () {
  this.a = 'a';
  this.b = 'b';
  this.c = {
    a: 'a+',
    b: function () {
      return this.a
    }
  }
}
console.log(new factory().c.b());// a+

var factory = function () {
  this.a = 'a';
  this.b = 'b';
  this.c = {
    a: 'a+',
    b: () => {
      return this.a
    }
  } 
} 
console.log(new factory().c.b());// a

使用箭头函数简化排序时传入的函数：
JS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 正序
{
  var arr = [18, 8, 2019, 0];
  arr.sort((x, y) => {
   return x < y ? -1 : ((x = y) ? 0 : 1)
  })
  console.log(arr);// [0, 8, 18, 2019]
}

//倒叙
{
  var arr = [18, 8, 2019, 0];
  arr.sort((x, y) => {
    return x > y ? -1 : ((x = y) ? 0 : 1)
  })
  console.log(arr);// [2019, 18, 8, 0]
}

注：sort()方法用对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。
参考文献1
参考文献2