最早的時候，業務很簡單，我們寫樣的代碼。

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

后來，user 的字段越來越多。

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

于是我們考慮將對象與模版進行綁定，進一步抽離

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

只是簡單的代碼封裝，整個結構就清晰很多。但緊接著，我們開始使用 websocket 來做界面的即時更新，于是代碼再次修改。

這是一個用戶列表

  
  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){      //進行DOM操作
      $('#name').val(user.name);      $('#email').val(user.email);      $('#address').val(user.address);      $('#phone').val(user.phone);      $('#blog').val(user.blog);
  }

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

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

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

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

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

既然是框架，解決的必然是復雜的、復雜的事情。如果只是簡單的幾個DOM處理，用框架肯定是太重太浪費了。