組件化的前端開發流程

本文轉載自查看原文 2012-12-25 13:10 1829

背景

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

開發流程的目標

可以快速完成頁面。
通過組件化的方式，保證代碼重用，避免重復勞動。
保證頁面上線后能夠高效運行。

開發流程的范疇

文件的存放規范。
代碼的組織結構和編碼規范。
發布策略。
支持整個流程所必須的開發工具。

每個團隊都有自己的開發流程規范。實際上也不存在一個最好的流程規范，只有最適合的。以下介紹一個根據多個團隊的開發流程總結歸納得出的一套通用開發流程規范。

文件夾規范

假設項目文件夾為 p/ 。那么這個文件夾內包含：

p/assets/ 存放開發工具
p/dev/ 存放開發狀態的項目文件
p/dpl/ 存放項目的公用組件庫
p/release/ 存放發布后的項目文件（這里的文件都是已經壓縮好的）

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/ 系統js模塊
p/dpl/controls/ UI 模塊
p/dpl/widgets/ 業務組件

其中，每個文件夾內的結構為：

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/ 內的結構：

根據線上文件規范決定，也可以和 p/dev/ 一樣。

組件化開發實現

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)。

using的作用相當於在頁面引了一個 <script> 腳本。頁面發布后，using會被替換為對應組件的源碼，而不需要動態載入。

3. 異步載入js和css

流程本身不提供異步載入組件的功能，項目中可以使用任何第三方模塊加載器實現異步載入。比如：

use(["System.Category1.Component1"], function(Component1){
      var comp1 = new Component1();
});

4. html的復用

在 html 文件中寫如下代碼即可將對應的 html 片段嵌入頁面。

<script>include('../public/include/topbar.inc');</script>

5. 總結

只有 release 里的文件才會最終上線。如果希望使用 dpl 里的組件，只有2種方法：

開發前通過腳本合並，並存放到 dev 中指定目錄。（如 project1/assets/common.js）
發布時自動合並到 dev 中。（替換 using）

頁面的發布

頁面發布主要做這些事情：

內聯 include 和 using 等，以減少頁面的請求數。
壓縮 js 和 css。
重新更改文件位置，適應實際項目需求（比如需要將js和css提取出來，而過濾 html）