关联产品功能挖坑与解析

代码结构

<pre></code>
1 product_assets_in_form/item.js.coffee 关联产品入口处
2 product_assets_in_form/list.js.coffee 关联产品在商机,合同表单处数据隐藏field
3 product_assets/form.js.coffee 选择商品页面
4 product_assets/edit_form.js.coffee 编辑关联产品页面
5 product_assets/tr_form.js.coffee 编辑关联产品table表单一行td</pre></code>

分析需求

需求一开始就搞得交互很复杂,没有必要的交互需要砍掉

图片 1.png

比如后面的需求就砍掉了上面的产品价格的打折功能,主要是由于后台原本的数据结构不支持。--------对产品的需求需要思考

一开始在做这个功能思考的时候,我感到非常的焦虑

  • 1 因为是一个三层关联的场景,(产品--关联产品---商机/合同) 数据结构很复杂,取数据的时候,从后台获取的数据时候,选择产品是产品的机构数据,编辑的时候就是关联产品的数据结构 ----数据怎么取
  • 2 编辑的场景很多,所以需要在前端对数据临时保存与修改的场景很 ----数据怎么保存怎么在页面之间传递
  • 3 页面交互很复杂,批量添加,(怎么解决行合并)批量删除(怎么标识这行数据的唯一性)------------- 数据与页面绑定交互的问题
  • 4 独立版与钉钉办需求不同的时候,代码怎么处理

当然一开始作为一个后端是没有完全考虑到这些关键问题的,所有才有后面的优化

一开始解决这些问题的时候,数据的存储与修改 用了前端存储数据库local storage ,在后端取出来就保存起来因为是key value的数据存储格式,就会生成很多的key 而且这些key要有唯一性才能准确取到数据,并且存和取都很麻烦,不适合这种大量数据的多次修改的储存,写起来很麻烦,而且关键的是product product_asset因为两个对象造了不同的数据结构,而最后保存的数据结构只有一种,所以场景一多的时候存储起来会很麻烦

对于这种table的行编辑,一开始做的唯一标示是用的product_id ,确实一开始可以做唯一标示 ,但是后来产品经理又要加上产品属性这种一对多的属性,这个时候产品id就不能做唯一标示了,这也是后来优化的原因

正确的解决姿势

对于后端数据的存储
要点

  • 1 确认你所用到的数据
    数据获取的时侯相同的对象或与关联的对象,最好放在一个大而全的数据结构当中,这个结构需要自己构造,要保证取的时候数据结构是一样的,即使你是从不同的接口获取数据,这个比如product与product_asset,对象里面的数据结构不完全一样,但可以在前端构造这样的比较全的数据结构,
    不论什么样的场景都可以维护这唯一一份数据,而不会因为数据的不同的结构,在前端通过if判断而维护多分数据结构。

  • 2 从后端接口获取数据
    后端接口尽量保持对象的数据结构,把数据的整合放在前端来做,尽量不修改原来的数据结构,这接口别人也会再用

  • 3 数据保存到backbone的model里面
    能解决数据传递的问题,传递model ,collection 就相当于传递了这些数据
    页面与数据的绑定, 在这里我将table的一行td 新建为一个backbone的class <pre></code>app/assets/javascripts/backbone/views/product_assets/tr_form.js.coffee</code></pre>
    这个class 在页面当中相当于table的一行, 在数据来讲相当于一个model,不管页面在这一行中触发什么事件,我都可以只更改当前的这个model而改变数据,而把确认修改哪一个model的事情交给框架

  • 4 数据的删除
    当在页面把这一行移除的时候,数据需要标识哪一份数据需要删除,由于我这边场景是即有可能删除批量选择添加的数据,也会删除本来后端就有的数据,所以对于刚添加的数据,可以直接删除这个model,而已存在的数据需要交_destroy: true的标识传到后端 真正的删除

  • 5 写一个明显的变量名
    场景一多,虽然也是这两个页面,但是数据的流动,与所做的交互是有所不同,这个时候就需要你传递不同的变量来标识这些场景,比如编辑就会直接到第二个编辑页面,而新增才会从第一个选择数据页面获取数据后再渲染第二个编辑页面,所以这两个页面和里面所做的交互就写在了两个view当中,分别为<pre>app/assets/javascripts/backbone/views/product_assets/form.js.coffee
    app/assets/javascripts/backbone/views/product_assets/edit_form.js.coffee</pre>
    并且用 direct_edit 与 new 等这些参数来明确调用

  • 6 独立与钉钉的代码统一
    因为需求不一致,所以两边都在开发导致代码不一样,例如独立需要产品属性,钉钉需要产品规格,首先数据的结构还是取最大的一个结构,只需要在前端通过判断标识来确定显示,与方法调取

总结

保证维护同样的一份数据
充分利用框架优点

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

推荐阅读更多精彩内容