A. 前端架构之路（4） - 前端开发文档
上一节讲到开发规范，不以规矩，不成方圆，团队开发离不开规范，这一节讲的开发文档是对开发规范的一个补充。
从目的上讲，规范与文档都是为了降低团队的协作成本和维护成本，提高开发效率和质量，保证不会因为开发人员的变动而产生较大的影响。
随着前端的发展，文档已经慢慢的变得不可或缺了，并由社区的努力而形成了 JSDoc ，类似 JavaDoc 和 PHPDoc。
JSDoc 是一个根据 javascript 文件中注释信息，生成 JavaScript 应用程序或库、模块的 API 文档 的工具。你可以使用他记录如：命名空间，类，方法，方法参数等，并且很多编辑器和 IDE 都是直接支持智能提示的。
JSDoc 注释一般应该放置在方法或函数声明之前，它必须以 /** 开始，其他任何以 /* ， /*** 或者超过3个星号的注释，都将被JSDoc解析器忽略。例如：
另外一个需要记录的信息就是业务逻辑、更新日志与备注。
有些比较复杂的业务逻辑不太适合放在注释里面，需要单独写逻辑文档，以备后面查看。
有时候，有些逻辑并不是简单的用文字描述就能说的清楚的，还需要图表或者思维导图的辅助。
更新日志也是一个比较重要文档，能够方便查找更新状态、时间、开发人员等。
如果有额外的一些信息，需要用文档备注一下。
上一篇： 前端开发规范
下一篇： 构建工具 for teamwork
参考文章：
更多博客，查看 https://github.com/senntyou/blogs
B. 前端开发应该如何写技术文档
一名合格的前端开发工程师，不单单需要掌握前端必须的各种技术，同时还要掌握其它技术，需要掌握一点后台的知识，同时也要对网站构架有一定的了解，这样才可以称之为一个合格的Web前端开发工程师。
如果你想要快速学习Web前端技术，专业全面的学习方式比较好。适合零基础的小白迅速成长，学习曲线先快后慢，也适合有一定基础的学员进阶学习，巩固知识的基础上，稳步进步突破职业瓶颈。
C. 系统架构文档怎么写
你这不是系统架构文档,而是概要设计文档和详细设计文档.
D. “产品前端架构”接口设计
用户使用 Web 客户端访问 Web 系统，系统在收到请求后执行操作
（收集数据模型，选择数据经行组装），将结果返回给客户。
其中包括的元素和关系如下图所示：
约定
每个规范也会对应若干规定若干规则约定来指导前后端工程师的具体实施。
页面入口规范（范例）
同步数据规范（范例）
异步接口规范（范例）
通过 模拟数据 的形成，将前端本地开发与后端独立出来，
这样前端工程师就可以独立的进行本地的开发工作。
使用页面入口规范制定项目结构（配置信息，目录结构和模板结构），
此过程可以使用自动化工具自动完成。
根据同步数据规范可生成模拟数据的配置文件。（此部分通用可以使用自动化工具来完成）
根据异步接口规范生成模拟异步数据。
前端开发环境包含两个部分， 本地模拟服务器 和 本地代理 。
Local Server
根据请求规则进行匹配，然后生成（整合模板和模拟数据）所请求的页面
Local Proxy
拦截异步请求后，根据请求的匹配规则返回所请求的数据（例如 JSON 或 XML）。
前后端联调需要去除本地环境，在实际开发中只需要对配置文件进行调整既可
（控制哪些请求需要被本地服务器或代理拦截，哪些需要使用远程服务器）。
E. 什么是前端架构
架构设计的最重要目的是为了进行整体系统概览，以及开发方向指导。
而架构要包含的内容，简单说就是下面四个
1、系统间关系
2、系统内关系
3、应用内架构
4、系统规范与原则
而架构的原则主要是三个方面
1、架构的合适：架构就像衣服，不能太长，也不能太短
2、可扩展的：架构需要充分考虑扩展性
3、持续不断的：架构不是一次性物品，是一个跟着软件生命周期的长期过程
F. 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
angular:
我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs
vue：
vuejs 文档比较齐全，vue吸取了angularjs
的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，
同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router （spa框架）。
vue学习地址：http://cn.vuejs.org/
以上说了那么多没用的，下面就来点干活了！
我的前端组件化架构设计，目录如下：
项目架构用到的知识点，还是挺多的，知识清单如下：
［1］: gulp + webpack 构建打包工具， 使用了一系列的loader，比如：vue-loader, sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等
[2] : postcss-custom-properties : 用来做样式全局化, 只需要通过变量去维护，通过编译变量既可以换肤。
[3] : vue-loader （vue文件组件化）:用来去编译处理 *.vue 的文件，一个vue 文件就是一个单独的组件，vue组件开发具有高独立且易维护。组件的划分可大可小，一个页面也可以看作成由多个vue 组件构成的，一个页面也可以是一个vue组件, vue 文件结构如下：
[4] ： babel-loader ：实现对vue文件中 es6 语法的编译解析
[5] ： vue-router ：用来做路由分发，而且文档非常的齐全（学习地址:http://vuejs.github.io/vue-router/zh-cn/index.html）。
[6] ： vue （插件式方式）：vue本身提供了一个install 方式用来注入，我们可以注入一些全局的(属性、方法、以及通用的ui组件)。
下面说说文件夹的含义：
common 文件夹: 是用来存一些通用的东西，比如样式，以及全局的js等等
components 文件夹：用来放独立的组件，我打算后期做细分，ui 组件，以及page 组件等等，这里面就是团队的心血，以后就能做成独立的组件库了。
filters 文件夹：用来放通用的过滤器操作。
plugins 文件夹：用来放 Vue.use 注入到Vue全局的插件库，比如：请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。
views 文件夹: 用来存放页面模块
app.vue 文件：第一次启动的主程序模块
app.js 文件：启动前的加载，注入，实例化
router.config.js 文件：路由模块
目前该架构在前后台的SPA架构都适用，可能还是有很多不完善，不过我还很年轻，vue也还狠年轻，望各位道友多给我们年轻人一些机会。
G. 前端文档接口怎么写
1.先上一个案例
a.接口名称如果是获取天气预报那么应该突出“获取”，第一个单词应该是动词,for example:get
b.采用小驼峰命名法
c.接口地址是后端人员编写的，这行就不要写了
d.参数和返回的数据一律小写
e.如果返回值有图片地址的话，应该是个路径而不是图片名 for exampl：picname:"./file/weather/real.jpg"
H. 前端本地开发和服务器部署的架构怎样设计合适
在 Application Virtualization Server Management Console 中创建服务器组之后，可以使用以下过程向该组中添加服务器。注意 服务器组中的所有服务器必须连接到相同的数据存储。
如果您有一个数据库的使用频率非常高，而且由于这些数据库经常发出更新请求而导致群集复制器过载的话，您需要考虑使用多个群集复制器。在一个服务器中运行多个群集复制器，可以同时将新的更改复制到其它服务器中。
如果一个群集复制器在把更改复制到一个数据库时太忙，会有另外一个群集复制器把更改复制到其它的服务器。这样，通过共同分担复制负荷的方式，多个群集复制器使得数据得到快速的更新并能严格的保持同步。
I. 前端开发的技术文档怎么写
可以从项目背景，功能模块，目录结构，接口列表来写，还可以配合jsdoc自动生成各个js文件的详细文档
J. 微服务架构下，进行前后端分离，前端怎么写
分离后的前端，不再是一个简单的HTML文件，已经是一个独立的应用系统。除了要考虑页面的数据渲染展示，还要用工程化的思想来考虑前端的架构，前后端的交互和数据安全等事情。
RESTful接口交互
前后端分离之后，更多的是采用RESTful风格的接口与后端进行数据交互。
REST是“呈现状态转移（REpresentational State Transfer）”的缩写，一种API的架构风格，在客户端和服务端之间通过呈现状态的转移来驱动应用状态的演进。
在 REST 样式的 Web 服务中，每个资源都有一个地址。资源本身都是方法调用的目标，方法列表对所有资源都是一样的。这些方法都是标准方法，包括 HTTP GET、POST、PUT、DELETE，还可能包括 HEADER 和 OPTIONS。
RESTful的API设计，使得后端通过接口向前端传递数据，数据的格式通常是JSON这种通用的格式。对前端来说，只要后端返回过来的是RESTful的数据就行，不管后端是用Java写，还是用python或PHP，拜托对后端的依赖，做到前端系统的独立。
工程化构建
Nodejs不止可以用来做前端服务器，在开发阶段，它也能发挥很大的作用。
前端生态的发展，是围绕着Nodejs进行的。用npm来管理项目依赖，可以很好的维护和运行在Nodejs环境上。
打包工具grunt、gulp、webpack和rollup等，都是运行在nodejs上，再结合语法编译、打包部署等插件，将应用输入成一个完整的应用。
如果你使用了Angular、React或Vue框架，或者你使用浏览器暂时还不兼容的ES6语法，还需要在应用打包前用babel将语法编译成浏览器可识别的ES5的语法。
SPA
SPA是单页Web应用（single page web application，SPA）的简写，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
像Angular、React或Vue就是为了SPA而设计的，结合前端路由库（react-router、vue-router）和状态热存储（rex、vuex）等，可以开发出一个媲美Native APP的Web APP，用户体验得到了很大的提升。
当然，SPA也不是完美的，也不是适合所有的web应用，需要结合项目和场景来选择。
SPA有如下缺点：
初次加载耗时增加。可以通过代码拆分、懒加载来提升性能，减少初次加载耗时。
SEO不友好，现在可以通过Prerender或Server render来解决一部分。
页面的前进和后端需要开发者自己写，不过现在一些路由库已经帮助我们基本解决了。
对开发者要求高，由于做SPA需要了解一整套技术栈，所以，要考虑后期是否有合适的人选进行维护。