官方文档关于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. Pikachu-XSS

    XSS(跨站脚本)概述 Cross-Site Scripting 简称为“CSS”,为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XSS可以分为如下几种常见类型: ...

  2. PL/SQL Developer查詢已經執行過的SQL語句記錄 Ctrl+E

    PL/SQL Developer查詢已經執行過的SQL語句記錄 最近提数比较多,没有已存在的脚本信息,就手工写呀... 一次性打开了多个提数脚本文件,结果执行完后把脚本保存好了,但是最后的整理其它脚本 ...

  3. C语言笔记 01_介绍&环境设置&编译执行

    前言 我是作为一个前端开发者入的编程世界,经过时间的推移,我发现对于编程底层的一些东西一点都不了解,只拘泥于表面,所以想尝试学习C语言然后进一步了解底层机制. 介绍 C 语言是一种通用的.面向过程式的 ...

  4. Jmeter+Ant+Jenkins集成抛出异常java.lang.ClassNotFoundException: javax.mail.internet.MimeMessage

    一.问题描述 二.解决方法 下载javax.mail.jar插件,并将该插件放到%ANT_HOME%\lib目录下即可解决,下载地址:https://javaee.github.io/javamail ...

  5. SQLserver还原失败(数据库正在使用,无法获得对数据库的独占访问权)

    问题描述: Sql server还原失败(数据库正在使用,无法获得对数据库的独占访问权) 数据库还原的时候还有其他进程连在上面,导致无法获得独占造成的. 这个问题的原因在于有用户连接了当前要做还原的数 ...

  6. nltk词性标注

    将词汇按它们的词性(parts-of-speech,POS)分类以及相应的标注它们的过程被称为词性标注(part-of-speech tagging, POS tagging)或干脆简称标注.词性也称 ...

  7. springboot~mybatis枚举映射

    在mybatis和mybatis plus里,如果你的实体字段是一个枚举类型,而在数据表里是整型,这时在存储时需要进行处理,默认情况下,会把枚举的元素名称拼接到SQL语句里,而由于数据表是int类型, ...

  8. QGIS 3.4 3.6 另存栅格图层到GeoPackage出现覆盖问题 解决方案

    转载请声明:博客园 @秋意正寒 升级你的QGIS到3.8或以上 这在3.4.x和3.6.x都存在同样的问题.在老版本QGIS重,如果新建一个GeoPackage,先存入栅格数据就没有这个问题,但是如果 ...

  9. Abp RabbitMqEventBus

    RabbitMQ安装介绍查看该网址 两个App都要配置 appsettings.json { "RabbitMQ": { "Connections": { &q ...

  10. 增加sudo用户访问oracle

    增加zgy用户可以访问数据库[root@DBDATA ~]# useradd zgy--设置密码[root@DBDATA ~]# passwd zgy--设置组[root@DBDATA ~]# use ...