zoukankan      html  css  js  c++  java
  • 微信小程序官方文档中表单组建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的值

  • 相关阅读:
    震旦199打印机扫描A4文件
    震旦199打印机使用“多组多张文件”复印功能
    局域网电脑快速添加共享的打印机
    打印机连续打印,速度变慢,打印队列一直自动闪烁
    用IntelliJ IDEA编译,编译之后提示 无效的标记: -release
    hao360恶意篡改IE首页——修复方法
    联想一体机怎么设置u盘启动|联想一体机bios改U盘启动方法(转)
    解决局域网IP冲突
    Cisco Packet Tracer 交换机 2950-24 配置
    静态路由作用和添加删除命令
  • 原文地址:https://www.cnblogs.com/awayfly/p/8964915.html
Copyright © 2011-2022 走看看