BUI基础-配置项和属性

配置项

配置项类实例化时的初始配置，决定对象的初始值，我们看一下示例：

<script>
function A (a,b){
}
var a = new A('a,','b'); //配置项作为独立的参数传入
function B (config){
}
var b = new B({a : 'a',b : 'b'}); //配置项作为键值对的形式传入
</script>

</pre>

我们在这里约定，BUI中的所有控件的配置项全部按照键值对的形式传入，也就是说所有的类实例化时只需要传入一个参数。

属性

属性一般是指对象的某个性质，对于javascript对象而言可以是对象、方法、直接量。由于javascript对象对于成员不存在访问控制，所以对成员的访问和设置没法进行控制，属性发生改变时也无法做出对应的相应。如下示例：

<script>
function A (a){
this.a = a;
this.setA = function(a){
this.a = a;
//do something
//log(a);
}
}
var obj = new A('a value');
//如果我想伴随着a 值的改变做些处理
obj.setA('new a value');
//但是由于对象不存在访问控制
obj.a = 'new b value'; //此时不会执行对应的操作
</script>

</pre>

所以我们需要这样一种属性：

能够对属性的设置和访问做限制
属性的改变能够通知其他对象
配置项通过初始化能够转成属性

BUI.Base类

所以我们使用了BUI.Base类，它拥有以下功能：

有get和set方法用于获取和设置属性，不能直接通过“.”,“[]”操作符修改属性值。
属性值发生改变时触发 beforeXxxChange 和 afterXxxChange 事件，其中属性名是xxx
构造函数的配置项可以转换成属性值

属性的细节和使用接下来我们会详细的讲解，所有需要使用属性的类，继承BUI.Base类即可

<script>
function A (config){
A.superclass.constructor.call(this,config)
}
BUI.extend(A,BUI.Base); //继承属性类
A.ATTRS = { //在ATTRS上定义属性
a : {
value : 'a' //默认值
},
b : {
}
};
var a = new A({ a : 'initial a',b : 'b'}); //创建A 的实例
a.get('a'); //initial a
a.set('a','new a'); //new a
b.get('b'); //b
a.set('c','c');
a.get('c'); //c
</script>

</pre>

声明新的类A，并在构造函数里调用父类的构造函数
继承BUI.Base使用BUI.extend方法
声明属性值，每个属性是一个对象，value是默认值，属性的定义下面有更详细的介绍
创建A的实例a，传递配置项，配置项会转变成属性值
通过A的示例获取，设置定义的属性，会触发（beforeXxxChange,afterXxxChange)事件，例如name 属性会触发（beforeNameChange,afterNameChange)
设置未定义的属性，依然会生效，但是不会有默认值，依然会触发事件

属性的定义

上面的示例说明了如何定义一个属性，和如何设置默认值value，接下来我们来看属性还支持哪些功能

<script>
function A (config){
A.superclass.constructor.call(this,config)
}
BUI.extend(A,BUI.Base); //继承属性类
A.ATTRS = { //在ATTRS上定义属性
a : {
value : 'a' //默认值
},
b : {
getter : function(v){ //获取函数，v是当前属性设置的值，返回值为 a.get('b')的值
return v * 2;
},
setter : function(v){
return parseInt(v);
}
},
c : {
valueFn : function(){ //在第一次调用此属性是执行此函数，并作为属性的值使用，只执行一次
return this.get('a') + this.get('b');
}
},
d : {
value : 'd', //如果value和valueFn同时存在，则以value优先
valueFn : function(){
return this.get('a');
}
}
};
var a = new A({a : 'a1',b : '2'}); //{a :'a1',b : '2'}
a.get('a'); //a1
a.get('b'); //2 * 2 = 4
a.get('c'); //a1 + 4 = a14
a.get('d'); //a1
</script>

</pre>

上面的示例说明了属性的具体用法，以及内部的成员的含义：

value : 属性的默认值
getter : 获取属性时执行，并以getter的返回结果为准
setter : 设置属性时执行，以setter的返回值为准
valueFn : 属性第一次获取时执行，之后作为value来使用，如果同时定义了value ，不执行此函数。

属性图示

下图说明了属性的执行过程

image

Base类有2个私有字段和一个静态字段：

ATTRS：是在类定义时指定的属性定义
__attrs ：存放类和从父类继承来的属性定义
__attrVals：存放通过配置项设置的值或者通过set方法设置的值

属性获取

获取属性值，先查找__attrVals中是否存在值，如果存在通过getter（如果存在）格式化返回；
如果不存在查看__attrs里对应的属性，查看是否存在value，存在通过getter格式化返回
如果不存在，查看valueFn，执行完valueFn后，将返回值替换为value，通过getter格式化返回

属性设置

设置值，先通过setter（如果存在）格式化
触发beforeXxxChange事件
覆盖__attrVals中的值
触发afterXxxChange事件

Xxx代表属性名，首写字母大写，如： name => beforeNameChange,afterNameChange

属性类的API

BUI.Base继承自BUI.Obeservable，继承来的属性和方法，请查看BUI的方法和事件

下面只是简单的列表，未显示从父类继承来的方法，详细信息请查看API文档

下一步学习

BUI的配置和属性是所有控件的一个基础章节，接下来继续学习BUI的方法和事件，你可以去看一下如何组织模块CMD组织模块，然后进入到BUI控件编写的学习中。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342

BUI基础-配置项和属性

配置项

属性

BUI.Base类

属性的定义

属性图示

属性获取

属性设置

属性类的API

下一步学习

推荐阅读更多精彩内容