前端工作流设计方案

目录

1. 背景及现状
2. 目标
3. 技术路线
4. 业内标准

5. 总体设计
   

1. 背景及现状

随着前端开发复杂度的日益增加，各种优秀的组件框架也遍地开花。同时，我们面临业务规模的快速发展和工程师团队的不断扩张，如何解决资源整合、模块开发、项目部署、性能优化等问题势在必行。

2. 目标

根据背景和现状的分析，我们现制订一个规范化的前端工作流，很好地规范统一项目的模块化开发和前端资源，让代码的维护和互相协作更加容易更加方便，令前端开发自动化成为一种习惯。同时，让大家能够释放生产力，提高开发效率，更好更快地完成团队开发。

3. 技术路线

SVN是一个开放源代码的版本控制系统，相较于RCS、CVS，它采用了分支管理系统，它的设计目标就是取代CVS。互联网上很多版本控制服务已从CVS迁移到Subversion。说得简单一点SVN就是用于多个人共同开发同一个项目，共用资源的目的。

GIT是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。它采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。

GULP是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用各种工具自动完成，大大提高我们的工作效率。

WEBPACK是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块。

SASS是一种CSS预处理器。它是对CSS的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用，但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

artTemplate是新一代javascript模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用javascript引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25、32倍。

ReactJS是Facebook推出的一个用来构建用户界面的JavaScript库。设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。

VueJS是开源的一个前端开发库,通过简洁API提供高效的数据绑定和灵活的组件系统。

4. 业内标准

W3C标准

5. 总体设计

5.1. 工作流总体架构

5.2. 详细设计图

5.2.1. 代码管理层

SVN：属于集中化的版本控制系统，使用起来有点像是档案仓库的感觉，支持并行读写文件，支持代码的版本化管理，功能包括取出、导入、更新、分支、改名、还原、合并等等。使用比较简单，这里不再赘述。

GIT：是分布式的版本控制系统。它采用了分布式版本库的方式，不必服务器端软件支持。操作命令包括：clone，pull，push,branch ,merge ,push,rebase等等，具体使用我也不赘述。

SVN和GIT的使用：SVN适用于项目管理。因为它简单易用。当代码涉及多组成员或者代码有一定的秘密性，用svn管理都是省事放心。

Git适用于代码管理。对于组内的一些公用组件，或者sdk之类的代码，用git更好管理，更新更快。

5.2.2. Images层

(1).图片可以按页面和公共模块来分着存放。

格式使用：
GIF

JPG

PNG

使用规则：

5.2.3. CSS层

css层通过sass来管理，这样能更加灵活，方便和容易维护。具体规范参考css规范。

5.2.4. HTML层

HTML层主要就是版本号的控制，这个放在下面GULP的使用时介绍。html的规范参考HTML规范。

5.2.5. JS层

js规范点击这里

5.2.5.1. JS模块化标准–RequireJS

通过使用大家熟悉的AMD规范，能统一大家的js标准。模块化的开发更方便代码的共享和按需加载，提高开发的效率。借助RequireJS可以实现js文件的异步加载，管理模块之间的依赖性，便于代码的编写和维护。
RequireJS使用原则：

新项目可以采取这个模板为基础去扩展代码。都在同一个区域定义变量，都在同一个区域定义事件，都在同一个地方绑定事件，最后初始化和暴露方法。套用代码标准模板可以做到大家的代码风格类似，以后接手的同学一看就知道代码在哪里，快速上手。

5.2.5.2. JS模板引擎–artTemplate

artTemplate这个模板引擎相对成熟，性能比较好。支持运行时调试，可精确定位异常模板所在语句，模板语句简洁，浏览器支持完整。
artTemplate的使用规则：

5.2.5.3. MVVM和类MVC框架

5.2.5.3.1. ReactJS

ReactJS是一个用来构建用户界面的 JavaScript 库，虚拟DOM的使用让它的性能优越。同时，它实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单的原因。

5.2.5.3.1.1. HTML模板

5.2.5.3.1.2. ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

5.2.5.3.1.3. JSX 语法

JSX的语法就是直接写在 JavaScript 语言之中，不加任何引号。它允许 HTML 与 JavaScript 的混写，简单方便。

5.2.5.3.1.4. 封装组件

React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类的。

5.2.5.3.1.5. PropTypes 属性

PropTypes属性，是用来验证组件实例的属性是否符合要求的一个利器。

5.2.5.3.1.6. this.state

React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI 。state就是状态的存取对象。

5.2.5.3.2. VueJS

VueJs是一个短小精悍容易上手的MVVM框架。Api清晰，使用容易。支持ie8以上等其他主流的浏览器。适合在移动端和浏览器要求偏弱的项目。

5.2.5.3.2.1. 数据绑定

5.2.5.3.2.2. 双向绑定

5.2.5.3.2.3. 渲染列表

5.2.6. 自动化构建工具

5.2.6.1. GULP

GULP简单易用，是前端自动化项目的构建利器。能把很多繁琐重复的工作简单化，命令化。作为前端工作流的利器，是一个不错的选择。加上丰富的组件，让它能干更多自动化的事情。

5.2.6.1.1. GULP的使用

1、全局安装

5.2.6.1.2. GULP的插件使用

5.2.6.1.2.1. 合并css– gulp-concat-css

5.2.6.1.2.2. 合并js– gulp-concat

5.2.6.1.2.3. 压缩混淆js–gulp-uglify

5.2.6.1.2.4. 压缩css– gulp-minify-css/gulp-clean-css

5.2.6.1.2.5. 监听文件的更新– gulp-livereload

5.2.6.1.2.6. 图片压缩– gulp-imagemin

5.2.6.1.2.7. 生成雪碧图– gulp.spritesmith

5.2.6.1.2.8. 版本号的控制– gulp-rev-append

gulp-rev-append 插件会通过正则(?:href|src)=”(.)[?]rev=(.)[“]查找并给指定链接填加版本号，默认根据文件MD5生成，因此文件未发生改变，这个版本号将不会改变。

5.2.6.1.2.9. 编译sass– gulp-sass

还有其他很多插件不再一一介绍。

5.2.6.2. Webpack

webpack是近期最火的一款模块加载器兼打包工具。

webpack是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

5.2.6.2.1. 全局安装

5.2.6.2.2. 简单使用

运行：

5.2.6.2.3. Loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 SASS 或图片。

module.loaders 告知 webpack 每一种文件都需要使用什么加载器来处理。

5.2.6.2.4. GULP和Webpack的混合使用

在gulp里面，只需把配置写到webpack({ … }) 中去即可，不用再写 webpack.config.js 。

5.2.6.2.5. 在ReactJS里面使用Webpack

在ReactJS里面安装react-hot-loader，再结合Webpack就可以实现修改即更新同步的效果。

6. 技术亮点

6.1. 统一标准，提高工作效率，有利团队合作

借鉴业内出名的诸如RequireJS、SASS等框架，统一前端代码的规范，有利于以后的团队合作，使用GULP、Webpack等高效的构建工具，能提高工作的效率，减少工作量。更有利于代码的维护和可扩展性。

6.2. 跨平台，支持灵活多变的场景

模块化的设计和可扩展的代码模式，加上灵活的自动化构建工具，适合各种场景的开发。也便于新成员的接入。

最后

以上就是聪慧向日葵为你收集整理的前端工作流设计方案前端工作流设计方案的全部内容，希望文章能够帮你解决前端工作流设计方案前端工作流设计方案所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。