不知道大家干前端有没有碰到过这样的问题。。。。。。

$(document).ready(function() {
            // 公告轮播
            $("#slide").slide({
                mainCell: ".bd ul",
                effect: "topLoop",
                autoPlay: true,
                mouseOverStop: "true",
                pnLoop: "true"
            });

        // 返回顶部
        $("a", $(".backtop")).on("click", function(){
            $("html, body").animate({scrollTop: 0});
        });
        $('#goods-list').on('mouseover mouseout','li',function(){
            if($(this).hasClass('cur'))
            {
                $(this).removeClass('cur');
            }
            else
            {
                $(this).addClass('cur');
            }
        })

    });
        
  • 不知道大家在干前端的时候有没有碰到过这样的问题,对于产品那边需要的一些效果,我们有的时候又不得不写很多这样的一些有关展现效果方面的代码,比如:

$('#div').click(function(){
    $(this).show();
    $(this).siblings('div').hide();
})
  • 就是类似于这种类型的代码,比如下拉菜单,当前添加一个什么样式,同级元素添加一个class之类的什么,我一只觉得这样的代码是有很大的优化价值的,难道像淘宝天猫
    他们那么大的网站,也会去写很多这样的代码吗? 那岂不是找死。 求大神指点迷津呀

阅读 3.6k
8 个回答

你无非就是关注代码重用功能而已,就你举的例子来说,绑定在class上不就可以让一大堆元素用了,为什么要用id?
你可以去看看bootstrap,借鉴一下他的思想,其实都大同小异。
比如说我有一类元素功能是点击某个元素,操控另一个元素的显示隐藏。

<span handle="toggle" target="#div1">按钮</span>
<div id="div1"></div>
$('[handle="toggle"]').on('click', function() {
    $($(this).attr('target')).toggle();
})

思想上大抵如此,解决更复杂的问题的话,实现的方法则多了去了。

反正我做活动的时候经常show()一个弹窗,然后hide()另外一个弹窗,没办法业务逻辑要求弹窗。。。

很好的思考。所以现在都是mv*框架。
不过该做的都还是要做的,所以根本问题就是要利用合适的技术来构建合理的目录结构。

可以共用的功能做成component

register到bower或者npm上

以后就是bower install, npm install

然后通过require、import、script标签引入使用

你所说的就是大量的DOM操作和事件绑定,当初也觉得这样的代码太丑陋了,混杂不堪,项目不大归类好还凑合,大项目就得上框架的,angularJS就可以完美解决这个问题,且代码极其优美逻辑清晰,你会爱上的

别闹了~你真的注意代码优化、代码效率的话,就不应该用JQuery~

MVVM 在勾引你!

推荐问题
宣传栏