设计具有OOP思想的前端组件

晚上吃晚饭时，我与同事聊天，了解了我对前端组件设计的理解，然后比较了在地铁上封装组件的不同react / vue / ng2方法. 我感到有些启发.

我相信每个人都有经验: 因为它与业务紧密相连，所以前端代码很容易朝着面向过程而不是面向对象的开发模型发展. 对于常见的imgSlide，对话框和其他高频多路复用组件，大多数组件是根据编写html，css并将事件添加到dom节点的过程开发的. 当遇到公司的需求迭代，UI优化和其他场景时，相关的学生必须处理CSS样式覆盖和与JS的逻辑兼容性. 这样oop设计，类似雪球的代码开发方法与前端组件的维护成本就成线性关系. 当然，相关的开发者也将越来越纠缠不清，最终构筑的构想将会出现.

对于高度封装和组件化的框架，例如React，Vue和ng2，由于框架的限制，组件开发将遵循相同的规则集. 框架中的状态，道具，输入输出等概念已基本包含了相关场景. 那么，如何在不使用任何框架的情况下以服务器端渲染模式为主体，为PC和移动主站编写高质量，可维护且高度可扩展的组件？

根据MVC的功能模块，一个组件可以分为视图+模型+控制器. 我们可以将一个大型组件视为多个子组件的集合，每个子组件都具有MVC的三个元素.

对于子组件，其模型可以分为两部分. 它的一部分可以自己维护（例如颜色，文本等），而与组件通信有关的另一部分数据则通过父组件以以下形式分发给子组件以进行UI同步: setState或eventEmitter.

像react的render函数或vue的组件一样，要用上述功能封装一组组件，我们需要为该组件定义设计规范.

根据OOP的编程思想，可以定义以下步骤.

哑巴组件:

1. 定义所有子组件都是一个类，都需要通过构造函数实例化以初始化UI和内部状态.

2. 定义所有子组件实例必须具有digestUI方法，以便提供父组件调用来同步其自己的UI.

3. 定义所有子组件实例共享父组件的setState方法，以通知父组件根据新模型同步组件UI.

父组件（控制器）:

1. 在父组件被实例化的同时，所有子组件也被统一实例化.

2. 为所有子组件实例提供setState方法，以公开子组件的方法条目以将消息传递给父组件.

3. 当子组件执行setState通知父组件时，请遍历子组件的digestUI方法，并根据模型同步子组件UI.

根据上述功能进行的父子组件划分和功能封装可以使所有子组件相互隔离，并且所有UI同步都依赖于父组件进行均匀分布. 同时，在这种开发模式下，开发人员还可以扩展父组件的初始数据模型，并向setState添加订阅回调（类似于redux），以在实例化父组件时扩展组件的功能，而无需需要修改原始逻辑.

没有代码，没有道理，但是到了深夜，所以请不要先发布基本代码.

最后oop设计，在开源社区中有许多关于使用JS原型来实现OOP编程模型的实现. 同时，ES6 / 7还引入了class关键字，以方便JSers根据OOP进行编程. 但是，要在项目中实际使用OOP并正确使用它，则需要进行一些设计和抽象实践. 使用这么多框架，作者仍然对facebook产生的反应情有独钟. 对于OOP，反应真的很好. 无论是继承（组件继承React.Component的方法），方法封装还是抽象，您都可以在每个componenet中找到相应的表现形式. 最后，应该注意的是，本文上面有关组件设计的所有讨论基本上都可以在react和redux中找到阴影. 我相信react和redux的实践将加深对OOP和设计模式的理解.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-242530-1.html