Would separating this class into a distinct view controller and model make my code clearer?

I've created a drill-down type menu that is similar to table views in iOS: the user clicks on an option, that screen of options then slides off the screen to the left, and the children options of that option slide in from the right. I've got it working perfectly, but I really struggled ironing out all the details -- both in the how the data underlying the widget should change and in how the UI should change accordingly. And now that it's finished and working perfectly, I'm trying to figure out how I could have approached it in a way that would have produced better organized, clearer code. The JavaScript class that controls this menu is in charge of both maintaining and manipulating the underlying data as well as changing the html/css. A single method generally does both -- changes a piece of data and then updates the DOM. I think this is a problem, and so far it's the best explanation I can come up with for why my code is confusing me. Take a look at the code sample below and let me know if you agree, as well as any other suggestions you might have. This code causes the widget to slide the current menu off and the next one on: 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 } } In general, the lines that assign property values are modifying the underlying data, while the rest is manipulating the DOM. You can see how the two occur side-by-side in the same method. Finally, assuming that a better separation of the M and V in MVC would be helpful, Would something like Backbone.js be useful in this case, or would it be overkill?
Maybe it'd be sufficient if you just put those data-manipulating parts into separate functions.

以上就是Would separating this class into a distinct view controller and model make my code clearer?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准