jquery 实践总结

2023-08-21 20:39:04

Ready事件

对DOM操作之前需要监听页面加载进度，应当在页面加载完成之后再执行DOM编辑操作。

    $(document).ready(function(){

        ...

    });

或者

    $(function(){

        ...

    });

选择器

1.优先使用原生方法
var el = document.getElementById("element");
2.优先使用id选择器
性能顺序：ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

    //性能从上到下递减

    $("#element")

    $("input")

    $(".element")

    $("[type=submit]")

    $(":hidden")

3.id选择器（getElementById），标签选择器(getElementsByTagName)都有原生方法因此速度很快，类选择器在除了IE6-8之外的主流浏览器都有原生方法（getElementsByClassName）。

var foo = document.getElementById("foo");

var input = document.getElementsByTagName("input");

//IE6-8不支持类选择器

var bar = document.getElementsByClassName("bar");

4.对没有id的元素检索，尽量采用路径最短的祖先元素id作为默认的搜索范围，并采用纯类选择器或者标签选择器。

样式表操作

对一个对象应用多个样式的时候，应尽量使用addClass/removeClass方法，避免多次操作该对象。

var $element = $("#element");

$element.css("width","200px");

$element.css("height","300px");

$element.css("background","#fff");

/*推荐写成这样：*/

.on{

   width:200px;

   height:200px;

   background:#fff;

}

var $element = $("#element");

$element.addClass("on");

选择器保存

如果对同一个元素进行多次操作，推荐将选择器缓存起来或者采用链式写法。

//性能较差

$("#element").click(function(){ });

$("#element").empty();

$("#element").show();

//推荐写法（缓存）

var $element = $("#element");

$element.click(function(){ });

$element.empty();

$element.show();

//推荐写法（链式）

$("#element").click(function(){

    //...

}).empty().show();

事件委托

javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。
当存在以下两种情况是，推荐使用时间委托的写法
　　•为DOM中的很多元素绑定相同事件；
　　•为DOM中尚不存在的元素绑定事件；

//比如，如果有100个td元素，那么这样写会绑定100次click事件

//性能较差

$("td").click(function(){

    //...

});

//推荐写成这样，只需1次将事件绑定在table上

//推荐写法

$("table").on("click","td",function(){

    //...

});

事件命名空间

如果可能尽量在绑定事件处理程序时使用一个命名空间，这样可以方便地取消绑定而不会影响其他绑定。

//事件绑定

$("#myLink").on("click.mySpecialClick", myEventHandler);

// 解除绑定

$("#myLink").off("click.mySpecialClick");

合并DOM操作

尽量减少或者合并对DOM的操作。

//性能较差

var i;

var $wrapper = $("#wrapper");

for(i = 0;i<100;i++){

    var html = "<div>"+i+"</div>";

    $wrapper.append(html);

}

//推荐写法

var i;

var $wrapper = $("#wrapper");

var html = "";

for(i = 0;i<100;i++){

    html += "<div>"+i+"</div>";

}

$wrapper.append(html);

JS原生方法

jQuery速度无法与原生的javascript方法相媲美。所以有原生方法可以使用的场合，尽量避免使用jQuery。

/*选择器*/

//性能较差

var id = $(this).attr("id");

//推荐写法

var id = this.id;

/*循环*/

//性能较差

$.each(arr,function(){

    ...

});

//推荐写法

for(var i = 0;i<arr.length;i++){

    ...

}

ajax

以下是标准ajax请求模板，事件处理推荐使用promise的写法。

//ajax模板

var successHandler = function(){

    //...

};

var failureHandler = function(){

    //...

};

var alwaysFunc = function(){

    //...

};

var jqxhr = $.ajax({

    url: url,

    type: "GET", // 默认为GET,你可以根据需要更改

    data: {}, // 将请求参数放这里.

    dataType: "json", // 指定想要的数据类型

    statusCode: { // 如果你想处理各状态的错误的话

        404: handler404,

        500: handler500

    }

});

jqxhr.done(successHandler);

jqxhr.fail(failureHandler);

jqxhr.always(alwaysFunc);

码农公寓