下面,我们去准备一下这个应用程序需要用到的一些文件还有组织文件的目录结构。
可以先找一个地方,新建一个目录 ... 比如在桌面上 .. 新建目录 ... 命名为 todos .. 在这个目录下面,可以存储应用程序需要的所有的东西。
再打开编辑器 ... 这里我用的是 Brackets 编辑器 ... 打开 文件 菜单,选择 打开目录 ... 找到刚才创建的目录 ...
在这个编辑器的边栏上,会显示出这个目录里面的所有的东西。 在这里,我们也可以直接在这个 todos 目录下面,去新建文件或者目录 ..
先创建一个 js 目录 ... 然后在这个目录里面,再去添加几个目录,在这些目录里分别存放应用程序不同部分的代码。
先创建一个 Models 目录 ... 这里放的是应用需要的模型 ... 在这里再去创建一个文件 ... 命名为 Todo.js ... 因为我们要创建的是一个简单的任务管理应用,Todo 这个词的意思就是任务 ... 一会在这个文件里面,去创建应用需要的模型。
然后再创建一个目录 ... 叫做 Collections ... 这里放的是应用需要的集合 .. 在这个目录下面,添加一个文件 .. 命名为 TodoCollection.js ... Todo 表示任务,Collection 是集合的意思,这个集合表示的就是任务的列表。
再添加一个存放应用视图文件的目录 ... 叫做 Views ... 然后在这里面,去创建两个视图文件... 一个叫做 TodoView.js ... 这里面是任务的视图 ... 再添加一个 AppView.js ... 它表示的是整个应用的视图 ...
最后再添加一个 Routers 目录 ... 里面新建一个文件 .. 命名为 Router.js ... 这里放的是应用的路由器 ...
然后我们可以直接在 js 这个目录的根下面,再添加一个 app.js .. 在这个文件里面,可以放一些启动应用需要的一点代码 ...
lib
在应用的根目录下面,再创建一个叫 lib 的目录 .. 它表示 library ... 我们可以把应用需要的一些类库放到这里面 ... 比如 backbone ,underscore ,jQuery 等等 ..
你可以去把这些类库下载下来,放到这里面 ... 这里我已经事先下载好了 ...
找到这几个类库,把它们复制到应用的 lib 目录的下面 ...
assets
然后,我们再把应用需要的图片还有样式表这些资源,放到 assets 这个目录的下面 ... 在这个课程的资源包里,你可以找到这些东西 ...
复制一份,放到应用的根目录下面 ... 这个 assets 里面,有两个文件 ... 一个是背景图片 ... 还有一个是应用需要的一些 css 样式 ...
index.html
回到编辑器 ... 在应用的根目录下面,我们再去新建一个 html 文档,这个文档就是应用的主页面 ... 它里面会包含应用需要所有的东西 ... 类库,代码,样式表,还有模板, html 结构等等。
先创建一个简单的 html 文档的结构 ... 如果你在 Brackets 编辑器里安装了 emmet 插件,可以这样 ... 输入一个叹号 ... 现按一下 tab 键 ...
修改一下 lang 属性 ... 再改一下 title 属性的值 ...
然后,在 head 标签里面,去把应用需要的样式表链接过来 ... 这个样式表是在 assets 目录下面 ... 叫做 base.css ...
然后在 body 结束的标签的上面,去把应用需要的类库,还有代码文件都嵌入到这个文档里面 ...
首先要嵌入进来的是 jQuery ...
然后是 underscore 这个类库 ... 接着是 backbone .....
还有一个 Backbone 的 localStorage 插件。这个东西的作用就是,覆盖了 Backbone 默认的 Sync 方法 ... 默认 Backbone 是会向指定的地址发出请求。这个插件会让 Backbone 的请求都指向浏览器的 LocalStorage 上面 ... 也就是,Backbone 会从 LocalStorage 里面读取数据,或者存放数据等等 ...
<!-- 依赖的各种类库 -->
<script src="lib/js/jquery-2.1.1.min.js"></script>
<script src="lib/js/underscore-min.js"></script>
<script src="lib/js/backbone-min.js"></script>
<script src="lib/js/backbone.localStorage.js"></script>
最后,我们再把应用需要的一些代码文件也嵌入到这个文档里面 ...
<!-- 应用程序代码 -->
<script src="js/Models/Todo.js"></script>
<script src="js/Collections/TodoCollection.js"></script>
<script src="js/Views/TodoView.js"></script>
<script src="js/Views/AppView.js"></script>
<script src="js/Routers/Router.js"></script>
<script src="js/app.js"></script>
现在,我们就准备好了应用程序需要的基本的结构 ...