ExtJS5搭建MVVM框架

在前端开发中，为了提高代码的复用性和可维护性，采用MVVM框架已经成为了一种很普遍的做法。jQuery、AngularJS、Vue.js等框架都采用了MVVM架构。在本文中，我们将介绍如何使用ExtJS5来搭建MVVM框架。

什么是MVVM？

在开始介绍MVVM框架之前，我们先来看看什么是MVVM。

MVVM是Model-View-ViewModel的缩写。

• Model：模型，提供数据模型和业务逻辑；
• View：视图，负责显示内容和获取用户输入；
• ViewModel：视图模型，负责响应用户操作并更新视图。

MVVM框架通过数据绑定实现View和Model之间的双向同步，将视图和业务逻辑分离，使得视图能够独立于业务逻辑进行开发和维护。在MVVM框架中，开发者只需要关注业务逻辑的实现以及视图和业务逻辑之间的数据绑定，而无需关注DOM操作或者事件绑定等底层细节。

使用ExtJS5搭建MVVM框架

在使用ExtJS5搭建MVVM框架前，我们需要先了解一下ExtJS5的MVC框架，MVC即Model-View-Controller。

• Model：数据模型，提供业务逻辑和数据存储功能，它可以是和后端数据打交道的数据模型，也可以是静态的数据模型；
• View：视图，负责数据的显示，可以使页面、UI组件等等；
• Controller：控制器，负责处理用户的请求，对Model和View进行操作。

在ExtJS5中，ViewModel扮演了View和Model之间的桥梁，负责处理View和Model之间的数据交互，将视图状态和数据进行绑定。ViewModel负责管理从数据模型中提取的数据，自动更新视图，确保状态的同步。

下面是一个使用ExtJS5搭建MVVM框架的示例代码：

Ext.define('MyApp.view.main.MainViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',

    stores: {
        users: {
            type: 'users'
        }
    }
});

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    onItemSelected: function (sender, record) {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    onConfirm: function (choice) {
        if (choice === 'yes') {
            //
        }
    }
});

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',
    requires: [
        'MyApp.view.main.MainController',
        'MyApp.view.main.MainViewModel',
        'MyApp.store.Users'
    ],

    controller: 'main',
    viewModel: 'main',

    items: [{
        xtype: 'grid',
        bind: '{users}',
        listeners: {
            select: 'onItemSelected'
        },
        columns: [{
            text: 'ID',
            dataIndex: 'id'
        }, {
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }]
    }]
});

在上述代码中，我们首先定义了ViewModel，将Users存储到ViewModel下，然后定义了Controller并实现了一个名称为onItemSelected的方法。在View中，我们将ViewModel和Controller进行绑定，并将Users绑定到Grid上。

总结

本文介绍了MVVM框架和使用ExtJS5搭建MVVM框架的方法，MVVM框架将View和Model之间的数据绑定抽象为ViewModel，并通过管理数据模型中提取的数据，自动更新视图，确保状态的同步。使用MVVM框架能够提高代码的复用性和可维护性。