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

資訊專欄INFORMATION COLUMN

前端開(kāi)發(fā)之單一職責(zé)原則

WrBug / 3417人閱讀

摘要：?jiǎn)我宦氊?zé)原則又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則之一。在前端開(kāi)發(fā)的過(guò)程中，一個(gè)需求總會(huì)有多種解決方法，如果多人開(kāi)發(fā)，其實(shí)我覺(jué)得單一職責(zé)挺適合前端的，前陣子看了下實(shí)習(xí)生的代碼，就想舉這個(gè)例子來(lái)說(shuō)說(shuō)。

單一職責(zé)原則（SRP：Single responsibility principle）又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則（SOLID）之一。它規(guī)定一個(gè)類應(yīng)該只有一個(gè)發(fā)生變化的原因。

在前端開(kāi)發(fā)的過(guò)程中，一個(gè)需求總會(huì)有多種解決方法，如果多人開(kāi)發(fā)，其實(shí)我覺(jué)得單一職責(zé)挺適合前端的，前陣子看了下實(shí)習(xí)生的代碼，就想舉這個(gè)例子來(lái)說(shuō)說(shuō)。

需求描述：兩個(gè)input框作為查詢條件，一個(gè)按照名稱搜索，一個(gè)按照條碼搜索，input框邊上各自都有一個(gè)搜索按鈕。在最外側(cè)還有一個(gè)刷新按鈕。

當(dāng)時(shí)實(shí)習(xí)生做完，測(cè)試寫(xiě)了一個(gè)bug，具體內(nèi)容是：去掉input框里面的內(nèi)容，點(diǎn)擊刷新，不能搜索出全部?jī)?nèi)容。

其實(shí)按照對(duì)刷新的理解，去掉input框的內(nèi)容，但用戶并沒(méi)有點(diǎn)擊搜索按鈕，刷新只是刷新最近一次搜索內(nèi)容。如果根據(jù)所見(jiàn)即所得的說(shuō)法的話這個(gè)bug應(yīng)當(dāng)是，點(diǎn)擊刷新按鈕，input框需要顯示出搜索條件，即用戶刪掉input框內(nèi)前的數(shù)據(jù)。

但有時(shí)候有些人道理是說(shuō)不通的。

因?yàn)楹笈_(tái)對(duì)于條碼搜索是全匹配的，想要搜索出全部?jī)?nèi)容，搜索條件是null不是""
然后我就看了下實(shí)習(xí)生的代碼，他在刷新按鈕綁定click的方法里面，獲取了當(dāng)前名稱的值，獲取了當(dāng)前條碼的值，然后判斷，是“”的情況下變成null，然后再調(diào)用了load的方法。

$("#fresh").on("click",function(){//刷新按鈕
    var key_name = $("#key_name").val()||null;//獲取值
    var key_barcode =  $("#key_barcode").val()||null
    tableinstance.query.key_name = key_name;
    tableinstance.query.key_barcode = key_barcode;
    tableinstance.load();//load 方法本身需要帶有對(duì)query的解析
});

加上之前需要綁定兩個(gè)input框外面的按鈕的click 方法，和鍵盤(pán)綁定enter鍵的方法，其實(shí)這種寫(xiě)法是非?；靵y的。

這個(gè)時(shí)候就需要用到單一職責(zé)原則

針對(duì)測(cè)試提出來(lái)的bug，我們需要做的是 input框中的值的變更實(shí)時(shí)與搜索條件進(jìn)行綁定。

$("input").on("propertychange",function(){
    tableinstance.query[$(this).attr("name")] = $(this).val()||null;
});

兩個(gè)input框不管是邊上按鈕 click 和enter鍵 刷新按鈕都只需要用來(lái)調(diào)用load方法即可了。

這樣代碼看起來(lái)就會(huì)很簡(jiǎn)潔，如果將來(lái)還需要增加搜索條件，不至于還要去刷新按鈕中，再去獲取新增加的搜索條件的值。

附上我的訂閱號(hào)，歡迎關(guān)注，一起學(xué)前端

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

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

相關(guān)文章

  • 前端開(kāi)發(fā)之單一職責(zé)原則

    摘要：?jiǎn)我宦氊?zé)原則又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則之一。在前端開(kāi)發(fā)的過(guò)程中，一個(gè)需求總會(huì)有多種解決方法，如果多人開(kāi)發(fā)，其實(shí)我覺(jué)得單一職責(zé)挺適合前端的，前陣子看了下實(shí)習(xí)生的代碼，就想舉這個(gè)例子來(lái)說(shuō)說(shuō)。 單一職責(zé)原則（SRP：Single responsibility principle）又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則（SOLID）之一。它規(guī)定一個(gè)類應(yīng)該只有一個(gè)發(fā)生變化的原因。 在...

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

  • 前端開(kāi)發(fā)之單一職責(zé)原則

    摘要：?jiǎn)我宦氊?zé)原則又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則之一。在前端開(kāi)發(fā)的過(guò)程中，一個(gè)需求總會(huì)有多種解決方法，如果多人開(kāi)發(fā)，其實(shí)我覺(jué)得單一職責(zé)挺適合前端的，前陣子看了下實(shí)習(xí)生的代碼，就想舉這個(gè)例子來(lái)說(shuō)說(shuō)。 單一職責(zé)原則（SRP：Single responsibility principle）又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則（SOLID）之一。它規(guī)定一個(gè)類應(yīng)該只有一個(gè)發(fā)生變化的原因。 在...

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

  • 《前端架構(gòu)設(shè)計(jì)》讀后筆記

    摘要：作為一名前端架構(gòu)師，你的工作是不斷地探索和評(píng)估新的技術(shù)平臺(tái)方法和框架。世界上沒(méi)有一刀切式的解決方案，而前端架構(gòu)師的使命正是將項(xiàng)目的需求與前端開(kāi)發(fā)的實(shí)際情況相結(jié)合。 做前端工作一段時(shí)間了，也寫(xiě)了不少的項(xiàng)目。但是突然好像快要失去了興趣。美工、后臺(tái)、項(xiàng)目經(jīng)理、測(cè)試等人員多層夾擊。美工說(shuō)就這么設(shè)計(jì)，你就得完全按著來(lái)。后臺(tái)說(shuō)這個(gè)需求做不了，得那樣做，于是已經(jīng)做好的頁(yè)面推倒重來(lái)。測(cè)試說(shuō)，這樣做更符...

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

  • 可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之組合和復(fù)用

    摘要：幸運(yùn)的是，組合易于理解。組件的組合是自然而然的。高效用戶界面可組合的層次結(jié)構(gòu)，因此，組件的組合是一種構(gòu)建用戶界面的有效的方式。這個(gè)原則建議避免重復(fù)。只有一個(gè)組件符合單一責(zé)任原則并且具有合理的封裝時(shí)，它是可復(fù)用的。 翻譯：劉小夕原文鏈接：https://dmitripavlutin.com/7-... 原文的篇幅非常長(zhǎng)，不過(guò)內(nèi)容太過(guò)于吸引我，還是忍不住要翻譯出來(lái)。此篇文章對(duì)編寫(xiě)可重用和...

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

  • 深入理解JavaScript系列6:S.O.L.I.D五大原則之單一職責(zé)

    摘要：，開(kāi)始我們的第一篇單一職責(zé)。通過(guò)解耦可以讓每個(gè)職責(zé)工更加有彈性地變化。關(guān)于本文本文轉(zhuǎn)自大叔的深入理解系列。深入理解系列文章，包括了原創(chuàng)，翻譯，轉(zhuǎn)載，整理等各類型文章，原文是大叔的一個(gè)非常不錯(cuò)的專題，現(xiàn)將其重新整理發(fā)布。 前言 Bob大叔提出并發(fā)揚(yáng)了S.O.L.I.D五大原則，用來(lái)更好地進(jìn)行面向?qū)ο缶幊?，五大原則分別是： The Single Responsibility Princi...

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

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

0條評(píng)論

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