千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  HTML5技术:什么叫组件化开发

HTML5技术:什么叫组件化开发

时间:2017-12-27 15:55:48     来源:千锋视频教程 作者:左老师

  什么叫组件化开发?回答这个问题之前,我们先来科普何为组件化? 这个问题伴随着HTML5技术的发展,一直都没有一个官方的定义。那么我认为的组件化就是: 组件化就是跟你的业务逻辑封装一段可重用可复用的代码。这些代码包含HTML代码,更重要的是包含高度复用的逻辑。记住,组件化的本质就是封装。

HTML5技术:什么叫组件化开发

  纵观当前前端比较流行的几大框架,他们的核心思想都离不开组件化,因为我们前端程序必须实现组件化,只有这样,才能大大的提高我们的项目开发速度,才能让我们的项目变得可轻松的维护,可任选的迭代。Vue 框架也是实现组件化,通过Vue.component来实现组件化开发,一个组件就是一个微型的vm实例对象,react更不用说,就是高度组件复用和组件内聚,同样,现在用typescript编写的angular4.0框架,也是如此,angular4.0可谓是组件化开发的核心代表。这些趋势,都表面组件化开发是未来前端开发的发展趋势,我们前端程序员必定都在实现组件 高耦合低内聚的 的路上奋斗着。

  组件化开发,我们都已经明白了,就是开发包含template(模板),style,script等组合起来的代码块。我们可以通过一张图来完美解释一下:

  这张图就可以清楚的给大家解释,基本的组件的构成。我们在进行前端app 的开发时候,可以把任何的一个html 代码封装成一个组件,当然,你这么做的前提是你要实现组件的可复用性,比如说,你可以封装 具有特殊酷炫动画的 button 组件,那么你在任何页面需要有实现这样的动画的时候,你 就通过你自己定义的方式去引入你的这个button组件。

  同样的,我们来分析一款app,就比如分析外卖App饿了么。饿了吗是实现组件化开发的代表,它使用的是自己开发mint-ui的组件框架。我们可以饿了么看做是 很多组件组合起来的大的app,它的首页包含很多 item 组件,当然包含下拉和上滑组件,而且肯定包含很多button组件,也有对应的订单组件。下面这张图已经包含了饿了么app组件化开发的大致思想吧。

  那我们现在来仔细聊聊,什么是组件化开发呢?相比大家已经有自己心中的见解了吧。当你想实现封装的逻辑的时候,想提高你的工作效率的时候,这个时候你就有必要想想通过封装组件,把对应的业务逻辑绑定到视图元素里面去,来实现高度复用和低内聚的代码逻辑。

  组件化的实现就是 分而治之。页面逻辑过于复杂,便将页面分为很多个业务组件模块分而治之,这样的话维护人员每次只需要改动对应的模块即可,以达到最大程度的降低开发难度与维护成本的效果,所以现在比较好的框架都会对组件化作一定程度的实现。所以组件化开发更多的着眼于长远发展而使用的一种架构思想,组件一般是与展示相关,视觉变更与交互优化是一个产品最容易产生的迭代,所以多数组件相关的框架核心都是View层的实现,比如Vue与React的就认为自己仅仅是“View”,虽然展示与交互不断的在改变,但是底层展示的数据却不常变化,而View是表象,数据是根本,所以如何能更好的将数据展示到View也是各个组件需要考虑的,从而衍生出了单向数据绑定与双向数据绑定等概念,组件与组件之间的通信往往也是数据为桥梁。这里很多大型架构都有自己的管理数据的架构,比如说vuex,redux等等。

  最后我们如果想在我们的项目中来实现组件化开发,我建议各位可以先去学习一些关于模块化思想的框架,比如seajs和requireJs,这2个插件是帮助我们实现javascript逻辑模块化的插件。而且我们可以去接触学习组件化开发的核心代码,vue和react,去学习人家的对应的UI组件库,如mint-ui,element-ui,ant-design等等,学习人家是如何封装和实现组件逻辑的复用的,到时候大家也会很轻易的编写组件化开发的代码的。

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱