javascript代码书写混乱

Question

比如这样的一个页面，里面有很多点击事件、对dom动态操作，我将js用对象封装，但发现越写越乱，有些功能和事件揉和在一起，当要修改维护时，修改的地方出现几处。请问怎么组织好？

    

var public = {
        init: function() {
            this.showEdit();
            this.showSubnav();
            this.musicHighLight();
            this.preview();
        },
        //编辑菜单切换
        showEdit: function() {
            var $panel = $(".m-panel li");
            $panel.click(function() {
                $panel.removeClass("active noborder");
                $(this).addClass("active noborder").prev().addClass("noborder");
                var tempClass = $(this).data("tempclass");
                $("." + tempClass).fadeIn().siblings().fadeOut();
            });
        },
        //主导航条
        showSubnav: function() {
            var $mainNav = $(".mainnav");
            var $mainLi = $mainNav.children("li");
            var $subNav = $mainNav.find(".subnav");
            var $subLi = $subNav.children("li");
            var $bgMusic = $(".g-bgmusic");
            $mainLi.on("click", function() {
                $(this).siblings().removeClass("active");
                $(this).toggleClass("active");
                var index = $(this).index();
                //高亮导航，显示隐藏模块
                if(index === 1) {
                    $bgMusic.slideUp();
                    if($bgMusic.css("display") == "block") {
                        $subNav.stop().delay(1000).slideToggle();
                    } else {
                        $subNav.stop().toggle();
                    }

                } else if(index === 2) {
                    $(this).addClass("active");
                    //复制当前页
                    $(".page").each(function() {
                        if($(this).hasClass("active")) {
                            if($(this).index() !== $(".page").length - 1) {
                                $(this).nextAll().each(function(index, value) {
                                    $(value).find(".wrap-num").get(0).innerHTML = parseInt($(value).find(".wrap-num").get(0).innerHTML) + 1;
                                })
                            }

                            var num = $(this).find(".wrap-num").html();
                            $(this).after($(this).clone(true)).removeClass("active");
                            $(this).next().find(".wrap-num").html(++num);
                        }
                    })
                } else if(index === 3) {
                    $subNav.slideUp();
                    if($subNav.css("display") == "block") {
                        $bgMusic.stop().delay(400).slideToggle();
                    } else {
                        $bgMusic.stop().slideToggle();
                    }
                } else {
                    $subNav.slideUp();
                    $bgMusic.slideUp();
                }

            });
            //点击提交按钮
            $(".wrap-submit").find("a").click(function() {
                $(".g-submit").css("height", $("body").height());
                $(".g-submit").fadeToggle();
                $(".g-submit").not(".m-submit").click(function() {
                    $(".g-submit").fadeOut();
                })
                $(".m-submit").click(function(event) {
                    event.stopPropagation();
                })
            })
            //10个模板点击事件
            $subLi.on("click", function() {
                //切换模板
                var temp = $(this).data("tempclass")
                $("." + temp).fadeIn().siblings().fadeOut();
                $subLi.removeClass("active");
                $(this).addClass("active");
            });
        },
        musicHighLight: function() {
            //歌曲种类高亮
            $(".m-bgmusic").find(".subnav").find("li").click(function() {
                $(this).addClass("active").siblings().removeClass("active");
            })

            //选择歌曲高亮
            $(".bgmusic li").click(function() {
                if($(this).index() == 0) {
                    $(".bgmusic li").removeClass("active")
                } else {
                    $(this).addClass("active").siblings().removeClass("active");
                }
            })
        },
        //预览区
        preview: function() {
            //预览区自适应高度
            var height = $(window).height() - $(".g-header").height() - 52;
            $(".m-preview").css("height", height);
            //高亮
            $(".m-preview").find(".page").find("img").click(function() {
                    $(this).parent().parent().addClass("active").siblings().removeClass("active");
                })
                //删除模板
            $(".m-preview").find(".btn-delete").click(function() {
                var $activeView = $(this).parent().parent()
                var index = $activeView.index();
                if(index == $(".m-preview").find(".page").length - 1) {
                    $activeView.prev().addClass("active")
                } else {
                    $activeView.next().addClass("active");
                    $activeView.nextAll().each(function(index, value) {
                        $(value).find(".wrap-num").get(0).innerHTML = parseInt($(value).find(".wrap-num").get(0).innerHTML) - 1;
                    })
                }
                $(this).parent().parent().fadeOut().remove();
            })
        },
    }
    public.init();
    //颜色色板模块
    var color = {
        init: function() {
            this.initColorBar();
            this.render();
        },
        initColorBar: function() {
            var color = ["fff", "000", "595959", "f14646", "e95731", "f6bb43", "8cc051", "3baeda", "36bc9b", "3baeda", "967bdc", "f22874", "abda3b", "7bdcab", "6a37ee", "3bda5d", "36bc9b", "40535a", "503b87", "7cd0f0", "da3bb3"];
            $.each(color.reverse(), function(index, value) {
                var $li = $("<li></li>");
                $li.css({
                    "background-color": "#" + value,
                }).prependTo(".square ul")
            });
        },
        render: function() {
            $(".wrap-color").each(function() {
                var self = this;
                var $square = $(self).find(".square");
                var $squareLi = $square.find("li");
                var $coloroption = $(self).find(".coloroption");
                //初始化透明度
                $(self).find("#opacity")[0].value = 0;
                $(self).find("#transparency").html("0%");
                //初始化颜色值
                $(self).find(".red")[0].value = 255;
                $(self).find(".green")[0].value = 255;
                $(self).find(".blue")[0].value = 255;
                //初始化所选颜色
                $(self).find(".bgcolorbar").css("background-color", "#fff");
                $squareLi.click(function() {
                        //获取颜色
                        var color = $(this).css("backgroundColor");
                        var opacity = Math.round((100 - $(self).find("#opacity")[0].value) / 10) / 10;
                        var rgba = color.slice(0, 3) + "a" + color.slice(3, -1) + ", " + opacity + ")"
                        var rgb = rgba.replace(/[rgba()\s]/g, '').split(",");
                        //设置滑块位置
                        $(self).find(".red")[0].value = rgb[0];
                        $(self).find(".green")[0].value = rgb[1];
                        $(self).find(".blue")[0].value = rgb[2];
                        //设置长条颜色
                        $(this).addClass("active").siblings().removeClass("active");
                        $(self).find(".coloroption").each(function() {
                            if($(this).hasClass("active")) {
                                $(this).next().css("background-color", color);
                                return;
                            }
                        })

                    })
                    //背景色、文字色、高亮色选项
                $coloroption.click(function() {
                        $coloroption.removeClass("active");
                        $(this).addClass("active");
                    })
                    //滑块滑动变色
                $(self).find("input[type=range]").change(function() {
                        //获取变化后颜色
                        var red = $(self).find(".red")[0].value;
                        var green = $(self).find(".green")[0].value;
                        var blue = $(self).find(".blue")[0].value;
                        var transparency = $(self).find("#opacity")[0].value;
                        var opacity = Math.round((100 - transparency) / 10) / 10;
                        var rgba = "rgba(" + red + "," + green + "," + blue + "," + opacity + ")";
                        //设置颜色和值
                        $(self).find("#transparency").html(transparency + "%")
                        $(self).find(".coloroption").each(function() {
                            if($(this).hasClass("active")) {
                                $(this).next().css("background-color", rgba);
                                return;
                            }
                        })
                    })
                    //输入色值
                $(self).find("#color").change(function() {
                    var color = $(this).val();
                    $(self).find(".coloroption").each(function() {
                        if($(this).hasClass("active")) {
                            $(this).next().css("background-color", color);
                            return;
                        }
                    })
                    $(document).keypress(function(e) {
                        // 回车键事件  
                        if(e.which == 13) {
                            $(self).find(".coloroption").each(function() {
                                if($(this).hasClass("active")) {
                                    $(this).next().css("background-color", color);
                                    return;
                                }
                            })
                        }
                    });

                })
            });
        }

    }
    color.init();
    //上传
    var upload = {
        init: function() {
            this.render();
        },
        render: function() {
            var self = this;
            $(".btn-imgupload").find("input").each(function(index, ele) {
                var imgview = $(".imgview").eq(index).get(0);
                $(ele).change(function(e) {
                    self.uploadImg(e.target, imgview);
                })
            })

        },
        //上传图片
        uploadImg: function(inputEle, imgDom) {
            if(inputEle.files && inputEle.files[0]) {
                if(inputEle.files[0].type.match(/^image/) == null) {
                    alert("请选择图片文件")
                } else {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $(imgDom).attr('src', e.target.result);
                    }
                    reader.readAsDataURL(inputEle.files[0]);
                }
            }
        },
        //图片裁剪
        imgClip: function() {

        },
        //上传语音
        uploadAudio: function() {

        },
    }
    upload.init();

    var time = {
        init: function() {
            this.render();
        },
        render: function() {
            //切换纯文字和时间点
            var $inputEle = $("input[name='font']");
            var nowTemp = "";
            var targetTemp = "";
            $.each($inputEle, function(index, ele) {
                if($(ele).prop("checked") == true) {
                    nowTemp = $(ele).data("tempclass");
                    return;
                }
            });
            $inputEle.change(function() {
                    $inputEle.removeAttr("checked");
                    $(this).prop("checked", "true").attr("checked", "true");
                    targetTemp = $(this).data("tempclass");
                    $('.' + nowTemp).fadeOut();
                    $('.' + targetTemp).fadeIn();

                })
                //编辑 备注切换
            $(".temp-timelinefont .btn-edit").click(function() {
                    var html = $(this).html();
                    if(html === "编辑") {
                        $(this).html("备注");
                        $(this).parent().addClass("active");
                    }
                    if(html === "备注") {
                        alert("待制作的备注添加框")
                    }
                    return false;
                })
                //删除一个时间点
            if($(".temp-timelinefont .btn-delete")) {
                $(".temp-timelinefont .btn-delete").click(function() {
                    $(this).parent().remove();
                })
            }
        },

    }
    time.init();

Answer 1

把页面分下类，功能相似或相同的按钮调用一个方法，应该能减少点代码量。

Answer 2

谢邀，好问题

我的看法是：组件化、语义化

你现在所有的功能都由一个公共对象管理，当然显得凌乱了。然而事实上只要仔细分析，你会发现一个页面可以拆分成若干个毫不相干或是低耦合的模块。把不同的模块用类封装起来：对内 自行管理自身状态，自行进行事件绑定等操作；对外暴露一个简单的接口，用于传递数据等。

第二点是语义化，方法是拆分函数。好的代码应该是不怎么需要注释的，因为代码必须可以自解释。保证只将一个简单完整逻辑作为一个函数。一个好的函数应该控制在 5 ～ 10 条语句——当然视具体情况而定。太长的函数有大可能会有嵌套的子逻辑。给函数取一个合理的名字并置换到原来冗长代码的地方，代码会更有条理。拆分函数还有另一个好处是：可以复用代码，这可以解决“牵一发而动全身”的问题。

一点小建议

Answer 3

兄弟，你和我有一样的困扰。目前我是这么解决的，个人能力问题，我只把自己的方案写出来不一定是最佳方案。

你这里的showsubnav方法名很奇怪，并不是显示子菜单，而是绑定子菜单的事件。名字应该改成bindSubnav比较贴切。

还有就是你的这个方法代码太多，可以做成子菜单类SubNav然后
sub=new SubNav();
sub.bindEvent();

还有你里面有太多if else,可以用自定义事件emit出来，在外面用合适的对象去捕获它，做到指责单一，而且这样每个方法看起来都很短，很赞( •̀∀•́ )

Answer 4

谢邀。
感觉题主现在有点执着于表面化的对象和this了，其实可以试试把功能拆分出来。
个人见解，最开始不必一定要用一个公共的对象把所有的功能包含进去。
其实只要足够细致就可以了。这里有个不错的类似问题：
https://segmentfault.com/q/1010000000633373