前端MVVM框架:Knockout.JS(一)
2014-06-24 21:50
483 查看
前言
在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了。如果页面逻辑稍微复杂的话,那个在写前端 JavaScript 代码时,势必会充斥前大量 jQuery 的选择器的应用。我并不想说它好或不好。只想问一下,有没有更方便的方法呢?有过 WPF 开发经验的同学一定会知道 MVVM(Model View ViewModel) 这种开发模式。它可以很轻松的将 View 与 对应的后端代码隔离开来。使项目易于维护。那么这是怎么做到的呢?其实就是 WPF 里面基于事件的通知机制。在 xaml 文件里面只需要写上要绑定的属性,然后给 View 指定一下 DataContext 就可以将后端数据绑定到 View 上进行展示了。这里面不得不说的一个接口 INotifyPropertyChanged ,再具体的话就不聊了,毕竟这篇文章打算聊一下前端的 MVVM(Model View ViewModel) 框架 —— KnockoutJS。我所知道的前端 MVVM(Model View ViewModel) 框架有三个:
Knockout.js —— 微软开发者编写
AngularJS —— 谷歌前端 MVVM 框架
Avalon —— 国产
小试牛刀
在使用了前端 MVVM 框架后,我个人觉得最大的好处就是不再需要使用大量的选择器来满足自己的前端业务逻辑。它内部实现了数据的双向绑定,即当我们改变变量的值时,对应的 HTML 元素的值也会自动改变,省去了使用 $('#xxx').val(variable); 这样语法去赋值,只需要关注前端业务如何处理。即便前端业务很简单,那么使用 MVVM 会使你的业务变得比简单还简单,真的很吊哦!先来看一个简单的示例:<form id="form1"> <table> <tr> <td data-bind="text: FirstName"></td> <td data-bind="text: LastName"></td> <td><input type="text" data-bind="value: FirstName" /></td> </tr> </table> </form> <script type="text/javascript"> var ViewModel = function() { var self = this; self.FirstName = ko.observable("JRoger"); self.LastName = ko.observable("Song"); // 其它业务逻辑 }; ko.applyBindings(new ViewModel()); </script>
是不是省去了再用选择器的麻烦事儿?当然 Knockout.js 是兼容 jQuery 的。两大利器结合会有怎样的火花?这个要看怎么用了吧-_-||
今天先写这么点儿吧,没有什么值钱的东西在里面。后续会再写一篇使用 Knockout.js 开一个完整的模块,以将 knockout.js 更多的用法展示一下。
相关文章推荐
- 前端 MVVM 框架KnockOut.JS深入浅出视频教程
- 前端 MVVM 框架KnockOut.JS深入浅出视频教程
- 微软官方推荐前端 MVVM 框架KnockOut.JS深入浅出(史上最全面、深入、权威教程)
- 前端MVVM框架:Knockout.JS(一)
- Javascript MVVM模式前端框架—Knockout 2.1.0系列:目录
- 前端开发框架Bootstrap和Knockout.js
- JS框架——MVVM模式的Knockout.js
- Javascript MVVM模式前端框架—Knockout 2.1.0系列(9):内建绑定之——Click绑定
- 前端mvvm框架vuejs教程集合
- Javascript MVVM模式前端框架—Knockout 2.1.0系列(3):文本和样式绑定(上篇)
- Javascript MVVM模式前端框架—Knockout 2.1.0系列(6):控制流Control Flow(上篇)
- js架构设计模式——前端MVVM框架设计及实现(二)
- Javascript MVVM模式前端框架—Knockout 2.1.0系列:目录
- KnockoutJS---一个极其优秀的MVVM模型的js框架
- Javascript MVVM模式前端框架—Knockout 2.1.0系列(11):内建绑定之——Enable、Value、uniqueName绑定
- Javascript MVVM模式前端框架—Knockout 2.1.0系列(8):控制流Control Flow(下篇):if和with绑定
- Cpage.js,一款轻盈的前端MVVM框架
- Javascript MVVM模式前端框架—Knockout 2.1.0系列(10):内建绑定之——Event绑定
- Javascript MVVM模式前端框架—Knockout 2.1.0系列(5):文本和样式绑定(下篇)
- 前端开发框架Bootstrap和Knockout.js