JavaScript 应用开发 #1：理解模型与集合

2024-04-27 14:21:44

字体：大中小

来源：转载

供稿：网友

javaScript 应用开发 #1：理解模型与集合

在《 Backbone 应用实例》这个课程里面，我们会一起用 Javascript 做一个小应用，它可以管理任务列表，应用可以创建新任务，编辑还有删除任务等等。这个实例非常好的演示了使用 JavaScript 来开发富应用，它也能让你对 JavaScript 有一个更好的理解。所以，我们接下来会分成几天，把这个小应用的功能，分成几个部分，介绍每个小功能的细节。跟着这篇文章，或者《 Backbone 应用实例》这个课程，动手练习一下。效果会非常好。

在文章里面，我会把需要的代码粘出来，不过我建议你不要直接去复制跟粘贴。每一个目录，每一个文件，每一行代码，最好可以亲自动手去做出来。这期间我们也会不断的回到浏览器上去测试，这样你能更好的理解，每个步骤的作用。每一个动作，都要动手去试一下。

介绍

在开始之前，最好可以了解一点JavaScript，jQuery，还有Backbone。不过，不懂也没关系，跟着这个练习去实践，不懂的地方，可以再单独去解决一下。我会在练习中提到，代码的具体的意思是什么。

要做的这个小应用，可以管理任务列表，我们需要给应用程序一个结构，也就是把应用分成几个部分，在不同的部分里面，去撰写不同的代码，这样会更容易维护一些。提供这个结构可以使用 Backbone 这个类库。在《基于 MVC 的 JavaScript Web 富应用开发》这本书里介绍了这款优秀的类库。它可以跟 jQuery 还有Underscore很好的结合到一块儿使用，在这个应用实例里面会用到这几样东西。

下面，我们先去创建应用需要的目录和文件结构。

目录结构

根据下面的这个树形结构去创建对应的目录还有文件。应用只有一个页面，就是index.html，它是应用的主页。

js目录里面是应用的主要的代码，这个目录里面，按照功能又分别创建了几个目录，Models里面是应用的模型，Collections里面是集合，Views里面是视图，Routers里面是路由器。在js根目录下的app.js，这个文件里会存储启动应用需要的一点代码。这些东西在后面，我们会一点一点去添加。

lib这个目录里面是应用需要的各种类库，jQuery特效,jQuery插件，Underscore，Backbone，另外还有一个 Backbone 的小插件，backbone.localStorage.js。这个插件的作用就是，会用浏览器的 Local Storage 来存储数据。用 bing.com 或 google.com 去搜索一下这些东西，然后把它们下载下来，放到lib这个目录的下面。

assets里面是应用需要的一点资源，一个样式表，还有一张背景图片。在这篇文章的附件里面，你可以下载到这两个资源。

.├── assets│ ├── base.CSS│ └── bg.png├── index.html├── js│ ├── Collections│ │ └── TodoCollection.js│ ├── Models│ │ └── Todo.js│ ├── Routers│ │ └── Router.js│ ├── Views│ │ ├── AppView.js│ │ └── TodoView.js│ └── app.js└── lib    ├── backbone-min.js    ├── backbone.localStorage.js    ├── jquery-2.1.1.min.js    └── underscore-min.js

主页的基本结构

打开应用根目录下的index.html，在这个文档里面，需要设计一下应用需要的界面，去定义数据的模板，链接需要的样式表，依赖的库文件，还有即将要用到的 JavaScript 代码文件。选择一款简单的编辑器，比如 Brackets 编辑器，然后输入下面这些代码：

<!doctype html><html lang="zh-hans"><head>    <meta charset="UTF-8">    <title>Todos</title>    <link rel="stylesheet" href="http://ninghao.net/assets/base.css"></head><body>    <!-- 需要的各种类库 -->    <script src="http://ninghao.net/lib/jquery-2.1.1.min.js"></script>    <script src="http://ninghao.net/lib/underscore-min.js"></script>    <script src="http://ninghao.net/lib/backbone-min.js"></script>    <script src="http://ninghao.net/lib/backbone.localStorage.js"></script>        <!-- 应用的代码 -->    <script src="http://ninghao.net/js/Models/Todo.js"></script>    <script src="http://ninghao.net/js/Collections/TodoCollection.js"></script>    <script src="http://ninghao.net/js/Views/TodoView.js"></script>    <script src="http://ninghao.net/js/Views/AppView.js"></script>    <script src="http://ninghao.net/js/Routers/Router.js"></script>    <script src="http://ninghao.net/js/app.js"></script>    </body></html>

应用界面需要的代码

接下来，在这个index.html里面，需要去设计一下应用需要的界面的 HTML 代码。这个界面的样式，已经在assets/base.css这个样式表里面定义好了。你可以直接把下面这些代码，放到index.html里面的body标签里面。这些代码构建起了应用的界面。

先了解这里面的其中的几个元素：

#todoapp，它是包装应用界面的一个容器。
#new-todo，这是一个text类型的input元素，就是一个文本框，用户可以在里面输入内容，来创建新的任务。
#todo-list，它是一个用来显示任务列表的地方。

保存一下，然后在浏览器里面去预览一下，直接打开这个 index.html 。

<div id="todoapp">      <!-- 页头部分 -->    <header id="header">        <h1>todos</h1>        <!-- 创建任务用的文本框 -->        <input type="text" id="new-todo" placeholder="需要做点什么呢？" autofocus>    </header>    <!-- 主体部分 -->    <section id="main">        <!-- 标记所有任务为完成状态 -->        <input type="checkbox" name="toggle-all" id="toggle-all">        <label for="toggle-all">标记全部为完成</label>        <!-- 显示任务列表的地方 -->        <ul id="todo-list"></ul>    </section>    <!-- 页脚部分：还剩多少个没完成的任务，导航，清空完成的任务 -->    <footer id="footer"></footer></div><div id="info">    <p>双击可以编辑任务</p></div>

创建模型 - 表示任务数据

模型在 Backbone 里面，是用来表示数据的。在我们的这个小应用里面，需要处理的数据是任务，这个任务就可以是一个模型，给这个任务模型起个合适的名字，比如 Todo 。

打开js/Models/Todo.js，在这个文件里面，我们去定义这个任务模型：

var app = app || {};/** * 模型 Model  * * 创建一个叫 Todo 的模型来表示任务数据 */app.Todo = Backbone.Model.extend({    defaults: {        title: '',        completed: false    }    });

在文件的一开始，定义了一个叫 app 的对象，它有点像是一个命名空间，就是我们在全局范围内，只定义了一个东西，就是这个对象。这样不容易跟第三方的代码库发生命名的冲突。在应用里面，需要用到的其它的东西，都可以作为这个 app 对象的一个属性。

var app = app || {};

app.Todo，就是定义好的用来表示任务数据的模型。在这个模型里面，用到了一个defaults属性，在这个属性里面，可以为模型添加默认的属性。title，表示任务的标题，completed，表示任务的完成的状态。如果它的值是true，就表示任务已经完成了，如果它的值是false，表示任务还在进行中，默认我们让它的值默认等于 false。

创建集合 - 表示任务的列表

打开js/Collections/TodoCollection.js。在这个文件里面，去定义表示任务列表的集合。app.TodoCollection就是为应用创建的一个集合，跟这个集合对应的模型就是前面创建的app.Todo。

var app = app || {};/** * 集合 Collection */app.TodoCollection = Backbone.Collection.extend({        // 指定与这个集合相关的模型    model: app.Todo,    // 使用 Backbone 的 LocalStorage    // 为存储的数据添加一个 todo 前缀    localStorage: new Backbone.LocalStorage('todo')    });// 实例化一下 TodoCollection 这个集合app.todoList = new app.TodoCollection;

在 Backbone 的集合里面，有一些方法，可以保存，删除，提取数据模型。比如可以把数据存储到指定的数据源里面，我们也可以从指定的数据源那里把数据提供出来，然后把它添加到这个表示任务列表的集合里面。这些动作用的就是 jQuery 的 Ajax 方法。我们可以为应用提供一个处理数据的后台程序，比如可以使用Drupal，Word PRess或者 Laravel 等等。

不过，在这个小应用里面，我们使用了 Backbone 的 Local Storage 插件（backbone.localStorage.js ），它会覆盖掉 Backbone 的 Sync 方法。用了这个小插件以后，Backbone 会把数据放到浏览器的 Local Storage 里面，也就是放到用户的本地浏览器里面存储起来。

localStorage: new Backbone.LocalStorage('todo')

这行代码的作用就是去使用 Backbone 的这个 Local Storage 插件，同时指定了一下数据的前缀。这里的todo，就是存储的数据的前缀，也可以把它想像成是一个命名空间，也就是为了避免冲突，为要存储的数据起的一个名字。

app.todoList = new app.TodoCollection;

上面这行代码的功能是实例化了一下创建的这个集合。这样在应用的其它地方，可以用到app.todoList这个集合对象。

练习

下面，去做几个练习，来理解一下集合，模型，还有 Backbone 的 Local Storage 插件。

在 Chrome 浏览器里打开应用程序的主页，index.html。
打开浏览器的控制台，也就是 console（Mac：alt + command + J，Windows：alt + ctrl + J）。
输入app.todoList，回车。查看一下应用里面的集合。
观察在控制台上返回的结果，注意 length 属性的值，现在应该是 0 ，表示在这个集合里面，还没有任何的模型。
输入app.todoList.create({title: '发布新的课程'})。
再查看一下app.todoList。
观察返回的结果，你会发现，length属性的值会是 1 ，表示集合里面已经有了一个模型。
打开 Resources 选项卡。
找到 Local Storage，再打开 file:// 这个路径下面的 Local Storage。
观察存储在 Local Storage 里面的数据。

我们先在控制台上查看了一下 app.todoList 这个集合里的东西，发现里边儿啥也没有。然后用集合的create这个方法去创建了一个任务模型，指定了一个任务的title属性的值，这个模型会被添加到集合里面，同时也会存储到指定的数据源里面，这里就是把创建的任务存储到了浏览器的 Local Storage 里面了。

再做一个练习：