BACKBONE.JS简单入门范例-创新互联

11年刚开始用前端MVC框架时写过一篇文章，当时Knockout和Backbone都在用，但之后的项目全是在用Backbone，主要因为它简单、灵活，无论是富JS应用还是企业网站都用得上。相比React针对View和单向数据流的设计，Backbone更能体现MVC的思路，所以针对它写一篇入门范例，说明如下：

创新互联建站拥有一支富有激情的企业网站制作团队，在互联网网站建设行业深耕10多年，专业且经验丰富。10多年网站优化营销经验，我们已为上千多家中小企业提供了成都做网站、成都网站建设解决方案，按需定制，设计满意，售后服务无忧。所有客户皆提供一年免费网站维护!

1. 结构上分4节，介绍Model/View/Collection，实现从远程获取数据显示到表格且修改删除；
2. 名为“范例”，所以代码为主，每节的第1段代码都是完整代码，复制粘贴就能用，每段代码都是基于前一段代码来写的，因此每段代码的新内容不会超过20行（大括号计算在内）；
3. 每行代码没有注释，但重要内容之后有写具体的说明；
4. 开发环境是Chrome，使用github的API，这样用Chrome即使在本地路径(形如file://的路径)也能获取数据。

0. Introduction

几乎所有的框架都是在做两件事：一是帮你把代码写在正确的地方；二是帮你做一些脏活累活。Backbone实现一种清晰的MVC代码结构，解决了数据模型和视图映射的问题。虽然所有JS相关的项目都可以用，但Backbone最适合的还是这样一种场景：需要用JS生成大量的页面内容(HTML为主)，用户跟页面元素有很多的交互行为。

Backbone对象有5个重要的函数，Model/Collection/View/Router/History。Router和History是针对Web应用程序的优化，建议先熟悉pushState的相关知识。入门阶段可以只了解Model/Collection/View。将Model视为核心，Collection是Model的集合，View是为了实现Model的改动在前端的反映。

1. Model

Model是所有JS应用的核心，很多Backbone教程喜欢从View开始讲，其实View的内容不多，而且理解了View意义不大，理解Model更重要。以下代码实现从github的API获取一条gist信息，显示到页面上：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>

<link href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
</head>
<body>
 <table id="js-id-gists" class="table">
  <thead><th>description</th><th>URL</th><th>created_at</th></thead>
  <tbody></tbody>
 </table>
 <script type="text/javascript">
 var Gist = Backbone.Model.extend({
  url: 'https://api.github.com/gists/public',
  parse: function (response) {
   return (response[0]);
  }
 }),
  gist = new Gist();

 gist.on('change', function (model) {
  var tbody = document.getElementById('js-id-gists').children[1],
   tr = document.getElementById(model.get('id'));
  if (!tr) {
   tr = document.createElement('tr');
   tr.setAttribute('id', model.get('id'));
  }
  tr.innerHTML = '<td>' + model.get('description') + '</td><td>' + model.get('url') + '</td><td>' + model.get('created_at') + '</td>';
  tbody.appendChild(tr);
 });
 gist.fetch();
 </script>
</body>
</html>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻标题：BACKBONE.JS简单入门范例-创新互联
网页链接：https://www.cdcxhl.com/article34/djgcpe.html

成都网站建设公司_创新互联，为您提供网站制作、网站排名、网站营销、动态网站、App开发、自适应网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容