Web前端产品设计思想（4年软件开发经验）

• 下面的4张图，就是我想表达的产品设计思想了
  （详细的文字说明，在4张图的后面）

• 【1】 汽车小零件 => 第三方开源通用组件
• 【2】 车门 => 二次封装的产品组件
• 【3】 一种造车方案 => 一份模板组件
• 【4】 一种优质车型 => 一种业务界面

产品设计思想说明

• 1、目前前端产品开发所有3大模板语言vue、react、angular都是通过调用来源于 npm 平台的第三方开源组件，所以可以说都是在二次封装或二次开发组件，从而使得让产品快速成型；
• 2、所以我们开发产品的思想，不应该同人家开发开源组件的思想一样，顶多借鉴部分可用思想，关键一定要舍弃会影响产品关键因素的思想；
• 3、产品的关键因素：界面设计统一性、用户操作方式统一性、组件封装统一性；围绕这3个统一，来逐步迭代产品，从而提高用户体验
• 4、为了更好得说明我的思想，我以生活中比较常见物件为例：汽车 和 组成汽车的零件；
• 4.1、造汽车零件的思想，是一种通用的思想，比如造一颗小螺丝，那思想自然是尽可能让更多的车辆可以用上，这样这颗小螺丝才更有价值；
• 4.2、造汽车那就不能像造螺丝一样的思想了，比如造一辆车的车门，总不能想着这个车门尽可能多的去适用多种车型吧，一种车门自然只能定制化得去适用于一种车型，这样才能尽可能去提高车辆的外观，造车门要有高复用、定制化的思想，即一种车门的造就方式要能完全满足一种车型，那其他的部件如车窗、马达之类的都是如此，这样才能实现高效的批量生产一种车型；
• 5、说完了案例，再说回产品，前端产品二次封装或二次开发的组件好比造车门的方法，而组件中带有的第三方开源组件好比通用零件，我们二次封装或二次开发的组件不需要像第三方开源组件一样通用，为了更好得提高产品质量，我们二次封装或二次开发的组件更应该关注的是复用性，即这个组件可以尽可能重复使用，且简化使用方式，然后用二次封装或二次开发的组件去组成模板组件，这模板组件就好比一种车型的组装方案，所以模板组件自然也是只需要针对某几种界面，一种界面就好比一种车型，当然如果只针对一种页面自然定制化性能更优，好比一种车型的组装方案，只需要使用几种车型，如果一种车型的组件方案只针对一种车型进行定制化，那造出的这种车型自然更优，毕竟高度高定制化虽然通用性差，但质量更优越；
• 6、有了以上思想，那无论开发什么前端产品，都只有这几种实现方式了：
• 6.1、子组件封装多个第三方开源组件，且包含自己特有的功能(即数据、函数)，且向外界提供部分接口，来获取或调用自己内部的功能；
• 6.2、模板组件（即父组件）封装多个二次封装的子组件，通过子组件的接口调用子组件内部数据和函数，来封装自己特有的功能(即数据、函数)，提供出业务接口让业务层去具体实现，并为了提高模板复用性，模板组件之间是存在继承关系的，需高度统一需求的有关子组件和功能，一定封装在基层模板组件中，一些特有需求的有关子组件和功能封装到该基层模板组件的子模板组件中，高度封装模板组件，将UI参数化；
• 6.3、业务页面继承模板组件，实现部分函数，并传递部分参数，从而高效批量搭建界面；
• 6.4、最后再在业务层页面中抽离出业务脚本，把对接后台接口的业务逻辑独立起来(比如后台数据的转化逻辑等)，这样后续再需要开发一个类似的页面的时候，只需要复制相似的业务页面的代码做些调整，这样又进一步提高的开发效率；