el form schema总结

文档: http://china-wesley.github.io/formSchema
github: https://github.com/China-Wesley/el-form-schema

该库的想法来自于http://www.markplayable.com/,是我第一家实习的公司内部使用的。其实也有github https://github.com/shunjinchan/el-schema-form。借鉴了一些设计的思想。在此感谢。(除夕写到12点,尽力了)

开发流程

1、将el-form所有属性,事件,方法全部过一遍
2、开始梳理schema核心数据结构,一次性列出所有的配置是不可能的,列出核心逻辑。剩下的配置在开发中填补。
3、写bug(手动滑稽)
4、编写文档,使用vuepress

难点

  • 映射model的结构比较困难,如果是单纯的平面对象,其实封装起来,就比较简单了。无非是将配置统一拿来处理。但是有层级的model情况就比较复杂,需要考虑object、array类型。为了映射层级关系,Item组件是递归渲染的,并且model也是会逐步的递归传递,但传递到最后Field组件中,要给如input绑定上v-model的时候,Field组件获取到的只是对应字段的值。一个基础数据类型,相当于值能够被传递到Field组件中,但这导致对该值的修改,是无法响应到model对象的,他们本身不在一块内存中

处理: 采取的方法是,在嵌套的结构渲染时,对每个form item的prop进行处理。对象的路径以字符串形式体现出来model.item[0]。之后用正则对路径进行解析,这样,我可以知道被传递到Field组件中的值,在model对象中,处于什么位置

model:并不是返回属性本身(也就是说,Field拿到的不再是值本身),而是返回其父级对象(好比model.home.address这样一个结构,Field拿到的targetModelmodel.home这个对象,targetPropaddress这个字段,最后在v-model时,通过targetModel[targetProp],索引到想要的model值,这样可以利用引用数据类型同一块内存的特性,因为tagetModel的内存是全局model对象的一部分,即model.home的内存,是model内存的一部分,model.home中属性的改变,model是能获取到的)

好处:上述这么做的好处,是model是以对象形式传入,无需在意model能不能响应,(传统的做法,可能model是computed的时候就不能响应了,需要在计算属性中增加getset),只要内存是同一块,就可以响应得到

  • 获取item的ref,或者field的ref

其实与难点一同理,只要能解析出路径,就可以很好的获取。最后要使用路径信息,重建整个model对象的结构,但是这个model对象的每个值,都是对应的ref对象。只是保留了层级结构而已。其实可以直接deepClone一个model,然后通过lodash.set,以路径去改变这个clone的model对象,把他的值全部变为ref。这样,调用getRef方法时,传入的字段,属于哪条路径(可以是多条),就会返回对应的ref

  • 需要考虑得很全面,尽量留出自由度,要全面兼容element的配置

其实这一点就是慢工出细活,逻辑上没有很难得地方,但是代码要优雅,要相到使用场景的方方面面也比较困难的。以后慢慢迭代优化吧

待优化

  • 样式部分基本没有多写,因为我也不懂要怎么写哈哈哈。这需要结合不同公司的风格,所以我也不好写太多。将自由度留给开发者。但可能有些元素结构的设计,又不太好加样式。所以这一部分待优化。
  • 可以增加更多的配置,在未来,我觉得目前的配置虽然够用。但是并没有很让人称赞的地方,尽可能多的减少开发和维护成本,是终极目的。所以在未来的使用中,可能会简化配置项,尽可能多的自动化,自由度和效率是成反比的,自由度越高,需要配置,需要考虑的就越多。所以找到一个平衡点是很重要的。希望在之后的开发中,能够有更多更好的想法。主要还是项目经验比较少。
  • 由于model用的是同一块内存,所以使用者如果改变了这个model对象的话,会造成表单元素无法与model一一对应,所以原则上,使用的时候不改model,model初始化定义好之后就不动了,但应该做个报错机制的,之后有空写吧哈哈哈

总的来说

作为自己开发的第一个库,总体来说还是收获颇丰。了解了一个库的设计模式,增强了源码的阅读能力,以及脚手架的搭建能力。更多地熟悉和了解了vue、element,以及ts、嗷,还有lodash。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容