• 微信小程序官方文档中表单组建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的值

  • 相关阅读:
    P3740 [HAOI2014]贴海报 离散化+线段树
    离散化线段树
    manacher算法
    模板 ac自动机
    "美登杯" E、小花梨的数组* 线段树
    移动端测试
    移动端测试
    空气质量数据爬取-checkpoint.ipynb
    中国空气质量在线监测平台加密数据爬取
    移动端测试
  • 原文地址:https://www.cnblogs.com/qianyoo/p/8964915.html
Copyright © 2020-2023  润新知