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

需求

传统web应用前端开发模式，应用由页面间跳转组成

前后端开发分离，前端开发成静态页面后交付给后端接入数据并部署

资源文件需压缩合并

方案

概述

通过对yeoman-webapp脚手架扩展修改完成架构

总体目录结构如下：

yourAPP
|--app             //资源目录
|--bundles      //存放npm模块打包后js
|--fonts        //字体
|--images       //图片
|--jades        //html
|--scripts      //javascript
|--styles       //css
|--test
|--...

开发工具推荐

webstorm

前后端职责划分

前端职责

根据需求交付完整可维护，高可用的前端静态项目

包括：html源码，js源码，插件压缩文件，图片压缩文件，css压缩文件等

配合后端完成js任务

后端职责

修改html静态代码

修改少量js源码

根据实现情况要求前端完成js实现

负责html代码的压缩打包，和js代码的混淆压缩打包

交付和部署项目

编码规范

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