jqueryvar语句_高效的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))