element ui 多个子组件_ElementUI 技术揭秘（2） 组件库的整体设计
需求分析
當(dāng)我們?nèi)?shí)現(xiàn)一個(gè)組件庫(kù)的時(shí)候，并不會(huì)一上來(lái)就擼碼，而是把它當(dāng)做產(chǎn)品一樣，思考一下我們的組件庫(kù)的需求。那么對(duì)于 element-ui，除了基于 Vue.js 技術(shù)棧開(kāi)發(fā)組件，它還有哪些方面的需求呢。
豐富的 feature：豐富的組件，自定義主題，國(guó)際化。
文檔 & demo：提供友好的文檔和 demo，維護(hù)成本小，支持多語(yǔ)言。
安裝 & 引入：支持 npm 方式和 cdn 方式，并支持按需引入。
工程化：開(kāi)發(fā)，測(cè)試，構(gòu)建，部署，持續(xù)集成。
需求有了，接下來(lái)就需要去思考如何去實(shí)現(xiàn)，本文會(huì)依據(jù) element-ui 2.11.1 版本的源碼來(lái)分析這些需求是如何實(shí)現(xiàn)的。當(dāng)然，element-ui 早期一定不是這樣子的，我們分析的這個(gè)版本已經(jīng)是經(jīng)過(guò)它多次迭代優(yōu)化后的，如果你想去了解它的發(fā)展歷程，可以去 GitHub 搜索它的歷史版本。
豐富的 feature
豐富的組件
組件庫(kù)最核心的還是組件，先來(lái)看一下 element-ui 組件的設(shè)計(jì)原則：一致、反饋、效率、可控。具體的解釋在官網(wǎng)有，我就不多貼了，在 element-ui 開(kāi)發(fā)團(tuán)隊(duì)背后，有一個(gè)強(qiáng)大的設(shè)計(jì)團(tuán)隊(duì)，這也得益于 element-ui 的創(chuàng)始人 sofish 在公司的話語(yǔ)權(quán)和地位，爭(zhēng)取到這么好的資源。所以 element-ui 組件的外型、配色、交互都做的非常不錯(cuò)。
作為一個(gè)基礎(chǔ)組件庫(kù)，還有一個(gè)很重要的方面就是組件種類豐富。element-ui 官方目前有 55 個(gè)組件，分成了 6 大類，分別是基礎(chǔ)組件、表單類組件、數(shù)據(jù)類組件、提示類組件、導(dǎo)航類組件和其它類型組件。這些豐富的基礎(chǔ)組件能很好地滿足大部分 PC 端 to B 業(yè)務(wù)開(kāi)發(fā)需求。
開(kāi)發(fā)這么多組件，需要大量的時(shí)間和精力，所以這里要非常感謝 element-ui 團(tuán)隊(duì)，為我們提供了這些基礎(chǔ)組件，我們基于它們做二次開(kāi)發(fā)，節(jié)約了非常多的時(shí)間。
element-ui 的組件源碼在 packages 目錄里維護(hù)，而并不在 src 目錄中。這么做并不是為了要采用 monorepo，我也并沒(méi)有找到 lerna 包管理工具，這么做的目的我猜測(cè)是為了讓每個(gè)組件可以單獨(dú)打包，支持按需引入。但實(shí)際上想達(dá)到這個(gè)目的也并不一定需要這么去組織維護(hù)代碼，我更推薦把組件庫(kù)中的組件代碼放在 src/components 目錄中維護(hù)，然后通過(guò)修改 webpack 配置腳本也可以做到每個(gè)組件單獨(dú)打包以及支持按需引入，源碼放在 src 目錄總是更合理的。
自定義主題
element-ui 的一大特色是支持自定義主題，你可以使用在線主題編輯器，可以修改定制 Element 所有全局和組件的 Design Tokens，并可以方便地實(shí)時(shí)預(yù)覽樣式改變后的視覺(jué)。同時(shí)它還可以基于新的定制樣式生成完整的樣式文件包，供直接下載使用，那么它是如何做到這點(diǎn)的呢？
element-ui 組件的樣式、公共樣式都在 packages/theme-chalk 文件中，并且它是可以獨(dú)立發(fā)布的。element-ui 組件樣式中的顏色、字體、線條等等樣式都是通過(guò)變量的方式引入的，在 packages/theme-chalk/src/common/var.scss 中我們可以看到這些變量的定義，這樣就給做多主題提供了方便，因?yàn)槲抑灰薷倪@些變量，就可以實(shí)現(xiàn)組件的主題改變。
了解了基本原理，做在線替換主題也并不是難事了，我并不會(huì)詳細(xì)去講在線定制主題前端交互部分，感興趣的同學(xué)可以自己去看源碼，都在 examples 目錄中，我這里只說(shuō)一下本質(zhì)的原理。
想要做到在線換膚，并且實(shí)時(shí)預(yù)覽，需要借助 server 的幫助，比如主題可以通過(guò)一個(gè)配置去維護(hù)，用戶做一系列操作后，會(huì)生成新的主題配置，把這個(gè)配置通過(guò)接口提交的方式告訴 server，然后 server 會(huì)根據(jù)這個(gè)配置做返回生成新的 CSS(具體的實(shí)施的方案未開(kāi)源，大致會(huì)做一些變量替換，然后編譯)，新的 CSS 的樣式就會(huì)覆蓋默認(rèn)的樣式，達(dá)到了切換主題的目的。
我們可以在主題編輯頁(yè)面打開(kāi)網(wǎng)絡(luò)面板，可以看到有 2 個(gè) xhr 請(qǐng)求，如圖：
其中，updateVarible 是一個(gè) POST 請(qǐng)求，他會(huì)把你修改的的主題配置提交到后端 server，提交的數(shù)據(jù)你可以自己去查看它的 Request Payload，這個(gè) POST 請(qǐng)求會(huì)返回一段 CSS 文本，然后會(huì)動(dòng)態(tài)插入到 head 標(biāo)簽的底部，來(lái)覆蓋默認(rèn)樣式，你可以通過(guò)審查元素看到 head 底部會(huì)動(dòng)態(tài)插入一個(gè) id 為 chalk-style 的標(biāo)簽。
下圖就是該請(qǐng)求返回的樣式文本 ：
相關(guān)代碼在 examples/components/theme/loader/index.vue 中。
??????this.triggertProgressBar(true);
??????const?time?=?+new?Date();
??????updateVars(this.userConfig)
????????.then(res?=>?{
??????????this.applyStyle(res,?time);
????????})
????????.catch(err?=>?{
??????????this.onError(err);
????????})
????????.then(()?=>?{
??????????this.triggertProgressBar(false);
????????});
????},
????applyStyle(res,?time)?{
??????if?(time?this.lastApply)?return;
??????this.updateDocs(()?=>?{
????????updateDomHeadStyle('chalk-style',?res);
??????});
??????this.lastApply?=?time;
????}
onAction 函數(shù)中的 updateVars 就是去發(fā)送 POST 請(qǐng)求，而 applyStyle 函數(shù)就是去修改和覆蓋默認(rèn)樣式，updateDocs 函數(shù)會(huì)去更新默認(rèn)主題顏色，updateDomHeadStyle 樣式會(huì)添加或者修改 id 為 chalk-style 的 style 標(biāo)簽，目的就是覆蓋默認(rèn)樣式，應(yīng)用新主題樣式。
updateVars 請(qǐng)求在頁(yè)面加載的時(shí)候會(huì)發(fā)起，在你修改完主題配置后也會(huì)發(fā)起。
再來(lái)看一下 getVarible 請(qǐng)求，它是一個(gè) GET 請(qǐng)求，返回的內(nèi)容是主題配置頁(yè)面右側(cè)配置面板的數(shù)據(jù)源，如下圖所示：
主題配置面板根據(jù)該數(shù)據(jù)源生成，并且當(dāng)你去編輯其中一項(xiàng)的時(shí)候，又會(huì)發(fā)起 updateVars POST 請(qǐng)求，把更新的配置提交，然后后端會(huì)返回新的 CSS 并在前端生效。
另外，用戶修改的配置還利用了 localStorage 在本地保存了一份，這樣用戶每次編輯都可以保存一份主題，下次也可以繼續(xù)基于某個(gè)主題繼續(xù)編輯。
不過(guò)，這么實(shí)現(xiàn)多主題也并非完美，為了編譯加速，element-ui 把樣式部分單獨(dú)抽離出單獨(dú)的文件，這樣給開(kāi)發(fā)組件的同學(xué)帶來(lái)很大的不便，當(dāng)你去編寫(xiě)組件的樣式的時(shí)候，需要在多個(gè)文件中來(lái)回切換，而且這樣也不符合組件就近管理的原則。但是如果把樣式寫(xiě)在組件中，server 端去編譯生成單獨(dú)樣式文件的時(shí)間就會(huì)增長(zhǎng)(需要從組件中提取 CSS)，所以這是一個(gè)需要權(quán)衡的問(wèn)題。
國(guó)際化
說(shuō)到 Vue 的國(guó)際化方案，大家很容易會(huì)聯(lián)想到 vue-i18n 方案，element-ui 并未引入 vue-i18n，不過(guò)它是可以很好地與 vue-i18n 兼容的。
所有的國(guó)際化方案都會(huì)用到語(yǔ)言包，語(yǔ)言包通常會(huì)返回一個(gè) JSON 格式的數(shù)據(jù)，element-ui 組件庫(kù)的語(yǔ)言包在 src/locale/lang 目錄下，以英語(yǔ)語(yǔ)言包為例：
export?default?{??el:?{
????colorpicker:?{
??????confirm:?'OK',
??????clear:?'Clear'
????}
????//?...
??}
}
在 packages/color-picker/src/components/picker-dropdown.vue 中，我們?cè)谀０宀糠挚梢钥吹竭@個(gè)語(yǔ)言包的使用：
??@click="$emit('clear')">
??{{?t('el.colorpicker.clear')?}}
el-button>
<el-buttonplainsize="mini"class="el-color-dropdown__btn"
??@click="confirmValue">
??{{?t('el.colorpicker.confirm')?}}
el-button>
模板中用到的 t 函數(shù)，它定義在 src/mixins/locale.js 中：
import?{?t?}?from?'element-ui/src/locale';export?default?{
??methods:?{
????t(...args)?{
??????return?t.apply(this,?args);
????}
??}
};
實(shí)際上是在 src/locale/index.js 中定義的 t 函數(shù)：
??let?value?=?i18nHandler.apply(this,?arguments);
??if?(value?!==?null?&&?value?!==?undefined)?return?value;
??const?array?=?path.split('.');
??let?current?=?lang;
??for?(let?i?=?0,?j?=?array.length;?i?????const?property?=?array[i];
????value?=?current[property];
????if?(i?===?j?-?1)?return?format(value,?options);
????if?(!value)?return?'';
????current?=?value;
??}
??return?'';
};
這個(gè)函數(shù)是根據(jù)傳入的 path 路徑，比如我們例子中的 el.colorpicker.confirm，從語(yǔ)言包中找到對(duì)應(yīng)的文案。其中 i18nHandler 是一個(gè) i18n 的處理函數(shù)，這塊邏輯就是用來(lái)兼容外部的 i18n 方案如 vue-i18n。
??const?vuei18n?=?Object.getPrototypeOf(this?||?Vue).$t;
??if?(typeof?vuei18n?===?'function'?&&?!!Vue.locale)?{
????if?(!merged)?{
??????merged?=?true;
??????Vue.locale(
????????Vue.config.lang,
????????deepmerge(lang,?Vue.locale(Vue.config.lang)?||?{},?{?clone:?true?})
??????);
????}
????return?vuei18n.apply(this,?arguments);
??}
};
export?const?i18n?=?function(fn)?{
??i18nHandler?=?fn?||?i18nHandler;
};
export?const?use?=?function(l)?{
??lang?=?l?||?lang;
};
可以看到 i18nHandler 默認(rèn)會(huì)嘗試去找 Vue 原型中的 $t 函數(shù)，這是 vue-i18@5.x 的實(shí)現(xiàn)，會(huì)在 Vue 的原型上掛載 $t 方法。
另外它也暴露了 i18n 方法，可以外部傳入其它的 i18n 方法，覆蓋 i18nHandler。
如果沒(méi)有外部提供的 i18n 方法，那么就直接找到當(dāng)前的語(yǔ)言包 let current = lang;，接下來(lái)的邏輯就是從這個(gè)語(yǔ)言包對(duì)象中讀到對(duì)應(yīng)的字符串值，當(dāng)然如果字符串需要格式化則調(diào)用 format 函數(shù)，這塊邏輯同學(xué)們感興趣可以自己看。
因此在使用對(duì)應(yīng)的語(yǔ)言包的時(shí)候一定要注冊(cè)：
import?lang?from?'element-ui/lib/locale/lang/en'import?locale?from?'element-ui/lib/locale'
//?設(shè)置語(yǔ)言
locale.use(lang)
這樣就注冊(cè)了英文語(yǔ)言包，在模板中就可以正常使用并找到對(duì)應(yīng)的語(yǔ)言了。
如果你要開(kāi)發(fā)一個(gè)國(guó)際化項(xiàng)目，在運(yùn)行時(shí)才能知道用戶的語(yǔ)言，可以考慮使用異步動(dòng)態(tài)加載的方式，在渲染頁(yè)面前先獲取語(yǔ)言包，另外也可以考慮做緩存優(yōu)化，不過(guò)這個(gè)話題延伸起來(lái)就有點(diǎn)多了，未來(lái)我可能會(huì)單開(kāi)一個(gè)主題去分享業(yè)務(wù)如何做國(guó)際化。
文檔 & demo
作為一個(gè)優(yōu)秀的開(kāi)源組件庫(kù)，友好的文檔和 demo 是必不可少的，它也能幫你招攬到不少用戶。作為一個(gè)組件庫(kù)的開(kāi)發(fā)者和維護(hù)者，也希望用最小的成本來(lái)維護(hù)文檔和 demo。
element-ui 的文檔和 demo 是融為一體的，我們打開(kāi)它的文檔，可以看到文檔不僅介紹了每個(gè)組件的使用方式，還展示了組件的各種示例，并且還可以清楚地看到每個(gè)示例的源碼，對(duì)用戶而言非常友好。那么 element-ui 內(nèi)部是如何去編寫(xiě)這些 demo 和文檔的呢？實(shí)際上，每個(gè)組件的文檔和 demo 都是通過(guò)一個(gè)單獨(dú)的 .md 文件生成的，那么它又是如何做到這點(diǎn)的呢？
element-ui 的 demo 源碼都在 examples 目錄中維護(hù)，當(dāng)我們?cè)?element-ui 工程下運(yùn)行 npm run dev 的時(shí)候，會(huì)啟動(dòng)它的開(kāi)發(fā)調(diào)試模式，并且運(yùn)行官方文檔和 demo。
看一下 npm scripts：
"scripts":?{????"bootstrap":?"yarn?||?npm?i",
????"build:file":?"node?build/bin/iconInit.js?&?node?build/bin/build-entry.js?&?node?build/bin/i18n.js?&?node?build/bin/version.js",
????"dev":?"npm?run?bootstrap?&&?npm?run?build:file?&&?cross-env?NODE_ENV=development?webpack-dev-server?--config?build/webpack.demo.js?&?node?build/bin/template.js",
}
我們省略了其它的 scripts，重點(diǎn)看 dev 和相關(guān)的幾個(gè)命令，其中 bootstrap 的作用是安裝依賴，build:file 的作用是運(yùn)行 build 目錄下幾個(gè)命令，包括對(duì) icon、entry、i18n、version 等初始化。在執(zhí)行完 bootstrap 和 build:file 后，通過(guò) webpack-dev-server 運(yùn)行 build/webpack.demo.js，這個(gè)是重點(diǎn)，我們來(lái)看一下這個(gè) webpack 的配置文件。
??mode:?process.env.NODE_ENV,
??entry:?isProd???{
????docs:?'./examples/entry.js',
????'element-ui':?'./src/index.js'
??}?:?(isPlay???'./examples/play.js'?:?'./examples/entry.js'),
??output:?{
????path:?path.resolve(process.cwd(),?'./examples/element-ui/'),
????publicPath:?process.env.CI_ENV?||?'',
????filename:?'[name].[hash:7].js',
????chunkFilename:?isProd???'[name].[hash:7].js'?:?'[name].js'
??},
??resolve:?{
????extensions:?['.js',?'.vue',?'.json'],
????alias:?config.alias,
????modules:?['node_modules']
??},
??devServer:?{
????host:?'0.0.0.0',
????port:?8085,
????publicPath:?'/',
????hot:?true
??},
??module:?{
????rules:?[
??????{
????????test:?/\.vue$/,
????????loader:?'vue-loader',
????????options:?{
??????????compilerOptions:?{
????????????preserveWhitespace:?false
??????????}
????????}
??????},
??????{
????????test:?/\.md$/,
????????use:?[
??????????{
????????????loader:?'vue-loader',
????????????options:?{
??????????????compilerOptions:?{
????????????????preserveWhitespace:?false
??????????????}
????????????}
??????????},
??????????{
????????????loader:?path.resolve(__dirname,?'./md-loader/index.js')
??????????}
????????]
??????}
????]
??}
};
由于整個(gè)配置文件內(nèi)容比較長(zhǎng)，我只保留了重點(diǎn)的部分，重點(diǎn)看一下 entry 和 module 下的 rules。
element-ui 官網(wǎng)本質(zhì)上就是一個(gè)用 vue 開(kāi)發(fā)的應(yīng)用，當(dāng)我們運(yùn)行 npm run dev 的時(shí)候，入口文件是 examples 目錄下的 entry.js：
import?Vue?from?'vue';import?entry?from?'./app';
import?VueRouter?from?'vue-router';
import?Element?from?'main/index.js';
import?hljs?from?'highlight.js';
import?routes?from?'./route.config';
import?demoBlock?from?'./components/demo-block';
import?MainFooter?from?'./components/footer';
import?MainHeader?from?'./components/header';
import?SideNav?from?'./components/side-nav';
import?FooterNav?from?'./components/footer-nav';
import?title?from?'./i18n/title';
import?'packages/theme-chalk/src/index.scss';
import?'./demo-styles/index.scss';
import?'./assets/styles/common.css';
import?'./assets/styles/fonts/style.css';
import?icon?from?'./icon.json';
Vue.use(Element);
Vue.use(VueRouter);
Vue.component('demo-block',?demoBlock);
Vue.component('main-footer',?MainFooter);
Vue.component('main-header',?MainHeader);
Vue.component('side-nav',?SideNav);
Vue.component('footer-nav',?FooterNav);
const?globalEle?=?new?Vue({
??data:?{?$isEle:?false?}?//?是否?ele?用戶
});
Vue.mixin({
??computed:?{
????$isEle:?{
??????get:?()?=>?(globalEle.$data.$isEle),
??????set:?(data)?=>?{globalEle.$data.$isEle?=?data;}
????}
??}
});
Vue.prototype.$icon?=?icon;?//?Icon?列表頁(yè)用
const?router?=?new?VueRouter({
??mode:?'hash',
??base:?__dirname,
??routes
});
router.afterEach(route?=>?{
??//?https://github.com/highlightjs/highlight.js/issues/909#issuecomment-131686186
??Vue.nextTick(()?=>?{
????const?blocks?=?document.querySelectorAll('pre?code:not(.hljs)');
????Array.prototype.forEach.call(blocks,?hljs.highlightBlock);
??});
??const?data?=?title[route.meta.lang];
??for?(let?val?in?data)?{
????if?(new?RegExp('^'?+?val,?'g').test(route.name))?{
??????document.title?=?data[val];
??????return;
????}
??}
??document.title?=?'Element';
??ga('send',?'event',?'PageView',?route.name);
});
new?Vue({?//?eslint-disable-line
??...entry,
??router
}).$mount('#app');
入口文件做的事情很簡(jiǎn)單，全引入的方式注冊(cè)了 element-ui 組件庫(kù)，注冊(cè)了一些官網(wǎng)用到的組件，注冊(cè)了路由以及路由的全局鉤子函數(shù)。
這里我們要重點(diǎn)關(guān)注路由部分，路由的配置都在 examples/route.config.js 中：
import?navConfig?from?'./nav.config';import?langs?from?'./i18n/route';
const?LOAD_MAP?=?{
??'zh-CN':?name?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./pages/zh-CN/${name}.vue`)),
????'zh-CN');
??},
??'en-US':?name?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./pages/en-US/${name}.vue`)),
????'en-US');
??},
??'es':?name?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./pages/es/${name}.vue`)),
????'es');
??},
??'fr-FR':?name?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./pages/fr-FR/${name}.vue`)),
????'fr-FR');
??}
};
const?load?=?function(lang,?path)?{
??return?LOAD_MAP[lang](path);
};
const?LOAD_DOCS_MAP?=?{
??'zh-CN':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/zh-CN${path}.md`)),
????'zh-CN');
??},
??'en-US':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/en-US${path}.md`)),
????'en-US');
??},
??'es':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/es${path}.md`)),
????'es');
??},
??'fr-FR':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/fr-FR${path}.md`)),
????'fr-FR');
??}
};
const?loadDocs?=?function(lang,?path)?{
??return?LOAD_DOCS_MAP[lang](path);
};
const?registerRoute?=?(navConfig)?=>?{
??let?route?=?[];
??Object.keys(navConfig).forEach((lang,?index)?=>?{
????let?navs?=?navConfig[lang];
????route.push({
??????path:?`/${?lang?}/component`,
??????redirect:?`/${?lang?}/component/installation`,
??????component:?load(lang,?'component'),
??????children:?[]
????});
????navs.forEach(nav?=>?{
??????if?(nav.href)?return;
??????if?(nav.groups)?{
????????nav.groups.forEach(group?=>?{
??????????group.list.forEach(nav?=>?{
????????????addRoute(nav,?lang,?index);
??????????});
????????});
??????}?else?if?(nav.children)?{
????????nav.children.forEach(nav?=>?{
??????????addRoute(nav,?lang,?index);
????????});
??????}?else?{
????????addRoute(nav,?lang,?index);
??????}
????});
??});
??function?addRoute(page,?lang,?index)?{
????const?component?=?page.path?===?'/changelog'
????????load(lang,?'changelog')
??????:?loadDocs(lang,?page.path);
????let?child?=?{
??????path:?page.path.slice(1),
??????meta:?{
????????title:?page.title?||?page.name,
????????description:?page.description,
????????lang
??????},
??????name:?'component-'?+?lang?+?(page.title?||?page.name),
??????component:?component.default?||?component
????};
????route[index].children.push(child);
??}
??return?route;
};
let?route?=?registerRoute(navConfig);
const?generateMiscRoutes?=?function(lang)?{
??let?guideRoute?=?{
????path:?`/${?lang?}/guide`,?//?指南
????redirect:?`/${?lang?}/guide/design`,
????component:?load(lang,?'guide'),
????children:?[{
??????path:?'design',?//?設(shè)計(jì)原則
??????name:?'guide-design'?+?lang,
??????meta:?{?lang?},
??????component:?load(lang,?'design')
????},?{
??????path:?'nav',?//?導(dǎo)航
??????name:?'guide-nav'?+?lang,
??????meta:?{?lang?},
??????component:?load(lang,?'nav')
????}]
??};
??let?themeRoute?=?{
????path:?`/${?lang?}/theme`,
????component:?load(lang,?'theme-nav'),
????children:?[
??????{
????????path:?'/',?//?主題管理
????????name:?'theme'?+?lang,
????????meta:?{?lang?},
????????component:?load(lang,?'theme')
??????},
??????{
????????path:?'preview',?//?主題預(yù)覽編輯
????????name:?'theme-preview-'?+?lang,
????????meta:?{?lang?},
????????component:?load(lang,?'theme-preview')
??????}]
??};
??let?resourceRoute?=?{
????path:?`/${?lang?}/resource`,?//?資源
????meta:?{?lang?},
????name:?'resource'?+?lang,
????component:?load(lang,?'resource')
??};
??let?indexRoute?=?{
????path:?`/${?lang?}`,?//?首頁(yè)
????meta:?{?lang?},
????name:?'home'?+?lang,
????component:?load(lang,?'index')
??};
??return?[guideRoute,?resourceRoute,?themeRoute,?indexRoute];
};
langs.forEach(lang?=>?{
??route?=?route.concat(generateMiscRoutes(lang.lang));
});
route.push({
??path:?'/play',
??name:?'play',
??component:?require('./play/index.vue')
});
let?userLanguage?=?localStorage.getItem('ELEMENT_LANGUAGE')?||?window.navigator.language?||?'en-US';
let?defaultPath?=?'/en-US';
if?(userLanguage.indexOf('zh-')?!==?-1)?{
??defaultPath?=?'/zh-CN';
}?else?if?(userLanguage.indexOf('es')?!==?-1)?{
??defaultPath?=?'/es';
}?else?if?(userLanguage.indexOf('fr')?!==?-1)?{
??defaultPath?=?'/fr-FR';
}
route?=?route.concat([{
??path:?'/',
??redirect:?defaultPath
},?{
??path:?'*',
??redirect:?defaultPath
}]);
export?default?route;
這個(gè)路由配置文件提供了指南、組件、主題、資源等多個(gè)路由頁(yè)面的配置，并且支持了多語(yǔ)言，我們重點(diǎn)關(guān)注一下組件路由是如何生成的，它主要通過(guò) registerRoute(navConfig) 方法生成。
其中 navConfig 讀取的是 examples/nav.config.json 文件，這個(gè)配置文件太長(zhǎng)我就不貼了，它包括了多個(gè)語(yǔ)言的配置，維護(hù)了左側(cè)組件導(dǎo)航菜單路徑映射關(guān)系。
registerRoute 函數(shù)內(nèi)部就是遍歷 navConfig，根據(jù)它內(nèi)部元素的數(shù)據(jù)結(jié)構(gòu)生成路由配置，如果數(shù)據(jù)中有 children 則生成子路由。
我們知道 Vue Router 的本質(zhì)是根據(jù)不同的 URL path， 組件映射到對(duì)應(yīng)的路由組件，對(duì)于每一個(gè)組件的路由，都是通過(guò) addRoute(nav, lang, index) 方法生成的，該方法內(nèi)部又調(diào)用了 loadDocs(lang, page.path) 獲取到對(duì)應(yīng)的路由組件。
const?loadDocs?=?function(lang,?path)?{??return?LOAD_DOCS_MAP[lang](path);
};
const?LOAD_DOCS_MAP?=?{
??'zh-CN':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/zh-CN${path}.md`)),
????'zh-CN');
??},
??'en-US':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/en-US${path}.md`)),
????'en-US');
??},
??'es':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/es${path}.md`)),
????'es');
??},
??'fr-FR':?path?=>?{
????return?r?=>?require.ensure([],?()?=>
??????r(require(`./docs/fr-FR${path}.md`)),
????'fr-FR');
??}
};
以中文為例，我們獲取到某個(gè) path 下的路由組件就是一個(gè)工廠函數(shù)，它對(duì)應(yīng)加載的組件路徑是 exmaples/docs/zh-CN/${path}.md。這里要注意的是，和我們普通的異步組件加載方式不同，這里加載的居然是一個(gè) .md 文件，而并非一個(gè) .vue 文件，但卻能和 .vue 文件一樣能渲染成一個(gè) Vue 組件，這是如何做到的呢？
我們知道，webpack 的理念是一切資源都可以 require，只要配置了對(duì)應(yīng)的 loader。回到 build/webpack.demo.js，我們發(fā)現(xiàn)對(duì)于 .md 文件我們配置了相應(yīng)的 loader：
??{????test:?/\.md$/,
????use:?[
??????{
????????loader:?'vue-loader',
????????options:?{
??????????compilerOptions:?{
????????????preserveWhitespace:?false
??????????}
????????}
??????},
??????{
????????loader:?path.resolve(__dirname,?'./md-loader/index.js')
??????}
????]
??}
對(duì)于 .md 文件，這里 use 數(shù)組中配置了 2 項(xiàng)，它們執(zhí)行順序是逆序的，也就是先執(zhí)行 md-loader，再執(zhí)行 vue-loader，md-loader 的代碼在 build/md-loader/index.js 中：
const?{??stripScript,
??stripTemplate,
??genInlineComponentText
}?=?require('./util');
const?md?=?require('./config');
module.exports?=?function(source)?{
??const?content?=?md.render(source);
??const?startTag?=?'';
??const?endTagLen?=?endTag.length;
??let?componenetsString?=?'';
??let?id?=?0;?//?demo?的?id
??let?output?=?[];?//?輸出的內(nèi)容
??let?start?=?0;?//?字符串開(kāi)始位置
??let?commentStart?=?content.indexOf(startTag);
??let?commentEnd?=?content.indexOf(endTag,?commentStart?+?startTagLen);
??while?(commentStart?!==?-1?&&?commentEnd?!==?-1)?{
????output.push(content.slice(start,?commentStart));
????const?commentContent?=?content.slice(commentStart?+?startTagLen,?commentEnd);
????const?html?=?stripTemplate(commentContent);
????const?script?=?stripScript(commentContent);
????let?demoComponentContent?=?genInlineComponentText(html,?script);
????const?demoComponentName?=?`element-demo${id}`;
????output.push(`<${demoComponentName}?/>`);
????componenetsString?+=?`${JSON.stringify(demoComponentName)}:?${demoComponentContent},`;
????//?重新計(jì)算下一次的位置
????id++;
????start?=?commentEnd?+?endTagLen;
????commentStart?=?content.indexOf(startTag,?start);
????commentEnd?=?content.indexOf(endTag,?commentStart?+?startTagLen);
??}
??//?僅允許在?demo?不存在時(shí)，才可以在?Markdown?中寫(xiě)?script?標(biāo)簽
??//?todo:?優(yōu)化這段邏輯
??let?pageScript?=?'';
??if?(componenetsString)?{
????pageScript?=?`;
??}?else?if?(content.indexOf(')?+?''.length;
????pageScript?=?content.slice(0,?start);
??}
??output.push(content.slice(start));
??return?`${output.join('')}${pageScript}
??`;
};
webpack loader 的原理很簡(jiǎn)單，輸入是文件的原始內(nèi)容，返回的是經(jīng)過(guò) loader 處理后的內(nèi)容。對(duì)于 md-loader，輸入的是 .md 文檔，輸出的則是一個(gè) Vue SFC 格式的字符串，這樣它的輸出就可以作為下一個(gè) vue-loader 的輸入做處理了。
我們來(lái)簡(jiǎn)單看一下 md-loader 中間處理過(guò)程。首先執(zhí)行了 md.render(source) 對(duì) md 文檔解析，提取文檔中 :::demo {content} ::: 內(nèi)容，分別生成一些 Vue 的模板字符串，然后再?gòu)倪@個(gè)模板字符串中循環(huán)查找 包裹的內(nèi)容，從中提取模板字符串到 output 中，提取 script 到 componenetsString 中，然后構(gòu)造 pageScript，最后返回的內(nèi)容就是：
??return?`${output.join('')}${pageScript}??`;
最終生成的字符串滿足我們通常編寫(xiě)的 .vue SFC 格式，它會(huì)作為下一個(gè) vue-loader 的輸入，所以這樣我們就相當(dāng)于通過(guò)加載一個(gè) .md 格式的文件的方式加載了 Vue 組件。
這里面還有很多和 .md 文件解析的細(xì)節(jié)，如果你對(duì)最終生成的 output 和 pageScript 代碼是什么感興趣，建議你自己調(diào)試一番。
element-ui 這種文檔和 demo 的實(shí)現(xiàn)方式是非常巧妙的，大大減少了 demo 和文檔的維護(hù)成本，并且對(duì)于用戶來(lái)說(shuō)也非常友好，如果你也為自己的庫(kù)構(gòu)建文檔，不妨參考它的實(shí)現(xiàn)。
安裝 & 引入
通常 JS 庫(kù)都會(huì)支持 npm 和 CDN 2 種安裝方式，element-ui 也不例外。
先說(shuō)一下 CDN 的安裝方式，實(shí)際上 element-ui 會(huì)把所有組件打包生成一份 CSS 和 JS，官方也提供了例子：
<link?rel="stylesheet"?href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script?src="https://unpkg.com/element-ui/lib/index.js">script>
CDN 安裝方式有它的好處，不需要構(gòu)建工具，開(kāi)箱即用，但缺點(diǎn)也很明顯，全量引入了所有組件，體積非常大。
由于大部分人在開(kāi)發(fā) Vue 項(xiàng)目都是基于 vue-cli 腳手架初始化項(xiàng)目的，所以更推薦使用 npm 方式安裝。
npm?i?element-ui?-S說(shuō)到 npm 安裝，不得不提 element-ui 提供的 2 種組件引入方式，完整引入和部分引入。
支持完整引入非常容易，把所有組件打包成一份 CSS 和 JS，并且在 package.json 中配置：
?"main":?"lib/element-ui.common.js"
這樣當(dāng)用戶執(zhí)行 import ElementUI from 'element-ui' 的時(shí)候就可以完整引入了組件的 JS 代碼了。正如我們之前說(shuō)的，element-ui 會(huì)單獨(dú)發(fā)布 CSS，所以你還需要 import 'element-ui/lib/theme-chalk/index.css'。
完整引入的好處是方便，只需要 2 行代碼就可以完整地使用 element-ui 所有的組件，但缺點(diǎn)也很明顯，引入的組件包體積很大，通常一個(gè)項(xiàng)目也用不到所有的組件，會(huì)有資源浪費(fèi)。
因此最佳實(shí)踐就是按需引入：
import?Vue?from?'vue'import?{?Button?}?from?'element-ui'
Vue.component(Button.name,?Button)
大部分人這么用的時(shí)候會(huì)覺(jué)得理所當(dāng)然，不知道大家有沒(méi)有想過(guò)：為什么這種引入方式可以實(shí)現(xiàn)按需引入呢？要搞清楚這個(gè)問(wèn)題，就要搞清楚 import { Button } from 'element-ui' 這個(gè)背后都做了什么。
其實(shí)官網(wǎng)已經(jīng)有答案了，在使用按需引入的時(shí)候，要借助 babel-plugin-component 這個(gè) webpack 插件，并且配置 .babelrc：
{??"presets":?[["es2015",?{?"modules":?false?}]],
??"plugins":?[
????[
??????"component",
??????{
????????"libraryName":?"element-ui",
????????"styleLibraryName":?"theme-chalk"
??????}
????]
??]
}
實(shí)際上它是把 import { Button } from 'element-ui' 轉(zhuǎn)換成：
require('element-ui/lib/theme-chalk/button.css')
這樣我們就精準(zhǔn)地引入了對(duì)應(yīng) lib 下的 Button 組件的 JS 和 CSS 代碼了，也就實(shí)現(xiàn)了按需引入 Button 組件。
element-ui 這種按需引入的方式雖然方便，但背后卻要解決幾個(gè)問(wèn)題，由于我們支持每個(gè)組件可以單獨(dú)引入，那么如果產(chǎn)生了組件依賴并且同時(shí)按需引入的時(shí)候，代碼冗余問(wèn)題怎么解決。舉個(gè)例子，在 element-ui 中，Table 組件依賴了 CheckBox 組件，那么當(dāng)我同時(shí)引入了 Table 組件和 CheckBox 組件的時(shí)候，會(huì)不會(huì)產(chǎn)生代碼冗余呢？
import?{?Table,?CheckBox?}?from?'element-ui'如果你不做任何處理的話，答案是會(huì)，你最終引入的包會(huì)有 2 份 CheckBox 的代碼。那么 element-ui 是怎么解決這個(gè)問(wèn)題的呢？實(shí)際上只是部分解決了，它的 webpack 配置文件中配置了 externals，在 build/config.js 中我們可以看到這些具體的配置：
var?externals?=?{};Object.keys(Components).forEach(function(key)?{
??externals[`element-ui/packages/${key}`]?=?`element-ui/lib/${key}`;
});
externals['element-ui/src/locale']?=?'element-ui/lib/locale';
utilsList.forEach(function(file)?{
??file?=?path.basename(file,?'.js');
??externals[`element-ui/src/utils/${file}`]?=?`element-ui/lib/utils/${file}`;
});
mixinsList.forEach(function(file)?{
??file?=?path.basename(file,?'.js');
??externals[`element-ui/src/mixins/${file}`]?=?`element-ui/lib/mixins/${file}`;
});
transitionList.forEach(function(file)?{
??file?=?path.basename(file,?'.js');
??externals[`element-ui/src/transitions/${file}`]?=?`element-ui/lib/transitions/${file}`;
});
externals?=?[Object.assign({
??vue:?'vue'
},?externals),?nodeExternals()];
externals 可以防止將這些 import 的包打包到 bundle 中，并在運(yùn)行時(shí)再去從外部獲取這些擴(kuò)展依賴。
我們來(lái)看一下打包后的 lib/table.js，我們可以看到編譯后的 table.js 對(duì) CheckBox 組件的依賴引入：
module.exports?=?require("element-ui/lib/checkbox");
這么處理的話，就不會(huì)打包生成 2 份 CheckBox JS 部分的代碼了，但是對(duì)于 CSS 部分，element-ui 并未處理冗余情況，可以看到 lib/theme-chalk/checkbox.css 和 lib/theme-chalk/table.css 中都會(huì)有 CheckBox 組件的 CSS 樣式。
其實(shí)，要解決按需引入的 JS 和 CSS 的冗余問(wèn)題并非難事，可以用后編譯的思想，即依賴包提供源碼，而編譯交給應(yīng)用處理，這樣不僅不會(huì)有組件冗余代碼，甚至連編譯的冗余代碼都不會(huì)有，實(shí)際上我們基于 element-ui fork 的組件庫(kù) zoom-ui 就應(yīng)用了后編譯技術(shù)，之前在滴滴搞的開(kāi)源組件庫(kù)cube-ui 組件庫(kù)也是這么玩的。更多后編譯相關(guān)介紹可以參考滴滴團(tuán)隊(duì)在掘金發(fā)布的 《webpack 應(yīng)用編譯優(yōu)化之路》。
工程化
前端對(duì)于工程化的要求越來(lái)越高，element-ui 作為一個(gè)組件庫(kù)，它在工程化方面做了哪些事情呢？
首先是開(kāi)發(fā)階段，為了保證大家代碼風(fēng)格的一致性，使用了 ESLint，甚至專門(mén)寫(xiě)了 eslint-config-elemefe 作為 ESint 的擴(kuò)展規(guī)則配置；為了方便本地開(kāi)發(fā)調(diào)試，借助了 webpack 并配置了 Hot Reload；利用模塊化開(kāi)發(fā)的思想把組件依賴的一些公共模塊放在了 src 目錄，并依據(jù)功能拆分出 directives、locale、mixins、transitions、utils 等模塊。
其次是測(cè)試方面，使用了 karma 測(cè)試框架，為每一個(gè)組件編寫(xiě)了單元測(cè)試，并且利用 Travis CI 集成了測(cè)試。
接著是構(gòu)建方面，element-ui 編寫(xiě)了很多 npm scripts，以 dist 這個(gè) script 為例：
?"dist":?"npm?run?clean?&&?npm?run?build:file?&&?npm?run?lint?&&?webpack?--config?build/webpack.conf.js?&&?webpack?--config?build/webpack.common.js?&&?webpack?--config?build/webpack.component.js?&&?npm?run?build:utils?&&?npm?run?build:umd?&&?npm?run?build:theme"它內(nèi)部會(huì)依次執(zhí)行多個(gè)命令，最終會(huì)生成 lib 目錄和打包后的文件。我并不打算介紹所有的命令，感興趣同學(xué)可自行研究，這里我想介紹一下 build:file 這個(gè) script 做的事情：
"build:file":?"node?build/bin/iconInit.js?&?node?build/bin/build-entry.js?&?node?build/bin/i18n.js?&?node?build/bin/version.js",這里會(huì)依次執(zhí)行 build/bin 目錄下的一些 Node 腳本，對(duì) icon、entry、i18n、version 等做了一系列的初始化工作，它們的內(nèi)容都是根據(jù)一些規(guī)則做文件的 IO，這么做的好處就是完全通過(guò)工具的手段自動(dòng)化生成文件，比人工靠譜且效率更高，這波操作非常值得我們學(xué)習(xí)和應(yīng)用。
最后是部署，通過(guò) pub 這個(gè) npm script 完成：
?"pub":?"npm?run?bootstrap?&&?sh?build/git-release.sh?&&?sh?build/release.sh?&&?node?build/bin/gen-indices.js?&&?sh?build/deploy-faas.sh"
主要是通過(guò)運(yùn)行一系列的 bash 腳本，實(shí)現(xiàn)了代碼的提交、合并、版本管理、npm 發(fā)布、官網(wǎng)發(fā)布等，讓整個(gè)發(fā)布流程自動(dòng)化完成，腳本具體內(nèi)容感興趣的同學(xué)可自行查看。
總結(jié)
至此，element-ui 的組件庫(kù)的整體設(shè)計(jì)介紹完畢，可以看到除了這些豐富的組件背后，還有很完整的一套解決方案，很多經(jīng)驗(yàn)都值得我們學(xué)習(xí)和借鑒，不完美的地方也值得我們?nèi)ニ伎?#xff0c;其中有很多技術(shù)細(xì)節(jié)可以深入挖掘。
把不會(huì)的東西學(xué)會(huì)了，那么你就進(jìn)步了，如果你覺(jué)得這類文章有幫助，也歡迎把它推薦給你身邊的小伙伴。
下一篇預(yù)告 ：Element-UI ?技術(shù)揭秘(3)— Layout 布局組件的設(shè)計(jì)與實(shí)現(xiàn)。
在這里留下你的爪印喔~
總結(jié)
以上是生活随笔為你收集整理的element ui 多个子组件_ElementUI 技术揭秘（2） 组件库的整体设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python字典由什么组成_在Pytho
- 下一篇： 一会404一会500_没网络就是404？