[Sencha] 深入 Sencha 类中的 配置项(Config) 系统

原文链接：https://blog.csdn.net/lovelyelfpop/article/details/78644620

从一开始，Ext JS框架就实现了一个类系统，来扩展JavaScript。类系统的目标是支持高效的代码组织，并实现在许多面向对象编程语言中都有的”伪”经典继承。

随着Ext JS 4.0的发布，Sencha决定重新审视他们的类系统，并以更多的面向对象的好东西来提升它。特别是他们开发了一个配置项(Config)系统，用来扩充 类成员属性。这篇博客文章将深入到Config系统，以及它如何在Ext JS 4.x，5.x, 6.x和Sencha Touch 2.x中使用。

Sencha 类系统

Sencha类系统是整个框架系列的基础，从一个名为Ext.Base的类开始。除了少数例外，类名必须遵循与其文件路径直接相关的命名约定。

下面是一个示例Sencha类的定义，实例和用法：在Fiddle上查看

// 定义一个名为"Car"的类
Ext.define('Car', {
    // 定义配置项
    config : {
        make  : undefined,
        model : undefined
    },
    // 类实例化时首先被调用的方法
    constructor : function (config) {
        // 初始化 配置项
        this.initConfig(config);
    },
    // 定义一个 drive 方法
    drive : function () {
        console.log('Driving ' + this.getMake() + ' ' + this.getModel());
    }
});

// 实例化 "Car" 类，并传入配置项
var car = Ext.create('Car', {
    make  : 'Honda',
    model : 'Accord'
});

// 调用实例的 "drive" 方法
// 浏览器控制台输出 "Driving Honda Accord"
car.drive();

配置项系统

您可能会注意到，我们在该类示例中定义了一些配置项。让我们深入探讨发生了什么。JavaScript解释器将函数参数视为一个普通对象，并带有一个“config”键，内含一些子成员。然后，在类实例化过程中，initConfig方法会被调用。如上所述，这个方法初始化该类的实例的配置项系统。然后，配置项系统向类的实例注册相关的属性和配置项方法。

配置方法

Getter 访问器

Getter 访问器方法，返回配置项的当前值。这是配置项系统自动生成的方法。在Fiddle上查看

car.getMake(); // 返回 “Honda”

Setter 访问器

Setter 访问器方法，用于设置类实例上配置项的值。这也是配置项系统自动生成的方法。在Fiddle上查看

car.setMake(“Toyota”);
car.getMake(); // 返回“Toyota”

Applier

在配置项的值改变的时候，这个函数被setter调用（例如从undefined到“Foo”）。Applier 函数必须返回一个值; 这个值将是配置项的新值。Applier 方法由配置项系统自动生成，通常在设置配置项值之前，执行某种逻辑。
在Fiddle上查看

// 定义 applier 函数 的例子
applyMake : function (newValue, oldValue) {
    // 执行某些逻辑
    if(oldValue.length > newValue.length) {
        return oldValue.toUpperCase();
    } 

    return newValue.toUpperCase(); 
}

Updater

当配置项的值改变（例如从“Foo”到“Bar”）时，Updater 函数在施加器之后由setter调用。Updater 函数通常被用作当配置项的值改变之后的反应。
在Fiddle上查看

// 定义 updater 函数 的例子
updateModel : function (newValue, oldValue) {
    if(newValue === 'Accord') {
        this.setMake('Honda');
    } else if(newValue === 'Camry') {
        this.setMake('Toyota');
    }
}

潜在的情况

• 根据配置项值的更改，来改变组件的UI元素 在Fiddle上查看

// 当 make 配置项设置了值时候，启用 Drive 按钮
applyMake : function (newValue, oldValue) {
    if(newValue) {
      this.down('button#drivebutton').enable();
    }
    return newValue;
}

• 一旦配置项的值被设置，就实例化一个必需的依赖关系。
  示例: 当URL传入的时候，则 实例化或加载 Store. 在Fiddle上查看

// 当设置了 "storeUrl" 的时候，实例化一个 store
applyStoreUrl : function (url) {
    if(url) {
        this.setStore(Ext.create('Ext.data.Store', {
            fields : ['name'],
            proxy  : {
                type : 'ajax',
                url  : url,
            }
        }));
    }

    return url;
}

• 基于配置项的值实例化一个子组件。
  示例如：添加一个工具栏到面板。在Fiddle上查看

// 利用传入的 cfg 参数实例化 Ext.Toolbar，并返回工具栏的实例
applyHeaderToolbar : function (cfg) {
    if(cfg) {
        var tbar = this.tbar = Ext.create('Ext.Toolbar', cfg);
        return tbar;
    }
}

Ext JS 4 vs Ext JS 5 vs Ext JS 6 vs Sencha Touch 2

尽管Ext JS 4,5,6和Sencha Touch 2共享相同的类系统，但是在配置系统在框架中的角色方面存在一些差异。

在Ext JS 4中，配置项系统不是主力。坦率地说，就连ExtJS4框架本身都很少使用（如果曾经）。因此许多开发者一直忽视了它的存在。

在Ext JS 5.x中，Sencha开始将配置项系统集成到其框架中。Ext JS现在在组件级初始化配置系统。有了这个，所有组件都利用配置项，而不是成员属性。在Ext JS 5配置系统中的一个新特性是，自定义的Setter现在可以通过callParent来调用父类自动生成的Setter。

Sencha Touch 2是其前身的一个重大转变。这让Sencha灵活地从头开始，做“正确”的事情。这对于类系统来说意味着在整个框架中强制使用配置项系统。Sencha Touch 2需要您使用配置项系统来操作类属性。它在内部充分利用该系统的全部潜力。