Ant Design是目前我覺得最好的UI框架，沒有之一併且不接受任何反駁。只是最近出了聖誕按鈕堆雪門事件，不過無傷大雅，反而覺得進一步提高了知名度。

用git clone扒了很久總是失敗，而且還是在翻牆的模式下，無奈何只能下載壓縮包。master分支的壓縮包並不大，2M不到一點。下載完後解壓並用npm install安裝依賴。

依賴安裝完成後整個目錄就到了三四百兆的級別。啥也不說先看package.json，跑一下UT

居然有失敗的！

用npm start啟動看看，打開了localhost:8001/index-cn

就是Antd的網站

插一句，啟動的時候看到有什麼Bi Sheng云云，搜了一下，原來是一個把markdown文件轉成SPA網站的一個工具，感興趣的可以看這裡

benjycui/bisheng?

github.com圖標

OK，行文至此大致證明扒拉的代碼沒問題，依賴安裝也沒問題，NEXT-->

整體結構

首先是目錄結構，都能做到望文生義的

components —— 組件

docs —— 文檔

scripts —— 腳本

site —— 網站

tests —— 測試相關的資源

再看根目錄下的各種配置文件，能看出很多端倪來

代碼檢查 —— eslint

單元測試 —— jest

CI —— travis

開發語言 —— typescript

打包 —— webpack

看一下webpack.config.json

const getWebpackConfig = require(antd-tools/lib/getWebpackConfig);
const { webpack } = getWebpackConfig;
...
const webpackConfig = getWebpackConfig(false);
if (process.env.RUN_ENV === PRODUCTION) {
webpackConfig.forEach(config => {
ignoreMomentLocale(config);
externalMoment(config);
addLocales(config);
});
}

module.exports = webpackConfig;

主要東西都在antd-tools/lib/getWebpackConfig里，打開後滿眼都是熟悉的Webpack配置

組件

UI框架最主要的就是看組件了，提一下其實antd的組件很多都基於react-component，沒看到很詳細的組織介紹，不過既然明寫了React components foundation of ant.design，我估計兩者都是一家的。

react-component?

github.com圖標

components/目錄下有個index.tsx，就是一個Facade門面，裡面包含了各個具體組件

挑一個具體的組件alert看看

__tests__下面是單元測試的代碼

demo看樣子是一堆的markdown文件

style不用說就是樣式，裡面的index.tsx就兩行

這裡知乎好像有個bug，我只要貼這兩行代碼就沒法保存

通過組件文件和查看Webpack配置，似乎確認antd里並沒有使用css module，所以要在使用的時候手工導入css/less文件。組件里class的名字也像是全局的，而不是類似css module生成的具備唯一性的名字

index.tsx就是組件的主要文件，裡面定義了兩個基本的interface，其中AlertProps相當於type-props的作用，限定了組件的props

export interface AvatarProps {
/** Shape of avatar, options:`circle`, `square` */
shape?: circle | square;
/*
* Size of avatar, options: `large`, `small`, `default`
* or a custom number size
* */
size?: large | small | default | number;
/** Src of image avatar */
src?: string;
/** Srcset of image avatar */
srcSet?: string;
/** Type of the Icon to be used in avatar */
icon?: string;
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
children?: any;
alt?: string;
/* callback when img load error */
/* return false to prevent Avatar show default fallback behavior, then you can do fallback by your self*/
onError?: () => boolean;
}

AlertState限定了組件的state的數據結構

export interface AvatarState {
scale: number;
isImgExist: boolean;
}

在定義組件的時候，引入這兩個interface

export default class Avatar extends React.Component<AvatarProps, AvatarState> {

}

在antd里管理樣式名字className時使用了classnames這個庫，這個庫可以將{ class-name: true/false }這種數據結構最終轉換成樣式的字元串，這在其他的框架比如ng、vue里都是原生支持的。

其他組件邏輯的代碼並沒有什麼難以理解之處，在這我就不贅述了，後續我會讀一些複雜的組件的源碼，如有心得，必再次分享。

推薦閱讀：

查看原文 >>
相关文章