高效的js，jquery语句写法

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

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))