工作项目总结[2017.06.05]

最近主要做了两个项目，一个现有需求虽然不算大项目，但将来会发展成一个统一网站的项目，所以整体框架需要保证扩展性，另一个项目是一个小型基金详情分享页面，但在之后又因为各种原因需要新开发一套样式排版和内容都有些许不同的页面供native内嵌在app中使用。两个项目都使用Vue进行开发，其中第一个项目原有react版本，因我们其他项目大多用Vue且大家对Vue较熟悉，故迁移到Vue方便将来做统一网站。

1. 搭起可供大型项目使用的框架

1.1 整体结构

在第一个项目中，主要的注意点是怎么搭起一个可供大型项目使用的框架。整体的结构是通过vue-router控制不同功能页面之间的切换，在同一个功能页面中，使用动态组件进行动态渲染。同时通过vuex统一管理数据。目录结构上，在components中，home页放在最外层，然后有个controls文件夹用于储存业务无关的控制型组件（如按钮、提示框等），其他文件夹则各自存放着不同业务功能的页面，各个文件夹中可设立widgets文件夹用于存放与这些页面有关的小组件。vuex方面，有个models文件夹，存储着各个module的数据结构，vuex文件夹中modules根据功能或者业务划分文件，如登录功能就会有个user文件用于储存用户信息。state，mutation，和action都可以写在同一个文件中，mutationType写在单独的文件中统一写成管理起来，这样多人协作的时候不容易产生命名冲突。可以加一个plugin，其中对某些符合条件的mutation做localstorage的保存，这样每执行一次这个mutation则会自动保存到localstorage中。

1.2 细节控制

在main.js中全局注册onerror事件，捕获所有未捕获的异常。对logger进行封装，分成error，warn，info，debug，log几类。error用于报错，warn用于不是很要紧错误，info包含一些有意义的信息，debug用作开发中调试，log尽量不用。在logger中要针对环境做判断，在开发和测试环境可以打出log，但上线之后应该是没有log的。关于一些请求需要统一添加头，可以设置拦截器进行统一拦截加头，不用写的到处都是。其余webpack配置基本使用的是vue-cli提供的那一套，另外使用preprocess对环境进行判断设施参数。webpack中在prod文件里要注意修改publicpath，其他设置也要做些微调来实现线上部署。具体的等过段时间我研究透了webpack专门写一篇关于webpack配置的文章。

1.3 总结

目录结构要清晰可扩展，将各个业务功能相关的东西归类管理起来。对代码要有所控制，从错误处理到发送请求都要把控好，保障整体代码的运行是可控制可追溯的。将报错、发送请求等封装起来，不要写的到处都是，尽量在vuex的action里发送请求处理数据。要考虑到多人协作的可能，常用的方法提到utils，几个组件有相似的逻辑移入mixin。拆分组件，组件之间不能有业务逻辑的依赖，组件暴露的接口要设计的清晰，让组件可以分配给不同的人分工合作。用命名空间管理各个页面的css，避免冲突。

2. 已有的小项目扩展出新的样式、功能及排版

2.1 小项目的原先结构

原本小项目的结构也比较清晰，没有配vue-router，只有一个简单的页面，将每一小块数据的展示都拆成了小组件，在最外层的App.vue中发送所有请求并处理数据，将处理好的数据传入各个组件中，最后拼出一个完整的页面。

2.2 新的需求

供native用的页面中，各个小组件的样式都有些许变化，不光是字体大小颜色的改变，其中牵扯到了html结构的改变和svg画图样式的改变。最下方的基金交易数据展示由原本的全部铺开展示改成点击每个标签进入二级页进行单独展示。二级页由于进入退出的样式原因打算新开一个webview，当作一个独立的页面进行展示，故每个页面需要独自获取数据并进行数据处理最后展示。整个页面还新加了两个模块，一块是纯粹的数据展示，一块有个svg画出的环形图，其中要实现环形出现的动画及手势左右滑动tab的切换。

2.3 着手修改

由于原本的页面还要用于微信分享等活动，不能更改，所以整体决定引入vue-router，然后新开一个页面分配一个router，供native使用。components中，最外层新开两个vue文件，一个将原本App.vue中的逻辑全部移入，保持原本的代码，一个新开用作新的页面开发。然后，将原来的组件分成可复用的（只有样式变化，只需覆盖样式即可）及一半可复用的（逻辑不变，排版样式都有变）。可复用的提出放入common文件夹，一半可复用的放入share文件夹来保证原来的部分不会发生改变，剩下的native专属的文件都放入app文件夹。接下来就是提取逻辑，在原来的代码中，有很多逻辑，比如获取数据、处理数据，都是可以复用的，将这些逻辑全部提入mixin中，在相应的文件中引入即可。而针对不同的逻辑相同的方法，则在mixin中提供一个空方法，在相应的组件中进行覆盖。一切的修改都要确保原先的代码不受任何影响。最后，开发新的模块和独立的二级页面，给所有的独立页面都配上router。将所有模块拼装起来形成native的页面。

2.4 总结

小项目的结构设计过程中也要保证组件拆分互不影响，这样可大大提高组件复用的可能，将可以拆成组件的功能模块都拆成组件，最后再拼成页面。增加新页面时一定要确保原先的代码不会有所改动，可以将某些代码移出，但整体来说应该和原先的代码一模一样。目录结构要保持清晰，外层的文件可以引用内层的文件，内层的文件可在其他文件夹中互相引用，但内层文件不要引用外层文件。注意文件归类，使目录结构清晰，方便他人review和修改。修改后的目录结构应该能很清晰的找到什么是旧的页面，什么是新的页面。两个页面要相对独立。