ATTRS:配置项

这里为大家介绍 ATTRS 的使用

来自 KISSY Base

Brick 的配置项,利用了 KISSY Base 的实现, 所以它的用法与 KISSY 的 Base 是相同的,都从 .ATTRS 配置开始。

引入 Base 的好处在于,我们可以很方便地对配置项做管理:

  • 提供默认值
  • 提供获取属性值时的函数封装(getter)
  • 提供设定属性值时的函数封装(setter)

在 ECMAScript 5 中,原生支持; 但与其临渊羡鱼,不如退而结网,所幸我们已经有了 KISSY Base。因此把 Keystone 的动画颜色弄成可配置的:

Keystone.ATTRS = {
    backgroundColor: {
        // 默认值
        value: '#F50',
        // this.set('backgroundColor', '#ddd'); 的时候会调用的方法
        setter: function(v) {
            if (/^\#[0-9a-f]{6}$/i.test(v) || /^\#[0-9a-f]{3}/i.test(v)) {
                return v;
            }
            else {
                return '#F50';
            }
        },
        // this.get('backgroundColor') 时会调用的方法
        getter: function(v) {
            if (v.length === 4) {
                return '#' + v.substr(1).replace(/\w/ig, function(c) {
                    return c.toUpperCase() + c.toUpperCase();
                })
            }
            else {
                return v.toUpperCase();
            }
        }
    }
};

通过这种封装,我们可以很容易地在 1)设定属性值时过滤输入的值;2)获取属性值时取得符合规则的格式。

Demo

我们可以在初始化 Keystone 的时候就告诉它该用什么颜色高亮段落:

var stone = new Brick({
    el: '#keystone1',
    backgroundColor: '#ddd'
});

也可以在初始化完成之后再去修改它:

// 获取当前颜色
var color = stone.get('backgroundColor');

color = parseInt(color.replace(/^#/, ''), 16);
color -= parseInt('111111', 16);
if (color <= 0) {
    color = Math.floor(Math.random() * parseInt('FFFFFF', 16));
}

// 经过业务逻辑处理之后,赋值回去
stone.set('backgroundColor', '#'+color.toString(16));

在此例中,我们通过 .get 获取到高亮时的背景色,并将它稍作处理(加深,如果它已经变黑色了,就随机一个颜色), 再 .set 回去。