高效的js,jquery语句写法

zzzddd
  • 2.1k
$("#check_order").on("click", function() {
    $(".merchant_page").hide();
    $(".cart_page").show();
});

$(".continue").on("click", function() {
    $(".merchant_page").show();
    $(".cart_page").hide();
});

$(".close").on("click", function() {
    $("#shade").hide();
});

请问各位如何写成比如像 jquery 插件那样的一些写法,比如像这样的 function(id){$("#"+id).on("click",function(){.....})} 等等,有什么教程或者有什么书关于这种的嘛?

谢谢各位了

回复
阅读 8.7k
4 个回答
✓ 已被采纳

美刀是个很重的函数,尽量其缓存结果

var $merchantPage = $(".merchant_page");
var $cartPage = $(".cart_page");
var $shade = $("#shade");
$("#check_order").on("click", function() {
    $merchantPage.hide();
    $cartPage.show();
});

$(".continue").on("click", function() {
    $merchantPage.show();
    $cartPage.hide();
});

$(".close").on("click", function() {
    $shade.hide();
});

代码要有语义,比如很明显例子里有类似切换页面的逻辑,有个名字会让代码可读性提高很多

var $merchantPage = $(".merchant_page");
var $cartPage = $(".cart_page");
var $shade = $("#shade");
$("#check_order").on("click", showCart);

$(".continue").on("click", showMerchant);

$(".close").on("click", closePage);

function closePage() {
    $shade.hide();
}
function showCart() {
    $merchantPage.hide();
    $cartPage.show();
}
function showMerchant() {
    $merchantPage.show();
    $cartPage.hide();
}

最后dom有个范围,有个闭包,有个chain,再加一行点睛的注释,代码就非常漂亮,主次分明了

//商品购买模块
(function($view) {
    var $merchantPage = $view.find(".merchant_page");
    var $cartPage = $view.find(".cart_page");
    var $shade = $view.find("#shade");

    $view
        .on("click", "#check_order", showCart)
        .on("click", ".continue", showMerchant)
        .on("click", ".close", closePage)
    ;

    function closePage() {
        $shade.hide();
    }

    function showCart() {
        $merchantPage.hide();
        $cartPage.show();
    }

    function showMerchant() {
        $merchantPage.show();
        $cartPage.hide();
    }

})($(document.body))

想要简化这段代码也不是不行,但其实没什么必要。
不应该为了简化而简化,掌握到什么程度就写到什么程度好了,完成任务还是最关键的。慢慢的经验多了自然就会积累出一些简化代码的方法、技巧。

$("#check_order, .continue").on("click", function() {
    $(".merchant_page, .cart_page").toggle();
});
$(".close").on("click", function() {
    $("#shade").hide();
});

关于看书,我建议多看看基础性的书,例如 《JavaScript权威指南》。万变不离其宗,基础扎实了才能更好的进行进一步的学习。

另外,经常翻翻常用的类库的文档也很有帮助。

多看看别人写的源代码,善于思考为什么这样写,多练习。

比如像这个注释写得很清楚的开源js

不懂的查阅资料,不放心就去官网说明多看看。

建议多使用javascriipt原生写 YOU MIGHT NOT NEED JQUERY

你知道吗?

宣传栏