序言
最近加入朋友的一个网站建设项目，算是一个申请审批流程控制网站，我们一共两个人，基本算是一个前端一个后端。我主要是负责的前端的页面。因为我是中途加入的，我加入的时候小伙伴把网站的初始的页面，数据库和后台处理做好了。我加入之后主要做的是已有网页的优化和新功能网页的搭建。
当前项目的进度
网站整体有5个主要的角色和4个大的功能点。5个角色在审批流程控制点上依次连接完成一个大的审批功能点。直到上周我们已经完成了一个完整的审批流程功能点，并且release出了一个初试版本。
网站建设所用到的技术或插件
后台
开发背景
整个网站没有使用任何框架（Angular，Vue等），一开始是我小伙伴一个人在做，他的客户（之后都称呼客户）是他的朋友想把他们已有的一套管理流程做成网站管理的方式（以前他们是人工加纸质表的方式来执行和管理整个流程）。一开始整个项目的工期不定，打算是尝试性地做，并没有一个明确的交付期。后来因为某些原因，整个网站的一个完整的功能点的交付被提上了日程，我也是在期间加入这个项目的开发当中，主要负责前端页面的设计。我加入的时候小伙伴已经把一个功能点在后端逻辑上实现了，前端有个大致的页面。之后在两个星期的开发过程中，遇到了一些问题，也做了一些思考和总结，所以在这里做一些记录。
从头开始 — 需求
一切项目的开始都是源于问题，有了问题才有了需求，项目中的功能点都是来自于需求，所以做好最初的需求分析和管理是后门项目执行的必要保障条件。
对于这个项目，总的来说我们一共三个人。我和小伙伴算是开发，而我小伙伴的朋友就是这个项目中的客户。在这次开发中，整个项目变动特别多，需求变更点也特别多（单单针对现在已经release出来的完整的一个功能模块），导致我们代码的变动和页面结构变动也特别多。在release之后回过头来看我们整个实现流程，个人总结有下面这些方面导致上面出现的问题。
客户
因为整个完整的功能点涉及到四个大的部门和五个角色，而我们的客户（小伙伴的朋友）只在其中一个部门，也就只了解一个部门的具体需求点。对于其它部门和角色所涉及到的需求点他并不是很明确，这就导致在设计和实现其它部门的功能项的时候基本属于边做边改的形式
以打印为例，刚开始并没有特别说明打印这个功能，到开发到接近尾声的时候客户才提出打印是一个重要的功能点，而且在实现的时候也对打印功能的使用对象和打印内容做了多次更改。这就导致在开发的周期变长，不能按照原有的计划release成果物
开发
从开发的角度来说，因为客户本身是对整个网页的展现没有概念，他关系的是功能点有没有在网页成果物中实现。因为人员关系（只有我们两个人，一开始也只有我小伙伴），在一开始没有给客户一个起草的界面成果图，所以之后基本属于做好了一个成果物之后再给客户看，然后客户有什么需要更改或者增加的地方，我们再做相应的修改。由于客户与我们对产品认知之间有断层，直接导致我们的成果物做了多次修改的结果
在完成了这个功能点的开发之后，也从这两个方面做了一些总结和反思：
客户的角度
从 敏捷 开发方式的角度来讲，在需求分析阶段（discovery）应该尽可能的把相关的stakeholders加入需求探索的阶段，或者需要有个PO(product owner)，制定出一个共同认可的product backlog
从当前的项目角度讲，把所有涉及到部门和角色的stakeholders加入到这个项目中是基本不可能的。所以我们能做的就是在开发下一个新的功能点之前，我们会尽可能地通过通话的方式和客户确认关键的功能点
开发的角度
网站（产品）的建设和设计应该要在切合客户的实际使用环境和面向的客户群体和规模的基础上执行（我们这次一开始就没有把使用环境这些因素考虑进来）
产品最初始的原型设计和UI设计应该是面向客户的成果物的最初的showcase
开始动手 — 开发
单从这次开发来讲，我们没有最开始的设计图，所以不需要切图，直接是在模版的基础上做定制化开发。我使用的编辑器是sublime text3
下面是开发过程中的一些总结：
编码
编码可能是容易被忽略的一个细节。特别是对中文网站，如果没有正确统一地设定编码方式，后面的开发过程中可能会遇到一些很难发现原因的问题。
除了在页面中设置
<meta charst='utf-8'>，文档的编码方式也应该要留意，应该保证所有项目文件都有统一的编码格式。我之前遇到的一个问题就是在使用ajax传送数据时，出现数据格式有错误，导致传输失败。后来调查发现就是因为js文件的编码方式不正确导致的。
事务
虽然事务这块属于后端了，但是这次我也写了一些后端的内容。刚刚好碰到这一块的内容。一个完整的功能点如果涉及到多个DML sql语句，就应该考虑使用事务来保证数据是被正确地完整地更新或者修改。如果其中任何一个sql语句出现了错误，都应该执行回滚操作，并且在前端讲失败结果反馈给用户，这样才能保证数据的一致性。
代码的复用
在写js的时候因该尽量去思考自己写的代码的可复用性。如果一个方法在多个地方被调用，只是使用的数据有所不同，就应该考虑把这个方法写成公共方法，这样既能增加代码的可维护性和可读性，也能减小代码文件的体积。
打印
这次开发中客户有一个打印的需求，为了实现需要的打印功能，还是花了好一些时间。我们要实现的是网页局部打印，并且打印的结果的排版也要适当。
如果直接打印输出的话整个打印输出的格式基本不可用。打印预览这块，IE和Firefox都没有预览功能，需要安装插件,Chrome有打印预览功能（打印预览会对之后说的打印css调试有帮助。
对于局部打印的实现，我使用的是Printthis.js这个插件，可以很方便地实现局部打印的功能。但是对于排版控制，我还没有找到直接可用的库或者插件之类的，所以只能自己手写css代码来控制打印布局。
主要用到的css属性是
@media print{}和@page{}以及linktag的media属性中文字体
中文字体的字体文件一般都很大，如果直接使用在网站里，那加载的时间会很长。所以一般是只把网站中涉及到的字体筛选出来，然后再使用包含这些字体的中文字体包。
字蛛可以很方便快捷地完成上面的操作。