最早的時(shí)候，業(yè)務(wù)很簡(jiǎn)單，我們寫樣的代碼。

  $.ajax({    url: 'http://ooxx.cn/getUser'
    success: function(user){      //進(jìn)行DOM操作
      $('#name').val(user.name);
      $('#email').val(user.email);
    }
  })

后來(lái)，user 的字段越來(lái)越多。

  $.ajax({
    url: 'http://ooxx.cn/getUser'
    success: function(user){      //進(jìn)行DOM操作
      $('#name').val(user.name);      $('#email').val(user.email);      $('#address').val(user.address);      $('#phone').val(user.phone);      $('#blog').val(user.blog);      //可能還有更多的字段，并且DOM操作不一定這么簡(jiǎn)單只是值的修改
      //可能還要負(fù)責(zé)整個(gè)視圖是否出現(xiàn)：比如 isVIP 為 false 時(shí)，出現(xiàn)付費(fèi)引導(dǎo)等。
    }
  })

于是我們考慮將對(duì)象與模版進(jìn)行綁定，進(jìn)一步抽離

  $.ajax({
    url: 'http://ooxx.cn/getUser'
    success: function(user){
      rener(user);
    }
  })
  
  var render = function(obj){      //進(jìn)行DOM操作
      $('#name').val(user.name);      $('#email').val(user.email);      $('#address').val(user.address);      $('#phone').val(user.phone);      $('#blog').val(user.blog);
  }

只是簡(jiǎn)單的代碼封裝，整個(gè)結(jié)構(gòu)就清晰很多。但緊接著，我們開(kāi)始使用 websocket 來(lái)做界面的即時(shí)更新，于是代碼再次修改。

這是一個(gè)用戶列表

  
  socket = new WebSocket("ws://192.168.1.71:7070");
  socket.onmessage = function(data) {
      var obj = JSON.parse(data)      if(obj.action === "update"){
          render(userList);
      }
  }
  
  var render = function(obj){      //進(jìn)行DOM操作
      $('#name').val(user.name);      $('#email').val(user.email);      $('#address').val(user.address);      $('#phone').val(user.phone);      $('#blog').val(user.blog);
  }

很棒，接著我們想像到這個(gè) user 將會(huì)有非常多的 function，如果到處是 $("") 這樣的方式進(jìn)行DOM操作，如果有一天，HTML 上的 id/class 要稍變一下，那改起來(lái)就痛苦了。
把用戶這個(gè)做成 Model，加上 render(), showPhone(), sendEmail() 這樣各種的方法。將大大增加代碼的組織能力。

-------------------------

其實(shí)上面寫了這么多，只是想說(shuō)明，需求在不斷增加的時(shí)候，項(xiàng)目不斷變大的時(shí)候，原有的代碼組織無(wú)法滿足需要，需要站在各高的層次，將項(xiàng)目中常用的方法進(jìn)行抽離封裝。于是，便有了框架。

backbone 做得事很專注，充分發(fā)揮MVC的組織分層能力，繼續(xù)把DOM交給 jQuery 去做。

而更新的前端MVC框架，如：angularjs, emberjs 等，將 model 與 template(HTML) 進(jìn)行綁定，直接幫助你渲染，讓我們不用再關(guān)心渲染、DOM處理，而是把注意力集中在業(yè)務(wù)及交互處理上。

既然是框架，解決的必然是復(fù)雜的、復(fù)雜的事情。如果只是簡(jiǎn)單的幾個(gè)DOM處理，用框架肯定是太重太浪費(fèi)了。