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


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 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
Highcharts学习之数据列
Aug 03 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
Vue程序调试的方法
Jun 17 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
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
laravel学习教程之关联模型
2016/07/30 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
如何提高数据访问速度
2016/12/26 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
详解python eval函数的妙用
2017/11/16 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
师范生自我鉴定
2014/03/20 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
四则混合运算教学反思
2016/02/23 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android