前端MVVM框架：Knockout.JS（一）

浏览数：37 / 时间：2015年06月09日

前言

　　在我们平时开发 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>