Personal understanding of the type in function (type) in the form building button part of the official WeChat applet documentation

An introduction to the button component in the official documentation

The xml page is quite easy to understand, but the js part didn't quite understand the overall writing form at first, but gradually I understood it as I gradually read the code.

xml page code:

<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">Click to set the above button loading property </ button > 
< button open-type ="contact" > to enter customer service session </ button >

js code:

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)

At first, it was very confusing. Isn't it usually the following form?

Page({
　　data:{
},

　　onLoad: function (options) {

  }

})

After a closer look, I found that Page(pageObject) is a function defined at the bottom pageObject, and the whole is no different from before

But after seeing this part of function(type), I was a little confused, and Google couldn't find an explanation about 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])
}

combine the initially defined array

var types = ['default', 'primary', 'warn']

I made a bold guess, type may be the current value under type[i], and

var key = type + 'Size'

It is to reorganize the functions defined in data into functions defauSize, primarySize, warnSize in data, and type[i] cleverly responds with the current value, which is the corresponding bindTap value in the xml page, and then changes the size of the button. value