微信小程序官方文档中表单组建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:{
},
})
仔细一看后发现 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.视图层->WXSS->尺寸单位 明显错误,应该为 ...
- 微信小程序官方文档
开发手册: https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html 管理后台: https://mp.weixin ...
- 微信小程序官方文档中的加密算法
用Nodejs来算一下:
- ***微信小程序学习文档和资料归档收集
微信小程序官方文档: https://cloud.tencent.com/document/product/619 小程序培训视频教程: https://xw.qq.com/edu/201805140 ...
- 微信小程序 PHP后端form表单提交实例详解
微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...
- 微信小程序入门文档
一 基本介绍 微信专门为小程序开发了一个ide叫做微信开发者工具 最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式. https://mp.weixin.qq.com ...
- 微信-小程序-开发文档-服务端-模板消息:templateMessage.send
ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.send 1.返回顶部 1. templateMessage.send 本接口应在服务器端调用,详细说明参见服 ...
- 微信小程序 开发文档
官方开发文档: 小程序公众平台 小程序开发者指南 小程序开发者文档 学习资源: 微信:官方入门教程 微信:WeUI 是一套同微信原生视觉体验一致的基础样式库 微信:微信小程序示例 视频: 学堂在线:学 ...
- 微信小程序_(组件)form表单
Form表单.switch开关.数值选择器效果 官方文档:传送门 点击提交表单(按钮,提交开关,数值选择器,输入文本中)的值,显示在控制台上,点击重置,重置表单中的值. 实现过程 form表单,添加f ...
随机推荐
- ffmpeg+nginx 实现rtsp转rtmp并通过nginx转发
Windows安装 ffmpeg ffmpeg windows版下载地址https://ffmpeg.zeranoe.com/builds/ static版本就行 配置环境变量:下载的压缩包解压后的路 ...
- 参加杭州 2019 AI Bootcamp有感与总结(2)
接上篇 参加杭州 2019 AI Bootcamp有感与总结(1) - repeatedly - 博客园 午餐畅谈的收获 先感谢主办方提供的午餐,中午午休的时候,大家聊了很多,或者说主要是听大佬谈.聊 ...
- 使用系统定时器SysTick实现精确延时微秒和毫秒函数
SysTick定时器简介 SysTick定时器是存在于系统内核的一个滴答定时器,只要是ARM Cortex-M0/M3/M4/M7内核的MCU都包含这个定时器,它是一个24位的递减定时器,当计数到 0 ...
- 如何修改CAD字体颜色?试试这种方法
CAD中编辑图纸的时候,使用的CAD制图软件来进行绘制,图纸中的CAD字体颜色都是默认的颜色,这样不方便进行查看.这个时候就需要修改CAD字体颜色了,那么如何修改CAD字体颜色呢?具体要怎么来进行操作 ...
- Python第一个程序Hello Word
[源代码] print('Hello Python World!') [过程] 打开命令提示窗口(cmd),在源程序所在路径下执行,python 文件名.py. [截图]
- 小程序封装request请求,统一API
程序开发中都会调用后端工程师开发的API,小程序的开发文档提供了相对实用的APIwx.request(),但是在开发的过程中,又遇到了一些问题,在小程序的项目开发时,调用的API不止一个,同一个API ...
- NuGet修改默认包保存的位置
NuGet默认的全局包下载地址一般为:C:\Users\{username}\.nuget\packages 修改方法: <?xml version="1.0" encodi ...
- [20191127]探究等待事件的本源4.txt
[20191127]探究等待事件的本源4.txt --//昨天使用ash_wait_chains.sql脚本把各个生产库执行1遍,才发现我对一套系统性能理解错误.--//我一直以为这套系统存储有点问题 ...
- [PHP] php使用event扩展的io复用测试
先要安装event扩展,这样才可以使用libevent的事件机制 pecl install event 测试代码 //连接重用 //创建资源流的上下文 $context=stream_context_ ...
- GithubPages+Hexo博客搭建记录
目录 前言 安装Node.js 安装Git 安装Hexo 查看效果 建立Github Pages 注册Github帐户 建立托管博客的仓库 制作SSH密钥 添加公钥到Github 测试连接 把本地的博 ...