微信小程序官方文档中表单组建button部分有关function(type)中type的个人理解

官方文档关于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的值

巴特西

微信小程序官方文档中表单组建button部分有关function(type)中type的个人理解

最新文章

热门文章