close
The Wayback Machine - https://web.archive.org/web/20220515184812/https://github.com/ly525/luban-h5/discussions/191
Skip to content

[Code review/源码解读]关于源码中的一些问题 #191

Unanswered
zhangmin173 asked this question in General
[Code review/源码解读]关于源码中的一些问题 #191
@zhangmin173 zhangmin173
Jul 8, 2020 · 5 answers · 3 replies
Return to top

zhangmin173
Jul 8, 2020

NO.1

src/components/core/modals/element.js

 getPluginProps (ele) {
    if (typeof ele.pluginProps === 'object') {
      return cloneObj({ ...ele.pluginProps, uuid: this.uuid })
    }
    return this.getDefaultPluginProps(ele.props, ele.shortcutProps)
  }

在获取组件配置项的时候，会考虑pluginProps，props，shortcutProps三者，原因是什么？props之外 的两个属性，是为了之前的版本兼容吗？

Replies

5 suggested answers
·
3 replies
Oldest Newest Top

zhangmin173
Jul 8, 2020
Author

NO.2

另外还有一个问题，组件在拖拽的过程产生的位移变化直接操作组件位置数据，那么会导致一直diff产生性能问题把？是不是可以考虑，在move过程中，直接改变dom节点，move结束之后，一次性设置数据
1 reply
@ly525

ly525 Sep 12, 2020
Maintainer

@zhangmin173 非常赞的建议，确实会在不停的 diff，貌似不是特别合适。触发 dom这种方式可以考虑，这个貌似也会带来重排/重绘，可以尝试考虑使用 css transform 来做，提升性能

zhangmin173
Jul 9, 2020
Author

src/components/core/modals/element.js

 getPluginProps (ele) {
    if (typeof ele.pluginProps === 'object') {
      return cloneObj({ ...ele.pluginProps, uuid: this.uuid })
    }
    return this.getDefaultPluginProps(ele.props, ele.shortcutProps)
  }

在获取组件配置项的时候，会考虑pluginProps，props，shortcutProps三者，原因是什么？props之外 的两个属性，是为了之前的版本兼容吗？

自问自答：因为在初始化Element的时候，传入的对象可能是原组件，那么只有Props，如果传入的是被处理过的element，那么就只有pluginProps，后者发生在对页面进行复制的时候，自然需要对element进行克隆
0 replies

zhangmin173
Jul 9, 2020
Author

NO.3

在获取组件的编辑属性的自定义件时候，是通过new一个组件的构造函数去拿的，包括在渲染属性编辑器的时候，renderPropsEditorPanel，是通过new 一个 组件拿到props

export function getComponentsForPropsEditor (elementName) {
  const Ctor = Vue.component(elementName)
  // TODO 为何直接 return new Ctor() 并将其赋值给 vuex 的 state 会报错：Cannot convert a Symbol value to a string
  return new Ctor().$options.componentsForPropsEditor
}

我想的是为什么不在加载组件的时候，就已经拿到组件对象了，完全可以解析组对象，缓存下来。
1 reply
@ly525

ly525 Sep 12, 2020
Maintainer

@zhangmin173 这里说的「已经拿到组件对象」是指？

zhangmin173
Jul 9, 2020
Author

NO.4

和NO.3有关联，一个组件只支持一个customEditorName，虽然这个customEditorName可以编辑多个属性。我的想法是，是不是一个prop就对应一个customEditor呢，这样多个customEditor可以复用，作为独立的customEditorPlugins来进行注册和维护。
1 reply

ly525
Jul 19, 2020
Maintainer

https://www.yuque.com/luban-h5/docs/ykw5dh

shortcutProps 的作用：

背景：
左侧的组件列表，有可能是同一个组件衍生出来的，比如 同一个文字，可以配置不同主题（大号、中号、小号文字，红色、黑色文字）
那么在从组件列表拖拽到中间画布的时候，需要知道：

  1. 选择了哪个组件
  2. 选择了组件的某个prop的某个默认值，比如文字的 fontSize：100px 这样

这样就能实现：基于一个组件，衍生出来各种主题风格的扩展组件了
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants
@zhangmin173 @ly525
Converted from issue