如何实现前端组件化

[玻璃]

组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性。 采用模块式开发方式，单个组件包括模板，数据结构，程序，样式四部份。组件的接口表达了由该组件提供的功能和调用它时所需要的参数。组件是可以单独开发、测试。允许多人同时协作，编写及开发、研究不同的功能模块。 高内聚，低耦合是软件工程中的概念，它是判断代码好坏的一个重要指标。高内聚，就是指一个函数尽量只做一件事。低耦合，就是两个模块之间的关联程度低。add()、mul() 一个函数只做一件事，它们之间也没有直接联系。如果要将这两个函数联系在一起，也只能通过传参和返回值来实现。 按照高内聚、低耦合的要求，一个函数应该尽量只做一件事。所以我们可以将函数中的另外两个功能：验证和转换单独提取出来，封装成一个函数。 模块化，就是把一个个文件看成一个模块，它们之间作用域相互隔离，互不干扰。一个模块就是一个功能，它们可以被多次复用。 页面成为了一个容器，组件是这个容器的基本元素。组件与组件之间可以自由切换、多次复用，修改页面只需修改对应的组件即可，大大的提升了开发效率。最理想的情况就是一个页面元素全部由组件构成，这样前端只需要写一些交互逻辑代码。虽然这种情况很难完全实现，但我们要尽量往这个方向上去做，争取实现全面组件化。 自定义元素有四个生命周期：connectedCallback: 当自定义元素第一次被连接到文档 DOM 时被调用。disconnectedCallback: 当自定义元素与文档 DOM 断开连接时被调用。adoptedCallback: 当自定义元素被移动到新文档时被调用。attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。生命周期在触发时会自动调用对应的回调函数