前端基础汇总

JS语言的特性

解释型语言
单线程+事件驱动：事件循环、事件代理、事件委托
面向对象：原型链
函数作用域：作用域链
this
闭包
声明提前

this

深入探究 js 中无所不在的this
详解 JavaScript 中的 this
别再为了 this 发愁了：JS 中的 this 机制
JavaScript 中 call, apply, bind 方法的总结

闭包

大部分人都会做错的经典 JS 闭包面试题

原型链

JS 核心系列：浅谈 原型对象和原型链
从 proto 和 prototype 来深入理解JS对象和原型链
深入理解 Javascript 面向对象编程

作用域链

事件驱动

JS 事件循环详解
JavaScript 事件委托的技术原理
jquery 中 live、delegate、on 事件委托的一些区别

声明提前

其他

一道常被人轻视的前端 JS 面试题
深入剖析 JavaScript 的深复制
javascript 中的深拷贝和浅拷贝
JS 的整型你懂了吗？
JS 计算 0.1+0.2≠0.3，求解法？
Javascript 中 bind() 方法的使用与实现

性能优化

JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

跨域访问

JavaScript 跨域总结与解决办法
js 中几种实用的跨域方法原理详解
HTML5 安全：CORS（跨域资源共享）简介

requestAnimationFrame

HTML5探秘：用requestAnimationFrame优化Web动画
性能更好的js动画实现方式：requestAnimationFrame

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

Canvas

html5 canvas 详细使用教程
HTML5 Canvas 实战之刮奖效果

REST

怎样用通俗的语言解释什么叫 REST，以及什么是 RESTful？

设计模式

常用的 Javascript 设计模式
js 五种设计模式说明与示例
JS 设计模式：工厂模式

实例 - this+闭包

var name = 'window';
var object = {
    name: 'object',
    getName: function(){
        return function(){
            return this.name;
        }
    }
};

console.log(object.getName()());
//window

相当于执行了一个匿名函数，其上下文是全局

var name = 'window';
var object = {
    name: 'object',
    getName: function(){
        var that = this;
        return function(){
            return that.name;
        }
    }
};

console.log(object.getName()());
//object

需要注意的是，第二段代码中的 that 属于闭包的概念

实例 - input 标签 placeholder 的JQuery实现

$.fn.placeholder = function () {
    var ele = $(this);
    var defaultText = ele.data('placeholder') || 'Input placeholder here';
    var input = '';

    ele.val(defaultText);
    ele.focus(function () {
        if (input == '') {
            ele.val('');
        }
    }).blur(function () {
        if (ele.val() == '') {
            ele.val(defaultText);
        }
    }).change(function () {
        input = ele.val();
    });
};

实例 - 判断数组相等

var array1 = [1, 2, 3];
var array2 = [3, 2, 1];
var array3 = [1, 2, 3];

console.log(array1 == array3); //false

function arrayIsEq (array1, array2){
    return array1.sort().toString() == array2.sort().toString();
};

console.log(arrayIsEq(array1, array2)); //true

实例

document.getElementById("ul").onclick = function(e){
    e = e || window.event;
    var target = e.srcElement || e.target,
        allLi = document.getElementById("ul").getElementsByTagName("li");
    for(var i=0,len=allLi.length;i<len;i++){
        if(target == allLi[i]){
            allLi[i].style.background = "red";
        }
        else{
            allLi[i].style.background = "blue";
        }
    }
};

CSS相关

如何基于CSS实现垂直居中

BFC 神奇背后的原理
什么是BFC

CSS3 transition 属性
深入理解 CSS 过渡 transition

关于 Flex

Flex 布局教程

HTTP 相关

理解 HTTP 之常见的状态码
选择一个 HTTP 状态码不再是一件难事
HTTP 304 错误的详细讲解

熟悉的陌生人-HTTP

TCP协议中的三次握手和四次挥手
TCP三次握手详解及释放连接过程

GET 和 POST 有什么区别？及为什么网上的多数答案都是错的。

从输入 URL 到浏览器接收的过程中发生了什么事情？

常用协议及端口号