成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[探索] 怎樣讓 JS - API 具有更好的實(shí)用性

lolomaco / 2813人閱讀

摘要：下面就通過一個(gè)簡(jiǎn)單的例子，怎么讓更加的實(shí)用，更好的復(fù)用。代碼的實(shí)用性，只能盡量，盡量再盡量。關(guān)于實(shí)用性，命名和擴(kuò)展性也很重要。而且，這樣沒復(fù)用性。關(guān)于這篇文章，也是我目前嘗試的一種方式，如果大家有更好的一個(gè)實(shí)現(xiàn)方式，歡迎在評(píng)論區(qū)留言。

程序員的精神，不應(yīng)不止于實(shí)現(xiàn)，更要注重優(yōu)化。不應(yīng)止于表面，更要研究?jī)?nèi)部機(jī)制，方能青出于藍(lán)而勝于藍(lán)。
1.前言

在上家公司開發(fā)后臺(tái)管理系統(tǒng)的時(shí)候，頻繁要處理各種數(shù)據(jù)顯示的問題，一開始是實(shí)現(xiàn)就好。后來寫多了，自己看得也難受了。就想著怎么優(yōu)化代碼和復(fù)用了。下面就通過一個(gè)簡(jiǎn)單的例子，怎么讓 API 更加的實(shí)用，更好的復(fù)用。

1.代碼的實(shí)用性，只能盡量，盡量再盡量。不會(huì)出現(xiàn)完美的API，或者是一次編寫，永不修改的 API 。


2.關(guān)于實(shí)用性，API 命名和擴(kuò)展性也很重要。但之前寫過文章，在這里就不重復(fù)了。[前端開發(fā)]--分享個(gè)人習(xí)慣的命名方式，重構(gòu) - 設(shè)計(jì)API的擴(kuò)展機(jī)制
2.舉個(gè)例子

比如有一個(gè)需求，有這樣的數(shù)據(jù)

{
    cashAmount: 236700,//回款金額（分）
    cashDate: "2018-05-26 10:25:28",//回款時(shí)間
    cashId: "SM2018022800020692",//回款I(lǐng)D
    cashStatus: 0,//回款狀態(tài)
    createTime: "2018-05-23 10:26:25",//創(chuàng)建時(shí)間
    custoName: "廣州測(cè)試有限公司",//回款公司名稱
    id: "SM2018022800020692",//回款I(lǐng)D
    merchandisers: "守候",//回款公司聯(lián)系人
    ordId: "SO2018022800020692",//訂單ID
    payChannel: null,//支付方式
    remark: "",//備注
    userMobile: "18819222363",//回款公司聯(lián)系人電話
}

需要對(duì)數(shù)據(jù)進(jìn)行以下處理，再渲染到頁面

1.cashAmount 轉(zhuǎn)換成元，并保留兩位小數(shù)

2.cashStatus 進(jìn)行解析（0-未回款 1-已回款）

3.payChannel 進(jìn)行解析 （"zfb"-支付寶，"wx"-微信支付，"cash"-現(xiàn)金支付，"bankTransfer"-銀行轉(zhuǎn)賬）

4.所有值為 "" , null , undefined 的字段，全部設(shè)置為："--"

面對(duì)這樣的需要，很簡(jiǎn)單，順手就來

let obj = {
    cashAmount: 236700,//回款金額（分）
    cashDate: "2018-05-26 10:25:28",//回款時(shí)間
    cashId: "SM2018022800020692",//回款I(lǐng)D
    cashStatus: 0,//回款狀態(tài)
    createTime: "2018-05-23 10:26:25",//創(chuàng)建時(shí)間
    custoName: "廣州測(cè)試有限公司",//回款公司名稱
    id: "SM2018022800020692",//回款I(lǐng)D
    merchandisers: "守候",//回款公司聯(lián)系人
    ordId: "SO2018022800020692",//訂單ID
    payChannel: null,//支付方式
    remark: "",//備注
    userMobile: "13226452474",//回款公司聯(lián)系人電話
}
function setValue(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    //設(shè)置金額
    _obj.cashAmount = (_obj.cashAmount / 100).toFixed(2);
    //解析回款狀態(tài)
    _obj.cashStatus = _obj.cashStatus === 0 ");"未回款" : "已回款";
    //解析支付方式
    let payChannelLabel = {
        "zfb": "支付寶",
        "wx": "微信支付",
        "cash": "現(xiàn)金支付",
        "bankTransfer": "銀行轉(zhuǎn)賬"
    }
    _obj.payChannel=payChannelLabel[_obj.payChannel];
    //設(shè)置默認(rèn)值
    for (let key in _obj){
        if(_obj[key]===""||_obj[key]===null||_obj[key]===undefined){
            _obj[key]="--"
        }
    }
    return _obj;
}
obj=setValue(obj);
console.log(obj)

結(jié)果也正確，如下圖

但是如果以后需求變了，比如 userMobile 要改成 xxx xxx xxxx 這種展示方式呢？

也很簡(jiǎn)單，修改下

function setValue(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    //設(shè)置金額
    //解析回款狀態(tài)
    //解析支付方式
    /*和上面代碼一樣，不重復(fù)粘貼*/
    //設(shè)置電話號(hào)碼格式
    let _formatType="xxx xxx xxxx",i = 0;
    _obj.userMobile= _formatType.replace(/x/g, function(){
        return _obj.userMobile[i++]
    });
    //設(shè)置默認(rèn)值
    /*和上面代碼一樣，不重復(fù)粘貼*/
}

代碼寫好了，想必大家也開始難受了。因?yàn)槊扛囊淮涡枨螅鸵囊淮?setValue 。改的多了，出現(xiàn)問題的概率就大了。而且，這樣沒復(fù)用性。試想，如果別的頁面有一個(gè)需求，同樣的數(shù)據(jù)。但是 cashDate 字段只需要精確到時(shí)分秒。這樣的需求，大同小異。但上面的代碼不適用，需要拷貝一個(gè) setValue 方法（就叫 setValue2 吧），然后添加 cashDate 只顯示 時(shí)分秒的邏輯。代碼很好寫

function setValue2(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    //設(shè)置金額
    //解析回款狀態(tài)
    //解析支付方式
    //設(shè)置電話號(hào)碼格式
    /*和上面代碼一樣，不重復(fù)粘貼*/
    //設(shè)置 cashDate 只顯示時(shí)分秒
    _obj.cashDate= _obj.cashDate.split(" ")[0];
    //設(shè)置默認(rèn)值
    /*和上面代碼一樣，不重復(fù)粘貼*/
}

3.單一職責(zé)原則

想必大家更難受了，因?yàn)闆]發(fā)復(fù)用，導(dǎo)致出現(xiàn)了幾乎完全一樣的函數(shù)。這個(gè)問題解決方式很多，先說下第一個(gè)，也是一個(gè) API 設(shè)計(jì)原則--單一職責(zé)原則。

顧名思義，單一職責(zé)原則就是讓每一個(gè)函數(shù)只做一件事。下面把代碼改造下

/**
 * @description 設(shè)置默認(rèn)值
 * @param obj 待處理對(duì)象
 * @return obj 已處理對(duì)象
 */
function setDefault(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    for (let key in _obj){
        if(_obj[key]===""||_obj[key]===null||_obj[key]===undefined){
            _obj[key]="--"
        }
    }
    return _obj;
}
/**
 * @description 格式化電話號(hào)碼
 * @param obj 待處理對(duì)象
 * @return obj 已處理對(duì)象
 */
function setFormatMobile(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    let _formatType="xxx xxx xxxx",i = 0;
    _obj.userMobile= _formatType.replace(/x/g, function(){
        return _obj.userMobile[i++]
    });
    return _obj;
}
/**
 * @description 解析支付方式
 * @param obj 待處理對(duì)象
 * @return obj 已處理對(duì)象
 */
function setPayChannelLabel(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    let payChannelLabel = {
        "zfb": "支付寶",
        "wx": "微信支付",
        "cash": "現(xiàn)金支付",
        "bankTransfer": "銀行轉(zhuǎn)賬"
    }
    _obj.payChannel = payChannelLabel[_obj.payChannel];
    return _obj;
}
/**
 * @description 設(shè)置回款金額
 * @param obj 待處理對(duì)象
 * @return obj 已處理對(duì)象
 */
function setCashAmount(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    _obj.cashAmount = (_obj.cashAmount / 100).toFixed(2);
    return _obj;
}
/**
 * @description 解析回款狀態(tài)
 * @param obj 待處理對(duì)象
 * @return obj 已處理對(duì)象
 */
function setCashStatus(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    _obj.cashStatus = _obj.cashStatus === 0 ");"未回款" : "已回款";
    return _obj;
}

obj=setFormatMobile(obj);
obj=setCashStatus(obj);
obj=setCashAmount(obj);
obj=setPayChannelLabel(obj);
obj=setDefault(obj);

結(jié)果一樣，如果需要加上 cashDate 只顯示 時(shí)分秒。加上邏輯就行了

/**
 * @description 設(shè)置匯款時(shí)間
 * @param obj 待處理對(duì)象
 * @return obj 已處理對(duì)象
 */
function setCashDate(obj) {
    let _obj=JSON.parse(JSON.stringify(obj));
    _obj.cashDate = _obj.cashDate.split(" ")[0];
    return _obj;
}

obj=setFormatMobile(obj);
obj=setCashStatus(obj);
obj=setCashAmount(obj);
obj=setCashDate(obj);
obj=setPayChannelLabel(obj);
obj=setDefault(obj);
console.log(obj)

讓 API 保持單一原則的好處是，復(fù)用性比復(fù)雜的 API 更好，而且編寫的難度更低。

4.最少知識(shí)原則

上面的寫法雖然實(shí)現(xiàn)了復(fù)用，看著比之前好了一點(diǎn)，但是看著也是難受，畢竟賦值了幾次，而且還有那么多的全局函數(shù)。

首先，全局函數(shù)這個(gè)容易解決，用一個(gè)對(duì)象包裹起來，全局函數(shù)少了，也方便管理。

重復(fù)的代碼和注釋，這里忽略，不重復(fù)粘貼


let handle={
   setDefault(obj) {
        //省略的代碼
    },
    setFormatMobile(obj) {
        //省略的代碼
    },
    setPayChannelLabel(obj) {
        //省略的代碼
    },
    setCashAmount(obj) {
        //省略的代碼
    },
    setCashStatus(obj) {
        //省略的代碼
    }
}


obj=handle.setFormatMobile(obj);
obj=handle.setCashStatus(obj);
obj=handle.setCashAmount(obj);
obj=handle.setPayChannelLabel(obj);
obj=handle.setDefault(obj);
console.log(obj)

第二個(gè)讓人難受的地方就是一個(gè)步驟，經(jīng)過了幾次的賦值，這個(gè)難免有點(diǎn)難受，寫起來也麻煩，記憶成本高。解決起來也很簡(jiǎn)單，就是另寫一個(gè)函數(shù)，把那些操作步驟封裝在一起就行了。封裝的目的就是為了讓使用的人，只需要記住一個(gè)函數(shù)的使用方式就可以了，不需要記住多個(gè)函數(shù)的使用方式。

let handle={
   /*省略代碼*/
   setCash(obj){
        let _obj=JSON.parse(JSON.stringify(obj));
        _obj=this.setFormatMobile(_obj);
        _obj=this.setCashStatus(_obj);
        _obj=this.setCashAmount(_obj);
        _obj=this.setPayChannelLabel(_obj);
        _obj=this.setDefault(_obj);
        return _obj;
    }
}
obj=handle.setCash(obj);
console.log(obj)
5.配置數(shù)據(jù)和業(yè)務(wù)邏輯分離

上面的代碼，看著算是比較舒服了，但是問題還是有，就是 setCash 函數(shù)寫得太死了。固定了五個(gè)方法 ：setFormatMobile,setCashStatus,setCashAmount,setPayChannelLabel,setDefault 。如果以后不需要處理電話號(hào)碼，又要改 setCash ，把 _obj=this.setFormatMobile(_obj); 這行代碼去掉。雖然改動(dòng)也很小，但是問題就出來了。如果其中一個(gè)地方需要執(zhí)行 setFormatMobile ，就不能刪除。如果另一個(gè)地方， 不需要執(zhí)行 setFormatMobile ，就要?jiǎng)h除。這樣子就顧此失彼了。

解決的方案想必大家也知道了，就是需要執(zhí)行什么函數(shù)，就在函數(shù)上動(dòng)態(tài)傳入。

let handle={
   /*省略代碼*/
   setCash(obj,fns="setFormatMobile,setCashStatus,setCashAmount,setPayChannelLabel,setDefault"){
        let _obj=JSON.parse(JSON.stringify(obj));
        let _fns=fns.split(",");
        _fns.forEach(item => {
            _obj=this[item](_obj);
        });
        return _obj;
    }
}
obj=handle.setCash(obj);
console.log(obj)

//比如另一個(gè)地方不需要執(zhí)行 setFormatMobile
obj = {
    cashAmount: 236700,//回款金額（分）
    cashDate: "2018-05-26 10:25:28",//回款時(shí)間
    cashId: "SM2018022800020692",//回款I(lǐng)D
    cashStatus: 0,//回款狀態(tài)
    createTime: "2018-05-23 10:26:25",//創(chuàng)建時(shí)間
    custoName: "廣州測(cè)試有限公司",//回款公司名稱
    id: "SM2018022800020692",//回款I(lǐng)D
    merchandisers: "守候",//回款公司聯(lián)系人
    ordId: "SO2018022800020692",//訂單ID
    payChannel: null,//支付方式
    remark: "",//備注
    userMobile: "13226452474",//回款公司聯(lián)系人電話
}
obj=handle.setCash(obj,"setCashStatus,setCashAmount,setPayChannelLabel,setDefault");
console.log("比如另一個(gè)地方不需要執(zhí)行 setFormatMobile",obj)

6.批量處理

看到這里，好像差不多了。但是寫下去，大家才會(huì)知道，一般的后臺(tái)管理系統(tǒng)的用戶列表，數(shù)據(jù)一般不會(huì)只有一條。一般而言是一個(gè)數(shù)組對(duì)象。如下

let arr=[
    {
        cashAmount: 236700,//回款金額（分）
        cashDate: "2018-05-26 10:25:28",//回款時(shí)間
        cashId: "SM2018022800020692",//回款I(lǐng)D
        cashStatus: 0,//回款狀態(tài)
        createTime: "2018-05-23 10:26:25",//創(chuàng)建時(shí)間
        custoName: "廣州測(cè)試有限公司",//回款公司名稱
        id: "SM2018022800020692",//回款I(lǐng)D
        merchandisers: "守候",//回款公司聯(lián)系人
        ordId: "SO2018022800020692",//訂單ID
        payChannel: null,//支付方式
        remark: "",//備注
        userMobile: "13226452474",//回款公司聯(lián)系人電話
    },
    {/*省略的代碼*/},
    {/*省略的代碼*/},
    {/*省略的代碼*/},
    //省略的代碼
]

寫起來的時(shí)候呢，要這樣寫

arr.forEach((item,index)=>{
    arr[index]=handle.setCash(item);
})
console.log(arr)

雖然代碼不多，但是有更好的方案，就用更好的方案。比如使用批量處理的方式。就多寫一個(gè)函數(shù)就行了。

let handle={
   /*省略代碼*/
   batch(arr,fns,...orther){
        let _arr=JSON.parse(JSON.stringify(arr));
        let _fns=fns.split(",");
        _arr.forEach((item,index)=>{
            _fns.forEach(fn => {
                _arr[index]=this[fn](_arr[index],...orther);
            });
        })
        return _arr
    }
}

調(diào)用的時(shí)候就比之前簡(jiǎn)單了一點(diǎn)，結(jié)果也正確

arr=handle.batch(arr,"setCash")
console.log(arr)

要傳其他參數(shù)也可以

arr=handle.batch(arr,"setCash","setCashStatus,setCashAmount,setPayChannelLabel,setDefault")
console.log(arr)

如果要傳入多個(gè)操作函數(shù)

arr=handle.batch(arr,"setCashStatus,setCashAmount")
console.log(arr)

7.小結(jié)

關(guān)于開發(fā)上，API 的實(shí)用性，暫時(shí)就先提這幾個(gè)方面，如果以后發(fā)現(xiàn)有其他例子，還能從其他方面提高 API 的實(shí)用性，就再發(fā)文章分享。關(guān)于這篇文章，也是我目前嘗試的一種方式，如果大家有更好的一個(gè)實(shí)現(xiàn)方式，歡迎在評(píng)論區(qū)留言。

-------------------------華麗的分割線--------------------

想了解更多，和我交流，內(nèi)推職位，請(qǐng)?zhí)砑游椅⑿??；蛘哧P(guān)注我的微信公眾號(hào)：守候書閣

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

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

相關(guān)文章

  • [探索]怎樣讓 JS - API 具有更好的實(shí)用性

    摘要：下面就通過一個(gè)簡(jiǎn)單的例子，怎么讓更加的實(shí)用，更好的復(fù)用。代碼的實(shí)用性，只能盡量，盡量再盡量。關(guān)于實(shí)用性，命名和擴(kuò)展性也很重要。而且，這樣沒復(fù)用性。關(guān)于這篇文章，也是我目前嘗試的一種方式，如果大家有更好的一個(gè)實(shí)現(xiàn)方式，歡迎在評(píng)論區(qū)留言。 程序員的精神，不應(yīng)不止于實(shí)現(xiàn)，更要注重優(yōu)化。不應(yīng)止于表面，更要研究?jī)?nèi)部機(jī)制，方能青出于藍(lán)而勝于藍(lán)。 1.前言 在上家公司開發(fā)后臺(tái)管理系統(tǒng)的時(shí)候，頻繁要處...

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

  • 基于DevOps、微服務(wù)以及k8s的高可用架構(gòu)探索與實(shí)現(xiàn)

    摘要：前言本文給大家分享的題目是基于微服務(wù)以及的高可用架構(gòu)探索與實(shí)現(xiàn)。比如說年大地震的時(shí)候我正好在東京，當(dāng)時(shí)在做一個(gè)金融系統(tǒng)的相關(guān)工作。那次大地震導(dǎo)致很多很多的問題，雖然大地震不是在東京發(fā)生，但是還是給我們的系統(tǒng)造成了影響。 前言 本文給大家分享的題目是《基于DevOps、微服務(wù)以及K8S的高可用架構(gòu)探索與實(shí)現(xiàn)》。整個(gè)企業(yè)的高可用架構(gòu)面臨很多的挑戰(zhàn)，面向微服務(wù)、容器化以及敏態(tài)交付，是我們現(xiàn)在...

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

  • 3月份前端資源分享

    摘要：面試如何防騙一份優(yōu)秀的前端開發(fā)工程師簡(jiǎn)歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

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

  • 有贊業(yè)務(wù)對(duì)賬平臺(tái)的探索與實(shí)踐

    摘要：業(yè)務(wù)對(duì)賬平臺(tái)的核心目的，就是及時(shí)發(fā)現(xiàn)類似問題，并及時(shí)修復(fù)。這對(duì)對(duì)賬平臺(tái)的吞吐量造成了挑戰(zhàn)。五健康度對(duì)賬中心可以拿到業(yè)務(wù)系統(tǒng)及其所在整個(gè)鏈路的數(shù)據(jù)一致性信息。在分布式環(huán)境下，沒有人能回避數(shù)據(jù)一致性問題，我們對(duì)此充滿著敬畏。 一、引子 根據(jù)CAP原理，分布式系統(tǒng)無法在保證了可用性（Availability）和分區(qū)容忍性（Partition）之后，繼續(xù)保證一致性（Consistency）。我...

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

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

0條評(píng)論

lolomaco

男|高級(jí)講師

TA的文章

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