$("#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(){.....})}
等等,有什么教程或者有什么书关于这种的嘛?
谢谢各位了
多看看别人写的源代码,善于思考为什么这样写,多练习。
比如像这个注释写得很清楚的开源js
不懂的查阅资料,不放心就去官网说明多看看。
建议多使用javascriipt原生写 YOU MIGHT NOT NEED JQUERY
可能是我前端能力有限,我觉得你写成这样子也没什么,毕竟这些是没法整合在一起的逻辑代码。推荐书的话:
- 《锋利的jQuery》
- 《jQuery基础教程(第四版)》
- 《编写可维护的JavaScript》
- 《高性能JavaScript》
以上;另外,推荐使用CoffeeScript。
想要简化这段代码也不是不行,但其实没什么必要。
不应该为了简化而简化,掌握到什么程度就写到什么程度好了,完成任务还是最关键的。慢慢的经验多了自然就会积累出一些简化代码的方法、技巧。
$("#check_order, .continue").on("click", function() {
$(".merchant_page, .cart_page").toggle();
});
$(".close").on("click", function() {
$("#shade").hide();
});
关于看书,我建议多看看基础性的书,例如 《JavaScript权威指南》。万变不离其宗,基础扎实了才能更好的进行进一步的学习。
另外,经常翻翻常用的类库的文档也很有帮助。
美刀是个很重的函数,尽量其缓存结果
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))