基于BACKBONE的MVC演示项目.PDFVIP

基于BACKBONE的MVC演示项⽬ MVC 基本概念 MVC基本概念 MVC模式（Model-View-Controller）是软件⼯程中的⼀种 软件架构模式，⽬的是实现⼀种动态的程式设计，使后续对 程序的修改和扩展简化，并且使程序某⼀部分的重复利⽤成 为可能。除此之外，此模式通过对复杂度的简化，使程序结 构更加直观。软件系统通过对⾃身基本部分分离的同时也赋 予了各个基本部分应有的功能。分为三个基本部分： ‣ （控制器 Controller）- 负责转发请求，对请求进⾏处 理。 ‣ （视图 View） - 界⾯设计⼈员进⾏图形界⾯设计。 ‣ （模型 Model） - 程序员编写程序应有的功能（实现算法 等等）、数据库专家进⾏数据管理和数据库设计(可以实 现具体的功能)。 准备⼯作 README ▸ 基于Backbone的MVC演示项⽬ 准备⼯作 PACKAGE ▸ 运⾏依赖 npm install koa koa-router koa-ejs koa-less koa-static-cache normalize.css --save ▸ 开发依赖 npm install seajs seajs/seajs-text jquery underscore backbone backbone.localstorage hogan.js --save-dev 准备⼯作 建⽴⽬录结构，编写启动开发代码 ▸ 良好的⽬录结构应该⼀⽬了然，不依赖⽂档就能表明 各个⽬录的功能； ▸ 编写基本框架代码，做好开发准备（http:// localhost:18080/）； ▸ 准备好API （http://localhost:18080/api/ goods.json）。 项⽬示例 ⼯作顺序 ▸ ⻚⾯制作 ▸ 视图拆分 ▸ 路由组装 ▸ 控制器1 —— 串联视图 ▸ 模型设计 ▸ 集合设计 ▸ 控制器2 —— 数据组装 ▸ 控制器3 —— 逻辑编辑 项⽬示例 ⻚⾯制作 ▸ ⻚⾯制作是前端⼯程师的基本功； ▸ ⻚⾯制作不只是⻚⾯制作，在⻚⾯制作的过程中要结合需求， 加深需求的理解，是需求的⼆次阅读； ▸ ⻚⾯制作要做到准确、全⾯两⽅⾯，准确是⻚⾯制作要进⾏ 的基本的兼容性测试（Android 4.4+ ，iOS 7+），全⾯是需 求中涉及到的UI细节都要做好； ▸ ⻚⾯保证语义话，按功能拆分less⽂件为多个⼦模块，同时也 为视图拆分做准备。 项⽬示例 保证⼀直能看到东⻄，让⼼⾥踏实 ▸ 接下来的视图拆分、路由组装、串联视图、模型设计、集合 设计、数据组装、逻辑编辑等步骤，是⼀个不断循环的过 程。 ▸ 视图拆⼀点，路由组装⼀点，视图串联⼀点，模型设计⼀点， 集合设计⼀点，数组组装⼀点，逻辑编辑⼀点，随时刷新浏 览器，保证每个步骤可⽤，让⼼⾥踏实。 项⽬示例 视图拆分 项⽬示例 视图拆分 ▸ 1. 凭对需求的主观理解，对需求进⾏初步拆分绘图； ▸ 2. 将制作完成的HTML⻚⾯直接拷⻉到tpl ⽬录，逐渐拆分； ▸ 2. 当前渲染先插⼊⽂档，后进⾏⼦视图渲染； 项⽬示例 路由组装 ▸ 路由是⼀种解耦，将逻辑和视图的耦合通过URL的映射⼀⼀对 应起来； ▸ 路由的设计组装就是将逻辑抽象成URL，并将不同的URL模式 和控制器对应起来的过程。 项⽬示例 控制器1 —— 串联视图 ▸ View类实例话的时候会默认调⽤initialize⽅法； ▸ 简单事件的绑定； 项⽬示例 模型设计 ▸ 抽象视图中所⽤到的最⼩数据集合，作为model的所有数据属 性； ▸ 通过在视图中监听模型的变化，关联render，⽤模型的变化 去驱动视图的变化。 项⽬示例 集合设计 ▸ 模型的集合； ▸ 我们⾯向的数据类型都可以抽象成集合； 代码示例 控制器2 —— 数据填充 ▸ ⽤数据的变化去驱动视图的变化； ▸ 视图发⽣变化是因为模型发⽣了变化。 项⽬示例 控制器3 —— 逻辑编辑 ▸ 逻辑的操作的本质是模型的增删改查； ▸ 模型的变化之后需要进⾏持久化； ▸ 同时模型的变化引起了视图的变化——⼤家就看到了。 项⽬示例 控制器的⽣命周期 ▸ 没有找到Backbone⽣命周期的资料，关于控制器必须有⾃⼰ 的⽣命周期，从initialize-render-event