1、两栏布局
要求：垂直两栏，左边固定右边自适应。
Document
1-left
1-right
2-left
2-right
3-left
3-right
4-left
4-right
2、三栏布局
要求：垂直三栏布局，左右两栏宽度固定，中间自适应
Document
1-left
1-middle
1-right
2-left
2-middle
2-right
3-left
3-right
3-middle
3、圣杯布局 和 双飞翼布局
和三栏布局要求相同，不过中间列要写在前面保证优先渲染。
Document
圣杯-middle
圣杯-left
圣杯-right
双飞翼布局-middle
双飞翼布局-left
双飞翼布局-right
4、三角形
实现一个三角形
常见题目，通过 border 实现
三角形
5、正方形
使用 css 实现一个宽高自适应的正方形
6、扇形
实现一个 1/4 圆、任意弧度的扇形
有多种实现方法，这里选几种简单方法（我看得懂的）实现
Document
7、水平垂直居中
实现子元素的水平垂直居中
水平垂直居中
8、清除浮动
要求：清除浮动
可以通过 clear:both 或 BFC 实现
清除浮动
9、弹出框
使用 CSS 写一个弹出框效果
Document
页面内容
弹出框
10、导航栏
要求：一个 p 内部放很多水平 p ，并可以横向滚动。
Document
item1
item2
item3
item4
item5
item6
item7
item8
item9
CSS 部分完，总结，Flex 无敌。
1、手写 bind、call 和 apply
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;
}
2、实现一个继承
// 参考 You Dont Know JavaScript 上卷
// 基类
function Base() {
}
// 派生类
function Derived() {
Base.call(this);
}
// 将派生类的原型的原型链挂在基类的原型上
Object.setPrototypeOf(Derived.prototype, Base.prototype);
3、实现一个 new
// 手动实现一个 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;
}
4、实现一个 instanceof
// a instanceof b
function _instanceof(a, b) {
while (a) {
if (a.__proto__ === b.prototype) return true;
a = a.__proto__;
}
return false;
}
5、手写 jsonp 的实现
// foo 函数将会被调用 传入后台返回的数据
function foo(data) {
console.log('通过jsonp获取后台数据:', data);
document.getElementById('data').innerHTML = data;
}
/**
* 通过手动创建一个 script 标签发送一个 get 请求
* 并利用浏览器对