Brix — UX

来自 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 回去。

ATTRS：配置项

来自 KISSY Base

Demo