1、html5設置頁面組件化,組件化的前端開發流程背景做前端的學生都知道，做的頁面多了，東西就會亂，因此我們需要統一一個開發流程。開發流程的好壞，挺直影響著頁面開發的效率，間接影響嬉戲的時光。開發流程的目標可以迅速完成頁面。通過組件化的方式，保證代碼重用，避開重復勞動。保證頁面上線后能夠高效運行。開發流程的范疇文件的存放規范。代碼的組織結構和編碼規范。發布策略。支持囫圇流程所必需的開發工具。每個團隊都有自己的開發流程規范。事實上也不存在一個最好的流程規范，惟獨最適合的。以下介紹一個按照多個團隊的開發流程總結歸納得出的一套通用開發流程規范。文件夾規范假設項目文件夾為 p/ 。那么這個文件夾內包含：p

2、/assets/ 存敞開發工具p/dev/? ? ? ? ? ? 存敞開發狀態的項目文件p/dpl/ ? ? ? ? ? 存放項目的公用組件庫p/release/ ? ? ? ? 存放發布后的項目文件（這里的文件都是已經壓縮好的）p/dev/ 內的結構為：p/dev/website1/public/? 全站公用的項目（存放全站公用的文件）p/dev/website1/project1/ 項目1p/dev/website1/project2/? 項目2其中，每個項目內的結構為：p/dev/website1/project1/page1.htmlp/dev/website1/project1/as

3、sets/page1.jsp/dev/website1/project1/assets/page1.cssp/dev/website1/project1/assets/images/p/dev/website1/project1/include/page1.incp/dpl/ 內的結構為：p/dpl/system/? 系統js模塊p/dpl/controls/ ? ? ? ? ui 模塊p/dpl/widgets/ 業務組件其中，每個文件夾內的結構為：p/dpl/system/category1/component1.htmlp/dpl/system/category1/assets/comp

4、onent1.jsp/dpl/system/category1/assets/component1.cssp/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網頁中可以用法下列代碼載入一個組件：其中，system.category1.component

5、1 會被映射到 p/dpl/system/category1/assets/component1.js（或 .css）。using的作用相當于在頁面引了一個3. 異步載入js和css流程本身不提供異步載入組件的功能，項目中可以用法任何第三方模塊加載器實現異步載入。比如：4. html的復用在 html 文件中寫如下代碼即可將對應的 html 片段嵌入頁面。5. 總結惟獨 release 里的文件才會終于上線。假如希翼用法 dpl 里的組件，惟獨2種辦法：開發前通過腳本合并，并存放到 dev 中指定名目。（如 project1/assets/common.js）發布時自動合并到？dev 中。（替換 using）頁面的發布頁面發布主要做這些事情：內聯 include 和 using 等，以削減頁面的哀求數。壓縮 js 和 css。重新更改文件位置，適應實際項目需求（比如需要將js和css提取出來，而過濾 html）相關工具開發時，需要引一個 boot.js 來提供 using 等函數，這些函數會自動載入并執行相關的代碼。發布時，需要一個程序自動替換 using 等函數