前端MVVM学习之KnockOut(一)
MVVM理解
MVVM即Model-View-viewModel,是微软WPF和MVP(Model-View-Presenter)结合发展演变过来的一种新型架构框架。
MVVM设计模式有以下优点:
(1)低耦合:model的修改不会影响视图的展现,一个ViewModel可以绑定到不同的View上,当View变化,Model可以不变,当model变化,view也可以不变。
(2)开发独立性:前端人员可以更专注界面的开发,后端专注逻辑和数据的开发。
(3)可重用性:一个viewModel可以对应多个视图,比如pc版和手机版视图,而ViewModel可以只用一个。
(4)方便单元测试
以上是一些简单的理解,MVVM的优势,还需要更多的实践才能感觉出来,当然,MVVM也有它的适应场合,只有在它适合的项目中,我们才能说他是有优势的。比如MIS系统就比较适合用MVVM设计模式来提高开发效率,而网站型的程序用MVVM就没什么优势。
前端MVVM
目前,已经有不少js库实现了前端mvvm设计模式,方便js代码和前端标签解耦。比较好的有KnockOut,它的官网有如下一句话:
Simplify dynamic JavaScript UIs with the Model-View-ViewModel(MVVM)patter。大概中文意思就是:通过MVVM设计模式来简化前端动态js和ui的开发。 主要是通过声明绑定、自动UI刷新、依赖跟踪、模板等。
前端MVVM学习之KnockOut(一)的更多相关文章
- 前端MVVM学习之KnockOut(二)
现在开始学习Knockout并且做个简单的例子. Knockout是建立在以下三个核心功能之上的: 1.Observables and dependency tracking(属性监控与依赖跟踪) 2 ...
- 前端MVVM框架:Knockout.JS(一)
前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...
- 绝版珍珍藏:web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- 史上最全的web前端系统学习教程!
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
- 前端MVVM框架设计及实现(二)
在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...
- js架构设计模式——前端MVVM框架设计及实现(二)
前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...
- js架构设计模式——前端MVVM框架设计及实现(一)
前端MVVM框架设计及实现(一) 最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我 ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
随机推荐
- No enclosing instance of type test8 is accessible. Must qualify the allocation with an enclosing instance of type test8 (e.g. x.new A() where x is an
在编译一个例子时,结果编译时出现: No enclosing instance of type test8 is accessible. Must qualify the allocation wit ...
- Django学习笔记(精简版)
dos:安装:python setup.py install 环境变量:D:\Python27;D:\Python27\Lib\site-packages\django\bin; 转到创建的目录:dj ...
- 【POJ1005】I Think I Need a Houseboat
说是计算几何,其实是一道水题.直接算半圆面积即可. #include <iostream> #include <cstdlib> #include <cstdio> ...
- Handsontable对单元格的操作
1.自动填充单元格数据 fillHandle:true/false //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格 2.合并单元格 mergeCells:[{row:起 ...
- js记录用户行为浏览记录和停留时间(转)
演示地址:http://weber.pub/demo/160902/test.html 测试源码下载:http://pan.baidu.com/s/1nvPKbSP 密码:r147 解决问题所使用的知 ...
- java与.net比较学习系列(3) 基本数据类型和类型转换
在Java中,数据类型分为两类,一类是基本数据类型,另外一类是引用类型. 而在C#中,数据类型分为三类,分别是基元类型,值类型和引用类型.其中基元类型是.net framework框架中预定义的类型, ...
- COCOS2D-X 不反复随机数
srand(time(NULL)); int a[5]; for(int i=0;i<5;i++) { a[i]=CCRANDOM_0_1()*5; } srand放在循环外面
- [HTML5] Level up -- Display
HTML5 Input type: Traditionally presentational tags, the i, b, em, and strong tags have been given n ...
- [Protractor] Protractor Interactive with elementor
Install: npm install -g elementor Then run: webdriver-manager start Lets say if we want to test 'htt ...
- iOS绘图教程
本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,翻译版本中加入了一些书中未涉及到的内容.希望本文能够对你有所帮助.(本文由海水的味道翻译整理,转载请 ...