爲什麼需要代碼封裝
在開發過程中會產生大量的重複性代碼,如果不進行代碼封裝在後期維護需要修改多處,從而導致代碼難以維護。
例如下面這段代碼
/**
優點
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))