前端工程化架構實踐--多頁面

需求

• 傳統web應用前端開發模式，應用由頁面間跳轉組成
• 前後端開發分離，前端開發成靜态頁面後傳遞給後端接入資料并部署
• 資源檔案需壓縮合并

方案

概述

通過對yeoman-webapp腳手架擴充修改完成架構

總體目錄結構如下：

yourAPP
|--app             //資源目錄
   |--bundles      //存放npm子產品打包後js   
   |--fonts        //字型
   |--images       //圖檔
   |--jades        //html
   |--scripts      //javascript
   |--styles       //css
|--test   
|--...   

           

開發工具推薦

webstorm

前後端職責劃分

前端職責

1. 根據需求傳遞完整可維護，高可用的前端靜态項目
2. 包括：html源碼，js源碼，插件壓縮檔案，圖檔壓縮檔案，css壓縮檔案等
3. 配合後端完成js任務

後端職責

1. 修改html靜态代碼
2. 修改少量js源碼
3. 根據實作情況要求前端完成js實作
4. 負責html代碼的壓縮打包，和js代碼的混淆壓縮打包
5. 傳遞和部署項目

編碼規範

• css編碼規範
• javascript編碼規範

Html

1）使用jade(pug)模闆引擎

2）生成的html代碼不壓縮，由後端接入後，後端進行壓縮

3）jade目錄結構如下：

app
|--jades            
   |--layouts     //存放jade模闆
   |--includes   //存放頁面中提取的公共元素
   |--mixins     //存放混入（類似函數）
   |--...        //項目頁面存放位置
           

Javascript

1）使用ES6文法

2）npm子產品代碼使用browserify進行打包引入

3）bower元件使用wiredep自動注入（公共元件自動注入，頁面單獨的元件配置忽略，手動注入）

4）所有js代碼使用useref合并，uglify壓縮

5）js代碼書寫規則:

// 采用面向對象方式，一個html頁面看成一個對象對應一個本頁面同名的js，并封裝成類，在html頁面中進行初始化和調用
// 如：index.jade對應index.js
class Index {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
           

// index.jade調用方式

// build:js scripts/main.js
script(src="scripts/index.js")
// endbuild

script.
      $(function(){
        var index = new Index(,);
        console.log(index.toString());
      })
           

Css

1）使用sass+bootstrap-sass

2）沿用bootstrap-sass組織和設計模式，使用或修改相關scss檔案，适應項目需求

3）在boostrap提供的元件不滿足需求時，以元件的形式添加css，并适當使用boostrap提供的mixins

4）理論參考OOCSS+SMACSS+BEM

腳手架位址

github位址：https://github.com/Marenqing/generator-MRQWebapp