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. 组件化

当应用中的功能多是多组件的方式来编写的，那这个应用就是一个组件化的应用