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


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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
JavaScript中继承原理与用法实例入门
May 09 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
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
tagName的使用,留一笔
2006/06/26 Javascript
枚举JavaScript对象的函数
2006/12/22 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
python flask几分钟实现web服务的例子
2019/07/26 Python
python3 实现口罩抽签的功能
2020/03/11 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
在线课程:Skillshare
2019/04/02 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
保护环境倡议书范文
2014/05/13 职场文书
党性观念心得体会
2014/09/03 职场文书
学籍证明模板
2015/06/18 职场文书
干部外出学习心得体会
2016/01/18 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL