【低代码】前端低代码开发日记2_遇到的问题（2）变量绑定

解决完双向绑定的问题，关于变量绑定的问题还有很多没有解决，变量的绑定是困惑我很久的问题，致使我一度想要放弃。

遇到的问题

变量绑定

当我们想要把一个静态页面页面动起来，在Vue中，我们只需要把变量和属性绑定好后，修改变量值就可以看到页面的变化，但是就是变量的绑定的功能给我造成了巨大的困扰。

{
    "id": "component_nQ-SP",
    "label": "组件",
    "uiType": "component",
    "uiName": "组件",
    "domType": "div",
    "children": [
        {
            "uiType": "component",
            "uiName": "h1元素",
            "domType": "h1",
            "children": [
                {
                    "uiName": "文本",
                    "uiType": "text",
                    "attrs": [
                        {
                            "label": "内容",
                            "key": "textContent",
                            "value": "$refs:{\"nodeId\":\"var_z2pah\"}",
                            "id": "textContent_Fe8S7"
                        }
                    ],
                    "id": "text_J8Sb5",
                    "label": "文本_ON6jA"
                }
            ],
            "id": "component_hCTZm",
            "label": "h1元素_Oan0q"
        }
    ],
    "data": [
        {
            "id": "var_z2pah",
            "label": "变量1",
            "key": "var1",
            "value": "测试文本",
            "type": "string",
            "arrayType": "",
            "objectType": ""
        }
    ],
    "bind": {
        "textContent_Fe8S7": "var_z2pah"
    },
}

我把变量的绑定分了几个难度级：

1.普通难度：

• 组件中整个属性的绑定和整个变量的绑定

在这一层次中，所有值都可以直接通过bind字段进行绑定，操作相对简单。

2.困难难度：

• 需要绑定某个对象的某个属性。
• 需要绑定数组变量的某个数组项。

对于这些情况，我采用了表达式替换的方式。例如，值以$refs:开头时，就表示引用了变量。此时没有使用bind字段，因为它无法有效描述属性的绑定。最初我考虑过使用JSONPath描述，但由于复杂性太高而放弃。

如果绑定的是表达式（而不是直接的变量），如var_1 + 1，实现难度则会更高。由于涉及到双向绑定时值变化的情形，我没有去实现这一功能。

经过多番思考，我决定使用CodeMirror来维护变量引用。在输入过程中，可以为用户提供提示和高亮功能。尽管这与我最初“所有配置都能通过点击完成”的想法相悖，但为了实现灵活性，我还是选择了这一方式。

体验最新的轻构低代码

账号：test
密码：123456

欢迎试用并给建议，目前BUG比较多