官方文档关于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的个人理解的更多相关文章

  1. 微信小程序官方文档错误整理

    大致看了一遍微信小程序文档,发现有几处微小的错误,但瑕不掩瑜.记录下,以后发现了还会继续在此添加.如果有记录不对的,请及时指出错误. 1.视图层->WXSS->尺寸单位 明显错误,应该为 ...

  2. 微信小程序官方文档

    开发手册: https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html 管理后台: https://mp.weixin ...

  3. 微信小程序官方文档中的加密算法

    用Nodejs来算一下:

  4. ***微信小程序学习文档和资料归档收集

    微信小程序官方文档: https://cloud.tencent.com/document/product/619 小程序培训视频教程: https://xw.qq.com/edu/201805140 ...

  5. 微信小程序 PHP后端form表单提交实例详解

    微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...

  6. 微信小程序入门文档

    一 基本介绍 微信专门为小程序开发了一个ide叫做微信开发者工具 最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式. https://mp.weixin.qq.com ...

  7. 微信-小程序-开发文档-服务端-模板消息:templateMessage.send

    ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.send 1.返回顶部 1. templateMessage.send 本接口应在服务器端调用,详细说明参见服 ...

  8. 微信小程序 开发文档

    官方开发文档: 小程序公众平台 小程序开发者指南 小程序开发者文档 学习资源: 微信:官方入门教程 微信:WeUI 是一套同微信原生视觉体验一致的基础样式库 微信:微信小程序示例 视频: 学堂在线:学 ...

  9. 微信小程序_(组件)form表单

    Form表单.switch开关.数值选择器效果 官方文档:传送门 点击提交表单(按钮,提交开关,数值选择器,输入文本中)的值,显示在控制台上,点击重置,重置表单中的值. 实现过程 form表单,添加f ...

随机推荐

  1. 相机位姿求解——P3P问题

    1.位姿求解是计算机视觉中经常遇到的,Perspective-n-Points, PnP(P3P)提供了一种解决方案,它是一种由3D-2D的位姿求解方式,即需要已知匹配的3D点和图像2D点.目前遇到的 ...

  2. gohook 一个支持运行时替换 golang 函数的库实现

    运行时替换函数对 golang 这类静态语言来说并不是件容易的事情,语言层面的不支持导致只能从机器码层面做些奇怪 hack,往往艰难,但如能成功,那挣脱牢笼带来的成就感,想想就让人兴奋. gohook ...

  3. redis集群搭建及常用操作

    前言: Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类key/value存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供 ...

  4. Vultr主机绑定域名

    1.在腾讯云上注册域名 然后,域名实名认证 2.Vultr主机购买(看我之前写的:手把手教你如何自己搭梯子) 然后会获取到一个服务器IP地址 3.绑定域名与IP 点解,解析后会弹出让你输入IP地址,此 ...

  5. Flask request和response

        Response # -*- coding: utf-8 -*-   from flask import Flask, redirect, render_template, jsonify,  ...

  6. 天下代码一大抄,整个案例的搬是什么鬼!疑似冒充蚂蚁金服高级Java开发工程师?你大爷

    写在开始 上班前的第一件事,就是码云看看有什么消息,回复下网友的问题.如果看到喜欢的项目会点进去瞅瞅,然后就开始一天的工作. 然而,这一天的工作并不开心,一个今日热门项目让自己很恼火,一开始感觉并没有 ...

  7. spring为类的静态属性实现注入

    我们知道,正常情况下,spring的一个bean要依赖其他资源,如properties或其他bean,直接利用@Value或@Autowired就可以了.这两个注解就相当于spring applica ...

  8. linux安装数据时报错Could not execute auto check for display colors using command /usr/bin/xdpyinfo.

    在redhat6.5上安装Oracle时,最后使用oracle用户执行runInstaller 报错如下,无法连接到安装有xmanager的windows服务器,也就无法图形化安装oracle ora ...

  9. WASM 成为 HTML、CSS 与 JS 之后的第 4 门 Web 语言

    大家都知道,万维网联盟 W3C 认证的 Web 语言有 HTML.CSS 与 JavaScript,而近日联盟正式宣布 WebAssembly 核心规范(WebAssembly Core Specif ...

  10. 如何清除Mac上的空间,让Mac更有效地运行

    清理Mac上的空间通常被认为是一件必须要做的事情.因为这样,Mac将在驱动器上具有更多可用空间,从而可以更好地运行,并且您(以及系统和各种应用程序)可以根据需要利用额外的空间. 您可能会问的一个问题是 ...