web项目设计文档_谈Web项目框架的搭建和设计

当前web端框架日益丰富，有react、vue、angular等，而且使用方式也比较容易上手，只要根据说明文档走你就能搭建起一个自己的框架。但是这样简单搭建起来的框架就真的可以用于项目开发吗？答案当然是NO。其实这只能算成搭建开发环境的一部分，就像web开发人员在电脑上安装node.js一样，因为这种框架的开发规则的并不是我们设计的，而是用的外部第三方的。引用完这个第三方框架后，剩下的内容才是真正能够展示你架构设计和实现能力的地方！

当然有些人会问，第三方框架引入后还剩下啥？不就是功能实现了嘛，没啥好设计的。这样想的人其实不在少数，我遇到的好多前端开发人员虽然嘴上没这样说过，但是他们思想和开发工作其实都在证明。

引入第三方框架后还有很多事情要干，基于react、vue等框架的思想，我们要开发的是组件而不是平铺开来流水式实现整个页面，也不是把流水式实现的代码切割一下装作是组件，然后做简单的拼接形成页面。所以要根据项目的具体需要设计一套组件实现方式。组件有了我们的页面呢？既然有了一套组件，我们的页面最好是通过配置化的方式组装实现，这样的话开发效率也就自然提升上去，可扩展性应该也能做到最好。总结下来除了引用第三方框架，前端架构设计更重要的内容应该是结构设计和代码设计。

首先是结构设计，好的工程结构可以提高项目的可阅读性，使用起来方便从而提高开发效率。下面是我对一个项目结构的理解：

然后是代码设计，JS的语法导致前端代码的书写比较随意，因此为了提高项目的质量，架构设计中必须加入代码设计。目前typescript是可以提高前端代码书写规范的重要工具，推荐使用。代码设计可以包括以下几个方面：

1.一定要定义类似于强类型语言的数据结构，在定义变量和函数参数时，使用数据结构做类型限制。这样可以让对象的内容清晰明了，不用看代码也知道对象中有那些属性。

2.一定要定义静态常量，比较时使用静态常量作比较。

3.由于前端主要是做数据展示，因此可以根据项目特点定义数据处理中心，数据处理中心的目的主要是为了定义格式化函数，这样数据展示就走一个格式化函数，再次修改展示格式只需要改一个地方，避免全局搜索。

4.在开发过程中要注重每个细节的设计实现，多用配置化的方式实现页面的展示，这样可以提高开发效率和扩展性。比如可以通过配置化方式设定页面布局，可以预先定义好所有列然后通过配置化方式设定每个表格的列，可以通过配置化方式定义导出文件的列信息等等。

5.在做字段信息配置时，考虑在字段信息中添加format、isInclude等属性方法函数，做格式化、是否包含等逻辑处理。在定义回调函数时，可以采用nodejs回调函数的设计思路，把isError作为第一个参数，只有isError是null时，才认为是正常返回，否则为异常。

6.可以根据业务模块的特点为每个业务模块定义各自通用的数据处理方法，在这个层次中定义这些函数方法既不会过于抽象，也可以提供适当的通用性，在适当的取舍中为开发提供便利。

7.如果项目允许的话，可以全局统一定义页面操作行为，为每个操作定义行为信息，使用的时候只需要把操作行为代码传入，整个系统都可以根据根据行为代码找到对应的行为信息，这样可以抽象出所有操作，数据在系统中流转时可以随时获取处理规则。

8.react中的静态成员变量和静态成员函数，在做多个组件实例的数据共享时会有大的用途，请注意使用。

9.发送请求时可以定义三个状态，pending、success、failed。同时对应的定义三个回调函数，onPending、onSuccess、onFailed，这样可以让数据的处理更加方便，切记不要只定义一个回调函数，这样会导致返回的数据不知处于什么状态，还要不停地做逻辑处理分析，而且不够清楚明了。每个状态地回调函数可以允许业务强相关组件做相应地展示处理。