石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機A10 Plus。從這個產品名上就不難看出，這次石頭推出的并不是常見的掃地機器
隨著vue/react這類以數據驅動為主的web框架的不斷完善和壯大，越來越多的前端團隊開始著手搭建內部的組件庫。雖然目前市面上已經有很多功能強大且完善的組件庫供我們使用，比如基于react的開源組件庫ant-design，material，又比如基于vue的開源組件庫elementUI，iView等。
我們在開發管理系統或者中臺產品時，完全可以使用這種第三方庫來開發，因為首先其服務的用戶群體比較小眾，一般是企業或者運營人員來使用，重點在于功能和業務，所以在B端產品比較適合；另一點就是設計要求相對于C端產品會低一些，因為B端產品或者管理系統風格統一簡單反而會降低使用者的學習成本。所以對于上述情況，我們完全可以使用ant-design-pro或者element-admin-vue這類集成管理框架開開發。
我們使用第三方組件庫搭建一個企業級應用是完全沒有問題的，但是另一方面，隨著我們對用戶體驗以及網站性能的要求越來越高，流量及金錢，速度即王道，對于專注于做C端的企業來說，盡可能的減少用戶等待才能留住更多的用戶，比如我們在某寶，某東上買一個商品，結果我們花了一分鐘商品列表還沒有出來（形容的有點夸張），這種情況下客戶可有可能直接選擇某拼了。很明顯像ant-design和elementUI這樣的組件不適合做C端產品，因為體積太大了，除非用高性能服務器或者其他方式彌補。所以說采用輕量級組件庫對于C端項目來說有以下幾點好處：
但是開發組件庫還是需要投入時間和成本的，畢竟這東西不是每個團隊都玩的起的。說了這么多，接下來我們就來分析和實現一個團隊內部的組件庫吧。
圖片
目前我們開發組件庫的方式有很多，只要根據npm發包原則去配置就好了，我們可以用webpack自己大家一個library，也可以直接使用create-react-app/vue-cli3來快速改造一個組件庫的腳手架，或者采用之前比較火且自動集成tree-shaking的rollup，這些方式都可以搭建我們組件庫的腳手架。關于如何使用webpack4.0和rollup，可以參考筆者的以下幾篇文章：
其實還有一種最快的方式就是直接去ant-design或者elementUI的github倉庫，把代碼copy下來改成自己的組件庫腳手架，當然，這也不是隨便就能改好的，如果想嘗試這種方案，建議大家先學好typescript和webpack。
筆者這里采用的是目前比較流行的工具鏈umi，umi的father專門是提供組件庫或者工具庫打包的集成工具，我們只需要更改配置文件就能輕松搭建一款自帶說明文檔的組件庫。筆者接下來會具來教大家如何使用它。
圖片
以上是筆者畫的一個簡陋的分層圖，我們可以看到最底層的是我們的基礎視圖組件，它是上層建筑的基石。對于一個包含很多子系統的復雜的項目系統來說，要想設計一個好的架構，第一步就是合理劃分組件，組件的粒度拆成的足夠細，這樣才能最大限度的復用組件。
對于任何一個復雜系統來說，最重要的就是實現錯綜復雜的業務功能，但是不同模塊或者子系統之間很多業務往往是相通的或者相似的，如果這個時候我們每個頁面對于實現類似的業務場景都去重復去寫一遍業務代碼，那完全是沒必要的，對于可維護性來說也是一種打擊，所以基于這種場景我們的 業務組件 就很有必要出場了。我們可以把功能或者需求類似的有機體封裝成一個業務組件，并對外暴露接口來實現靈活的可定制性，這樣的話我們就可以再不同頁面不同子系統中復用同樣的邏輯和功能了。
同理，不同頁面中往往有可能出現視覺或者交互完全相同或者類似的區塊，為了提高可復用性和提高開發效率，我們往往會基于基礎組件和業務組件再進行一次封裝，讓其成為一個獨立的區塊以便直接復用。
通過這樣一層層封裝，我們就逐漸搭建了一套完整的組件化系統，基于這種模式的開發往往也是一個好的前端架構的開始。但要注意一點就是高層次的組件一定會依賴低層次的組件，但是低層次的組件不可以包含高層次的組件。（聽起來有點像rudex的單向數據流法則），他們的關系就好像下圖：
圖片
組件庫的劃分其實可以參考成熟組件庫劃分。由于業務組件和區塊劃分完全取決于不同公司的實際項目情況，這里不能形成一套統一的思維框架，所以我這里說的組件庫劃分主要指基礎組件庫的劃分。我們先來看看antd的劃分，它劃分為：通用組件，布局組件，導航組件，數據錄入和數據展示組件，反饋型組件和其他。elementUI的組件劃分為：基礎組件，表單組件，數據呈現組件，通知類組件，導航類組件和其他，這些分類都是非常合理的劃分，所以我們在設計組件庫時也可以參考或者直接使用，具體總結如下：
至于組件實現的設計思路，其實筆者之前也寫過很多文章來做鋪墊，第一要義就是需求，一切要從需求出發。不僅僅是react的組件設計，vue或者angular等都是類似的方法和思路，這里簡單給大家舉一個組件開發的例子—— 彈窗組件（Modal）的開發思路：
圖片
圖片
圖片
這一步是文章的重點，我們將會了解到如何使用umi/father來搭建團隊的組件庫。至于umi這個前端集成解決方案，筆者從它的架構中受到了很多啟發，并且基于umi+dva+react的前端開發流程應用非常廣泛，感興趣的朋友可以研究學習一下。
官方介紹就一句話：基于rollup和docz的庫打包工具。它的特點主要有：
所以作為一個開箱即用的組件庫打包工具，已經為我們省去了很多中間步驟，比如說組件的測試，不同環境下的模塊打包，而且還支持ts和文檔功能，我們只需要掌握babel和rollup的知識，就能用它輕松配置出一個強大的組件庫腳手架。如果對docz不太了解的可以在docz官網學習使用非常簡單,只要你對markdown和react熟悉，分分鐘入門。
其實father的使用非常簡單，首先我們先安裝一下father：
npm install father -D或者使用yarn安裝：
yarn add father接下來我們可以在package.json里配置如下腳本來使用：
# 打包庫$ father build# 開發環境下啟動文檔服務$ father doc dev# 打包編譯文檔$ father doc build# 將文檔部署到github$ father doc deploy# 組件庫測試及測試覆蓋率$ father test$ father test --coverage這里拿筆者之前已經發布到npm的組件庫xui——基于react的輕量級UI組件庫來舉例。首先我們看看xui的package.json中的script腳本如何配置的：
"scripts": { "dev": "npx --max_old_space_size=8096 father doc dev --host 0.0.0.0", "build": "father build", "build:doc": "father doc build", "deploy": "father doc deploy" }當我們執行npm run dev或者yarn dev時，father自動幫我們啟動了doc服務器，我們接下來就能看到我們組件的測試文檔了：
圖片
圖片
這些內容都是我們提前寫好的mdx文檔，語法類似于markdown，只不過增加了對react組件的編譯支持，其實使用起來很簡單，我們只需要把react組件包裹在Playground容器里就好了，具體使用可以參考以下方式：
---name: Buttonroute: /Buttonorder: 3sidebar: true---import { Playground } from 'docz'import Button from './index'# Button#### 基本用法<Playground> <Button>按鈕</Button><br /> <Button type="primary">按鈕</Button><br /> <Button type="warning">按鈕</Button><br /> <Button type="info">按鈕</Button><br /> <Button type="pure">按鈕</Button><br /> <Button type="primary" shape="circle">按鈕的命運</Button><br /></Playground>頭部的信息我需要介紹一下：
我們根據案例可以知道mdx里面可以使用es6的導入方式來引入組件或者變量，其實還有很多配置，這里就不一一舉例了，感興趣的可以到docz官網學習。以下是官網的截圖：
圖片
接下來介紹我們最重要的部分，.fatherrc.js文件的配置。初始化father項目時會自動生成一個默認配置，但是大多數情況下我們都需要自定義配置，官網的配置參數也很多，可以找到適合自己團隊的配置，這里我主要介紹xui組件庫的配置細節。先看看配置代碼：
// .fatherrc.jsconst options = { entry: 'src/index.js', doc: { title: 'xu_ui', themeConfig: { mode: 'light' }, base: '/xu_ui' }, extraBabelPlugins: [ ['babel-plugin-import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }] ], // cssModules: true, extractCSS: true, lessInBabelMode: true, runtimeHelpers: true, esm: 'babel', cjs: 'babel', autoprefixer: { browsers: ['ie>9', 'Safari >= 6'], }};export default options;
圖片
大家可以參考一下，我們還可以在組件目錄下加測試代碼，這里就不舉例了。通過以上的配置，我們就能愉快的開發組件啦。
組件說明文檔是讓其他人了解組件庫的關鍵環節，包括組件庫的適用范圍（pc端，移動端，輕量級還是重量級），兼容瀏覽器的版本，設計原則和背景，以及社區生態，使用方法等。所以組件庫說明文檔的編寫也是非常重要的，大家具體可以參考antd或者element的說明文檔，可以說是寫的非常專業了。如下是antd的例子：
圖片
大家可以參考以上筆者整理的核心部分去寫組件說明文檔。
如果你在為團隊開發私有組件庫，那么完全不需要在意接下來筆者寫的內容，但是如果你要開發一個開源的，大家都能使用的組件庫，一定要注意以下幾點的編寫：
首先我們需要在package.json中配置github的地址：
"repository": { "type": "git", "url": "git+https://github.com:MrXujiang/xu_ui.git" }大家可以復制以上代碼改成自己的倉庫地址。
其次我們需要登錄進npm官網，如果你還沒有賬號可以直接申請一個，也很簡單，然后在終端通過命令行登錄。
接下來我們執行以下幾個命令就能將自己的組件庫打包發布到npm上了：
// 打包編譯組件庫yarn build// 編譯組件庫文檔，該步驟可省略yarn build:doc// 部署組件庫文檔到github, 該步驟可省略yarn deploy// 發布到npm上npm publish --access public以上的yarn命令具體實現可參考xui的package.json,也可以自己配置。經過上述步驟我們就成功將自己的組件庫發布到npm上了，是不是很簡單呢？
筆者已經將實現過的組件發布到npm上了,大家如果感興趣可以直接用npm安裝后使用,方式如下:
npm i @alex_xu/xui// 導入xuiimport { Button, Skeleton, Empty, Progress, Message, Tag, Switch, Drawer, Badge, Alert} from '@alex_xu/xui'該組件庫支持按需導入,我們只需要在項目里配置babel-plugin-import即可,具體配置如下:
// .babelrc"plugins": [ ["import", { "libraryName": "@alex_xu/xui", "style": true }]]npm庫截圖如下:
圖片
筆者本篇文章并不會將微前端架構的知識，但是既然涉及到組件庫，就一定要形成一個知識閉環，筆者特意畫了如下腦圖，供前端朋友或者正準備走向微前端架構的團隊一些參考：
本文鏈接：http://www.tebozhan.com/showinfo-26-26002-0.html從0到1教你搭建前端團隊的組件系統
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： 語聊房架構演進實踐
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號