个人技术总结-vue框架下使用动态绑定进行界面渲染

[221900339_张昀]

目录

• 概述
• 技术详述
• 用类&数组进行动态绑定-不同颜色
• 函数进行动态绑定-不同图片
• 问题与解决
• 总结
• 参考文献

概述

渲染页面时，一些重复性模块带有自己属性或者特性，需要将这些特征模块渲染在页面上作为模块的信息之一，这些属性或者特性可能是一些图片（例如不同性别的男/女生头像），也可能是不同的颜色，用于区分不同的紧急程度或是优先级。使用动态绑定可以满足该需求。

技术详述

有两种实现动态绑定的方式

用类&数组进行动态绑定-不同颜色

前后端统一相关属性的参数格式，并且根据相应的紧急程度或是优先级将类名存放在数组中，在属性中动态渲染该模块的某特性所对应的类。
下为类的动态绑定部分代码，其中priority是该模块的优先级属性。

数组中按照顺序存放类名

用于不同属性的类

流程图：

当后端传回的参数不是连续整数或是没有约定好参数的含义时可以用函数进行动态绑定：

函数进行动态绑定-不同图片

动态绑定调用函数

在函数中进行相关判断需要渲染的图片

流程图：

问题与解决

一开始在动态绑定图片的时候，只返回了图片路径的字符串，无法正确渲染。经过查询发现可能是因为动态获取静态图片出现的问题，最后使用require(path)之后成功渲染。

总结

使用动态绑定渲染可以使用类或者是函数，只使用类可以很方便的根据参数渲染出不同等级的模块效果，但是需要约定好参数类型和值；使用函数可以很省去约定参数这一工作，比较灵活，但编码量相对于第一种更多。

参考文献

构建之法