首先

(function (type) {

    …

})(types[i])

是一个自调用函数，等价于

var f = function(type){

    …

}

f(types[i]);

这个循环就相当于对types数组中的每一个元素执行一次这个函数，这个函数的内容是

pageObject[type] = function (e) {

    var key = type + ‘Size’

    var changedData = {}

    changedData[key] =

       this.data[key] === ‘default’ ? ‘mini’ : ‘default’

   this.setData(changedData)

}

即给PageObject设置一个名为type的属性，值为一个函数，所以就等价于在PageObject中添加了三个属性（default, primary, warn），下面以default为例

default: function(e){

   var key = ‘default’ + ‘Size’

   var changedData = {}

        changedData[key] =

   this.data[key] === ‘default’ ? ‘mini’ : ‘default’

   this.setData(changedData)

}

这个函数是用来响应type="default"的那个button的bindtap事件

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>

简化一下后就是这样

default: function(e) {

    var key = ‘defaultSize’;

    this.setData({

       ‘defaultSize’: this.data[key] === ‘default’ ? ‘mini’ : ‘default’

    })

}

就是设置这个按钮的size属性，如果现在是default就设置成mini，否则设置成default，就实现了变大变小的效果