前端组件化演进之路

DC_er 发布于2019-05-23 17:32 / 411人阅读

摘要：在一开始编写代码的时候还没有组件这一说，慢慢地我们从开始编写面向过程的代码到面向对象的代码再到组件化的代码，一步步进化到组件。将页面上的两个部分拆成两个对象，那其实这两个对象就是两个组件。

组件

在一个页面中我们可以把页面的一部分拆成一个组件，可以是一个按钮或者是一个导航栏。在一开始编写代码的时候还没有组件这一说，慢慢地我们从开始编写面向过程的代码到面向对象的代码再到组件化的代码，一步步进化到组件。

面向过程

以一个Todo List为例：

代码示例：

这是一开始实现的jquery代码，将button和li的click事件的回调函数抽出来多带带成为一个函数。当页面的代码量增长为上千行时，代码的维护性会很差，需要先理解上千行代码才敢继续增加代码。这时候可以用面向对象的编程方式来解决这个问题。

面向对象

将input和button拆成todoList对象，ul为todoItem对象；
html页面里面使用todoList对象：

todoList对象：

todoItem对象：

每个对象只管理自己的属性和方法，只做自己这个对象的dom渲染和绑定事件；各个对象之间不会互相影响，大大降低了耦合性。将页面上的两个部分拆成两个对象，那其实这两个对象就是两个组件。在对象的代码中有dom展示、有js逻辑代码,还可以在其中加入css样式，这就相当于事一个组件了。

jQuery实现组件化编程

在jquery类上扩展一个继承方法：

有一个组件类Component为父类，这个父类有init、render、bind的空方法：

紧接着在todoList和todoItem里去继承Component并且去覆盖父类里的render和bind方法，在子类的构造函数里去调用父类的构造函数。

React组件

从React官网上的截图我们可以看到代码中也有继承，也有render函数，其实在写组件的都是要去继承类并且去实现类里的方法，就是在写面向对象的代码。

idc机房托管超融合服务器前端组件前端组件维护通用前端组件前端组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7359.html

新风向！成就了Android，热门框架排第一，你还是不够了解它！

摘要：由于长期苦恼于第三方库选择的广大开发者而言，这也是谷歌为我们提供的一盏明灯。手机淘宝构架演化实践淘宝相信都不陌生了从年开始，从万增长到超过亿，面临的问题包括研发支撑所需要解决的事情各不相同。 ...

sixgo 2021-09-10 10:51 评论0 收藏0
2017年TOP100summit15位大咖担任联席主席甄选最值得学习的100个研发案例

摘要：以下将分别从五大技术专场维度介绍本届峰会的部分联席主席与精选案例。天时间集中分享年最值得学习的个研发案例实践。从万维网到物联网，从信息传播到人工智能，20年间软件研发行业趋势发生了翻天覆地的变化。大数据、云计算、AI等新兴领域逐渐改变我们的生活方式，Devops、容器、深度学习、敏捷等技术方式和工作理念对软件研发从业者提出更高要求。由麦思博（msup）有限公司主办的第六届全球软件案...

andot 2019-06-26 18:17 评论0 收藏0
精华阅读第 9 期 |滴滴出行 iOS 客户端架构演进之路

摘要：架构都是演变出来的，没有最好的架构，只有最合适的架构最近，滴滴出行平台产品中心技术负责人李贤辉接受了的采访，阐述了滴滴的客户端架构模式与演变过程。李贤辉也是移动开发精英俱乐部中的一员，所以本期重点推荐了这篇文章。「架构都是演变出来的，没有最好的架构，只有最合适的架构！」最近，滴滴出行平台产品中心 iOS 技术负责人李贤辉接受了 infoQ 的采访，阐述了滴滴的 iOS 客户端架构模式...

Eirunye 2019-06-24 17:49 评论0 收藏0