要编写可维护的前端代码绝非易事.

MVC 通过koa实现了 后端的数据.模板页面.可控制器的分离. 前端….

全栈开发: 懂得前端 才能开发出更好的后端. 懂得后端 才能开发出更好的前端 程序设计的基本思想 在前后端 都是通用的.

由于前端开发混合了HTML、CSS和JavaScript,而且页面众多,所以,代码的组织和维护难度其实更加复杂,这就是MVVM出现的原因。

前端发展历史

最初 完全静态的html.一个url对应一个html文件. 浏览器请求哪个就给你哪个..

针对不同的用户显示不同的页面: 显然不可能给上千万用户 准备好上千万份不同的html文件… 所以服务器就需要根据不同的用户生成 动态生成不同的文件. 最直接的想法 就是利用c这些编程语言 直接像浏览器 输出拼接后的字符串. 这种技术叫 CGI: Common Gateway Interface。

很显然 像新浪首页这种复杂的html是不可能通过拼接字符串得到的… 人们又发现: 其实网站 大多数内容都是不变的. 需要变化的只有少数和用户相关的数据. 所以又出现了新的创建动态HTML的方式: ASP.JSP.PHP…

但是 一旦浏览器显示了一个 html. 要更新内容的话 唯一的方式就是向服务器获取一份新的html内容. 如果浏览器想自己修改html的内容 就要等到js被引入浏览器的年代了

有了js, 浏览器可以运行js. 然后对页面进行一些修改. js 还可以通过修改html的dom结构和css 来实现一些动画效果. 这些功能无法通过服务器完成 必须在浏览器实现.

js在浏览器中 操作html 的发展阶段

第一阶段: 原生API 直接用 js 操作DOM, 使用浏览器提供的原生 API.

第二阶段: jQuery 原生API不好用,还要考虑浏览器兼容性 jQuery 横空出世, 以简洁的api迅速获取前端开发者的 芳心.

第三阶段: MVC 需要服务器端配合, js可以在前端修改服务器渲染后的数据…

第四阶段: MVVM 随着前端页面的 越来越复杂. 用户对交互要求越来越高. 想写出gmail这样的页面 仅仅用jquery是远远不够的 MVVM模型应运而生

借鉴了桌面程序MVC的实现. 在前端页面中. 把 model 用纯js对象表示. view 负责显示 两者做到了最大程度的分离. 把 model 和 biew 关联起来 就是 viewModel. viewModel 负责把model的数据同步到view显示出来. 还负责把view的修改同步回model

viewModel 如何编写: 需要用 js 编写一个通用的 viewModel. 这样 就可以复用整个MVVM模型了.

MVVM 框架 和 jquery操作DOM 有什么区别 我们先看用jQuery实现的修改两个DOM节点的例子: <p>Hello, Bart!</p> <p>You are 12.</p>

用jQuery修改name和age节点的内容: var name = ‘Homer’; var age = 51;

$('#name').text(name);
$('#age').text(age);

如果我们用MVVM 框架来实现同样的功能: 首先 并不关心 DOM的结构.而是关心 数据如何储存. 最简单的数据存储方式是使用 js 对象. var person = { name: ‘Bart’, age: 12 };

我们把 personal 看作Model 把html某些DOM节点看作view. 并假设 它们之间被关联起来了.

要把显示的name 从Bart 变成 Homer. age 从12 变成51 我们并不操作DOM 而是直接修改Js对象 person.name = ‘Homer’; person.age = 51;

我们会发现 改变js对象的值 会导致DOM 结构作出对应的变化. 这让我们关注点从DOM 变成了如何更新JS对象. 而操作js对象比操作DOM简单多了

这就是 MVVM 设计思想: 关注Model的变化. 让MVVM框架自动去更新DOM状态.把开发者从DOM繁琐的步骤中解脱出来.

MVVN 框架哪家强

Angular: Google出品,名气大,但是很难用; Backbone.js:入门非常困难,因为自身API太多; Ember:一个大而全的框架,想写个Hello world都很困难。 Vue.js : 最佳推荐….. 国内大神尤雨溪开发的…


单向绑定

就是 对象里面的值 绑定到特定的DOM. 你修改了对象里面的值 也就修改了DOM 也就修改了html页面…