官方文档关于button组件的简介
xml页面挺容易理解,但js部分起初对整体写的形式都不太理解,随着逐渐阅读代码基本理解了
xml页面代码:
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button> <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary </button> <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button> <button bindtap="setDisabled">点击设置以上按钮disabled属性</button> <button bindtap="setPlain">点击设置以上按钮plain属性</button> <button bindtap="setLoading">点击设置以上按钮loading属性</button> <button open-type="contact">进入客服会话</button>
js代码:
var types = ['default', 'primary', 'warn'] var pageObject = { data: { defaultSize: 'default', primarySize: 'default', warnSize: 'default', disabled: false, plain: false, loading: false }, setDisabled: function (e) { this.setData({ disabled: !this.data.disabled }) }, setPlain: function (e) { this.setData({ plain: !this.data.plain }) }, setLoading: function (e) { this.setData({ loading: !this.data.loading }) } } for (var i = 0; i < types.length; ++i) { (function (type) { pageObject[type] = function (e) { var key = type + 'Size' var changedData = {} changedData[key] = this.data[key] === 'default' ? 'mini' : 'default' this.setData(changedData) } })(types[i]) } Page(pageObject)
起初很懵逼,一般不都是下边这种形式么
Page({
data:{
},
onLoad: function (options) {
}
})
仔细一看后发现 Page(pageObject) 在最下边 pageObject是定义的一个函数,整体和之前没什么区别
但看到function(type)这部分后,有点懵逼,Google也搜不到关于function(type)的解释
for (var i = 0; i < types.length; ++i) { (function (type) { pageObject[type] = function (e) { var key = type + 'Size' var changedData = {} changedData[key] = this.data[key] === 'default' ? 'mini' : 'default' this.setData(changedData) } })(types[i]) }
结合最初定义的数组
var types = ['default', 'primary', 'warn']
我就大胆猜测了一下,type可能是types[i]下当前的值,而
var key = type + 'Size'
是对data中定义的函数进行重组成data中的函数defauSize,primarySize,warnSize,而type[i]又巧妙地用当前的值也就是xml页面中对应的bindTap值进行响应,继而改变button的size的值