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

資訊專欄INFORMATION COLUMN

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

WrBug / 3411人閱讀

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

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

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

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

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

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

但有時候有些人道理是說不通的。

因為后臺對于條碼搜索是全匹配的，想要搜索出全部內(nèi)容，搜索條件是null不是""
然后我就看了下實習(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 方法本身需要帶有對query的解析
});

加上之前需要綁定兩個input框外面的按鈕的click 方法，和鍵盤綁定enter鍵的方法，其實這種寫法是非常混亂的。

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

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

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

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

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

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

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

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

相關(guān)文章

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

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

    Dean 評論0 收藏0

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

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

    FingerLiu 評論0 收藏0

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

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

    Ocean 評論0 收藏0

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

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

    Amos 評論0 收藏0

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

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

    walterrwu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<