組件化

應(yīng)用??
頁(yè)面??
模塊??
組件??

組件與組件之間的關(guān)系是組合不是依賴(lài)

資源加載路徑的層級(jí)問(wèn)題？ ../../components/xx/xx.js

組件應(yīng)該是獨(dú)立的、無(wú)依賴(lài)的，如果有耦合，提升到模塊的層面闻牡。

SPA 在首次加載頁(yè)面時(shí)就獲取了所有必需的資源，或者再按需動(dòng)態(tài)加載并且渲染到頁(yè)面上

base 所有控件只定義基色
基色基礎(chǔ)上＋1 表示鼠標(biāo)事件樣式 比如，基色為：＃fff啄育； 那么鼠標(biāo)事件樣式：＃

一個(gè)網(wǎng)頁(yè)是由各種表單、表格拌消、按鈕挑豌、輸入控件等組成，那么從更微觀的一個(gè)層面去看墩崩，這些組件其實(shí)都是由線(xiàn)條氓英，線(xiàn)條陰影，圓直角鹦筹，背景铝阐，文字圖片內(nèi)容，留白加上鼠標(biāo)事件樣式構(gòu)成的铐拐。

bootstrap 引入往往千篇一律徘键，如果說(shuō)它解決了前端開(kāi)發(fā)工程中的有無(wú)問(wèn)題练对，那么發(fā)展到現(xiàn)階段，應(yīng)該出現(xiàn)像vui這樣最優(yōu)的選擇吹害。

想法：
應(yīng)該依據(jù)html元素在游覽器里的渲染順序
應(yīng)該定義一套UI設(shè)計(jì)規(guī)范螟凭，包含組件的字體，字號(hào)它呀，邊框螺男，邊距，組件間間距

1. 定義組件基礎(chǔ)樣式纵穿，邊框下隧、邊距、字體政恍、字號(hào)汪拥，每種組件定義大、中篙耗、小三種
2. theme.css／theme.config 所有組件默認(rèn)繼承theme.css 配色迫筑，也可以為每個(gè)組件單獨(dú)定義theme.css主題配色。
   1. 背景
   2. color
   3. :hover樣式
   4. 透明度
   5. layout
      基于24列格柵宗弯，
      通過(guò)flex.layout.css切換flex布局
      .col-設(shè)置列寬 .col-offset-設(shè)置列便宜 col-order-＊設(shè)置排序

layout

配置文件：
web端
手機(jī)端

1. flex布局
2. 響應(yīng)式布局

設(shè)計(jì)模式：

＊ 導(dǎo)航

＊ 表單
表單作為獲取用戶(hù)輸入的重要交互方式脯燃，也承擔(dān)將問(wèn)題和答案配對(duì)的角色
??注意事項(xiàng)：

1. 敏感信息 通過(guò) “輸入提示” 說(shuō)明為什么要這么做 eg： 身份證和電話(huà)號(hào)碼
2. 避免在空白中完成輸入。通過(guò)“默認(rèn)值”蒙保、“輸入提示／提醒”辕棚、“結(jié)構(gòu)化格式”等方式提示用戶(hù)
3. 即時(shí)校錯(cuò)，并盡可能寬容邓厕。eg：多輸空格默認(rèn)刪掉逝嚎，不需要提醒用戶(hù)
   包含：標(biāo)簽、輸入框详恼、校驗(yàn)反饋补君、action
   交互：

• 對(duì)齊方式－按鈕組與輸入框左對(duì)齊 (左對(duì)齊、右對(duì)齊昧互、頂部對(duì)齊)
• 禁用主按鈕（輸入框3個(gè)以下）
• 結(jié)構(gòu)化大格式挽铁，不接受偏離期望的格式。 eg：銀行卡號(hào)輸入框
• 輸入提示 vs 輸入提醒
• 校驗(yàn) 提前開(kāi)始校驗(yàn)錯(cuò)誤敞掘，避免點(diǎn)擊提交之后才反饋
  間距規(guī)范：

1. 說(shuō)明文字與表單控件間距 （8px）
2. 兩組表單控件間距 （橫排：16px叽掘；豎排：24px）

＊ 列表

• 獲取概覽
• 逐項(xiàng)瀏覽
• 查找特定列表項(xiàng)
• 排序與過(guò)濾
• 重新安排、添加玖雁、刪除或重新分類(lèi)列表項(xiàng)
  交互：

• 顯示詳情 鼠標(biāo)懸停某個(gè)鏈接或內(nèi)容時(shí)更扁，顯示該項(xiàng)列表少量詳情信息 移入0.5s延時(shí)
• 列表嵌入 通過(guò)點(diǎn)擊查看詳情信息，顯示在當(dāng)前上下文 兩層折疊面板
• 彈層顯示
• 面板選擇器 通過(guò)選擇后在右側(cè)彈出該列表大量詳情信息
• 單窗口深入
• 分頁(yè)器
• 無(wú)限加載 監(jiān)聽(tīng)滾輪事件或者單擊按鈕

＊ 表格
內(nèi)容：

• 按鈕組
• 搜索
• 排序
• 篩選 （eg：用戶(hù)上線(xiàn)狀態(tài)）
• 狀態(tài)點(diǎn) （完成、進(jìn)行中疯潭、異常赊堪、未開(kāi)始）
• 單行操作 （更多操作）
• 分頁(yè)器／無(wú)限加載（可選）

交互：

• 顯示長(zhǎng)表格
• 全選數(shù)據(jù)
• 跨頁(yè)選數(shù)據(jù)
• 固定按鈕組
• 過(guò)長(zhǎng)內(nèi)容自動(dòng)隱藏 鼠標(biāo)懸浮時(shí)顯示完整
• 表格項(xiàng)編輯 模塊編輯 面殖、直接單元格編輯 竖哩、懸浮層編輯

間距規(guī)范：
行高：
大：表格主體 跟表格標(biāo)題和分頁(yè)按鈕間距16px，表頭上下內(nèi)邊距11px脊僚，表格行上下內(nèi)邊距16px相叁、左右邊距8px
中：表頭與表格行上下內(nèi)邊距為10px
小：表頭上下內(nèi)邊距10px辽幌，表格行上下內(nèi)邊距6px增淹、左右邊距8px
列寬：
表頭不換行，固定字節(jié)長(zhǎng)度大列盡量不換行（時(shí)間／操作等）
對(duì)齊方式：
數(shù)值右對(duì)齊乌企，帶小數(shù)點(diǎn)按小數(shù)點(diǎn)對(duì)齊虑润；
其余左對(duì)齊；

表格增強(qiáng)：
多列數(shù)據(jù)： 通過(guò)按鈕實(shí)現(xiàn)左右切換加酵；自定義顯示列項(xiàng)拳喻；固定表頭橫向滾動(dòng)顯示；
帶圖標(biāo)帶表格：eg：通過(guò)圖標(biāo)表達(dá)數(shù)據(jù)變化趨勢(shì)
帶圖表帶表格：
二維拓展表格：橫向縱向各一個(gè)標(biāo)題
簡(jiǎn)化表格：卡片和彈出框展示表格

＊ 搜索

十大設(shè)計(jì)原則
親密性 Proximity
信息之間關(guān)聯(lián)性越高距離應(yīng)該越接近猪腕，像一個(gè)視覺(jué)單元冗澈；親密性的目的是實(shí)現(xiàn)組織性，讓用戶(hù)對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然陋葡。
縱向間距：

• 8px（小號(hào)間距）亚亲、16px（中號(hào)間距）荆姆、24px（大號(hào)間距）
• 特殊情況可以通過(guò)加減『基礎(chǔ)間距』的倍數(shù)响谓，或者增加元素來(lái)拉開(kāi)信息層次
  • y=8+8*n。其中告喊，n>=0岭粤，y 是縱向間距惜索，8 是『基礎(chǔ)間距』
  • 通過(guò)增加『分割線(xiàn)』來(lái)拉開(kāi)層次

橫向間距：

對(duì)齊 Alignment
心理學(xué)『格式塔學(xué)派』中連續(xù)律：在知覺(jué)過(guò)程中人們傾向于使知覺(jué)對(duì)象的直線(xiàn)繼續(xù)成為直線(xiàn)，曲線(xiàn)繼續(xù)成為曲線(xiàn)绍在。在設(shè)計(jì)中门扇，將元素進(jìn)行對(duì)齊，既符合用戶(hù)的認(rèn)知特性偿渡，也能引導(dǎo)視覺(jué)流向臼寄，讓用戶(hù)更流暢地接收信息。
文字對(duì)齊： 字段或段落較短溜宽、較散時(shí)統(tǒng)一一個(gè)視覺(jué)起點(diǎn)
表單對(duì)齊： 冒號(hào)（右）對(duì)齊吉拳；順著冒號(hào)視覺(jué)流，能方便快速填寫(xiě)表單項(xiàng)
數(shù)字對(duì)齊： 建議取相同有效位數(shù)适揉，右對(duì)齊留攒；可快速比對(duì)數(shù)值大小

對(duì)比 Contrast
對(duì)比增加視覺(jué)效果煤惩，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶(hù)快速識(shí)別關(guān)鍵信息炼邀。

重復(fù) Repetition
相同的元素在整個(gè)界面中不斷重復(fù)魄揉，不僅可以有效降低用戶(hù)的學(xué)習(xí)成本，也可以幫助用戶(hù)識(shí)別出這些元素之間的關(guān)聯(lián)性
線(xiàn)框重復(fù)拭宁、設(shè)計(jì)要素重復(fù)洛退、文案格式重復(fù)。
重復(fù)元素可以是一條粗線(xiàn)杰标、一種線(xiàn)框兵怯，某種相同的顏色、設(shè)計(jì)要素腔剂、設(shè)計(jì)風(fēng)格媒区，某種格式、空間關(guān)系等掸犬。

直截了當(dāng) Make it Direct
需要在哪里輸出袜漩，就要允許在哪里輸入。這就是直接操作的原理登渣。不要為了編輯內(nèi)容而打開(kāi)另一個(gè)頁(yè)面噪服，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。
頁(yè)內(nèi)編輯：

單擊編輯：當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí)胜茧，使用單擊編輯粘优。
狀態(tài)一：普通的瀏覽模式，不區(qū)分可編輯行和不可編輯行呻顽；
狀態(tài)二：鼠標(biāo)懸停時(shí)雹顺，『指針』變?yōu)椤菏中汀唬庉媴^(qū)域底色變黃廊遍，出現(xiàn)『Tooltips』提示單擊編輯嬉愧；
狀態(tài)三：鼠標(biāo)點(diǎn)擊后，出現(xiàn)『輸入框』喉前、『確定』没酣、『取消』表單元素，同時(shí)光標(biāo)定位在『輸入框』中卵迂。

文字鏈/圖標(biāo)編輯示例
狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標(biāo)裕便；
狀態(tài)二：鼠標(biāo)點(diǎn)擊『編輯』后，出現(xiàn)『輸入框』见咒、『確定』偿衰、『取消』表單元素，同時(shí)光標(biāo)定位在『輸入框』中
當(dāng)『易讀性』為主，同時(shí)又要突出操作行的『易編輯性』時(shí)下翎，可使用『文字鏈/圖標(biāo)編輯』缤言。

簡(jiǎn)化交互 Keep it Lightweight
足不出戶(hù) Stay in the Page
提供邀請(qǐng) Provide Invitation

巧用過(guò)渡 Use Transition
即時(shí)反應(yīng) React Immediately

推論邀請(qǐng)：用于交互期間，合理推斷用戶(hù)可能產(chǎn)生的需求视事。

推論邀請(qǐng)示例
用戶(hù)點(diǎn)擊『贊』后胆萧，同時(shí)系統(tǒng)分析（既然用戶(hù)喜歡這篇文章，那么可能對(duì)這一類(lèi)文章都有興趣）并提供開(kāi)啟『精打細(xì)算』的邀請(qǐng)郑口。

分析：這里的推論邀請(qǐng)?jiān)O(shè)置不合理方面：‘下次再說(shuō)’ 應(yīng)該改為 “3s 后退出／關(guān)閉”鸳碧。雖然推論合理，但你不能代替用戶(hù)思維犬性。設(shè)置自動(dòng)退出以不影響用戶(hù)操作。

一個(gè)控件有哪幾種狀態(tài)形式腾仅？

1. 禁止??? state－disabled disabled="disabled"
2. 報(bào)錯(cuò)? state－error
3. 成功? state－success
4. 警告?? state－warning
5. 進(jìn)行中 ?? state-validating
6. 其它包括：
   1. :hover
   2. :focus
   3. :active
   4. :visited

架構(gòu)：應(yīng)用－頁(yè)面－模塊－組件
應(yīng)用－路由－模塊－組件（單頁(yè)應(yīng)用）
組件間應(yīng)該是獨(dú)立的乒裆、無(wú)依賴(lài)的；

app.config.json 配置文件：

• [x] 文件目錄組織結(jié)構(gòu)
• [ ] 手機(jī)端 or web端

組件模式架構(gòu)實(shí)現(xiàn)思路：

1. 繼承機(jī)制：

2. store 概念：組件不是直接從服務(wù)端取數(shù)據(jù)推励，而是到對(duì)應(yīng)的前端數(shù)據(jù)緩存中獲取數(shù)據(jù)鹤耍。緩存與服務(wù)端同步。

3. 數(shù)據(jù)與dom：當(dāng)數(shù)據(jù)變動(dòng)验辞，dom結(jié)構(gòu)自動(dòng)變動(dòng)稿黄。即把大多數(shù)命令式的dom操作簡(jiǎn)化為配置操作。

5. components目錄下, 一個(gè)目錄為一個(gè)組件跌造，引入方式可以是這樣：
   <div include=“components/Employee-panel”></div> or
   <div include=“components/Employee.html”> or
   <div include=“components/Employee.js”>

6. 業(yè)務(wù)模型（純邏輯）

7. 視圖模型（基本也是純邏輯）

8. 界面層（多是字符串模板）

9. 同一個(gè)視圖模型搭配不同的界面模板杆怕，可以實(shí)現(xiàn)視圖模型的復(fù)用 ；同一個(gè)界面模板與不同的視圖模型組合壳贪，也能直接組合出完全不同的東西 所以這么一來(lái)陵珍，我們的復(fù)用粒度就非常靈活了

10. 框架不關(guān)注組件內(nèi)部實(shí)現(xiàn)，關(guān)注組件的數(shù)據(jù)存取接口

11. 框架應(yīng)當(dāng)盡可能以web components 為基石

12. 變更檢測(cè)：通過(guò)某種配置的方式违施，由框架自動(dòng)添加一些關(guān)聯(lián)互纯，當(dāng)數(shù)據(jù)變更的時(shí)候，把DOM進(jìn)行相應(yīng)修改磕蒲，又比如留潦，當(dāng)DOM發(fā)生變動(dòng)的時(shí)候，也更新對(duì)應(yīng)的數(shù)據(jù)

13. 組件同數(shù)據(jù)間實(shí)現(xiàn)一個(gè)有限狀態(tài)機(jī)（數(shù)據(jù)更新前辣往，正在更新兔院，更新之后等等）

服務(wù)器推送一條數(shù)據(jù)——store緩存更新——界面更新前準(zhǔn)備——界面更新中——完成更新

提交數(shù)據(jù)——store緩存更新——界面更新（多個(gè)狀態(tài)步驟）——
｜同時(shí)——提交服務(wù)器——反饋成功與否——通知store——界面狀態(tài)更新

變更檢測(cè)的幾種實(shí)現(xiàn)方式：

1. 存取器封裝。對(duì)數(shù)據(jù)進(jìn)行包裝排吴。一種方式是通過(guò)geter與seter函數(shù)秆乳；另一種在一些新的游覽器也可以用defineProperty相關(guān)方法。
   var data = {
   name: "aaa",
   getName: function() {
   return this.name;
   },
   setName: function(value) {
   this.name = value;
   }
   }

2. 臟檢測(cè)：（angular@1.x）保存數(shù)據(jù)舊值與新值，事件發(fā)生后的數(shù)據(jù)跟舊數(shù)據(jù)比對(duì)屹堰，有不同再觸發(fā)界面刷新肛冶。控制可能導(dǎo)致數(shù)據(jù)刷新的來(lái)源（各種事件）扯键；

3. 觀察機(jī)制：在ES7里引入了Object的observe方法睦袖，可以用于監(jiān)控對(duì)象或數(shù)組的變動(dòng)。所謂觀察機(jī)制荣刑，也就是觀測(cè)對(duì)象屬性的變更馅笙，數(shù)組元素的新增，移除厉亏，位置變更等等董习。

觀察機(jī)制：
DOM也是可以被觀察的，但是目前絕大多數(shù)雙向同步框架都是通過(guò)事件的方式把DOM變更同步到數(shù)據(jù)上爱只。

事件方式的問(wèn)題：

1. 某個(gè)文本框綁定了一個(gè)對(duì)象的屬性皿淋，框架內(nèi)部是監(jiān)控了這個(gè)文本框的鍵盤(pán)輸入、粘貼等相關(guān)事件恬试，然后取值去往對(duì)象里寫(xiě)窝趣。但是如果你直接myInput.value=”111”，這個(gè)變更就沒(méi)法獲取了训柴⊙剖妫可以從HTMLInputELement的原型上去覆蓋value賦值，嘗試把這種東西也納入框架管轄范圍幻馁。
2. 另外一個(gè)問(wèn)題洗鸵，那就是我們只考慮了特定元素的特定屬性，可以通過(guò)事件獲取變更宣赔，如何獲得更廣泛意義上的DOM變更预麸？比如說(shuō)，一般屬性的變更儒将，或者甚至子節(jié)點(diǎn)的增刪吏祸？
3. DOM4引入了MutationObserver，用于實(shí)現(xiàn)這種變更的觀測(cè)钩蚊。
4. polymer實(shí)現(xiàn)了一個(gè)observe-js贡翘，用于觀測(cè)數(shù)組、對(duì)象和路徑的變更

理解一個(gè)問(wèn)題:
界面控件綁定了一個(gè)for循環(huán)1000次的數(shù)據(jù)a
for(var i = 0; i<1000; i++){
obj.a+=1;
}
對(duì)框架來(lái)說(shuō)砰逻，中間過(guò)程必須全都舍棄鸣驱。react使用了虛擬DOM來(lái)減少中間的dom操作浪費(fèi)；界面只響應(yīng)邏輯變更的結(jié)束狀態(tài)蝠咆，不響應(yīng)中間狀態(tài)踊东。同樣北滥，dom的寫(xiě)入應(yīng)該是一次性寫(xiě)入的（通過(guò)DocmentFragment或者innerHTML一次寫(xiě)入整個(gè)字符串）

Immutable Date 函數(shù)式編程當(dāng)中的一個(gè)概念
其大致理念：任何一種賦值，應(yīng)該被轉(zhuǎn)化成復(fù)制而不是引用闸翅。不存在指向同一個(gè)地方的引用再芋。

外層數(shù)據(jù)——list組件（從外層復(fù)制一份數(shù)據(jù)）
外層數(shù)據(jù)arr改變——同步給內(nèi)層list組件數(shù)據(jù)更新——list組件界面跟新
list組件產(chǎn)生操作事件——改變list組件數(shù)據(jù)——通過(guò)immutable data將數(shù)據(jù)跟外層同步一份

思考一個(gè)問(wèn)題，沒(méi)有復(fù)用度的東西到底需不需要拆出去坚冀，成為一個(gè)組件济赎？

所謂組件化，其核心意義在于提取真正有復(fù)用價(jià)值的東西记某、更好的組織代碼結(jié)構(gòu)以及提升可維護(hù)性司训，哪些東西有復(fù)用的價(jià)值呢？

• 控件
• 基礎(chǔ)邏輯功能
• 公共樣式
• 穩(wěn)定的業(yè)務(wù)邏輯

模版和函數(shù)液南，兩種對(duì)UI層組件化的處理方式：

1. 模版（字符串）：用html字符串的方式去表達(dá)界面結(jié)構(gòu)壳猜，通過(guò)代入數(shù)據(jù)生成真正的界面。只生成html的叫靜態(tài)模版贺拣，同時(shí)還生成事件綁定的叫動(dòng)態(tài)模版蓖谢。
2. 函數(shù)：react之類(lèi)。其內(nèi)部可能還是使用模版譬涡，但在外封裝一層，可以對(duì)不同平臺(tái)提供相同接口啥辨，統(tǒng)一調(diào)用方式涡匀。

界面模版：
可視為一種配置文件。某一塊界面模版描述自身與數(shù)據(jù)模型的關(guān)系溉知。當(dāng)被解析后陨瘩，按照設(shè)置與數(shù)據(jù)建立關(guān)聯(lián)，且更新自身所對(duì)應(yīng)的視圖级乍。

通過(guò)示例來(lái)展示某個(gè)簡(jiǎn)單的組件（widget）的演化過(guò)程舌劳，看它是如何從一個(gè)龐大的、缺乏結(jié)構(gòu)性的代碼庫(kù)進(jìn)化為一個(gè)可重用的組件的：

html5 的元數(shù)據(jù)和微格式：
微格式：一種簡(jiǎn)單的玫荣、開(kāi)放的數(shù)據(jù)格式甚淡。主要包括hCard，hCalendar捅厂，hAtom這幾種贯卦。

項(xiàng)目整體方案
基礎(chǔ)框架
業(yè)務(wù)代碼規(guī)劃
ui組件規(guī)劃
樣式主題定制
構(gòu)建方案
協(xié)作方式

我們要做的是：分層隔離
ui層（View）：
業(yè)務(wù)邏輯 （Controller／ViewModel）：
數(shù)據(jù)層（Model）：Relay／GraphQL／Falcor ／super agent ／ Fetch

falcor 優(yōu)化前后端通信，將所有的后臺(tái)數(shù)據(jù)通過(guò)一個(gè)虛擬的json提供給前端

自己的理解 graphQL 使用一個(gè)GraphQL一次性將一個(gè)聚合根傳遞到前端（比分解成一個(gè)個(gè)json節(jié)省網(wǎng)絡(luò)開(kāi)銷(xiāo)）

組件化焙贷，關(guān)注點(diǎn)分離

react 優(yōu)點(diǎn)

1. 以最高效率去更新dom的更新部分
2. 數(shù)據(jù)結(jié)構(gòu)不可變撵割，意味著組件狀態(tài)不可變，組件變成可重用辙芍。

GraphQL的動(dòng)機(jī)：
應(yīng)該為組件通過(guò)聲明的方式聲明指定的數(shù)據(jù)啡彬，而不是在組件運(yùn)行中通過(guò)命令方式去抓取數(shù)據(jù)羹与；既然我們不用在組件中去抓取數(shù)據(jù)，那么可以將這些多次的數(shù)據(jù)請(qǐng)求放在一起一次性發(fā)出一個(gè)請(qǐng)求庶灿，以獲得所必需的數(shù)據(jù)纵搁。這樣我們?cè)谠黾踊蛞瞥M件時(shí)就可以不用考慮跟蹤這些組件所需要的后端數(shù)據(jù)資源。

聲明式編程風(fēng)格 聲明你想要什么跳仿，不關(guān)注細(xì)節(jié)诡渴，eg：一條SQL語(yǔ)句取得我們想要的數(shù)據(jù)，至于具體如何取得那是數(shù)據(jù)庫(kù)的事
命令式編程風(fēng)格 需指定詳細(xì)的獲取步驟

數(shù)據(jù)源
遠(yuǎn)程 請(qǐng)求遠(yuǎn)程服務(wù)獲得
本地 紀(jì)錄用戶(hù)操作的狀態(tài)
問(wèn)題：
遠(yuǎn)程數(shù)據(jù)同步 ：實(shí)時(shí)遠(yuǎn)程請(qǐng)求 or falcor
組件間數(shù)據(jù)同步：組件共享一個(gè)model

遠(yuǎn)程數(shù)據(jù)實(shí)現(xiàn)緩存和同步菲语？用falcor 圖形結(jié)構(gòu)
Model分為datamodel域uimodel 妄辩， datamodel 關(guān)聯(lián)遠(yuǎn)程數(shù)據(jù)源，uimodel 存儲(chǔ)本地ui操作數(shù)據(jù)

組件化開(kāi)發(fā) vs 模塊化開(kāi)發(fā)
目前社區(qū)在某種無(wú)意識(shí)的混淆這兩個(gè)概念山上，組件化開(kāi)發(fā)是模塊化開(kāi)發(fā)眼耀，但模塊化開(kāi)發(fā)不能說(shuō)就是組件化開(kāi)發(fā)；兩者的關(guān)系是：（組件化>模塊化）佩憾；

組件化問(wèn)題：

1. 組件css作用域隔離
2. 主題配色css全局文件

組件應(yīng)該是一個(gè)成品（至少是半成品）的概念哮伟，對(duì)比汽車(chē)行業(yè)，整車(chē)的制造由各個(gè)組件或部件組合而成妄帘；單個(gè)組件由特定的功能和外觀樣式組合而成楞黄，所以組件并不只是具有某種功能屬性，還包括它的外觀樣式屬性抡驼。

組件分為基礎(chǔ)組件和高級(jí)組件鬼廓，基礎(chǔ)組件當(dāng)然更多的是復(fù)用；高級(jí)組件更多的是分治致盟；我們做組件化開(kāi)發(fā)是要在基礎(chǔ)組件上做高級(jí)組件開(kāi)發(fā)碎税。

組件框架本身是基于模塊化機(jī)制搭建的，模塊機(jī)制作為組件機(jī)制的基礎(chǔ)馏锡。一個(gè)組件是一個(gè)模塊雷蹂；