本系列文章講什么內(nèi)容？

本系列文章主要介紹如何在現(xiàn)代前端生態(tài)下，創(chuàng)建一個(gè)工業(yè)級別的庫。近幾年來，前端工程化、模塊化、組件化的大潮鋪天蓋地而來，在解決以往的架構(gòu)痛點(diǎn)之余，卻又產(chǎn)生了信息過載的問題；我希望通過分享自己的經(jīng)驗(yàn)，幫助大家少踩坑多出活。

在網(wǎng)站設(shè)計(jì)、做網(wǎng)站過程中，需要針對客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

為什么需要開發(fā)一個(gè)前端庫呢？

在項(xiàng)目開發(fā)過程中，總有一些功能是相同或類似的，如果你只是單純地復(fù)制粘貼這部分代碼，那么恭喜你，假以時(shí)日，需求一改，你就只能自嘗苦果了。

你說，這還不簡單，抽成公共方法公用不就好了嗎？對的沒錯(cuò)，但請把視野再放廣一點(diǎn)：在工作中，我們很可能參與到不同項(xiàng)目的開發(fā)，這些項(xiàng)目分別放置在不同的代碼倉庫里，這樣的話很遺憾，你寫的公共方法還是沒法公用；再者，目前流行的微服務(wù)/微前端，本來就是把一個(gè)大項(xiàng)目分拆成更小的粒度來開發(fā)、存儲和部署，你寫的公共方法又怎么在這微前端架構(gòu)中公用呢？

因此，我們可以考慮把一些重用價(jià)值較高的代碼段，抽象出來形成一個(gè)庫，這樣我們既可以在項(xiàng)目組內(nèi)隨意使用，也可以跨項(xiàng)目組進(jìn)行輸出，甚至是給開源社區(qū)添磚加瓦。

什么樣的代碼適合做成庫呢？

基于前端組件化這一思想，我認(rèn)為只要一個(gè)功能的內(nèi)部邏輯穩(wěn)定，對外又能夠提供明確接口，那么這個(gè)功能就可以做成一個(gè)庫。

庫的形式是多種多樣的，可以是一個(gè) function ，可以是一個(gè) class ，可以是一個(gè) UI 組件，可以是一整個(gè)頁面（把一些公共頁面做成庫來在微前端架構(gòu)中公用也是一個(gè)非常不錯(cuò)的選擇），甚至可以是一份公共樣式文件（純 css ）。

本系列文章的受眾是？

寫本系列文章的時(shí)候，我會預(yù)設(shè)讀者們是能夠在現(xiàn)代前端體系下，熟練編寫業(yè)務(wù)代碼，并且對 webpack 有一定的認(rèn)識。另外，礙于我本人的技術(shù)棧限制，我將主要以 vue / 原生 javascript 的角度來撰寫文章，但你應(yīng)該也能輕松找到 react/angular 中對應(yīng)的技術(shù)和概念。

本系列文章涉及內(nèi)容預(yù)覽

• 使用 webpack 構(gòu)件前端庫與構(gòu)件一般應(yīng)用不一樣的點(diǎn)
• 開發(fā)場
• 瀏覽器兼容性
• 說明文檔和使用文檔
• 開發(fā)規(guī)范
• 單元測試
• 持續(xù)集成
• 發(fā)布

實(shí)例項(xiàng)目代碼介紹

我會以我最近寫的兩個(gè)開源庫：javascript-library-boilerplate 和 vue-directive-window 來作為實(shí)例項(xiàng)目代碼來輔助介紹。

javascript-library-boilerplate

javascript-library-boilerplate是一個(gè)現(xiàn)代前端生態(tài)下快速構(gòu)建 javascript 庫的腳手架（或稱種子項(xiàng)目，或稱示例代碼，看你理解了），本庫支持 GitHub 的 repository templates 功能，你可以直接在項(xiàng)目首頁點(diǎn)擊 Use this template來直接套用本腳手架的代碼來創(chuàng)建你自己的 javascript 庫。

vue-directive-window

vue-directive-window是一個(gè)可以快速讓模態(tài)框(modal)支持類窗口操作的增強(qiáng)庫；類窗口操作主要包括三大類：拖拽移動(dòng)、拖拽調(diào)整窗口尺寸、窗口最大化； vue-directive-window 支持以 Vue 自定義指令或是一般 js 類的方式來調(diào)用。

vue-directive-window 相對于 javascript-library-boilerplate 來說，更貼近 Vue 生態(tài)圈，如果你最近想為 Vue 生態(tài)圈添磚加瓦，不妨參考一下本項(xiàng)目。

系列文章目錄（同步更新）

• 《現(xiàn)代前端庫開發(fā)指南系列（一）：融入現(xiàn)代前端生態(tài)》
• 《現(xiàn)代前端庫開發(fā)指南系列（二）：使用 webpack 構(gòu)建一個(gè)庫》
• 《現(xiàn)代前端庫開發(fā)指南系列（三）：從說明文檔看庫的前世今生》

想要閱讀更多我的技術(shù)文章？請到我的 GitHub 博客 Array-Huang/blog 來，如果對您有幫助的話請 Star&Watch 走一波哈(〃^ω^)

當(dāng)前文章：現(xiàn)代前端庫開發(fā)指南系列（一）：融入現(xiàn)代前端生態(tài)
URL標(biāo)題：http://www.ekvhdxd.cn/article8/jcgdip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、App開發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司、域名注冊、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)