前端组件化演进之路

栏目: jQuery · 发布时间: 5年前

内容简介:在一个页面中我们可以把页面的一部分拆成一个组件,可以是一个按钮或者是一个导航栏。在一开始编写代码的时候还没有组件这一说,慢慢地我们从开始编写面向过程的代码到面向对象的代码再到组件化的代码,一步步进化到组件。以一个Todo List为例:代码示例:
前端组件化演进之路

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

面向过程

以一个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官网上的截图我们可以看到代码中也有继承,也有render函数,其实在写组件的都是要去继承类并且去实现类里的方法,就是在写面向对象的代码。


以上所述就是小编给大家介绍的《前端组件化演进之路》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程之道

编程之道

杰弗雷﹒詹姆斯 / 清华大学出版社 / 1999-05 / 18.00元

本书出自美国一位善于进行哲学思考、有十多年工作经验的程序设计师——杰弗雷·詹姆斯之手,他以一种敏锐的眼光审视着发生在程序设计室里的各种各样的小故事,并利用古老的道家思想对其进行分析。简单的故事蕴含深奥的道理,是本书的最大特色。本书语言优美,比喻生动,可读性极强。一起来看看 《编程之道》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具