小程序如何写动态标签的实现方法


Posted in Javascript onFebruary 05, 2020

web开发中,尤其使用react开发项目时,我们可以很方便的动态定义标签(jsx)

const props = {
 id: '',
 className: '',
 data-a: ''
}
<button {...props} />

动态配置标签的好处一是所有逻辑在JS端控制,二是使得我们的模板非常规范,方便后续维护更新,碎片模板可以很好的控制,三是我们可以根据使用场景很方便的配置props的属性,这样在html结构输出的时候能够得到比较干净的结构

在小程序的开发中,却不能实现类似的功能,导致我们的动态标签通常非常的冗余,多余的属性全部展示在结构生成后

以button为例,我们知道button在小程序中有非常多的属性

小程序如何写动态标签的实现方法

如上所示,这里只是列举了一部分的属性

动态模板

我们的button动态模板写下来应该是这样的

配置

Page({
 data: {
  option: {
   ...
  }
 }
})
<button
 size="{{option.size || 'default'}}"
 type="{{option.type || 'default'}}"
 plain="{{option.plain || false}}"
 value="{{option.value || '按钮'}}"
 ...
 ...
/>

调试工具的输出结构

<button bindtap='' size='' type='' plain='' disabled=false open-typ='' hover-class='' .... />

可以看到调试工具中输出的结构就会变得非常冗余,降低了开发效率,这种冗余的模板输出搞久了会吐的好吧。

可以使用模板语法区分不同场景的button,我知道会有很多这样的声音,但那不是动态模板。

解决问题

那要如何解决输出结构不冗余呢,说了这么多终于到了重点,其实真的只是一个很小的技巧,我的开发经历告诉我这是有效的,你也可以试试,将默认值统统换成 '',改版后的模板如下

<button
 size="{{option.size || ''}}"
 type="{{option.type || ''}}"
 plain="{{option.plain || ''}}"
 value="{{option.value || '按钮'}}"
 ...
 ...
/>

这时你得到的模板就是一段漂亮的结构

<button value='按钮' />

关注我们的开源小程序

https://github.com/webkixi/aotoo-xquery

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
javascript实现日期格式转换
Dec 16 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
动态Axios的配置步骤详解
Jan 12 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
JS实现4位随机验证码
Oct 19 Javascript
vue如何实现动态加载脚本
Feb 05 #Javascript
vue实现图片懒加载的方法分析
Feb 05 #Javascript
Vue组件基础用法详解
Feb 05 #Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 #Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 #Javascript
Vuex的API文档说明详解
Feb 05 #Javascript
如何实现iframe父子传参通信
Feb 05 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
js实现select选择框效果及美化
2016/08/19 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
axios基本入门用法教程
2017/03/25 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
numpy中的ndarray方法和属性详解
2019/05/27 Python
django之自定义软删除Model的方法
2019/08/14 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
大学毕业登记表自我鉴定
2013/10/09 职场文书
年终总结会议主持词
2014/03/17 职场文书
大学生就业意向书范文
2014/04/01 职场文书
初中作文评语大全
2014/04/23 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
清明节演讲稿
2014/05/27 职场文书
公司经理任命书
2014/06/05 职场文书
理财学专业自荐书
2014/06/28 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
故宫英文导游词
2015/01/31 职场文书
离婚案件上诉状
2015/05/23 职场文书
教师节领导致辞
2015/07/29 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang