当前位置：首页 > 资讯 > 技术文档

jquery高级编程的最佳实践详解

时间：2020-09-19 22:53 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery高级编程的最佳实践详解

加载jQuery 1.坚持使用CDN来加载jQuery，这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处，点此查看一些主流的jQuery CDN地址。

[url=#]$("#myLink").on("click", myEventHandler); // GOOD

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

$("#myLink").on("click.mySpecialClick", myEventHandler); // 不错 // 之后，让我们优雅地解除绑定 $("#myLink").unbind("click.mySpecialClick");

异步操作 1.直接用$.ajax()而表去用.getJson() 或 .get(),因为jQuery内部还是将其转为前者 2.表对HTTPS站点使用HTTP去发起请求，最好干脆就表指定（将HTTP或者HTTPS从你的URL中移除） 3.表在链接里面嵌参数，请使用专门的参数设置来传递

[u]复制代码[/u] 代码如下:

// 不易阅读的代码...
$.ajax({
    url: "something.php?param1=test1¶m2=test2",
    ....
});

// 更易阅读...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4.尽量指明数据类型以便你自己清楚要处理什么样的数据（见下方会提到的Ajax模板） 5.对于异步动态加载的内容，最好使用代理来绑定事件处理程序。这样的好处是对于之后动态加载的元素事件同样有效。你或许想了解更多

[u]复制代码[/u] 代码如下:

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

6.使用Promise模式。更多例子

[u]复制代码[/u] 代码如下:

$.ajax({ ... }).then(successHandler, failureHandler);

// 抑或
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

7.标准的Ajax模板一分。追寻根源

[u]复制代码[/u] 代码如下:

var jqxhr = $.ajax({
    url: url,
    type: "GET", // 默认为GET,你可以根据需要更改
    cache: true, // 默认为true,但对于script,jsonp类型为false,可以自行设置
    data: {}, // 将请求参数放这里.
    dataType: "json", // 指定想要的数据类型
    jsonp: "callback", // 指定回调处理JSONP类型的请求
    statusCode: { // 如果你想处理各状态的错误的话
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

动画与特效 1.保持一个始终如一风格统一的动画实现 2.紧遵用户体验，表滥用动画特效使用简洁的显示隐藏，状态切换，滑入滑出等效果来展示元素使用预设值来设置动画的速度'fast'，'slow'，或者400（中等速度）插件相关 1.始终选择一个有良好支持，完善文档，全面测试过并且社区活跃的插件 2.注意所用插件与当前使用的jQuery版本是否兼容 3.一些常用功能应该写成jQuery插件。一分jQuery插件的编写模板链式句法 1.除了用变量将jQuery选择器返回的结果保存，还可以利用好链式调用。

[u]复制代码[/u] 代码如下:

$("#myDiv").addClass("error").show();

2.当链式调用多达3次以上或代码因绑定回调略显复杂时，使用换行和适当的缩进来提高代码的可读性。

[u]复制代码[/u] 代码如下:

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

3.对于特别长的调用最好还是用变量保存下中间结果来简化代码。其他 1.使用对象字面量来传递参数

[u]复制代码[/u] 代码如下:

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // 糟糕：调用了三次attr
// 不错，只调用了一次attr
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2.表将CSS与jQuery杂揉

[u]复制代码[/u] 代码如下:

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // 不好
.error {/* 不错 */
    color: red;
    font-weight: bold;
}
$("#mydiv").addClass("error");

3.时刻关注官方Changelog，表使用摒弃了的方法。 4.适时地使用原生JavaScript。

[u]复制代码[/u] 代码如下:

$("#myId"); // 多少还是会逊色于...

全部评论(0)

上一篇：jQuery学习笔记之jQuery+CSS3的浏览器兼容性
下一篇：Jquery Ajax方法传值到action的方法

资讯排行榜
更多>>