国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端設(shè)計(jì)——數(shù)據(jù)轉(zhuǎn)換層

zhigoo / 2145人閱讀

摘要：于是，轉(zhuǎn)換層就此誕生。轉(zhuǎn)換層顧名思義，把接口數(shù)據(jù)格式轉(zhuǎn)換成頁(yè)面所需要格式。第二版設(shè)計(jì)在第一版設(shè)計(jì)中，遇到轉(zhuǎn)換方法與使用頁(yè)面對(duì)應(yīng)不明確的問題。在第三版設(shè)計(jì)，也是從調(diào)整劃分子模塊方式下手，改回?cái)?shù)據(jù)類型的維度劃分，同時(shí)，規(guī)范方法命名。

前言

在工作中，經(jīng)常會(huì)遇到，接口的數(shù)據(jù)格式與頁(yè)面布局/交互不匹配的情況，需要前端進(jìn)行處理。 心想：“數(shù)據(jù)處理與業(yè)務(wù)無(wú)關(guān)，多帶帶抽離一個(gè)模塊來(lái)寫吧。” 于是，轉(zhuǎn)換層就此誕生。

第一版設(shè)計(jì)

當(dāng)我設(shè)計(jì)模塊時(shí)，
第一步 會(huì)明確模塊的職責(zé)。
轉(zhuǎn)換層——顧名思義，把接口數(shù)據(jù)格式 轉(zhuǎn)換 成頁(yè)面所需要格式。

第二步 制定與其他模塊對(duì)接規(guī)則。
因?yàn)樗菑捻?yè)面模塊抽離出來(lái)的，所以只有頁(yè)面模塊才能引用它。
而且邏輯單一（把輸入數(shù)據(jù)處理后輸出），所以它只能引用工具模塊。

第三步 劃分子模塊。
模塊主要是處理數(shù)據(jù)的問題，所以根據(jù)數(shù)據(jù)類型的維度劃分子模塊。

第一版設(shè)計(jì)大功告成
// 消息通知信息的轉(zhuǎn)換方法
// transform/notice.js
export default{
    show(data) {
        ....
        return ret;
    }
}
// 面板頁(yè)使用
// page/dashboard
import noticeModel from "model/notice.js"; //發(fā)送消息通知請(qǐng)求類
import noticeTransform  from "transform/notice.js";
//轉(zhuǎn)換成頁(yè)面所需要接口格式
const data = await noticeModel.show().then(res => noticeTransform.show(res));

缺陷！！！
第一版設(shè)計(jì)中，我們很難看出某個(gè)轉(zhuǎn)換方法，被那一個(gè)或幾個(gè)頁(yè)面使用。
隨著項(xiàng)目復(fù)雜度不斷增大，以后接手的小伙伴根本就不敢改/刪轉(zhuǎn)換層里的代碼。

第二版設(shè)計(jì)

在第一版設(shè)計(jì)中，遇到轉(zhuǎn)換方法與使用頁(yè)面對(duì)應(yīng)不明確的問題。
思考后，決定調(diào)整劃分子模塊方式，改為根據(jù)頁(yè)面維度劃分。

第二版成品
// 面板頁(yè)里的消息通知信息轉(zhuǎn)換方法
// transform/dashboard.js
export default{
    noticeShow(data) {
        ....
        return ret;
    }
}
// 面板頁(yè)使用
// page/dashboard
import noticeModel from "model/notice.js"; 
import dashboardTransform  from "transform/dashboard.js";

const data = await noticeModel.show().then(res => dashboardTransform.noticeShow(res));

缺陷 Again！！！
雖然能清晰識(shí)別頁(yè)面具有那些轉(zhuǎn)換方法，
但是，如果A與B、C...頁(yè)面，需要對(duì)相同的數(shù)據(jù)轉(zhuǎn)成相同格式。
這樣的模塊劃分，對(duì)相似代碼抽離是不友好的。

第三版設(shè)計(jì)

在第二版設(shè)計(jì)中，遇到相似的代碼難以復(fù)用的問題。
在第三版設(shè)計(jì)，也是從調(diào)整劃分子模塊方式下手，改回數(shù)據(jù)類型的維度劃分，
同時(shí)，規(guī)范方法命名。
給頁(yè)面模塊使用方法名= model名 + "for" + 頁(yè)面名稱，
私有方法名= "_" + model名 + 格式語(yǔ)義。

第三版成品
// A、B頁(yè)面 要把消息通知信息轉(zhuǎn)換一句提示
// transform/notice.js
const transform = {
    _showOneTip(data) {
        ....
        return ret;
    },
    showForA(data){
        return this._showOneTip(data);
    },
    showForB(data){
        return this._showOneTip(data);
    }
}

export default transform;
總結(jié)

業(yè)務(wù)會(huì)不斷迭代優(yōu)化，其實(shí)代碼也需要不斷迭代優(yōu)化的過(guò)程。
在過(guò)程中不斷思考，盡可能把項(xiàng)目設(shè)計(jì)的更具有結(jié)構(gòu)性。
當(dāng)然，每次更新項(xiàng)目底層設(shè)計(jì)，工作量是不少，所以也要多感謝團(tuán)隊(duì)支持。

難點(diǎn)

同一個(gè)數(shù)據(jù)，有可能不同頁(yè)面有不同格式。

如何把模塊之間的聯(lián)系更加明確。

如何復(fù)用具有相同邏輯代碼。

細(xì)節(jié)

轉(zhuǎn)換方法不能修改傳入數(shù)據(jù)。

江湖救急
筆者有兩年多前端開發(fā)經(jīng)驗(yàn)（地點(diǎn)北京），比較擅長(zhǎng)vue與性能優(yōu)化。
希望能進(jìn)入具有Geek精神團(tuán)隊(duì)，一起折騰，一起做有意思事情。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105136.html

相關(guān)文章

  • 前端設(shè)計(jì)——數(shù)據(jù)轉(zhuǎn)換層

    摘要：于是，轉(zhuǎn)換層就此誕生。轉(zhuǎn)換層顧名思義，把接口數(shù)據(jù)格式轉(zhuǎn)換成頁(yè)面所需要格式。第二版設(shè)計(jì)在第一版設(shè)計(jì)中，遇到轉(zhuǎn)換方法與使用頁(yè)面對(duì)應(yīng)不明確的問題。在第三版設(shè)計(jì)，也是從調(diào)整劃分子模塊方式下手，改回?cái)?shù)據(jù)類型的維度劃分，同時(shí)，規(guī)范方法命名。 前言 在工作中，經(jīng)常會(huì)遇到，接口的數(shù)據(jù)格式與頁(yè)面布局/交互不匹配的情況，需要前端進(jìn)行處理。 心想：數(shù)據(jù)處理與業(yè)務(wù)無(wú)關(guān)，單獨(dú)抽離一個(gè)模塊來(lái)寫吧。 于是，轉(zhuǎn)換層就...

    lei___ 評(píng)論0 收藏0

  • Lottie-前端實(shí)現(xiàn)AE動(dòng)效

    摘要：經(jīng)調(diào)研發(fā)現(xiàn)，是個(gè)簡(jiǎn)單高效且性能高的動(dòng)畫方案。換言之，設(shè)計(jì)師用把動(dòng)畫效果做出來(lái)，再用導(dǎo)出相應(yīng)地文件給到前端，前端使用庫(kù)就可以實(shí)現(xiàn)動(dòng)畫效果。 項(xiàng)目背景 在海外項(xiàng)目中，為了優(yōu)化用戶體驗(yàn)加入了幾處微交互動(dòng)畫，實(shí)現(xiàn)方式是設(shè)計(jì)輸出合成的雪碧圖，前端通過(guò)序列幀實(shí)現(xiàn)動(dòng)畫效果：?showImg(https://segmentfault.com/img/bVbp6jB);序列幀：showImg(https...

    supernavy 評(píng)論0 收藏0

  • [譯注] MVVM 模式

    摘要：由于控件與業(yè)務(wù)邏輯之間的緊耦合，相應(yīng)帶來(lái)的問題就是變更的代價(jià)增大，以及難以編寫針對(duì)性的單元測(cè)試。這些東西的組合提供了到譯者注視圖模型后面統(tǒng)一簡(jiǎn)稱之間的連接方式。的單元測(cè)試可以完全模擬在上用的那些功能。 原文：https://github.com/kuitos/kui...全部文章：https://github.com/kuitos/kui... [譯注] MVVM 模式 原文：The ...

    banana_pi 評(píng)論0 收藏0

  • 理解 RESTful

    摘要：表形容詞，意為的具有的。指的是一組架構(gòu)約束條件和原則。協(xié)議要優(yōu)于協(xié)議。的操作方法在中有各自的語(yǔ)義，理解它們的語(yǔ)義至為重要。返回結(jié)果對(duì)于不同操作方法和操作對(duì)象集合或個(gè)體，服務(wù)器返回的結(jié)果應(yīng)該符合以下規(guī)范。附錄該文主要參考理解架構(gòu)設(shè)計(jì)指南 前言 近十年，前端高速發(fā)展，整個(gè)互聯(lián)網(wǎng)應(yīng)用經(jīng)歷了從輕客戶端到重客戶端的變化，隨著前端規(guī)模越來(lái)越大，交互越來(lái)越復(fù)雜，前后端分離的設(shè)計(jì)開始流行。 移動(dòng)互聯(lián)網(wǎng)...

    MkkHou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<