[导入]template vs. interface : 形与名

博客介绍了接口和模板的特点。接口对应明确概念,名很重要,发布后才能被实现,使用时需负担整个概念;模板弱化类型系统,作用于细节行为,更灵活。同时指出模板与接口在某种程度上是互补的。

     接口(interface)总对应于某种明确的概念,它并不简简单单的等价于其成员函数的集合。有的接口如java.io.Serializable甚至没有任何成员函数。接口最重要的就是名, 是对概念的甄别。接口发布出去之后才能够被实现。当我们使用某个接口的时候,即使我们只用到其中部分函数,我们也必须负担整个概念。虽说"有名,万物之母", 并不是任何时候我们都需要名的。我们会说,就要那个,蓝色的,这么高,... blabla, 对,就是这个(this)。模板(template)弱化了类型系统,它对系统的约束直接作用在细节行为上,降低了明确建模的需求,不需要概念的分解,合并,比接口更加灵活。但模板并不是任何时候都比接口更好。想象一下,我们拿着一张采购单,上面写着需要某个物品,前面有个尖,后面有个帽,细长形,大概这么长,这么粗,上面有螺纹,螺距这么大,。。。这是...三号螺钉?嗯,最近有一种新产品,塑料材质的,你要不要试试。
   模板与接口在某种程度上是互补的。

<template> <div> <!-- 图结构组件:nodes 定义节点,links 定义连接关系(支持多父节点) --> <d3-network :nodes="nodes" :links="links" :options="options" width="800" height="600" /> </div> </template> <script> import D3Network from "vue-d3-network"; // 导入组件 export default { components: { D3Network, // 注册组件 }, data() { return { nodes: [ { id: 1, name: "根节点1", group: 1 }, // 根节点1(group 用于区分样式) { id: 2, name: "根节点2", group: 2 }, // 根节点2 { id: 3, name: "共享子节点", group: 3 }, // 被两个根节点指向的子节点 ], // 连接关系:定义两个根节点→共享子节点的连接 links: [ { source: 1, target: 3 }, // 根节点1 → 共享子节点 { source: 2, target: 3 }, // 根节点2 → 共享子节点(关键:多父节点连接) ], // 样式配置(可选) options: { nodeSize: 20, nodeColor: (node) => { // 不同 group 节点显示不同颜色 const colors = ["#42b983", "#3498db", "#e74c3c"]; return colors[node.group - 1]; }, linkColor: "#999", textColor: "#333", textFontSize: 12, }, }; }, }; </script>报错dialogOrgTree.vue:46 TypeError: Cannot read properties of undefined (reading 'map') at VueComponent.buildNodes (vue-d3-network.umd.js:7696:1) at VueComponent.created (vue-d3-network.umd.js:7590:1) at invokeWithErrorHandling (vue.runtime.esm.js:3017:1) at callHook$1 (vue.runtime.esm.js:4031:1) at Vue._init (vue.runtime.esm.js:5693:1) at new VueComponent (vue.runtime.esm.js:5826:1) at createComponentInstanceForVnode (vue.runtime.esm.js:4544:1) at init (vue.runtime.esm.js:4406:1) at createComponent (vue.runtime.esm.js:6567:1) at createElm (vue.runtime.esm.js:6521:1)
10-25
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值