官方文档关于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. Unity Ruby's Adventure 第二步

    加载游戏资源(已注册Unity) Step1:打开Unity 依次点击 Window>Asset Store(资源商店) Step2:搜索资源 Ruby's Adventure Step3:购买 ...

  2. Python连载57- 邮件头和主题、解析邮件

    一.添加邮件头,抄送等信息 1.mail["From"]表示发送者信息,包括姓名和邮件 2.mail["To"]表示接收者信息,包括姓名和邮件地址 3.mail ...

  3. utf8和utf8mb4的区别

    一.简介 MySQL在5.5.3之后增加了这个utf8mb4的编码,mb4就是most bytes 4的意思,专门用来兼容四字节的unicode.好在utf8mb4是utf8的超集,除了将编码改为ut ...

  4. 利用keras自带房价数据集进行房价预测

    import numpy as np from keras.datasets import boston_housing from keras import layers from keras imp ...

  5. jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

    html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,   ...

  6. .NET Core 轻量级模板引擎 Mustachio

    一. 前言 Mustachio 是一款轻量级且强大的模板引擎,可以用在网页渲染.代码生成器等需要模板引擎的场景.我用它是用在配置文件模板化的场景,在配置文件里面编写一些模板语法,然后从 Cloud 拉 ...

  7. Prometheus监控(二)

    Prometheus监控(二) 数据类型 Counter(计数器类型) Counter类型的指标的工作方式和计数器一样,只增不减(除非系统发生了重置),Counter一般用于累计值. Gauges(仪 ...

  8. Linux(三)

    1.用户与用户组        Linux系统是一个多用户.多任务的操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员(root)申请一个账号,然后以这个账号的身份进入系统.       ...

  9. 新手学Html之JSP基础语法——入门(二)

    JSP基础语法 JSP注释 comment.jsp <%@ page language="java" contentType="text/html; charset ...

  10. 【西北师大-2108Java】第十次作业成绩汇总

    [西北师大-2108Java]第十次作业成绩汇总 作业题目 面向对象程序设计(JAVA) 第12周学习指导及要求 实验目的与要求 (1)掌握Vetor.Stack.Hashtable三个类的用途及常用 ...