JavaScript

ES6/ES2015

這是本人非吵樱看重的一塊；ES5以前劣像，JavaScript充其量跟C也差不了太多乡话，全局變量滿天飛，感覺不好耳奕。ES6之后引入了很多新特性绑青，比如class，async屋群，Promise等等闸婴，瞬間就充滿了活力，非常吸引人芍躏。
ECMAScript 6 入門這套內(nèi)容可以多看看邪乍，工作中可以應(yīng)用到

• const 和 let
• 模板字符串
• 默認參數(shù)
• 箭頭函數(shù)
• 模塊的 Import 和 Export
• 析構(gòu)賦值
• Spread Operator...
• Promises
• async/await
• class
• JavaScript中使用fetch進行異步請求
• Array和Set互轉(zhuǎn)，實現(xiàn)數(shù)組去重
• Babel轉(zhuǎn)碼对竣，將ES6代碼映射為ES5庇楞，兼容瀏覽器

原型

JavaScript是通過對象，構(gòu)造函數(shù)（類）否纬，原型（構(gòu)造函數(shù).prototype）三個實體和三種指針吕晌，__proto__，prototype, constructor临燃，來實現(xiàn)面向?qū)ο蠊δ艿摹?br> 在ES5以前睛驳，理解這一點非常重要，是面向?qū)ο缶幊痰幕A(chǔ)膜廊。
ES6之后柏靶，可以直接使用class, extend等關(guān)鍵字，理解起來就方便多了溃论。雖然被稱為語法糖，但是實際上非常重要痘昌。
徹底理解JavaScript原型
javaScript原型鏈理解
對象模型的細節(jié)
繼承與原型鏈

React

• React是一個典型的MVC框架钥勋，但是不是一個完整的MVC框架，它是構(gòu)建易于可重復(fù)調(diào)用的web組件辆苔，側(cè)重于UI, 也就是view層算灸。
• React的主旨是組件化，React.Component是基類驻啤；
• JSX 是 JavaScript 語法的擴展菲驴。React 開發(fā)不一定使用 JSX ，但我們建議使用它骑冗。標簽也會轉(zhuǎn)化為JavaScript 代碼赊瞬，會快一點先煎；
• React通過對DOM(Document Object Model)的模擬，最大限度地減少與DOM的交互巧涧。
• state 和 props 主要的區(qū)別在于 props 是不可變的薯蝎，而 state 可以根據(jù)與用戶交互來改變。而子組件只能通過 props 來傳遞數(shù)據(jù)
• 父傳子谤绳，通過props占锯；子傳父，通過函數(shù)參數(shù)缩筛；兄弟之間通信消略，通過父組件作為媒介；

• 生命周期函數(shù)：

  
  
  React生命周期.png
• React Refs獲取DOM節(jié)點上組件
• 教程：簡介 React

Flux

Flux 是一種架構(gòu)思想瞎抛，和 MVC 一樣艺演，用以解決軟件結(jié)構(gòu)的問題，如上所說 React 只是涉及了 UI 層所以在搭建大型應(yīng)用時必須要有與之配套的應(yīng)用架構(gòu)婿失。在 React 社區(qū)大家普遍使用 Flux 架構(gòu)的思想來搭建應(yīng)用钞艇。

flux.png

Redux

dva就是基于這個二次開發(fā)而來的
Redux 中文文檔

dva

• dvajs/dva-knowledgemap
• 初識 Dva
• dva 的 effects 是通過 generator 組織的。Generator 返回的是迭代器豪硅，通過 yield 關(guān)鍵字實現(xiàn)暫停功能哩照。
• React Component 有 3 種定義方式，分別是 React.createClass, class 和 Stateless Functional Component懒浮。推薦盡量使用最后一種飘弧，保持簡潔和無狀態(tài)。這是函數(shù)砚著，不是 Object次伶，沒有 this 作用域，是 pure function稽穆。
• class 是保留詞冠王，所以添加樣式時，需用 className 代替 class 舌镶。
• JavaScript 表達式需要用 {} 括起來柱彻，會執(zhí)行并返回結(jié)果。
• Spread Attributes;這是 JSX 從 ECMAScript6 借鑒過來的很有用的特性餐胀，用于擴充組件 props 哟楷。

const attrs = {
  href: 'http://example.org',
  target: '_blank',
};
<a {...attrs}>Hello</a>

• JavaScript 是弱類型語言，所以請盡量聲明 propTypes 對 props 進行校驗否灾，以減少不必要的問題卖擅。
• CSS Modules 默認是局部作用域的，想要聲明一個全局規(guī)則，可用 :global 語法惩阶。
• reducer 是一個函數(shù)挎狸，接受 state 和 action，返回老的或新的 state 琳猫。即：(state, action) => state
• dva 里伟叛，effects 和 subscriptions 的拋錯全部會走 onError hook，所以可以在 onError 里統(tǒng)一處理錯誤脐嫂。
• Effects: put用于觸發(fā) action 统刮。call用于調(diào)用異步邏輯，支持 promise 账千。select用于從 state 里獲取數(shù)據(jù)侥蒙。
• subscriptions 是訂閱，用于訂閱一個數(shù)據(jù)源匀奏，然后根據(jù)需要 dispatch 相應(yīng)的 action鞭衩。數(shù)據(jù)源可以是當前的時間、服務(wù)器的 websocket 連接娃善、keyboard 輸入论衍、geolocation 變化、history 路由變化等等聚磺。格式為 ({ dispatch, history }) => unsubscribe 坯台。
• Route Components 是指 ./src/routes/ 目錄下的文件，他們是 ./src/router.js 里匹配的 Component瘫寝。

• dva架構(gòu)圖

  
  
  dva.png
• State 表示 Model 的狀態(tài)數(shù)據(jù)蜒蕾，通常表現(xiàn)為一個 javascript 對象（immutable data）。
• Action 是一個普通 javascript 對象焕阿，它是改變 State 的唯一途徑咪啡。無論是從 UI 事件、網(wǎng)絡(luò)回調(diào)暮屡，還是 WebSocket 等數(shù)據(jù)源所獲得的數(shù)據(jù)撤摸，最終都會通過 dispatch 函數(shù)調(diào)用一個 action，從而改變對應(yīng)的數(shù)據(jù)褒纲。
• dispatch 是用于觸發(fā) action 的函數(shù)准夷，action 是改變 State 的唯一途徑，但是它只描述了一個行為外厂，而 dipatch 可以看作是觸發(fā)這個行為的方式。
  dispatch是函數(shù)代承，action是函數(shù)的參數(shù)汁蝶。
• 在 dva 中，reducers 聚合積累的結(jié)果是當前 model 的 state 對象。通過 actions 中傳入的值掖棉，與當前 reducers 中的值進行運算獲得新的值（也就是新的 state）墓律。需要注意的是 Reducer 必須是純函數(shù)。
• Effect 被稱為副作用幔亥，在我們的應(yīng)用中耻讽，最常見的就是異步操作，Effects 的最終流向是通過 Reducers 改變 State帕棉。
• Subscription 語義是訂閱针肥，用于訂閱一個數(shù)據(jù)源，然后根據(jù)條件 dispatch 需要的 action香伴。數(shù)據(jù)源可以是當前的時間慰枕、服務(wù)器的 websocket 連接、keyboard 輸入即纲、geolocation 變化具帮、history 路由變化等等。
• 這里的路由Router通常指的是前端路由低斋，由于我們的應(yīng)用現(xiàn)在通常是單頁應(yīng)用蜂厅，所以需要前端代碼來控制路由邏輯，通過瀏覽器提供的 History API 可以監(jiān)聽瀏覽器url的變化膊畴，從而控制路由相關(guān)操作掘猿。
• 在 dva 中我們通常以頁面維度來設(shè)計 Container Components。
  所以在 dva 中巴比，通常需要 connect Model的組件都是 Route Components术奖，組織在/routes/目錄下，而/components/目錄下則是純組件（Presentational Components）轻绞。

antd

PC端組件庫
Ant Design of React

antd-mobile

移動端組件庫
Ant Design Mobile of React

CSS

Flex布局

Flex 布局教程：語法篇
Flex 布局教程：實例篇

• Flex 是 Flexible Box 的縮寫采记，意為"彈性布局"，用來為盒狀模型提供最大的靈活性政勃。
• 設(shè)為 Flex 布局以后唧龄，子元素的float、clear和vertical-align屬性將失效奸远。
• 采用 Flex 布局的元素既棺，稱為 Flex 容器（flex container），簡稱"容器"懒叛。它的所有子元素自動成為容器成員丸冕，稱為 Flex 項目（flex item），簡稱"項目"薛窥。
• 容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）胖烛。
• flex-direction屬性決定主軸的方向（即項目的排列方向）眼姐。
• flex-wrap屬性定義，如果一條軸線排不下佩番，如何換行众旗。
• flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap趟畏。
• justify-content屬性定義了項目在主軸上的對齊方式贡歧。
• align-items屬性定義項目在交叉軸上如何對齊。
• order屬性定義項目的排列順序赋秀。數(shù)值越小利朵，排列越靠前，默認為0沃琅。
• flex-grow屬性定義項目的放大比例哗咆，默認為0，即如果存在剩余空間益眉，也不放大晌柬。
• flex-shrink屬性定義了項目的縮小比例，默認為1郭脂，即如果空間不足年碘，該項目將縮小。
• flex-basis屬性定義了在分配多余空間之前展鸡，項目占據(jù)的主軸空間（main size）屿衅。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間莹弊。它的默認值為auto涤久，即項目的本來大小。它可以設(shè)為跟width或height屬性一樣的值（比如350px）忍弛，則項目將占據(jù)固定空間响迂。
• flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto细疚。后兩個屬性可選蔗彤。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優(yōu)先使用這個屬性疯兼，而不是單獨寫三個分離的屬性然遏，因為瀏覽器會推算相關(guān)值。
• align-self屬性允許單個項目有與其他項目不一樣的對齊方式吧彪，可覆蓋align-items屬性待侵。默認值為auto，表示繼承父元素的align-items屬性姨裸，如果沒有父元素秧倾，則等同于stretch香拉。

LESS

LESS語言特性

HTML

HTML5

W3C HTML5 教程
菜鳥教程 HTML5

webpack

Node

npm