三栏布局-圣杯、双飞翼以及其他

本文所指三栏布局为两侧宽度固定，中间宽度自适应的情况。

圣杯布局

圣杯布局通过父元素padding，子元素margin-left以及相对定位来实现。

情况1

html如下

1
2
3
4
5
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

css


查看代码

.content {
  padding: 0 200px;
  overflow: hidden;
}
.left,
.right,
.main {
  float: left;
  min-height: 100px;
  position: relative;
}
.left,
.right {
  width: 200px;
}
.left {
  background-color: blue;
  margin-left: -100%;
  left: -200px;
}
.right {
  background-color: red;
  margin-left: -200px;
  left: 200px;
}
.main {
  background-color: green;
  width: 100%;
}

情况2

html

1
2
3
4
5
<div class="content">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

css

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
33
34
.content {
  padding: 0 200px;
  overflow: hidden;
}

.left,
.right,
.main {
  float: left;
  min-height: 100px;
  position: relative;
}

.left,
.right {
  width: 200px;
}

.left {
  background-color: blue;
  margin-left: -100%;
  left: -200px;
}

.right {
  background-color: red;
  margin-left: -200px;
  left: 200px;
}

.main {
  background-color: green;
  width: 100%;
}
more >>

展开全文 >>

你知道快排吗

似乎生活中常常会遇到这种情况，你去一家公司面试，前面面的都挺好。面试官问你的，

  • vue和react在vdom上的异同
  • vue中key的作用，v-if不设置key的时候的异常，数组index作为key的异常
  • 介绍一下vue的diff算法，两个简单的假设
  • 未知高度时如何实现展开折叠动画
  • 如何实现固定表头
  • 实现一个轮播图组建（为什么大家都爱轮播图），动画效果实现

你对基础的了解很好，进阶知识也都答上来了，然后面试官说，”那么好吧，你知道快排吗。”

？？？我头发。我leetcode上刷了100题，你问我快排？好吧，我不会。

为了应对这种情况，本文列举几种快排算法仅供参考。

ES6

1
2
3
4
5
6
7
8
const quiksort = arr =>
  arr.length === 1
    ? arr
    : [
        ...quiksort(arr.filter(v => v < arr[0])),
        arr[0],
        ...quiksort(arr.filter(v => v > arr[0]))
      ]

普通

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const quiksort = arr => {
  let left = 0,
    right = arr.length - 1,
    x = left - 1;
  if (arr.length <= 1) return arr;
  while (left <= right) {
    if (arr[left] <= arr[right]) {
      x++;
      [arr[x], arr[left]] = [arr[left], arr[x]];
    }
    left++;
  }
  return [...quiksort(arr.slice(0, x)), arr[x], ...quiksort(arr.slice(x + 1))];
};

展开全文 >>

js正则相关

千分位符号

没有小数的情况

1
c("11111234".replace(/(\d)(?=(\d{3})+$)/g, "$1,"));  // 11,111,234

有小数的情况

1
c("11111234.22".replace(/(\d)(?=(\d{3})+\.)/g, "$1,"));  // 11,111,234.22

首字母大写

1
c("abc,sdggs".toLowerCase().replace(/^[a-z]/g, L => L.toUpperCase()));  // Abc,sdggs

替换字符串前几位

1
c("asdasfg123".replace(/(^\w{4})/g, "xxxx$`"));  // xxxxsfg123

展开全文 >>

关于防抖debounce和截流throttle

基本定义

debounce

去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 这是debounce的基本思想，在后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。

debounce的特点是当事件快速连续不断触发时，动作只会执行一次。 延迟debounce，是在周期结束时执行，前缘debounce，是在周期开始时执行。但当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行。

throttling

节流的策略是，固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。 节流策略也分前缘和延迟两种。与debounce类似，延迟是指 周期结束后执行动作，前缘是指执行动作后再开始周期。

throttling的特点在连续高频触发事件时，动作会被定期执行，响应平滑。

自己实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const debounce = (fn, time = 1000, immediate) => {
  let timer;
  return (...args) => {
    if (immediate) fn.call(this, ...args);
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn.call(this, ...args), time);
  };
};

const throttle = (fn, time = 1000) => {
  let startTime = new Date();
  return (...args) => {
    let timeNow = new Date();
    if (timeNow - startTime > time) {
      fn.call(this, ...args);
      startTime = new Date();
    }
  };
};

展开全文 >>

在我水了11种水平垂直居中方法之后，我终于明白了

老生常谈，水平垂直居中。为什么大家都爱水平垂直居中呢？

基本HTML

1
2
3
4
<div class="father">
  <div class="child">
  </div>
</div>

根据如上结构，通过css实现水平垂直居中。

绝对定位

利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高，使用数值或者百分比的方式进行定位。

方法1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

通过设置四向为0和margin: auto实现。

方法2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px -25px;
}

通过设置left和top使child左上角位置移动到中间，然后再移动自身宽高一般使child中心至中间。

方法3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-25px, -10px);
}

总结

这几种方法使用了绝对定位，margin或者transform来使子元素水平垂直居中，根据是否知道具体宽高来使用margin或者transform。

##弹性盒子

方法5

1
2
3
4
5
6
7
8
9
10
11
12
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  margin: auto;
}

方法6

1
2
3
4
5
6
7
8
9
10
11
12
13
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items:center;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
}

总结

这两种使用了flex弹性盒子布局来实现，随着浏览器兼容性的普及，弹性盒子也越来流行了。

table-cell

方法7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: table-cell;
  text-align:center;
  vertical-align: middle;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
}

使用了table-cell以及行内块元素来实现

行内元素

方法8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  text-align:center;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
  vertical-align: middle;
}
.father:after{
  content:'';
  width:0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

利用伪元素撑开高度垂直居中。

方法9

1
2
3
4
5
6
7
8
9
10
11
12
13
.father {
  width: 100px;
  line-height: 100px;
  background-color: grey;
  text-align: center;
}
.child {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: red;
  vertical-align: middle;
}

利用父元素line-height与inline-block子元素vertical-align垂直居中

相对定位

方法10

是不是有点疑惑为啥1、2、3都要用absolute来定位，用relative不行吗？

答案是可以的。😂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法11

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-25px, -10px);
}

总结

其实要想水还很再水出方法12、方法13等等，但是主要问题并不在这里，我觉得大家都喜欢问垂直居中问题的主要目的，还是想考验大家对基础css的了解，定位、布局、元素等，比如说相对布局和绝对布局，比如说块级元素和行内元素，比如说margin和padding，比如说百分比的参照者，比如说伪元素的运用，比如说transform用法等等。

最主要考察的是对这些基础实际运用能力和理解能力，并不是说面试官真的想知道你了解多少种垂直居中的方法，他只是想了解一下面试者css的基础罢了。

随手一个方法12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  margin: auto;
}
.father:before {
  content: "";
  width: 0;
  height: calc(50% - 10px);
  display: block;
  vertical-align: middle;
}

展开全文 >>

关于原型、原型链、和继承

似乎生活中常常会遇到这种情况，你去一家公司面试，前面面的都挺好，你觉得你对基础算法的了解很好，各种排序，红黑树，二叉树，深度/广度优先算法都答出来了，leetcode上的若干困难题目也都答上来了，然后面试官说，”那么好吧，介绍一下你对原型的看法吧。”

？？？我头发。我leetcode上刷了100天，我费劲心思研究了各种算法和数据结构，你叫我讲讲原型？

为了应对这种情况，本文通过如下代码展示下js的原型仅供参考。

上CODE

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
33
34
35
36
const c = (...v) => console.log(...v);
function People(name, age) {
  this.name = name;
  this.age = age;
}
/*你想这么写也没关系
const People = function(name, age) {
  this.name = name;
  this.age = age;
}
*/
People.prototype.info = function() {
  c(`My name is ${this.name}, my age is ${this.age}.`);
};  // 在原型上定义方法
function Student(name, age, school) {
  People.call(this, ...arguments); 
  this.school = school;
}
Student.prototype = People.prototype;  
// 这里推荐用new People()，直接指定People.prototype会污染People原型，如下结果
Student.prototype.constructor = Student;  //修正constructor指向
Student.prototype.talk = function() {
  c(`My school is ${this.school}`);
};  // 需要在改变了Student的原型后定义，否则无法获取到该方法
const xiaoD = new Student("xiaoD", 4, "小星星幼儿园");
xiaoD.info();
xiaoD.talk();
const somebody = new People("somebody", 22);
somebody.talk();
c(xiaoD.__proto__ === Student.prototype);
c(Student.__proto__ === Function.prototype);
c(Function.prototype === Function.__proto__);
c(Function.__proto__ === Object.__proto__);
c(Object.__proto__ === Function.prototype);
c(Object.prototype === Function.prototype.__proto__);
c(Object.prototype.__proto__ === null);

可以先猜一下是什么结果。。

好吧，不用猜了。结果如下

1
2
3
4
5
6
7
8
9
10
My name is xiaoD, my age is 4.
My school is 小星星幼儿园
My school is undefined
true
true
true
true
true
true
true

每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的原型对象（ prototype ）。该原型对象也有一个自己的原型对象( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。至于谁指谁，应该从上面的代码中就可以清晰的看出来了。这里注意的是只有函数中才有 prototype 属性。

类的继承

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
33
34
class People {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  info() {
    c(`My name is ${this.name}, my age is ${this.age}.`);
  }
}
class Student extends People {
  constructor(name, age, school) {
    super(...arguments);		// 继承属性
    this.school = school;
    this.talk = this.talk.bind(this);		// 绑定this
    /* 或者这样绑定
  	this.talk = () => {
      this.info();  // 箭头函数中的this在定义时绑定
      c(`My school is ${this.school}`);
    };
  	*/
  }
  talk() {
    this.info();
    c(`My school is ${this.school}`);
  }
  
}

const xiaoD = new Student("xiaoD", 4, "小星星幼儿园");
xiaoD.talk();
const { talk } = xiaoD;
talk();		// 不绑定this这里会报错
const somebody = new People("somebody", 22);
somebody.talk();  // 报错，父类中没有该方法

这里有三个注意点：

  • 父类中不会存在子类的方法（面向对象六大原则还记得吗，开闭，单一职责，依赖倒转，里氏置换，知道最少，接口隔离，合成聚合复用）
  • 上面代码中，talk方法中的this，默认指向Student类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined），从而导致找不到info方法而报错。解决办法如代码中所示。
  • 关于箭头函数的this指向问题，众所周知，普通函数的this是指向调用它的那个对象，所以普通函数可以通过apply，call，bind来改变this的指向。而箭头函数中的this是在定义函数的时候就已经确定了，指向外层作用域链中的普通函数，若没有，this则指向undefined。

PS

（那么问题又来了，手写个apply，call，bind的polyfill吧）

1
2
3
4
5
6
7
8
9
10
11
const obj = {
  name: "xiaoD"
};
const fn = function(...args) {
  c(this.name, ...args);
};
Function.prototype.myApply = function(obj, [...args]) {
  return this.call(obj, ...args);
};
fn.myApply(obj, ["真", "棒"]);		// xiaoD 真 棒
fn.apply(obj, ["真", "棒"]);			// xiaoD 真 棒

拿走，不谢。

1
2
3
4
5
6
7
8
9
10
11
12
13
Function.prototype.myApply = function(obj, [...args]) {
  obj.fn = this;
  let ret = obj.fn(...args);
  delete obj.fn;
  return ret;
}; 
Function.prototype.myBind = function(obj) {
  obj.fn = this;
  return function(...args) {
    return obj.fn(...args);
  };
};
// 偷偷贴在这里

再PS

知道了原型、原型链，那new一个对象的过程知道吗，能手写一个吗。

new一个对象的过程大概分成三步：

  • 新建一个空对象
  • 改变原型链指向，调用构造函数
  • 返回这个新对象
1
2
3
4
5
6
7
8
9
10
11
12
const myNew = function(fn, ...args) {
  let obj = {};
  obj.__proto__ = fn.prototype;
  let ret = fn.call(obj, ...args);
  return ret ? ret : obj;
};
function People(name, age) {
  this.name = name;
  this.age = age;
}
let xiaoD = myNew(People, "xiaoD", 4);
let xiaoY = new People("xiaoY", 4);			// 可以对比一下，看看两者区别

展开全文 >>

选择排序

似乎生活中常常会遇到这种情况，你去一家公司面试，前面面的都挺好，你觉得你对基础的了解很好，进阶知识也都答上来了，然后面试官说，”那么好吧，就写一个最简单的选择排序算法看看吧。”

？？？我头发。我leetcode上刷了100题，我费劲心思研究了冒泡算法的4种写法，你叫我写选择排序算法？

为了应对这种情况，本文列举一种选择排序算法仅供参考。

上代码

1
2
3
4
5
6
7
8
9
10
11
12
const select = arr => {
  for (let i = 0; i < arr.length; i++) {
    let minIndex = i;
    for (let j = i; j < arr.length; j++) {
      if (arr[j] < arr[minIndex]) {
        minIndex = j;
      }
    }
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
  }
  return arr;
};

主要思想就是选出最小的那个数放到开头，再选出剩下的最小的放到剩下的开头，依次下去。

图示

selection

展开全文 >>