Backbone学习

最新推荐文章于 2018-05-18 18:17:00 发布

txx3258

最新推荐文章于 2018-05-18 18:17:00 发布

阅读量515

点赞数

分类专栏： BackBone

BackBone 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（Backbone致力于缓解“复杂成堆的jQuery选择器与回调函数，疯狂的尝试保持HTML UI之间的数据同步” 这种现象，并且真正做到了这一点）

Backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及Custom事件处理，通过Collections提供一套丰富的API用于枚举功能，通过Views进行事件处理和现有Application通过RESTful JSON接口进行交互。它是基于jquery和underscore的一个js框架。

整体上来说，backbone.js是一个web端javascript的mvc框架，算的上是重量级的框架。它能让你像写java代码写一些js代码，定义类，类属性以及方法。更重要的是它能够优雅的吧原本无逻辑的javascript代码进行组织，并且提供数据和逻辑的相互分离的方法，减少代码开发工程中的数据和逻辑混乱。

通过backbone，你可以把你的数据当做Models，通过Models你可以创建数据，进行数据验证，销毁或保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发change的事件；那些用来显示model状态的views会接收到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的backbone应用中，你并需要哪些胶水代码从DOM中通过特殊的id来获取节点，或者手工的更新HTML页面，因为在model发生变化时，views会喊简单的进行自我更新。（前端开发指定一套自己的规则）

backbone的应用范围：它既然是一个重量级的框架，那就不是随便什么地方都能用的，不然就会出现杀鸡用牛刀。如果单个网页有非常复杂的业务逻辑，那么用他很合适，它可以很容易的操作dom和组织js代码。

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="utf-8">
  <script src="jquery.js" type="text/javascript"></script>
  <script src="underscore.js" type="text/javascript"></script>
  <script src="backbone-min.js" type="text/javascript"></script>
</head>
<body>

    <button id="check">报到</button>
    <ul id="world-list">
    </ul>

 
  <script type="text/javascript">
      (function ($) {
          World = Backbone.Model.extend({//创建一个World的对象，拥有name属性
              name: null
          });
          Worlds = Backbone.Collection.extend({//Word对象的集合
              initialize: function (models, options) {
                  this.bind("add", options.view.addOneWorld);
              }
          });
          AppView = Backbone.View.extend({
              el: $("body"),
              initialize: function () {
                  this.worlds = new Worlds(null, { view: this })
              },
              events: {
                  "click #check": "checkIn" //事件绑定，绑定Dom中id为check的元素
              },
              checkIn: function () {
                  var world_name = prompt("请问，您是哪里人?");
                  if (world_name == "")
                      world_name = "未知";
                  var world = new World({ name: world_name });
                  this.worlds.add(world);
              },
              addOneWorld: function (model) {
                  $("#world-list").append("<li>这里是来自<b>" + model.get("name") + "</b>星球的问候:hello world!</li>");
              }
          });
          //实例化AppView
          var appView = new AppView;
      })(jQuery);
  </script>
</body>
</html>

关于backbone，最基础的一个东西就是model，这个东西就像后端开发中的数据库映射那个model一样，也是数据对象的模型，并且应该和后端的model有相同的属性。

关于服务器的异步操作都是通过Backbone.sync这个方法来完成的，调用这个方法的时候会自动的传递一个参数过去，根据参数向服务器端发送对应的请求。比如你save，backbone会判断你的这个对象是不是新的，如果是新创建的则参数为Create，如果是已存在的对象只进行了改变，那么参数为Update，如果你调用fetch方法，那参数就是read

txx3258

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Backbone学习

Backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及Custom事件处理，通过Collections提供一套丰富的API用于枚举功能，通过Views进行事件处理和现有Application通过RESTful JSON接口进行交互。它是基于jquery和underscore的一个js框架。整体上来说，backbone.js是一个web端javascr
复制链接

扫一扫

专栏目录