2016.11.24前端技术分享讲稿

逼死强迫症之代码规范（性能优化）

var关键字变量命名（利用$符号带头区分jQuery对象与HTML DOM对象）

var a = 0,
    $loading = $('#loading'),
    $body = $('body');

多次操作DOM对象缓存为变量

//不好的写法
$('#loading').html("loading...");
$('#loading').fadeIn();

//提升性能的写法
var $loading = $('#loading');
$loading.html("loading...");
$loading.fadeIn();

//再或者是
$loading.html("loading...").fadeIn();   //链式

逻辑判断表达式

if(!$a) {
    $a = $('#a');
}
//高性能 + 精简
$a = $a || $('#a');

jQuery选择器

//老生常谈
//不要使用class选择器
//不要使用class选择器
//不要使用class选择器(重要的事情说三遍)

var a = $("span#a");
var b = $("#a #b"); //性能非常非常的差，而且没有必要(会遍历前一个节点)

慎重操作DOM

//一次性的DOM渲染
var list = '
';
for (var i = 1; i < 100; i++) {
    list += '
' + i + '
';
}
list += '
';
$('body').append(list);

// 多次重复的DOM渲染(不要这样写！)
$('#header').append('
');
for (var i = 1; i < 100; i++) {
    $('#list').append('
' + i + '
');
}

慎重使用全局变量，少用attribute存数据，data()方法附加数据（某前端live讲到数据存取性能时候提到，但是并没有找到具体性能指标）

//项目中多数使用attr存取数据

//采用jQuery的内部函数data()来存储状态
$('#a').data('key', 'value'); //存储
$('#a').data('key'); //调用

各种兼容坑坑坑（项目经验）

神奇的safari兼容

safari的new Data()只能识别"xxxx/xx/xx"，不能识别"xxxx-xx-xx"

神奇的获取窗口位置兼容写法

var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;
ver topY = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;

神奇的Firefox兼容

window.event不能用！而且没有removeNode方法，只能使用node.parentNode.removeChild(node)

操作目录树的时候被坑过。

迷之手机端video对象（iOS兼容）

之前iOS操作video对象（设置display:none时不会隐藏弹出的播放窗口，只会隐藏页面上的video节点），但是目前用户反馈弹出的播放窗口也会隐藏了！（还未找到有人出现相同问题）

题外话

​ 之前写代码碰到瓶颈期，不知道怎么才能提升；有时候还会被项目进度逼着走，不得以的时间为了快速解决问题忽略了一些细节性问题，然而对于这些细节性问题的钻研，往往是提升能力的一大关键点。

​ “多拆一些好的轮子，而不是刻意去重新发明轮子”在我看来很有道理，为优秀的源码写扩展十分有利于能力的提升。（最近新写的几个umeditor组件与通用方法都写成文档放在git-flow上了，有兴趣的可以看看源码一起分享看法哟）

​ 共勉。

​ 什么才算是真正的编程能力（知乎）

作者 @郑小明
2017 年 1 月 5 日