組件化的前端開發(fā)流程分析

這篇文章將為大家詳細講解有關組件化的前端開發(fā)流程分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網站建設、域名、雅安服務器托管、綿陽服務器托管、企業(yè)網站設計、通州網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

背景
做前端的同學都知道，做的頁面多了，東西就會亂，因此我們需要統(tǒng)一一個開發(fā)流程。開發(fā)流程的好壞，直接影響著頁面開發(fā)的效率，間接影響游戲的時間。

開發(fā)流程的目標
可以快速完成頁面。
通過組件化的方式，保證代碼重用，避免重復勞動。
保證頁面上線后能夠高效運行。

開發(fā)流程的范疇
文件的存放規(guī)范。
代碼的組織結構和編碼規(guī)范。
發(fā)布策略。
支持整個流程所必須的開發(fā)工具。
每個團隊都有自己的開發(fā)流程規(guī)范。實際上也不存在一個最好的流程規(guī)范，只有最適合的。以下介紹一個根據多個團隊的開發(fā)流程總結歸納得出的一套通用開發(fā)流程規(guī)范。

文件夾規(guī)范
假設項目文件夾為 p/ 。那么這個文件夾內包含：
p/assets/ 存放開發(fā)工具
p/dev/ 存放開發(fā)狀態(tài)的項目文件
p/dpl/ 存放項目的公用組件庫
p/release/ 存放發(fā)布后的項目文件（這里的文件都是已經壓縮好的）
p/dev/ 內的結構為：
p/dev/website1/public/ 全站公用的項目（存放全站公用的文件）
p/dev/website1/project1/ 項目1
p/dev/website1/project2/ 項目2
....
其中，每個項目內的結構為：
p/dev/website1/project1/page1.html
p/dev/website1/project1/assets/page1.js
p/dev/website1/project1/assets/page1.css
p/dev/website1/project1/assets/images/
p/dev/website1/project1/include/page1.inc
p/dpl/ 內的結構為：
p/dpl/system/ 系統(tǒng)js模塊
p/dpl/controls/ UI 模塊
p/dpl/widgets/ 業(yè)務組件
其中，每個文件夾內的結構為：
p/dpl/system/category1/component1.html
p/dpl/system/category1/assets/component1.js
p/dpl/system/category1/assets/component1.css
p/dpl/system/category1/assets/images/
p/release/ 內的結構：
根據線上文件規(guī)范決定，也可以和 p/dev/ 一樣。

組件化開發(fā)實現(xiàn)
1. 全站公用的js和css
全站公用的js和css是用工具從 p/dpl/ 里選取一些組件合成的。放在 p/dev/website1/public/assets/common.js (或 .css)
2. 非全站公用的js和css
網頁中可以使用下列代碼載入一個組件：
?using("System.Category1.Component1");
var comp1 = new Component1();
其中，System.Category1.Component1 會被映射到 p/dpl/system/category1/assets/component1.js(或 .css)。
開發(fā)狀態(tài)，using會同步載入組件。頁面發(fā)布后，using會被替換為對應組件的源碼，而不需要動態(tài)載入。
3. 異步載入js和css
流程本身不提供異步載入組件的功能，項目中可以使用任何第三方模塊加載器實現(xiàn)異步載入。
4. html的復用
在 html 文件中寫 include("include/topbar.inc") 即可將對應的 html 片段嵌入頁面。

頁面的發(fā)布
頁面發(fā)布主要做這些事情：
內聯(lián) include 和 using 等，以減少頁面的請求數(shù)。
壓縮 js 和 css。
重新更改文件位置，適應實際項目需求（比如需要將js和css提取出來，而過濾 html）

關于“組件化的前端開發(fā)流程分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網站欄目：組件化的前端開發(fā)流程分析
網站網址：http://muchs.cn/article8/igheop.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、網站制作、網站改版、小程序開發(fā)、做網站、品牌網站建設

廣告

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