什么是模块(Modules) ?
模块是一个特别的独立单元,可以与其他模块组合以形成更复杂的结构。
在客厅里,我们可以认为电视,沙发和墙艺术是模块。它们聚在一起创造一个可用的房间。
如果我们把其中一个拿走,其他的能继续工作。我们不需要电视,也可以坐在沙发上等等。
什么是组件(Component) ?
模块是由组件组成的。没有组件,模块会不完整。
例如,沙发由框架,室内装潢,腿,靠垫和后枕组成,所有这些都是必要的组件,以使沙发能够正常运作。
徽标模块可以包括副本,图像和链接,这些每个都是组件。没有图像的标志是残缺的,没有链接标志是也是不完整的。
Modules vs components
有时很难说某样东西是一个组件还是一个模块。例如,我们可能有一个包含徽标和菜单的标题。这些是组件还是模块?
通过经验,你会找到感觉吧。如果不对,就把组件更改成模块,这很容易。
这只是理论,我们一起构建三个不同的模块。在这样做的时候,希望能够覆盖编写CSS时候考虑的大部分事情。
1. 创建一个购物篮模块。
为了简洁,我们把这个购物篮简化。购物篮中每个产品会显示标题,并且可以把它移除。
购物篮模板可能是:
<div class="basket">
<h1 class="basket-title">Your basket</h1>
<div class="basket-item">
<h3 class="basket-productTitle">Product title</h3>
<form>
<input type="submit" class="basket-removeButton" value="Remove">
</form>
</div>
</div>
CSS 代码:
.basket {}
.basket-title {}
.basket-item {}
.basket-productTitle {}
.basket-removeButton {}
2. 创建预览订单模块
接下来,我们将构建一个预览订单模块。这个模块会在结帐时候显示,它与购物篮有些相似。比如,它有标题,可以显示产品列表。
但是,它俩样式不同,并且预览订单中的产品不能被移除。
首要的是,复用购物篮的模板和样式。它们即使有相似,但却不同。
— 未完待续—
原文链接:https://www.cnblogs.com/lvyongbo/p/7112071.html
本文来源 爱码网,其版权均为 原网址 所有 与本站无关,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源。
© 版权声明
文章版权归作者所有,未经允许请勿转载。