官方文档关于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. 离线安装Mariadb

    CentOS7.4开发站系统和红旗Asianux-7.3离线安装Mariadb 安装 需要Root权限 # 解压离线rpm包 tar -xvf Mariadb5.5.56.tar cd Mariadb ...

  2. Linux CentOS 7 搭建 Tomcat 8 服务器

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样 ...

  3. 面试连环炮系列(五):你们的项目为什么要用RabbitMQ

    你们的项目为什么要用RabbitMQ? 消息队列的作用是系统解耦.同步改异步.请求消峰,举个下订单的例子: 前端获取用户订单信息,请求后端的订单创建接口.这个接口并不直接请求订单服务,而是首先生成唯一 ...

  4. 利用keras自带影评数据集进行评价正面与否的二分类训练

    from keras.datasets import imdb from keras import layers from keras import models from keras import ...

  5. strcmp函数和memcmp函数的用法区别及联系

    前言: C语言中有很多东西容易搞混,最近笔者就遇到了一个问题.这里做个记录.就是memcmp和strcmp两者的用法,这里做个对比: 功能对比: A memcmp: 函数原型: int memcmp( ...

  6. Nginx模块及配置虚拟主机

    1.Nginx的2组主要的模块 (1)core modules (必需,核心模块) 包括:Main.Events (2)Standard HTTP modules(虽然不是必需,但是缺省都会安装,不建 ...

  7. Python程序设计 测验易错题总结

    1.温度转换 t=input() if t[-1]=="J": t=int(t[:-1]) t1=t/4.186 print("%.3fcal"%t1) els ...

  8. Redis 到底是怎么实现“附近的人”这个功能的呢?

    作者简介 万汨,饿了么资深开发工程师.iOS,Go,Java均有涉猎.目前主攻大数据开发.喜欢骑行.爬山. 前言:针对“附近的人”这一位置服务领域的应用场景,常见的可使用PG.MySQL和MongoD ...

  9. digitalworld.local:Torment Vulnhub Walkthrough

    主机层面扫描: ╰─ nmap -p1-65535 -sV -A 10.10.202.135Starting Nmap 7.70 ( https://nmap.org ) at 2019-08-09 ...

  10. Spring Boot与ActiveMQ整合

    Spring Boot与ActiveMQ整合 1使用内嵌服务 (1)在pom.xml中引入ActiveMQ起步依赖 <dependency> <groupId>org.spri ...