×

BOSS:你的JS代码优化过吗?

作者:Terry2017.06.20来源:Web前端之家浏览:12172评论:1
关键词:JQueryJS

123.png

当我们完成一个项目的时候,是否去研究过自己的代码之问题,可能有些童鞋做完事情后,就翻篇了,也没去总结,这个习惯非常不好。建议大家空闲之时,去访问一些优秀的网站,研究下他们的代码,然后对比下自己写的代码,也许你会有新的发现哦,:-)。

今天主要想分享一些日常收集和总结的高效jq代码的编写技巧,希望能给大家带来帮助。

jQuery的编写原则

一、不要过度使用jQuery

1、jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使用jQuery。下面我来看一个简单的点击事件,代码如下:

$("a").click(function(){
    alert($(this).attr("id"));
});

上面代码实现效果没什么问题的,但是我们可以去优化下,让其变得更简介,如下:

$("a").click(function(){
    alert(this.id);
});

2、许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。由于后者不通过jQuery对象操作,所以相对开销较小,速度比较快。我们来看一个定义变量的简单例子。

var $text = $("#text");
var $ts = $text.text();

这是很多童鞋刚接触JS的时候的写法,其实有更好的方法:

var $text = $("#text");
var $ts = $.text($text);

这里是用了“$.text()”的内置函数,其他类似的还有“$.data()”等。对于这段代码,我们可以继续优化。如下:

var $text = $("#text"),
   $ts = $.text($text);

在定义很多变量的时候,我们只要写一个var,每个变量用逗号分开,最后一个以分号结尾,这样的写法是最优的。

二、缓存jQuery对象

查找DOM元素实际上有不小的内存开销,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。记住,永远不要让相同的选择器出现多次,我们来看个例子:

$("#top").find("p.classA");
$("#top").find("p.classB");

如果对于很大的项目,需要团段一起完成,要求我们的代码质量高,这样写会被BOSS骂死的。所以定义全局变量是必须的,优化如下:

var cached = $("#top");
cached.find("p.classA");
cached.find("p.classB");
这个只是一个很简单的例子。

三、少改动DOM结构

如果要多次改动DOM结构,就先把要改动的部分先取出来,改动完成后再放回去。这里的基本思想是在内存中建立你确实想要的东西,最后做一次最有效的更新DOM操作。

var top_100_list = [...], // 这里是100个字符串的数组  
$mylist = $("#mylist"); 
for (var i=0, l=top_100_list.length; i<l; i++){
    $mylist.append("<li>" + top_100_list[i] + "</li>"); // 100次DOM操作
}

这个是dom操作的一段代码,优化后让其运行更快,代码如下:

var top_100_list = [...],
$mylist = $("#mylist"),
top_100_li = ""; // 这个变量用来存储变化的字符串
for (var i=0, l=top_100_list.length; i<l; i++){
    top_100_li += "<li>" + top_100_list[i] + "</li>";
} 
$mylist.html(top_100_li);// DOM操作只有这么一次

四、命名规范

jQuery代码中不免夹杂有JS代码,如何让jQuery代码看起来严谨有序,规范自己的命名规则能更好的提高代码的阅读性。

1、函数名:

我们定义一个最简单的函数,这样来写


function getResultByUserId(){
   ...
}

函数名最好是遵循骆驼命名法,首字母小写,单词首字母大写,尽量短而且明确表达方法的用意,便于其他开发人员维护和使用。定义函数的方法不只是这一种了,还可以这样定义:

$.flushCartItemList = function() {
    isAjaxDate = true;
}

2、 参数名:

带参数的函数定义:


function method(recordIdx, recordVal){
    ...
}

同函数名,参数尽量用缩写。
命名就是要有意义,一些属性的缩写也很有讲究,例如:索引:idx;值:val;长度:len;名称:nm;等...

3、 变量名:

在定义变量名的时候,一般采用比较多的是下划线或者骆驼式,这个看团队规定了,反正不要用横杠写法就可以啦。


var user_id,
    user_list_tab,
    user_list_tr_1;

按照“命名_元素_索引”的规则。jQuery对象的变量名要加上“$”的前缀以区分javascript对象。

jQuery编写技巧:

一、选择器择

选择器是jQuery的基础,如何选择效率最高的选择器,先要了解各种选择器的性能差异。

① ID选择器和标签元素选择器:$("#ID"); $("Tag");

jQuery内部会自动调用浏览器的原生方法(getElementById();,getElementByTagName();),所以执行速度快。

② 类选择器:$(".Class");

jQuery会遍历所有DOM节点查找class=Class的DOM对象,所以执行速度较慢。

③ 伪类选择器和属性选择器:$(":Type"); $("[Attribute='Value']");

因为浏览器没有针对它们的原生方法,这两种选择器执行速度是最慢的。不过,不排除一些第三方浏览器增加了querySelector()和querySelectorAll()方法,因此会使这类选择器的性能有大幅提高。

二、链式写法

链式写法很常用了,也是优化jq代码的一部分,看个简单例子:

$("div").find("h3").eq(2).html("Hello");

采用链式写法时,jQuery会自动缓存每一步的结果,比非链式写法(手动缓存)要快。

三、高效循环

循环总是一种比较耗时的操作,javascript原生循环方法for和while,要比jQuery的“.each()”快。并且关于for循环,以下这种写法效率最高,一起来看段代码:

for (var i = 0, len = array.length; i < len; i++) {
  // alert(i);
}

先声明变量,再进行循环操作,效率远比遍历数组“for (var i in arr)”高得多,也比循环取得数组长度“for (var i = 0; i < arr.length; i++)”的效率高!

四、字符串拼接

字符串的拼接在开发中会经常遇到,用“+=”的方式来拼接字符串的效率非常的低,我们可以利用数组的“.join()”方法。

var array = [];for(var i = 0; i < 10000; i++){
    array[i] = "<input type='button' value='a'>";
}
document.getElementById("one").innerHTML = array.join("");

以前我很喜欢用数组的原生的方法“.push()”,其实直接用arr[i]或者arr[arr.length]的方式要快一点,但是差别不是很大。

五、页面加载

尽管$(function(){}); 确实很有用, 它是在所有DOM元素加载完成。如果你发现你的页面一直是载入中的状态,很有可能就是这个函数引起的。你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。

$(window).load(function(){
    // 页面完全载入(包括所有的DOM元素和JS代码)后才初始化的jQuery函数. 
});

一些特效的功能,例如拖放,视觉特效和动画,预载入隐藏图像等等,都是适合这种技术的场合。

总结

上面就是本次分享的内容,只是JS代码优化的一小部分,更多的还要大家平时多去总结。最后送大家几个字:多看、多学、多记笔记。如果您想了解更多的Web前端技术知识,持续关注我们吧,也可以加入我们的群:295431592,一起来交流吧!!!

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/codeYouhuaMethod.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • wjf2017 wjf2017  发布于 2017-06-20 13:59:36   回复该评论
  • 这个是精华的干货,是有点少了,希望多分享出来给昂们小白们~