简介
主要介绍传统编程模式的一点小问题,以及对Vue组件化的理解。
如果要编写一个页面,需要结构(html),样式(css),交互(js)。
- 如果上图,如果要编写第一个页面,需要html文件编写顶部、导航、内容、底部的html结构,并且引入渲染顶部、导航、内容、底部的四个css文件,最后引入控制顶部、导航、内容、底部交互的四个js文件,至此,页面1完成。
- 编写页面2,顶部、商品列表,底部,编写一个顶部、商品列表,底部结构的html文件,编写一个新的控制商品列表样式的css文件,并引入已有的顶部和底部的css文件,编写一个控制商品列表交互的js文件,并引入已有的控制顶部和底部交互的js文件,页面2编写完成。
但是这样会有一点小问题:
3. 为了让css和js文件达到足够高的复用率,需要把css和js文件写的粒度比较细,这样会导致有很多的css和js文件,并且会使得网页的依赖关系变得复杂(一旦所依赖的css和js文件达到一个数量级),不好维护。
4. 代码的复用率不算很高,主要指的是html代码的复用,因为像上面两个页面,顶部和底部的html代码重复了。
不过总的来说,传统的编程方式还是问题不大的。
介绍完传统的编程方式,再来讲讲vue的组件化。
使用vue组件化重新编写刚刚传统编程方式编写的两个页面。
- 第一个页面包含顶部、内容、导航、底部,这次不再编写html文件再引入对应的css和js文件了,而是编写四个组件,顶部组件、内容组件、导航组件、底部组件,然后直接进行组装,就形成了一个页面1,组件包含了:html、css、html以及其他的东西,直接把这些东西封装到一个组件里面,组件就是一个个页面,然后就像搭积木那样搭成我们想要的最终页面。
- 然后编写第二个页面,直接再编写一个商品列表组件,再将其与之前编写的顶部、底部组件像搭积木那样组装起来就是页面2了。
好处:
3. 依赖关系不再复杂,之后我们编写前端实际上编写一个个组件,然后将他们进行组装就行,比如我们想要一个页面3,包含顶部、导航、商品列表,都不用编写代码了,直接创建一个父组件,直接引入3个子组件,页面就编写好了。
4. 代码高度复用,你可以发现,连相较于传统编程方法,它连html代码都复用了。
组件的定义:
组件就是实现应用中局部功能的代码和资源的集合,代码指的是html、css、js,资源指的是音频、视频、图片等资源。也就是说一个组件就是一个局部功能的所有,注意,是局部功能,组件要划分得足够细才有较高的复用率,比如我编写了一个包含顶部和底部的组件,但是我的同事只要想顶部,那么我的这个组件他就复用不了了,因为他不想要底部,如果引入我的这个组件,就必须要有顶部和底部。