先行者计划群视频 每周一课 -- 什么是前端组件?(文字简版)

在今天同学们发我的作业中,我给一个同学回复说,你这不是组件化,只是一个效果的实现。他问我,那还要什么呢?我不是特别理解。

今天咱们先聊一下,什么是组件。这个东西其实没有一个正式的定义,说什么什么样就是组件,别的样的不是组件。没有的,没有这样的一个说法,一般来讲,我个人认为有以下这几种情况,

1,着重于具体业务的封装,不强调复用性。就是比如一个大方法,大函数吧,一个动画,一个购物车,一个页面路由,这都是针对具体业务的,拿到其它网站就没法用了。这些对于业务的组件化封装,目的为了可维护性。

2,第二个就是对于页面UI结构的封装,强调可复用性,可移植性,并且要求随插随用,例如一些JQ插件之类的。组件还有许多不同的分类方法,因为而异。但这二大方向却是不变的。

总体来讲,组件,就是一种对于DOM结构的封装,使用形式就是对外公开一些自定义的标签,在内部通过tpl定义的HTML模板,通过JS控制内部资源依赖的一个包。

这不是定义,只是说,关于组件你可以这么理解。为什么说刚才那个同学的作业,只是一个效果呢。因为第一它完全没有可移植性;第二他没有对UI结构进行一个封装;第三它的也没什么内部可言,它的资源的依赖都是完全暴露在外的。简单来讲,没有把它包起来,自然就称不上组件。

组件一般来讲,还是比较强调复用性,主要从以下几点来考虑,

1,基础逻辑功能。例如字符串处理,去空格,转义;

2,公共样式,模板,什么bootstrap之类的

3,调用方式标签化

4,数据中间件

5,组件的核心是DATA

1,这种组件基本都是UI层面的,它一般由模板和函数组成。

2,模板,就是用HTML来拼成无数据时的页面DOM结构,然后用JS函数插入数据的方法,拼接HTML字符串来生成真正的HTML。这期间还有各种事件的自动绑定。操作DOM无非增删除改查这些重复,这些都要自动处理,当data变动时,DOM也要跟着变动。未来的大方向就是把对DOM的直接操作变为一种调用组件的配置项。

3,一个可复用性强的组件,它在使用之前必然要经过一个配置的过程,配置的就是它自身与所处的网页的数据之间的对应关系。然后按照各种设计,与加载的数据关联之后,再通过数据的变化来更新自身的DOM结构。这就是所以的mvvm,双向绑定。

从现在看未来,以后应该是页面模板化,加载的是模块和组件。模块和组件再来加载数据,数据变化后去重新生成模块和组件,这样的一个双向改变的过程。当然这是我个人看法。以后很可能很多时候是在写各种组件的配置。

4,如果同一个组件,在同一个页面中出现多次,那它的数据加载方式怎么解决?例如一个地址加载下载列表页,你一个页面有多个,在不刷新页面的情况睛,它们之间的数据一致性怎么解决?这些下拉列表之间如何通讯?不能每个组件发起一个AJAX请求,这就只能是加一个store的数据中间层。在DATA和VIEW之间,所有的component都通过它去加载数据,然后让store去和服务端同步数据

5,刚才我们提了组件有各种实现方式,但核心依然是,“组织view层和data层之间的对应关系”。而不是关注DOM结构的实现。组件不是一个下拉列表的另存为。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-08-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

bigpipe性能优化

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 背景 当前网速越来越快,但是随着网页内容越来越丰富,其实我们打开网页...

28010
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。

6917
来自专栏Android机器圈

用shape画内圆外方,形成一个圆形头像

PS:很多人都有过这样的经历,想要在自己写的程序里,上传一张随便大小形状的照片在程序里显示都是圆形照片,或者是方形,或者是三角形,但是写代码又非常麻烦,这里就有...

51710
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native升级指南|v0.40+升级适配经验与心得

React Native作为一个有上千开发者参与的开源项目,自从2015年3月27日第一版发布以来到现在已经有147次版本发布了,平均起来几乎每周都会有新的版本...

3958
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到...

2916
来自专栏Rainbond开源「容器云平台」

云帮周更新日志(2017.05.01-2017.05.07)

1043
来自专栏知晓程序

如何获取小程序的 AppID,并关联公众号?| 小程序问答 #23

小程序管理员进入公众平台、使用小程序帐户登录后,点击左侧菜单中的「设置」,在「开发设置」一项,就可以查询到小程序的 AppID。

3862
来自专栏陈津的专栏

谈谈 React + Redux 的可复用性

本文主要介绍React + Redux 全家桶在团队业务开发实际使用中遇到的一些混合复用性问题、思考以及解决。

1.2K2
来自专栏思考的代码世界

Python网络数据采集之采集JavaScript|第09天

客户端脚本语言是运行在浏览器而非服务器上的语言。客户端语言成功的前提是浏览器拥有正确地解释和执行这类语言的能力。

4416
来自专栏沈唁志

怎么使用WordPress小工具添加新浪微博秀、一键关注等按钮

怎么使用WordPress小工具添加新浪微博秀、一键关注等按钮?其实这个也不算什么稀奇了,就是直接使用新浪微博的微博组件

2532

扫码关注云+社区

领取腾讯云代金券