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

前言

　　在我們平時開發 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 更多的用法展示一下。