开发者社区> 问答> 正文

高效的js,jquery语句写法

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

谢谢各位了

展开
收起
云栖技术 2016-05-25 09:44:11 2000 0
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))
    2019-07-17 19:13:29
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载

相关实验场景

更多