新(移动端)旧(pc端企业级应用)公司前端技术与侧重点的对比及一些感悟

又一个月没写博客了，原因是这个月刚入职了一家新公司，主要做的是移动端，即 hybrid 型 app，从pc端要移动端的转向，总有些不适应，经总结，主要体现在几点需注意的地方

native 与 js 的函数交互，如在移动端网页下冷启动app进入特定原生页或h5页面；

微信等分享 sdk 配置文件及函数的注入；

适应性的布局；

快节奏的开发周期（毕竟运营都是拍脑袋的不是），别说像 pc 端一样模块性的测试了；

canvas 与 svg 的需求明显增多，毕竟是 to C 了，特别是裁图，截图，动画等；

模块化及组件化明显削弱，可能因为是项目太小的原因，以后可能会改善；

以上就是我个人觉得与 pc 端中大型系统级项目完全不一样的地方，中大型pc端系统级项目更注重的是：

新旧框架的全局函数交互，比如我之前做的就是 vue 与 jq 的多项函数交互，体现在后期我们使用 vue 进行组件封装，但是 jq 也要是能用的，在一个数据驱动视图与命令驱动视图的前提下，要将两个不同的开发思路结合起来，公用组件及配置例如：全局通知的 toast 组件、单页与 jq 多页的 iframe 封装、全局对话框组件 dialog、全局通知组件、导航菜单的函数公共回调交互等

相比起移动端的动画，pc 端系统级项目更注重的业务流程的清晰性，当一个单页业务非常复杂时，组件间的交互会异常的多，这就使得组件类型增多、各组件小动画增多，随着数据频繁的 crud 操作，页面重绘次数呈几何增加，这时我们必须舍弃不必要的动画，保证用户操作中数据的实时性与流畅性的体验，而不是视觉体验，没做过系统级的人在这可能很难理解，为什么会卡，那么我告诉你，一个页面抽象了30个接口，你可能多少能理解？或者java接口给我的数据结构已经是直接丢实体过来了。。。预留的20个字段都用完了，你是否能多少明白点呢。

在精不在于快，相比于移动端只是作为运营活动的需求，pc端更多的是业务层次上的复杂性，也就是数据结构与业务组件复用的难度，在保证开发节奏的前提下，我们必须得对组件做二次封装以保证它能够成为业务组件，否则怕是你要写死。。。至于数据结构为什么说复杂呢？因为需求改的太频繁，导致扩展字段不断增加以及表设计的不规范，越往后做你会发现数据结构越来越复杂，往往跟你一开始前端定的数据结构天差地别，重构数据结构就也要函数式起来了，否则你是不是一个单页要写800行代码？

业务代码与框架代码的分离，webpack已经帮我们做到了，你只需要多看文档就可以完成，如 commonsChunk的拆分打包，起码你得把 vue、elementUI、业务代码拆分吧？js是单进程单线程，但是浏览器是多进程多线程啊兄弟，多线程多少还是有用的；开发环境与生产环境下的配置会有较多的不同，这也是需要注意的一点，但是vue-cli理解后，你就发现并不复杂了，你完全可以借助webpack与vue-cli来做这些操作，比如在 vue-cli 的 dev 与 prod 下分别做文章，或者利用 html-webpack-plugin 插件利用模板渲染添加配置数据。

测试的复杂度不同，在以往的pc端，我们一个模块得测2周，当然bug就跟着同步改呗，我最多的时候累计了200个bug。。。改的我真是啊，虽然多是改 ui 与校验以及需求变更，但是在移动端，由于业务比较简单，基本就是由自己测试了，但是最大的不同是对安全性的要求，pc端由于我们做的主要是企业级的，所以都是内部应用，可能安全性上不会考虑太多，因为用的人少，但移动端就不同了，用户作弊是很恐怖的，你懂的吧。

总之各有各的优点与缺点吧，我暂时说不出哪个更优，突然做移动端，我的确有诸多不适应，可能来自于新公司、新团队、新的技术架构？但是我们知道在一个需要盈利的公司，技术其实是由业务所驱动的，所以大概看公司前景与走向比较重要吧~