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


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 相关文章推荐
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
Vue核心概念Action的总结
Jan 18 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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 checkbox 取值详细说明
2010/08/19 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
Python pickle模块用法实例
2015/04/14 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
网络管理专业求职信
2014/03/15 职场文书
《大海那边》教学反思
2014/04/09 职场文书
行风评议整改报告
2014/11/06 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python