前端工程化架构实践--多页面

需求

• 传统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(1,2);
        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