专栏首页web前端教室先行者计划群视频 每周一课 -- 什么是前端组件?(文字简版)

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

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

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

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),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅浅的聊一下React

    image.png 要写一个组件,当然是从需求开始设计它。但要组件的边界,就是这个组件,它的最多能做什么?一个通用的组件,它也是有倾向性的,不可能适合完全所有的...

    web前端教室
  • web前端架构-新一次的尝试机会

    上一家电商公司烧了半年,有点烧不动了,我就赶紧跑了。 感谢上一家电商公司,让我有机会操刀搞了一次电商交易类网站的架构体验。 这次换了一家公司,做语音媒体的。就是...

    web前端教室
  • 【课堂笔记】先行者 3.0版本的vueJs课程的第三次课

    今次是vue课程的第3次课,内容大体上是: 一、事件; 在vue当中,事件是使用v-on指令,它可以定义一个方法来调用。 语法: <input v-on:...

    web前端教室
  • 构建Vue.js组件的10个技巧

    Vue.js提供了两种加载组件的方法:一种在Vue实例全局,另一种在组件级别。两种方法都有其自身的优点。

    前端知否
  • 浅浅的聊一下React

    image.png 要写一个组件,当然是从需求开始设计它。但要组件的边界,就是这个组件,它的最多能做什么?一个通用的组件,它也是有倾向性的,不可能适合完全所有的...

    web前端教室
  • Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战...

    六小登登
  • Vue案例引发的「嵌套组件」通信的简单方式

    我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。

    六小登登
  • React Native项目组织结构介绍

    代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组...

    xiangzhihong
  • 浅谈组件化

    我之前在做业务需求的时候,很多的个性化需求并不能快速响应,实现后有时也很难保证系统的可阅读性。不过好消息是,我今年在做京东内容领域的组件化改造和能力输出,之前的...

    公众号_松花皮蛋的黑板报
  • 直播中台iLiveSDK终端框架演变之路

    2. 公司内业务平台发展到一定的用户量后积累了一定量的平台UGC、PGC,需要借助直播能力利用平台的生产和消费者提升变现能力。部门之前的Now直播产品具有丰富的...

    jarrywang

扫码关注云+社区

领取腾讯云代金券