第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JS Web前端對于請求到的數(shù)據(jù)做數(shù)據(jù)處理。求解答!

JS Web前端對于請求到的數(shù)據(jù)做數(shù)據(jù)處理。求解答!

藍山帝景 2019-06-18 09:34:53
問題描述在與后臺交互的過程中遇到的關(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哪個更適合處理這種場景呢。求大佬們幫忙對比分析下。
查看完整描述

2 回答

?
阿晨1998

TA貢獻2037條經(jīng)驗 獲得超6個贊

1和2應用場景不是一樣的嗎?目的就是先挖好坑等后臺這蘿卜來跳。
從邏輯上講,蘿卜和坑并不是一個東西,Proxy畢竟只是代理,如果你還有什么繼承之類的需求,其實并沒有那么好用。對于1你覺得的問題是在哪里?如果1沒有什么問題,那就選1吧。
case'getPhone':
return()=>console.log('getPhonefunction')
                            
查看完整回答
反對 回復 2019-06-18
  • 2 回答
  • 0 關(guān)注
  • 889 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號