Question

我创建了一个类似于iOS中的表格视图的向下钻取类型菜单：用户点击一个选项，然后该选项屏幕从屏幕向左滑动，该选项的子选项滑动在右边。

我已经完美地工作了，但是我真的很难解决所有细节问题 - 包括小部件底层数据应该如何改变以及UI应该如何相应地改变。

现在它已经完成并且工作完美，我正在试图弄清楚我是如何以一种能够产生更有条理，更清晰的代码的方式来接近它的。控制此菜单的JavaScript类负责维护和操作底层数据以及更改html / css。单个方法通常同时执行这两种操作 - 更改一段数据然后更新DOM。我认为这是一个问题，到目前为止，这是我能解释为什么我的代码让我感到困惑的最佳解释。

请查看下面的代码示例，如果您同意，请与我们联系，以及您可能提供的任何其他建议。

此代码导致窗口小部件关闭当前菜单，下一个窗口：

showNextSection: function(isAlreadyOpen){
    if(!this.isAnimating && this.nextSection){
        var that = this;

        this.isAnimating = true;

        //Most of the below code changes the DOM
        this.prevSectionCategory = this.categoryEl.html();
        this.changeCategory(this.currentCategories.last());
        this.currentSection.el.animate({left: -this.finalWidth}, 250);
        var animateObj = {height:this.nextSectionHeight};
        if(!isAlreadyOpen) animateObj.width = this.finalWidth;

        this.el.animate(animateObj, 250, function(){
                //this now updates some of the underlying data
            that.currentSection = that.nextSection;
            that.nextSection = that.currentSection.next();
            that.prevSection = that.currentSection.prev();
            that.isAnimating = false;
        });
        if(that.isFirstSection){
            that.isFirstSection = false;
            that.backBtn.fadeIn(250);
        }
    }else{
        //Drilled down as far as possible
    }
}

通常，分配属性值的行正在修改基础数据，而其余行正在操作DOM。您可以在同一方法中看到两者是如何并排出现的。

最后，假设在MVC中更好地分离M和V会有所帮助，像Backbone.js这样的东西在这种情况下会有用吗，还是会有点过分？

将这个类分成一个独特的视图控制器和模型会使我的代码更清晰吗？

0 个答案: