Hello，大家好，我是 Rosen?？催^(guò)我視頻課的同學(xué)，對(duì)開(kāi)篇這句問(wèn)候應(yīng)該會(huì)很熟悉。之前在慕課網(wǎng)上一共發(fā)了兩個(gè)基于前后端分離的視頻課程，一個(gè)是《手把手從 0 打造電商平臺(tái) - 前端開(kāi)發(fā)》, 這個(gè)課程基本是原生開(kāi)發(fā)，使用了 Webpack 做代碼的模塊化處理和打包優(yōu)化，實(shí)現(xiàn)了一套電商網(wǎng)站的用戶端前端。另外一個(gè)課程《React 從零打造企業(yè)級(jí)電商后臺(tái)管理系統(tǒng)》，這個(gè)課程使用了前端 React 框架，實(shí)現(xiàn)了一套電商的后臺(tái)管理系統(tǒng)。
做完這兩個(gè)視頻課程以后，我就一直在做自己的項(xiàng)目了。正好我的項(xiàng)目里需要做一套自己的 UI 框架，在這個(gè)框架成型以后，就打算把它分享給同學(xué)們。希望同學(xué)們通過(guò)這個(gè)課程能了解開(kāi)發(fā)一個(gè)定制化 UI 框架的思路和方法，并同時(shí)掌握里面涉及的 CSS 相關(guān)的知識(shí)?？蚣艿拿纸?“推推 UI”，起的比較隨意，是跟著公司命名的。這門(mén)專欄課程就是帶著同學(xué)們了解下這么一個(gè) UI 框架的整個(gè)開(kāi)發(fā)過(guò)程。
參與過(guò)前端開(kāi)發(fā)的同學(xué)，應(yīng)該都寫(xiě)過(guò) CSS，也應(yīng)該都用過(guò)像 Bootstrap、Ant-Design 之類的樣式庫(kù)或組件庫(kù)。在使用這些組件庫(kù)的時(shí)候，也應(yīng)該會(huì)發(fā)現(xiàn)用這東西寫(xiě)樣式太省心了，按著文檔給 HTML 上加幾個(gè) class，樣式就神奇的出來(lái)了?！鞍Γ@個(gè)組件不錯(cuò)”，“咦，這么簡(jiǎn)單”，“鵝妹子嚶”…… 使用一些優(yōu)秀的框架的時(shí)候經(jīng)常會(huì)有這樣的感嘆。
習(xí)慣了用這些框架開(kāi)發(fā)以后還會(huì)有一種錯(cuò)覺(jué)，就是我的 CSS 水平不錯(cuò)了，還能拿出幾個(gè)挺像樣的頁(yè)面顯擺顯擺。但實(shí)際上，這通常是錯(cuò)覺(jué)，當(dāng)遇到現(xiàn)有 UI 框架滿足不了的需求時(shí)，自己寫(xiě)起樣式來(lái)又會(huì)感覺(jué)特別吃力。這時(shí)候又會(huì)陷入另一個(gè)極端，開(kāi)始思考 “我怎么突然不會(huì)了？”，“寫(xiě)樣式怎么這么難？”，“這需求有問(wèn)題吧？”。
所以我就準(zhǔn)備做這樣一個(gè)專欄，帶著大家從頭去寫(xiě)一個(gè) UI 框架。從根本上了解框架怎么設(shè)計(jì)、CSS 樣式怎么寫(xiě)、文件結(jié)構(gòu)怎么組織等等。讓同學(xué)們親手開(kāi)發(fā)一個(gè) UI 框架，加深自己對(duì)框架和對(duì) CSS 的了解，提高自己開(kāi)發(fā)樣式的能力。有了這些能力，別人的框架想怎么用想怎么改都不是問(wèn)題了，有需要的時(shí)候用上自己的框架也完全沒(méi)問(wèn)題。
這次專欄要實(shí)現(xiàn)的是一個(gè)移動(dòng)端網(wǎng)站的樣式框架。項(xiàng)目核心部分只使用了 HTML 和 CSS，盡量避開(kāi)了其他技術(shù)棧（Nodejs、打包工具、JS 等），目的是讓同學(xué)們把注意力集中在樣式的開(kāi)發(fā)上。不過(guò)在最后的部分，也會(huì)對(duì)這些周邊的技術(shù)有一些應(yīng)用，讓同學(xué)們知道這個(gè) UI 框架怎么和其他技術(shù)做對(duì)接。
考慮到這次課程的知識(shí)點(diǎn)比較分散，也盡量減弱了上下文的依賴，可以利用碎片化的時(shí)間來(lái)學(xué)習(xí)，所以這次就以專欄的形式呈現(xiàn)給大家。整個(gè)課程的布局基本是按著開(kāi)發(fā)順序進(jìn)行的，總共分了七章，下面分別介紹下這幾章內(nèi)容:
第一章，開(kāi)山。作為整個(gè)項(xiàng)目的開(kāi)篇，這部分主要是理論性的東西，其中包括這個(gè)課程的基本情況，關(guān)于 UI 框架的理解，和 UI 框架設(shè)計(jì)上的內(nèi)容。
第二章，磨劍。在動(dòng)代碼之前，先要打好基礎(chǔ)，有一些必要的 CSS 和 HTML 基礎(chǔ)知識(shí)點(diǎn)要提前了解。這一章就是要?dú)w納一下這些知識(shí)點(diǎn)，以便同學(xué)們進(jìn)行后面章節(jié)的學(xué)習(xí)。這一章會(huì)包含 CSS 的基礎(chǔ)知識(shí)和 CSS 里的各種規(guī)范。
第三章，列陣。這一章開(kāi)始進(jìn)入正題，在這一章里我們的任務(wù)是把移動(dòng)端樣式的基礎(chǔ)布局做好，包括 CSS 規(guī)范里要求的基本內(nèi)容、整體的頁(yè)面布局和一些公共的樣式等，這是做一個(gè) UI 框架的基礎(chǔ)。
第四章，操練。這一章里我們要開(kāi)發(fā)移動(dòng)端里一些常用的組件的樣式，比如網(wǎng)格布局、列表、菜單、信息提示和文本處理等。這章的內(nèi)容會(huì)比較多，大部分都是技巧類的應(yīng)用，這章完成以后，我們的框架就能大體成型了。
第五章，集結(jié)。經(jīng)過(guò)前面的磨劍、列陣、操練，我們的框架已經(jīng)有了雛形，但真正把分散的 Demo 變成一個(gè)能用的 UI 框架，還是要把它們整理起來(lái)。這一章就是要講一下怎么把之前分散的 DEMO 整合，并介紹這個(gè)框架怎么和其他的技術(shù)去結(jié)合。
第六章，實(shí)戰(zhàn)。經(jīng)過(guò)前面實(shí)現(xiàn)各種 DEMO，再加上整合，整個(gè) UI 框架已經(jīng)完事了。到這我們就要拿出來(lái)寫(xiě)幾個(gè)頁(yè)面來(lái)試試手了，看用上框架，開(kāi)發(fā)頁(yè)面會(huì)不會(huì)很爽。
第七章，復(fù)盤(pán)。到這整個(gè)課程就真的要結(jié)束了，這章煽煽情，做個(gè)總結(jié)，來(lái)個(gè)致謝，也就差不多了。
我在這里說(shuō)一下建議大家學(xué)習(xí)這門(mén)專欄的方法：
做到下面 4 項(xiàng)：夯實(shí)基礎(chǔ)、親自實(shí)現(xiàn)、理解設(shè)計(jì)思路、自行擴(kuò)展。
夯實(shí)基礎(chǔ)
根據(jù)剛才的介紹，應(yīng)該能知道本專欄課程是按著實(shí)戰(zhàn)項(xiàng)目走的，課程里不能對(duì) HTML 和 CSS 的知識(shí)點(diǎn)做到完全的覆蓋。所以建議在學(xué)習(xí)這個(gè)課程的時(shí)候，如果是對(duì)樣式開(kāi)發(fā)還沒(méi)什么概念的同學(xué)，最好能先去熟悉一下最最基礎(chǔ)的知識(shí)點(diǎn)，最起碼要知道每個(gè)屬性是做什么用的，這樣專欄里講到了還可以對(duì)知識(shí)點(diǎn)加深理解。這里推薦大家用 w3school.com.cn，把里面 HTML、HTML5、CSS、CSS3 這幾個(gè)分類下的基礎(chǔ)知識(shí)都過(guò)一遍，最好能把里面的示例也跟著做一下。
親自實(shí)現(xiàn)
在這個(gè)課程里面會(huì)實(shí)現(xiàn)很多 UI 組件，這些組件的開(kāi)發(fā)過(guò)程中也會(huì)對(duì)應(yīng)很多的知識(shí)點(diǎn)。同學(xué)們?cè)趯W(xué)習(xí)的時(shí)候一定要把涉及的知識(shí)點(diǎn)理解透，并把每一個(gè) DEMO 也都拿出來(lái)試一試，最好是能做到看完以后自己再默寫(xiě)一遍。如果只是看的話，等看完也基本忘的差不多了。
理解設(shè)計(jì)思路
這個(gè)課程中，和知識(shí)點(diǎn)一樣重要的就是一個(gè) UI 框架的設(shè)計(jì)思路了。設(shè)計(jì)思路不一定是在開(kāi)發(fā) UI 框架中才有用。理解以后，我們?cè)谄綍r(shí)寫(xiě)頁(yè)面樣式的時(shí)候也一樣可以借鑒。
自行擴(kuò)展
這個(gè)項(xiàng)目里做的是一些比較常用的組件，同學(xué)們?cè)趯W(xué)會(huì)開(kāi)發(fā)方法后，也可以自己對(duì)項(xiàng)目做擴(kuò)展，開(kāi)發(fā)自己需要的組件。
應(yīng)該有的收獲
學(xué)完這個(gè)課程以后，應(yīng)該有如下幾方面的收獲：
- 基礎(chǔ)知識(shí)。通過(guò)學(xué)習(xí)這個(gè)課程，要把里面涉及的知識(shí)點(diǎn)都學(xué)會(huì)。這部分收獲是比較明確的，我在課程的最后也會(huì)列出所涉及到的知識(shí)點(diǎn)，同學(xué)們到時(shí)要根據(jù)我給的列表查漏補(bǔ)缺，別留下盲區(qū)。
- 樣式的開(kāi)發(fā)技巧。項(xiàng)目的開(kāi)發(fā)過(guò)程中涉及很多技巧，比如各種居中方式、布局方式、文本截?cái)喾椒ê投ㄎ环椒ǖ?。這些技巧都是通過(guò)多年的實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)出來(lái)的，這部分收獲應(yīng)該是這個(gè)課程的重點(diǎn)。
- UI 框架的設(shè)計(jì)思路。能夠以不同角色的角度參與到 UI 框架的設(shè)計(jì)研發(fā)過(guò)程，了解整個(gè)框架的設(shè)計(jì)思路。
- 良好的編程習(xí)慣。通過(guò)規(guī)范地開(kāi)發(fā)一套 UI 系統(tǒng)，培養(yǎng)良好的編程習(xí)慣，也可以找出之前開(kāi)發(fā)時(shí)有哪些不足。
- 提升抽象、提煉、整合的能力。對(duì)需求進(jìn)行抽象，提煉出代碼里有共性的東西，最后整理成通用功能的能力。
課程的介紹就到這里，更精彩的內(nèi)容都在后面。