需求
- 传统web应用前端开发模式,应用由页面间跳转组成
- 前后端开发分离,前端开发成静态页面后交付给后端接入数据并部署
- 资源文件需压缩合并
方案
概述
通过对yeoman-webapp脚手架扩展修改完成架构
总体目录结构如下:
yourAPP
|--app //资源目录
|--bundles //存放npm模块打包后js
|--fonts //字体
|--images //图片
|--jades //html
|--scripts //javascript
|--styles //css
|--test
|--...
开发工具推荐
前后端职责划分
前端职责
- 根据需求交付完整可维护,高可用的前端静态项目
- 包括:html源码,js源码,插件压缩文件,图片压缩文件,css压缩文件等
- 配合后端完成js任务
后端职责
- 修改html静态代码
- 修改少量js源码
- 根据实现情况要求前端完成js实现
- 负责html代码的压缩打包,和js代码的混淆压缩打包
- 交付和部署项目
编码规范
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