前端開發分層

##一.css三層結構

base: 基本樣式

站點級的，最基礎，最通用的樣式，不同風格不同內容的站點可以共用 base 樣式

base 是原子的，不可再分，比如相容性良好的 flex, clearfix 等等

reset 與 base 並列，作為基本樣式組件，當然，也可以把簡單的 reset 放在 base 層裡

common: 通用樣式

模組級的，自定義的樣式模組，可以供各個頁面複用

在 base 層基礎上提供更複雜的樣式模組，比如日曆，popup 等等

page: 頁面樣式

頁面級的，不需要複用的樣式

針對具體頁面，添加特有的樣式，比如具體色值，字體，hack 等等

合理的分層能夠有效提高樣式的複用性，可以透過在高層簡單地重寫低層某條樣式規則來改變最終樣式；此外還能提高樣式的可維護性，各層分工明確，新增樣式對號入座，html 中以 class 組合的方式來實現最終樣式

base 層和 common 層應該由很少的人來負責管理維護，不會經常變動，但可以擴展，開發者直接針對 UI 設計稿完成 page 層樣式，實現視覺效果，編寫 page 層樣式時同樣可以按照三層結構來組織，例如：

/* base */
body {
    background-color: #eee;
}
h1 {
    border-bottom: 1px solid #ccc;
}
/* common */
.panel {
    border: 1px solid #ddd;
}
.line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* page */
h1 span {
    border: 1px solid red;
    border-raduis: 3px;
}
.panel .line {
    line-height: 1.5em;
}

編寫 page 層樣式的關鍵是確定 common 層樣式，也就是如何劃分模組，從設計稿中提取出相似的部分，抽象為模組，合理的模組劃分需要考慮 common 層和 page 層的平衡以及可擴展性，如果 common 層過於臃腫，page 層可能沒幾行程式碼，如果 common 層過於簡單，page 層可能需要用大量的後代選擇器來填充樣式。原則是在儘量保證簡單的前提下提供更多的可擴展性，以適應可能發生的變化

##二.js三層結構

base: 基本工具庫

擴展 js api，新增更易用的介面

原生 api 功能比較弱，可以在 base 層擴展更多介面，比如 getElementsByClassName，trim 等等

common: 組件庫

提供自定義組件或者封裝功能模組，比如日曆，ajax，cookie 等等

也可以提供專案中需要經常使用的組件，比如下拉重新整理，上拉載入等等

page: 頁面腳本

針對具體業務編寫的不需要複用的腳本

通常對應 html，即每個 html 檔案對應一個 page 層的 js 檔案

js 分層的作用體現在逐層增強，一步步增強原生 api，讓 page 層的開發更便捷。對此有一個形象的比喻：原生 js api 像一條坑坑窪窪（瀏覽器相容性問題）的鄉間小路（js 原生 api 底層功能過少），添上 base 層後相當於把小路填平擴寬，而 common 層就像是再給小路鋪上了一層瀝青，之後 page 層的開發就變得更輕鬆順利了

base 層和 common 層唯一的區別就是 common 層組件的規模更大，二者都要面對相容性問題，common 層在 base 層之上提供功能更強大的模組，page 層中能夠跨頁面複用的部分也應該添加到 common 層或者 page 層中（視規模而定）

實際應用中 js 的三層結構用的比較少，因為有功能強大的第三方庫，如 JQuery，YUI，這些類庫同時提供了 base 層和 common 層功能。此時仍然可以採用三層結構組織 page 層程式碼，並把能夠複用的部分提取出來作為整個專案的 base 層和 common 層，構建好 base 層和 common 層之後，第三方類庫就成為了和 base 層並列的基礎組件

評論

提交評論