22-Vue组件化编程-模块与组件
使用传统的方式编写应用
传统的方式,一般离不开前端的三大件(HTML、CSS、JS)
HTML:HTML是超文本标记语言(Hyper Text Markup Language)是用来描述网页的一种语言,负责网页的架构
CSS:CSS是一种层叠样式表(级联样式表、样式表),是⼀种标记语⾔,负责网页的样式,美化
JavaScript(JS):JS是运行在客户端的脚本语言,负责网页的行为
当网页中出现如下的顶部、导航、内容和底部区域时,通常一个HTML要对应四种CSS样式,以及四种JS行为
当出现一个新的页面,具有相同的顶部和底部,但不同的是有特定的商品列表,这是,一个HTML可以对应之前的顶部和底部CSS样式,以及JS行为,但要新建商品列表的CSS和JS。这里就会存在一些问题,依赖关系混乱,代码复用率不高(这里的顶部和底部的CSS和JS是存在复用的,谁用谁引入,但代码复用率不高主要体现在HTML里面的顶部和底部相应的代码,只能通过复制粘贴到另一个HTML里面)。
使用组件的方式编写应用
我们首先要了解组件是什么,组件就是实现应用中局部功能代码和资源的集合。代码指的是前端的三大件(HTML、CSS、JS),资源指的是组件里面的字体样式、音频和视频等资源。
在上面的案例中,第二个HTML的可以直接复用第一个HTML的header和footer组件,创建的商品列表组件中可以包含CSS、HTML、JS、字体样式、MP4和MP3等。
使用组件的方式,最直接好处就是:
1)代码复用率高
2)简化项目
3)提高运行效率
模块与组件
1. 模块
1)理解:向外提供特定功能的js程序,一般就是一个js文件
2)为什么:js文件很多很复杂
3)作用:复用、简化js的编写,提高js运行效率
2. 组件
1)定义:用来实现局部功能的代码和资源的集合(html/css/js/image等)
2)为什么:一个界面的功能很复杂
3)作用:复用编码,简化项目编码,提高运行效率
模块化与组件化
1. 模块化
当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用
2. 组件化
当应用中的功能多是多组件的方式来编写的,那这个应用就是一个组件化的应用