前端基础汇总

JS语言的特性

this

闭包

原型链

作用域链

事件驱动

声明提前

其他

性能优化

跨域访问

requestAnimationFrame

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

Canvas

REST

设计模式

实例 - 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

实例 - 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
4000
];
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相关

关于 Flex

HTTP 相关