微信小程序官方文档中表单组建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 ...
随机推荐
- Androi O Automotive 介绍
最近由于工作需要对android o 中的 automotive源码进行了深入的学习,现总结如下: Android O Vehicle之架构介绍 Android O Vehicle之Car Servi ...
- ANSIBLE安装和常用模块模块使用详细教程
目录 ANSIBLE安装和各种模块应用功能 安装配置ANSIBLE ANSIBLE使用 ansible-galaxy工具 ansible-pull工具 ansible-playbook ansible ...
- Spring Boot中使用Swagger2构建强大的RESTful(最新全,无坑)
1:说明 网上这类文章 太多, 一搜一大把 ,但是要不是知识太过于老旧,就是配置没有说名清楚,你的项目按照他的配置却不能正常运行: 所以本文的目的: 配置swagger 2 那swagger 1 不 ...
- java中线程的几种实现方式
1. 继承Thread类来实现 class MyThread extends Thread{ @Override public void run() { System.out.println(&quo ...
- CSAPP:逆向工程【二进制炸弹】
转载请注明出处:https://www.cnblogs.com/ustca/p/11694127.html 二进制炸弹任务描述 拓展:缓冲区溢出攻击 "二进制炸弹包含若干个阶段,每个阶段需要 ...
- 从零开始的vue学习笔记(一)
前言 项目要用vue.js,今天开始自学vue.js官方教程,记录下自己的学习摘要,方便后面查阅(此笔记按照学习天数,每天一篇) Vue.js是什么 Vue是一套用于构建用户界面的渐进式框架,Vue ...
- 2.Python 赋值与内存
定义变量和赋值其实就是系统处理内存的过程和问题,这篇文章分别从申请和释放内存两部分讨论 一.申请内存 python定义一个变量时,会为变量的对象申请一个内存,该变量会存储指向该对象内存中的地址 这 ...
- 6.Ansible Roles角色实战
==Roles小技巧:== 1.创建roles目录结构,手动或使用ansible-galaxy init test roles 2.编写roles的功能,也就是tasks. nginx rsyncd ...
- HTML基础——基础标签
一.HTML概述 htyper text markup language 即超文本标记语言. 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语 ...
- Penetration testing“Linux install Nessus”
Ax_Download www.tenable.com/products/nessus-home,need sent email. Bx_Install su ls dpkg -i [filename ...