Document

如果您发现错误，请一定要告诉我，拯救一个辣鸡（但很帅）的少年就靠您了！ ## CSS 部分 ### 两栏布局 > 要求：垂直两栏，左边固定右边自适应。

查看代码

```html Document

1-left

1-right

2-left

2-right

3-left

3-right

4-left

4-right

```

### 三栏布局 > 要求：垂直三栏布局，左右两栏宽度固定，中间自适应

查看代码

```html Document

1-left

1-middle

1-right

2-left

2-middle

2-right

3-left

3-right

3-middle

```

### 圣杯布局和双飞翼布局 > 和三栏布局要求相同，不过中间列要写在前面保证优先渲染。

查看代码

```html Document

圣杯-middle

圣杯-left

圣杯-right

双飞翼布局-middle

双飞翼布局-left

双飞翼布局-right

```

### 三角形 > 实现一个三角形常见题目，通过 `border` 实现

查看代码

```html 三角形

```

### 正方形 > 使用 css 实现一个宽高自适应的正方形

查看代码

```html

```

### 扇形 > 实现一个 1/4 圆、任意弧度的扇形有多种实现方法，这里选几种简单方法（我看得懂的）实现。

查看代码

```html Document

```

### 水平垂直居中 > 实现子元素的水平垂直居中

查看代码

```html 水平垂直居中

```

### 清除浮动 > 要求：清除浮动可以通过 `clear:both` 或 BFC 实现

查看代码

```html 清除浮动

```

### 弹出框 > 使用 CSS 写一个弹出框效果

查看代码

```html Document

页面内容

弹出框

```

### 导航栏 > 要求：一个 `div` 内部放很多水平 `div` ，并可以横向滚动。

查看代码

```html Document

item1

item2

item3

item4

item5

item6

item7

item8

item9

```

CSS 部分完，总结，Flex 无敌。 ## JavaScript 部分 ### 手写 bind、call 和 apply ```js Function.prototype.bind = function(context, ...bindArgs) { // func 为调用 bind 的原函数 const func = this; context = context || window; if (typeof func !== 'function') { throw new TypeError('Bind must be called on a function'); } // bind 返回一个绑定 this 的函数 return function(...callArgs) { let args = bindArgs.concat(callArgs); if (this instanceof func) { // 意味着是通过 new 调用的而 new 的优先级高于 bind return new func(...args); } return func.call(context, ...args); } } // 通过隐式绑定实现 Function.prototype.call = function(context, ...args) { context = context || window; context.func = this; if (typeof context.func !== 'function') { throw new TypeError('call must be called on a function'); } let res = context.func(...args); delete context.func; return res; } Function.prototype.apply = function(context, args) { context = context || window; context.func = this; if (typeof context.func !== 'function') { throw new TypeError('apply must be called on a function'); } let res = context.func(...args); delete context.func; return res; } ``` ### 实现一个继承 ```js // 参考 You Dont Know JavaScript 上卷 // 基类 function Base() { } // 派生类 function Derived() { Base.call(this); } // 将派生类的原型的原型链挂在基类的原型上 Object.setPrototypeOf(Derived.prototype, Base.prototype); ``` ### 实现一个 new ```js // 手动实现一个 new 关键字的功能的函数 _new(fun, args) --> new fun(args) function _new(fun, ...args) { if (typeof fun !== 'function') { return new Error('参数必须是一个函数'); } let obj = Object.create(fun.prototype); let res = fun.call(obj, ...args); if (res !== null && (typeof res === 'object' || typeof res === 'function')) { return res; } return obj; } ``` ### 实现一个 instanceof ```js // a instanceof b function _instanceof(a, b) { while (a) { if (a.__proto__ === b.prototype) return true; a = a.__proto__; } return false; } ``` ### 手写 jsonp 的实现 ```js // foo 函数将会被调用传入后台返回的数据 function foo(data) { console.log('通过jsonp获取后台数据:', data); document.getElementById('data').innerHTML = data; } /** * 通过手动创建一个 script 标签发送一个 get 请求 * 并利用浏览器对 ``` ### 路由实现 - history ```html history 路由

首页个人中心页帮助页

``` 还有一些稍复杂的可以写，有时间再补。