網(wǎng)站建設(shè)前端怎么規(guī)整化

　　網(wǎng)站建設(shè)前端規(guī)整化的手段，主要包括編碼規(guī)范、JavaScript庫、組件工具箱和框架這4個方面。

　　下面介紹編碼規(guī)范這1個方面的細(xì)節(jié)。在項(xiàng)目前期，可以通過這方面來初始化前端工程的。

　　注意：規(guī)整化需要把握一個度，標(biāo)準(zhǔn)太高會拖慢項(xiàng)目進(jìn)度，標(biāo)準(zhǔn)太低又達(dá)不到規(guī)整的目的，所以前端架構(gòu)需要根據(jù)實(shí)際的團(tuán)隊(duì)水平和項(xiàng)目周期制定規(guī)整化的標(biāo)準(zhǔn)。

　　需要特別強(qiáng)調(diào)的是，很多人一提到前端架構(gòu)，總會陷入“原生開發(fā)還是使用腳手架”“Vue、React、Angular應(yīng)該選擇哪一個”的苦惱之中。其實(shí)，沒有任何的基礎(chǔ)技術(shù)能保證最終的軟件質(zhì)量。而架構(gòu)設(shè)計的目的，是想要保證最終的軟件質(zhì)量。相對于選擇什么基礎(chǔ)技術(shù)，制定規(guī)范化的標(biāo)準(zhǔn)才是架構(gòu)設(shè)計更應(yīng)該考慮的事情。

　　編碼規(guī)范

　　制定編碼規(guī)范是最簡單且最有效的整頓辦法，只需要開發(fā)團(tuán)隊(duì)遵守一些規(guī)則就能很大程度上避免混亂。這里先不考慮使用框架的情況，只是單純地從網(wǎng)頁開發(fā)方面介紹一下編碼規(guī)范化的幾個參考點(diǎn)：

　　規(guī)范化目錄結(jié)構(gòu)；

　　規(guī)范化前端資源文件使用，限制和分離HTML、CSS和JavaScript文件；

　　抽離通用部分，建立共用的JavaScript腳本和CSS主題文件；

　　規(guī)范化第三方插件的使用；

　　其他方面。

　　注意：雖然這里以原生網(wǎng)頁開發(fā)作為基礎(chǔ)，但是規(guī)整化需要注意的點(diǎn)是相似的。

　　1.規(guī)范化目錄結(jié)構(gòu)

　　一般的前端目錄結(jié)構(gòu)都是按JavaScript文件、CSS文件、HTML文件及資源文件分離的。

　　但是這樣的前端目錄結(jié)構(gòu)不適合大型網(wǎng)站，因?yàn)榇笮途W(wǎng)站有很多網(wǎng)頁，也有很多網(wǎng)頁資源，如果還是按這種目錄結(jié)構(gòu)組織網(wǎng)頁資源的話，那么前端的目錄結(jié)構(gòu)其實(shí)還是混亂的。試想一下，HTML文件有幾十甚至上百個，伴隨的網(wǎng)頁資源也有幾百個，這種“幾十甚至上百個文件的羅列”無論在開發(fā)上還是網(wǎng)頁發(fā)布上，都極有可能造成不必要的人為失誤。

　　因此，在結(jié)構(gòu)上層，最好再增加一層結(jié)構(gòu)。增加一層結(jié)構(gòu)后，能大大降低每個子目錄的文件數(shù)，可以把每個目錄的文件數(shù)控制在十幾二十個左右，從而規(guī)整前端結(jié)構(gòu)。如圖3.25所示，根據(jù)用戶角色，增加了user（普通用戶）和admin（管理員）的網(wǎng)頁劃分。需要注意的是，網(wǎng)頁的劃分更多是以業(yè)務(wù)架構(gòu)的子模塊為基礎(chǔ)的，需要根據(jù)實(shí)際情況而定。

　　增加結(jié)構(gòu)后，在瀏覽器中輸入網(wǎng)址或IP地址后無法顯示默認(rèn)網(wǎng)頁，這時需要設(shè)置一下默認(rèn)網(wǎng)頁。設(shè)置默認(rèn)網(wǎng)頁的方法有兩種，第一種是新增一個index.html文件，做強(qiáng)制跳轉(zhuǎn)；第二種是更改Web服務(wù)器的配置。

　　第一種方法是重定向，強(qiáng)制跳轉(zhuǎn)。由于Web服務(wù)器的默認(rèn)配置是打開根目錄下的index.html文件，所以我們在根目錄下新建index.html文件，通過index.html文件自動跳轉(zhuǎn)到指定的新網(wǎng)頁。index.html文件的內(nèi)容如代碼3.12所示，其中/sample/abc.html為要設(shè)定的默認(rèn)網(wǎng)頁。

　　第二種方法是更改Web服務(wù)器的配置。以Nginx為例，修改conf/nginx.conf中的配置即可。

　　不過，雖然第二種方法的配置能讓默認(rèn)網(wǎng)頁的地址保持簡潔，但是HTML文件引用其他網(wǎng)頁資源時，需要把相對地址改成絕對地址。

　　說明：一般的默認(rèn)網(wǎng)頁為/index.html（網(wǎng)站根目錄下的index.html），在只輸入網(wǎng)址或IP地址的情況下會自動打開index.html網(wǎng)頁，這是Web服務(wù)器的配置決定的。