課程前言：
慕課網(wǎng) -- DatePicker組件開發(fā)
課程準備：
HTML筷转、CSS、JavaScript基礎(chǔ)岭妖、瀏覽器事件
靜態(tài)結(jié)構(gòu)的編寫、日歷數(shù)據(jù)反璃、數(shù)據(jù)渲染昵慌、事件處理
靜態(tài)結(jié)構(gòu)的編寫：
header分為三部分，向上翻頁的button淮蜈，向下翻頁的button斋攀，還有就是中間的當前月份顯示。
body部分是一個表格的呈現(xiàn)梧田，分為兩個部分淳蔼，表頭是周一到周日的呈現(xiàn)，表格內(nèi)容是每一個單元格就是一個日期裁眯。
組件的樣式命名鹉梨，會比較長（復(fù)雜），開發(fā)的是一個組件穿稳，那這個組件就會被應(yīng)用到各個頁面上俯画，如果過于簡單，就會跟頁面上的元素class命名沖突司草，帶來不必要的麻煩艰垂。因此，組件的樣式命名就比較獨特埋虹，可以長一點心软。
a元素實現(xiàn)按鈕秩冈，是因a自帶手形圖標潜腻。一般來說遂铡，可點擊的按鈕都需要一個提示。
靜態(tài)樣式的編寫：
box-shadow：給盒子一個懸浮于頁面的效果，box-shadow:2px2px8px2pxrgba(128,128,128,.3);
級聯(lián)選擇器：避免與外界發(fā)生沖突柬讨。background-color:#f0f0f0; 它是區(qū)別于白色的背景色崩瓤。為了使字體符號更像圖標，會設(shè)置字體的樣式踩官，font-family:Serif; a標簽有href屬性時却桶，就會有下劃線。
border-collapse:collapse;是說蔗牡，table中颖系，相鄰的兩個表格線會折疊一條。選中狀態(tài)下 shift+cmd+上下箭頭即上下移動辩越；
日期對象：
new Date (year,month-1,date) 其中嘁扼，月份需要-1.越界自動 進退位，還有 getFullYear() ,getMonth() , getDate() .
getYear() ?是說黔攒，距離 1900 年多少年趁啸，比如2017 getYear() 后就是 117年；但getFullYear() 就是 2017年了督惰。
getDay（） 當前日期在一周中是周幾不傅。
當月第一天 new Date(year, month-1, 1) 日期指定1，月份是從0開始的姑丑，所以要-1，year也都是正常的 2017 呀等辞友。
當月最后一天 new Date(year, month, 0) 日期指定 0栅哀，月份是month，沒有減1称龙，其實就是下個月咯留拾，下個月的第0天，表示上一個月的最后一天鲫尊。（因月份的最后一天痴柔，不一定都是31，因此疫向，我們用 下一個月的 0 來表示 這個月的最后一天咳蔚。這是利用了日期的自動進退位。）
星期一 到 星期天搔驼，[1,2,3,4,5,6,0] 谈火，這個數(shù)組是 getDay() ?的返回值。一個星期的開始舌涨，是從周天開始的糯耍，也就是0開始的，你知道為什么嗎？??
獲取日歷數(shù)據(jù)：
利用JS獲取日歷的核心數(shù)據(jù)
日期數(shù)據(jù)的渲染：
有時聊渲染温技，其實就是一個html革为。
整個過程細心就好了，其實就是比較繁瑣舵鳞。 < 小于號震檩，>；大于號系任，因普通的跟看起來有點不同恳蹲，那就調(diào)整一下字體就好了。span中間是當前月份的顯示俩滥，都是從 monthData中拿到嘉蕾，前期數(shù)據(jù)的準備非常重要。
輸入框的展開與收起：
優(yōu)化著手點有兩方面：
1.當用戶點擊輸入框的時候霜旧，日期組件才可以顯示错忱，不能一打開頁面，它就在挂据，太不友好了以清；
2.目前的日期組件的主題結(jié)構(gòu) wrapper header body是占據(jù)文檔流的，如果頁面里還有其他的內(nèi)容崎逃，會因日期的出行掷倔，下移的，因此將其樣式改為絕對定位个绍。
元素的顯示與隱藏：方式很多樣勒葱；最通用是通過class來控制，默認是隱藏巴柿，除非多了一個 block 的樣式凛虽，后者覆蓋前者，wrapper就才顯示出來广恢。 ?.classList.remove 與 .classList.add 的 使用凯旋。 ?isOpen 布爾值 來記錄當前是關(guān)閉狀態(tài)還是展開狀態(tài)。
日期組件的絕對定位：目標是希望它出現(xiàn)在輸入框的下方钉迷，所以就要先找到輸入框目前在頁面的哪個位置呢： var left = $input.offsetLeft; ?var top = $input.offsetTop; ? var height = $input.offsetHeight; ? $wrapper.style.top = top + height + 9 +'px'; ? $wrapper.style.left = left + 'px';（切記至非，這里用style給寬高的時候，加上 px 呢糠聪。）
月份切換：
本節(jié)課的出發(fā)點：左右按鈕切換時睡蟋，進入上一月，或者下一月枷颊。初始化的時候戳杀，給按鈕綁定事件该面。但這種情況，是在組件初始化的時候才有效信卡，事件只綁定了一次隔缀；但頁面渲染之后，內(nèi)容里是根據(jù)按鈕再重新渲染的傍菇，我們的按鈕也是感覺HTML字符串再重新渲染的猾瘸，因此就會有按鈕不斷的銷毀與重建。
datepicker.render('prev')? datepicker.render('next') 是誰：
日期點擊選中：
data-*是一個比較新的API牵触，老的瀏覽器不能使用。*是要替換成自己命名的字符咐低。為一個標簽添加一個此屬性后揽思，js取值的時候是： target.dataset.d; ? ? target:添加此屬性的標簽對象 ? ?dataset:固定寫法 ? ?d:添加的屬性名的后半部分，即data-*中“-”后自己命名的字符见擦。
日期組件的使用：
調(diào)用方法由繁入簡钉汗，最后只有 .init 里，傳一個樣式鲤屡。
而一個日期組件的出現(xiàn)，就依靠這個輸入框了酒来。而這個輸入框的樣式卢未，因為不屬于組件，因此就寫在頁面里咯~
課程總結(jié)（組件開發(fā)流程）：
使用HTML合理規(guī)劃組件結(jié)構(gòu)堰汉；
為組件編寫美觀的樣式辽社；
如何使用JavaScript獲取組件所需數(shù)據(jù)；
將數(shù)據(jù)與HTML結(jié)構(gòu)結(jié)合衡奥；
用戶事件處理爹袁；
整個日期組件的出現(xiàn)远荠，就是從 init 開始矮固，然后 init 在綁定相關(guān)的點擊操作之前，首先調(diào)用 render 來渲染這個的日期組件譬淳；然后档址，render里，寫的是 日期組件中的數(shù)據(jù)邻梆，還有左右兩邊的上下按鈕守伸；render里的數(shù)據(jù)，則是從 buildUi 里來的浦妄，包括樣式尼摹，都是一致的见芹。
小技能：
var$input =document.querySelector('input');
$wrapper.classList.add('ui-datepicker-wrapper-show');
$wrapper.classList.remove('ui-datepicker-wrapper-show');
if(!$target.classList.contains('ui-datepicker-btn'))return;
if($target.tagName.toLowerCase() !='td')return;
不寫備注了，試試看蠢涝，能否想起來啦玄呛。
后續(xù)可完善的功能：
如何在移動端使用日期組件；
當頁面比較復(fù)雜的時候和二，如何處理徘铝，彈出框的位子；
如何標記上一個月與下一個月的日期惯吕，使它們擁有不同的樣式惕它；
某一些日期可點，某一些日期不可點废登。
寫在最后淹魄，寫給自己：
整個組件開發(fā)的核心，是日期數(shù)據(jù)的獲取钳宪，那老師都已經(jīng)給出思路了揭北，我是否愿意寫一寫可完善的功能；如果我覺得JS不那么的熟悉吏颖，是否可以使用React重新開發(fā)該框架呢搔体？如果想要重寫，大概要多久呢半醉？
