代碼結構

<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 獨立與釘釘的代碼統一
  因為需求不一致，所以兩邊都在開發導致代碼不一樣，例如獨立需要產品屬性，釘釘需要產品規格，首先數據的結構還是取最大的一個結構，只需要在前端通過判斷標識來確定顯示，與方法調取

總結

保證維護同樣的一份數據
充分利用框架優點