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

資訊專欄INFORMATION COLUMN

前端開發之單一職責原則

Dean / 3474人閱讀

摘要：單一職責原則又稱單一功能原則，面向對象五個基本原則之一。在前端開發的過程中，一個需求總會有多種解決方法，如果多人開發，其實我覺得單一職責挺適合前端的，前陣子看了下實習生的代碼，就想舉這個例子來說說。

單一職責原則（SRP：Single responsibility principle）又稱單一功能原則，面向對象五個基本原則（SOLID）之一。它規定一個類應該只有一個發生變化的原因。

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

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

當時實習生做完，測試寫了一個bug，具體內容是：去掉input框里面的內容，點擊刷新，不能搜索出全部內容。

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

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

因為后臺對于條碼搜索是全匹配的，想要搜索出全部內容，搜索條件是null不是""
然后我就看了下實習生的代碼，他在刷新按鈕綁定click的方法里面，獲取了當前名稱的值，獲取了當前條碼的值，然后判斷，是“”的情況下變成null，然后再調用了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鍵的方法，其實這種寫法是非常混亂的。

這個時候就需要用到單一職責原則

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

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

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

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

附上我的訂閱號，歡迎關注，一起學前端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111316.html

相關文章

  • 前端開發之單一職責原則

    摘要：單一職責原則又稱單一功能原則，面向對象五個基本原則之一。在前端開發的過程中，一個需求總會有多種解決方法，如果多人開發，其實我覺得單一職責挺適合前端的，前陣子看了下實習生的代碼，就想舉這個例子來說說。 單一職責原則（SRP：Single responsibility principle）又稱單一功能原則，面向對象五個基本原則（SOLID）之一。它規定一個類應該只有一個發生變化的原因。 在...

    WrBug 評論0 收藏0

  • 前端開發之單一職責原則

    摘要：單一職責原則又稱單一功能原則，面向對象五個基本原則之一。在前端開發的過程中，一個需求總會有多種解決方法，如果多人開發，其實我覺得單一職責挺適合前端的，前陣子看了下實習生的代碼，就想舉這個例子來說說。 單一職責原則（SRP：Single responsibility principle）又稱單一功能原則，面向對象五個基本原則（SOLID）之一。它規定一個類應該只有一個發生變化的原因。 在...

    FingerLiu 評論0 收藏0

  • 《前端架構設計》讀后筆記

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

    Ocean 評論0 收藏0

  • 可靠React組件設計的7個準則之組合和復用

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

    Amos 評論0 收藏0

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

    摘要：，開始我們的第一篇單一職責。通過解耦可以讓每個職責工更加有彈性地變化。關于本文本文轉自大叔的深入理解系列。深入理解系列文章，包括了原創，翻譯，轉載，整理等各類型文章，原文是大叔的一個非常不錯的專題，現將其重新整理發布。 前言 Bob大叔提出并發揚了S.O.L.I.D五大原則，用來更好地進行面向對象編程，五大原則分別是： The Single Responsibility Princi...

    walterrwu 評論0 收藏0

發表評論

0條評論

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