關於代碼封裝(Date)

爲什麼需要代碼封裝

在開發過程中會產生大量的重複性代碼,如果不進行代碼封裝在後期維護需要修改多處,從而導致代碼難以維護。

例如下面這段代碼

/**
優點
    1.今天時間與明天時間的基本功能
    2.實現了打印年月日周
缺點
    1.無法實現 獲取指定時間的今天與明天
    2.重複定義時間對象
    3.獲取周代碼重複
    4.打印輸出代碼重複
*/
//獲取今天時間
function getTodayDate(){
    var myDate=new Date();
    var today_year=myDate.getFullYear();
    var today_month=myDate.getMonth()+1;
    var today_day=myDate.getDate();
    var today_week=myDate.getDay();
    today_week=today_week !== 0 ? today_week : 7;
    console.log(today_year+"年"+today_month+"月"+today_day+"日"+"周"+today_week)
}
//獲取明天的時間
function getTomorrowDate(){
    var myDate=new Date();
    //setDate把Date對象設置爲明天的時間
    myDate.setDate(myDate.getDate()+1);
    var tomorrow_year=myDate.getFullYear();
    var tomorrow_month=myDate.getMonth()+1;
    var tomorrow_day=myDate.getDate();
    var tomorrow_week=myDate.getDay();
    tomorrow_week=tomorrow_week !== 0 ? tomorrow_week : 7;
    console.log(tomorrow_year+"年"+tomorrow_month+"月"+tomorrow_day+"日"+"周"+tomorrow_week);
}

如何進行代碼封裝及調用

高內聚低耦合
  • 高內聚

    是對系統中元素職責的相關性和集中度的量度。如果元素有高度的相關職責,除了這些職責在沒有其他的工作,那麼該元素就有高內聚。

  • 低耦合

    耦合就是元素與元素之間的連接,感知和依賴量度。這裏說的元素即是功能,對象,系統,子系統。模塊。

下面我們來重構上面的代碼,但這之前我們要分析上部分代碼的實現與如何拆分

代碼實現方法
  • 當前時間的今天
  • 當前時間的明天
  • 獲取當前時間的星期
  • 時間對象的可視化輸出

上面面代碼實現中有一個不合理的地方,難道我只能獲取當前時間麼。那麼我想獲取指定時間的昨天和今天應該怎麼做呢。所以我們應該獲取傳入時間的今天與明天

  • 傳入時間的今天
  • 傳入時間的明天
  • 獲取傳入時間的星期
  • 時間對象的可視化輸出
方法拆分
  • getTodayDate (獲取傳入時間的今天)
    • 參數
      • _date [類型 Date] (傳入對象)
    • 返回值
      • _date [類型 Date] (處理後的時間)
  • getTomorrowDate (獲取傳入時間的明天天)
    • 參數
      • _date [類型 Date] (傳入對象)
    • 返回值
      • _date [類型 Date] (處理後的時間)
  • getDateWeek (獲取傳入時間的星期)
    • 參數
      • _date [類型 Date] (傳入對象)
    • 返回值
      • _week [類型 Number] (返回星期幾)
  • dateConsole (格式化輸出時間)
    • 參數
      • _date [類型 Date] (Date對象)
    • 返回值(無)
構造方法
//獲取傳入日期今天的時間
function getTodayDate(){
    
}

//獲取傳入日期明天的時間
function getTomorrowDate(){
    
}

//獲取傳入日期的星期
function getDateWeek(){
    
}

//格式化輸出時間
function dateConsole(){
    
}

構造方法增加傳入值與返回值
//獲取傳入日期今天的時間
function getTodayDate(_date){
    return _date
}

//獲取傳入日期明天的時間
function getTomorrowDate(_date){
    return _date
}

//獲取傳入日期的星期
function getDateWeek(_date){
    // 此處的_week 需要重新定義在下一步會實現 這一步先註釋即可
    //return _week
}

//格式化輸出時間
function dateConsole(_date){
    // 此方法是輸出方法所以沒有返回值
}

方法邏輯填充
//獲取傳入日期今天的時間
function getTodayDate(_date){
    // 傳入時間的今天 就是傳入時間 所以不需要任何處理
    return _date
}

//獲取傳入日期明天的時間
function getTomorrowDate(_date){
    //獲取明天的時間就是 設置傳入時間天 天+1
    _date.setDate(_date.getDate()+1);
    return _date
}

//獲取傳入日期的星期
function getDateWeek(_date){
    // 定義_week 並獲取傳入時間的星期
    let _week= _date.getDay()
    // 星期爲 0 1 2 3 4 5 6  0是星期天,這裏用三目運算重新賦值
    _week = _week !== 0 ? _week : 7
    return _week
}

//格式化輸出時間
function dateConsole(_date){
    var _year=_date.getFullYear();
    var _month=_date.getMonth()+1;
    var _day=_date.getDate();
    // 上面已經定義了獲取星期的方法 所以這裏直接調用上面的方法就可以
    var _week=getDateWeek(_date);
    // 此方法是輸出方法所以沒有返回值,所以直接輸出即可
    console.log(_year+"年"+_month+"月"+_day+"日"+"周"+_week);
}
方法調用及使用
//獲取傳入日期今天的時間
function getTodayDate(_date){
    // 傳入時間的今天 就是傳入時間 所以不需要任何處理
    return _date
}

//獲取傳入日期明天的時間
function getTomorrowDate(_date){
    //獲取明天的時間就是 設置傳入時間天 天+1
    _date.setDate(_date.getDate()+1);
    return _date
}

//獲取傳入日期的星期
function getDateWeek(_date){
    // 定義_week 並獲取傳入時間的星期
    let _week= _date.getDay()
    // 星期爲 0 1 2 3 4 5 6  0是星期天,這裏用三目運算重新賦值
    _week = _week !== 0 ? _week : 7
    return _week
}

//格式化輸出時間
function dateConsole(_date){
    var _year=_date.getFullYear();
    var _month=_date.getMonth()+1;
    var _day=_date.getDate();
    // 上面已經定義了獲取星期的方法 所以這裏直接調用上面的方法就可以
    var _week=getDateWeek(_date);
    // 此方法是輸出方法所以沒有返回值,所以直接輸出即可
    console.log(_year+"年"+_month+"月"+_day+"日"+"周"+_week);
}

// 定義一個時間
let tmp_date=new Date()

// 獲取今天的時間對象 返回的也是時間對象
let today_date=getTodayDate(tmp_date)
// 輸出今天的時間
dateConsole(today_date)

//實際上可以簡化一下上面的代碼  已知getTodayDate 返回的是時間對象且 dateConsole 接收的參數也是時間對象 所以可以這樣寫
dateConsole(getTodayDate(tmp_date))

// 獲取明天並輸出
dateConsole(getTomorrowDate(tmp_date))

代碼優化

上面的代碼中 getTodayDate 並沒有做任何的時間處理 所以這個方法可以不用,下面是優化過後的代碼

//獲取傳入日期今天的時間 這個方法沒有任何意義所以應該刪除
//function getTodayDate(_date){
    // 傳入時間的今天 就是傳入時間 所以不需要任何處理
//    return _date
//}

//獲取傳入日期明天的時間
function getTomorrowDate(_date){
    //獲取明天的時間就是 設置傳入時間天 天+1
    _date.setDate(_date.getDate()+1);
    return _date
}

//獲取傳入日期的星期
function getDateWeek(_date){
    // 定義_week 並獲取傳入時間的星期
    let _week= _date.getDay()
    // 星期爲 0 1 2 3 4 5 6  0是星期天,這裏用三目運算重新賦值
    _week = _week !== 0 ? _week : 7
    return _week
}

//格式化輸出時間
function dateConsole(_date){
    var _year=_date.getFullYear();
    var _month=_date.getMonth()+1;
    var _day=_date.getDate();
    // 上面已經定義了獲取星期的方法 所以這裏直接調用上面的方法就可以
    var _week=getDateWeek(_date);
    // 此方法是輸出方法所以沒有返回值,所以直接輸出即可
    console.log(_year+"年"+_month+"月"+_day+"日"+"周"+_week);
}

// 定義一個時間
let tmp_date=new Date()
// 獲取今天並且輸出 實際上tmp_date就是今天 所以直接格式化輸出
dateConsole(tmp_date)
// 獲取明天並輸出
dateConsole(getTomorrowDate(tmp_date))

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章