高效的js，jquery语句写法

Question

$("#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(){.....})} 等等，有什么教程或者有什么书关于这种的嘛？

谢谢各位了

Answer 1

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

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

Answer 2

可能是我前端能力有限，我觉得你写成这样子也没什么，毕竟这些是没法整合在一起的逻辑代码。推荐书的话：

• 《锋利的jQuery》
• 《jQuery基础教程（第四版）》
• 《编写可维护的JavaScript》
• 《高性能JavaScript》

以上；另外，推荐使用CoffeeScript。

Answer 3

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

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

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

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

Answer 4

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

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

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

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