React极简教程

前端知识体系整理（不断更新）

2017-11-23  本文已影响99人  光剑书架上的书

前端知识体系整理（不断更新）

——人脑不是机器，记忆都会退化，我们需要文档辅助作知识沉淀

javascript

基本功

语言特性
类型转换：
'1'-0; // 0, equal to Number(1)

var n = 5;
console.log(n.toString(2)); // 快速进制转换
DOM操作（增、删、查、改、移、数据交换）
事件机制（IE vs W3C）
OOP（原型链、继承。。。）
函数式编程、作用域、闭包、this
foo(1, 2);
function foo(a, b, c) {
    console.log(arguments.length);//2 实际传入的参数
    console.log(foo.length);//3 期望传入的参数
}

function foo() {} // 函数申明
var foor = function foo() {};// 函数表达式

执行顺序：解析器会率先读取函数声明，所以在任何代码执行前函数申明可用

fn(2); // 4
function fn(n) {console.log(n);}
fn(2); // 4
function fn(n) {console.log(n*n);} //重载
fn(2); // 4
var fn = function(n) {console.log(++n);};// 函数表达式，按照申明的顺序执行
fn(2); // 3

function foo(x) {
    this.x = x;
}
foo(1); // 调用者是window，也可以window.foo()
console.log(window.x); // 1
var o = {};
o.foo = foo;
o.foo(2); //　调用者是o
console.log(o.x); // 2
console.log(window.x); // 1

这里有一篇详细的例子

Ajax（XMLHttpRequest vs ActiveXObject）

跨域问题

jQuery

可阅读yuanyan同学的jQuery编程实践

安全问题

css

性能优化（最佳实践）

HTML优化

CSS优化

.box {margin-top: 10px; margin-left: 5px; margin-bottom: 15px;} /* bad */
.box {margin: 10px 0 15px 5px;} /* better */

JavaScript优化

x = box.offsetLeft; // read
box.offsetLeft = '100px'; // write
y = box.offsetTop; // read
box.offsetTop = '100px'; // write

这个过程造成了两次的layout，可做如下改造：

x = box.offsetLeft; // read
y = box.offsetTop; // read
box.offsetLeft = '100px'; // write
box.offsetTop = '100px'; // write

box.style.width = '100px';
box.style.heihgt = '50px;';
box.style.left = '200px';

三个操作都会重新计算元素的几何结构，在部分浏览器可能会导致3次重排，可做如下改写：

var css = 'width: 100px; height: 50px; left: 200px;';
box.style.cssText += css;

var a = $('#box .a');
var b = $('#box .b');

可以缓存$('#box')到临时变量：

var box = $('#box');
var a = box.find('.a');
var b = box.find('.b');

var $P = Jx().UI.Pager.create();// 同样可以先缓存结果

jQuery性能优化

合理使用选择器
$('#box'); // document.getElementById | document.querySelector
$('div'); // document.getElementsByTagName

$('input[checked="checked"]'); // 比较快
$('input:checked'); // 较慢

$('#parent').find('.child'); // 最快
$('.child', $('#parent')); // 较快，内部会转换成第一条语句的形式，性能有一定损耗
$('#parent .child'); // 不如上一个语句块

$('div.foo .bar'); // slow
$('.foo div.bar'); // faster

$('.foo .bar .baz');
$('.foo div.baz'); // better
尽可能的少创建jQuery对象
$('div').click(function(e) {
    // 生成了个jQuery对象
    var id = $(this).attr('id');
    // 这样更直接
    var id = this.id;
});

<div id="user" class="none">
    <p class="name"></p>
    <p class="city"></p>
</div>

$('#user')
    .find('.name').html('zhangsan').end()
    .find('.city').html('shenzhen').end()
    .removeClass('none');

var box = $('.box');
box.find('> .cls1');
box.find('> .cls2');
避免频繁操作DOM
var $el = $('.box').detach();
var $p = $el.parent();
// do some stuff with $el...
$p.append($el);

// 性能差
$.each(arr, function(i, el) {
    $('.box').prepend($(el));
});
// 较好的做法
var frag = document.createDocumentFragment();
$.each(arr, function(i, el) {
    flag.appendChild(el);
});
$('.box')[0].appendChild(flag);
使用事件代理
$('ul li').on('click', fn);
// better
$('ul').on('click', 'li', fn);

使用事件代理（委托），当有新元素添加进来的时候，不需要再为它绑定事件，这里有demo可以查看效果。

整体优化

【参考文献】

上一篇 下一篇

猜你喜欢

热点阅读