前端组件开发

前端Webapp中的组件是指设计为通用的软件，用于构建更大的app。这些成分有多种表达形式。

在基于组件的开发中，最重要的是组件可以用来形成其他组件，富文本编辑器就是一个很好的例子。它由按钮、下拉菜单和一些可视化组件组成。另一个例子是HTML5上的视频元素。它还包含按钮和一个可以从视频流中呈现内容的元素。

为什么要构建组件？

·高内聚力

我们组织一些相关的函数并封装所有内容。对于组件，它可能是相关的功能逻辑和静态资源：JavaScript、HTML、CSS、图像等。这就是我们所说的内聚。这将使组件更易于维护，这样做后，组件的可靠性将得到提高。同时，它还可以使组件的功能清晰，增加组件重用的可能性。

·可重复使用

您看到的示例组件，尤其是Web组件，更关注可重用性。功能清晰，实现清晰，API易于理解。它自然会促进组件重用。通过构建可重用组件，我们不仅维护了DRY原则，还获得了相应的好处。

这里有一个提醒：不要太努力地构建可重用组件。您应该更加注意app中需要的特定部分。如果稍后出现相应的需求，或者组件确实是可重用的，那么就多花一点时间来重用组件。事实上，开发人员喜欢创建可重用的功能块（库、组件、模块、插件等）。太早做会让你以后痛苦不堪。因此，吸收基于组件的开发的其他好处，并接受并非所有组件都可以重用的事实。

·可互换的

具有定义良好的函数和良好组件的API可以很容易地更改其内部函数实现。如果程序中的组件是松散耦合的，事实上，只要遵循相同的API/接口/约定，一个组件就可以很容易地替换另一个组件。

·可组合的

基于组件的体系结构使将组件组合成新组件更加容易。这种设计使组件更加集中，并更好地利用其他组件中构建和公开的功能。无论是向程序中添加函数还是制作一个完整的程序，都可以对更复杂的函数进行建模。这是这种方法的主要优点。

前端组件的可重用性

组件化的核心意义无非是提取对重用真正有价值的东西。什么样的东西具有重用价值？

公共样式的可重用性也很容易识别，因此引导、基础和语义也很流行。然而，它们不是纯样式库，也有一些小的逻辑封装。关于业务逻辑的重用有很多争议。一方面，许多人不同意业务逻辑也需要组件化。另一方面，如何去组件化这个东西也需要考虑。除此之外，还有大量的业务接口，它们显然具有低重用价值，基本上没有可重用性。然而，在许多方案中，它们仍然是“组件化的”，使它们成为“不可重用的组件”。组件化的基本目的不一定是提高可重用性，而是提高可维护性。

对于具有一定规模的Webapp，在管理方面将所有内容“组件化”将更加方便。例如，短代码也比长代码更可读，因此许多语言建议“一个方法不应超过一定的行数，一个类不应超过特定的行数”。

此时，我们将重点关注不同框架/库对UI层组件化的处理，并发现有两种类型，模板和函数。模板是一件非常常见的事情。它使用HTML字符串来表示接口的原始结构，然后通过替换数据来生成真实的接口。有些生成目标HTML，有些生成各种事件的自动绑定。前者是静态模板，后者是动态模板。此外，一些框架/库更喜欢使用函数逻辑来生成接口。早期的ExtJS、当前的React（它可能仍然在内部使用模板，并在外部提供组件创建接口的进一步封装-jsx）等。这种实现技术的优势在于，不同平台上的编程体验是一致的，甚至可以为每个平台封装相同的组件。调用者可以很容易地编写代码，可在Web和不同的Native平台上使用。霍