問題描述在與后臺交互的過程中遇到的關(guān)于處理數(shù)據(jù)格式的問題。問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法比如:后臺傳過來一個list,格式如下list:[{id:10086,firstName:'小',lastName:'明',birth:1546072820279,age:11,sex:0,//其他屬性...},...]然后,我想對數(shù)據(jù)做預處理,原因有下面兩點:渲染在頁面上之前,需要先對data中的某些項做數(shù)據(jù)處理。防止后端同學修改了字段,如id->userId,如果不統(tǒng)一在model層做處理,那后期維護就很麻煩,需要在頁面中一個個找id,然后換成userId我的想法是單獨創(chuàng)建一個model.js用于統(tǒng)一處理這些數(shù)據(jù)預處理。方法1:類//model.jsclassPerson{constructor(props){//將原始data的所有的屬性做掛載Question1:此處印象中應有更方便的寫法用于掛載所有屬性O(shè)bject.create(props)?Object.keys(props).forEach(prop=>{this[prop]=props[prop];});//將需要處理的數(shù)據(jù)進行處理/重寫this.name=props.firstName+props.lastName;this.birthDate=newDate(props.birth);//假設(shè)0為男1為女this.sex=props.sex===0?'男':'女'}//后期如需擴展,可以寫一些原型方法//如通過id請求手機號getPhone(){fetch(xxx,{id:this.id}).then(...)}}//最終我們就可以直接在頁面/業(yè)務(wù)組件中直接渲染format之后的listexportconstformatList=list=>list.map(item=>newPerson(item));方法2:代理//model.jsconstpersonHandler={get(target,property){switch(property){case'name':returntarget.firstName+target.lastName;case'birthDate':returnnewDate(target.birth);case'sex':returntarget.sex===0?'男':'女';//其他屬性直接返回,相比于方法1,省去了遍歷掛載的過程。//Question2但是這里如何給target添加原型方法呢?總不能直接target.getPhone=function(){...}吧?那豈不是每個target都掛載了一個方法,沒有必要。default:returntarget[property];}}};exportconstformatList=list=>list.map(item=>newProxy(item,personHandler));結(jié)論對于原因1:我們將這些數(shù)據(jù)的預處理(與業(yè)務(wù)邏輯無關(guān)),從業(yè)務(wù)組件/邏輯中抽離出來,讓業(yè)務(wù)組件/邏輯更加純粹地處理業(yè)務(wù)。對于原因2:如果后端同學說將id改為userId,我只需要在class或proxy中加一行代碼就搞定了方法1中:this.id=props.userId,方法2中:case'id':returntarget.userId問題:注釋中的question1和2.question3:方法1和方法2哪個更適合處理這種場景呢。求大佬們幫忙對比分析下。
JS Web前端對于請求到的數(shù)據(jù)做數(shù)據(jù)處理。求解答!
藍山帝景
2019-06-18 09:34:53