完成情况：

1. 学习前端组件化，了解什么是组件化，以及它的作用和优点

2. 完成任务14，上传提交，等待审核

遇见问题：

暂未遇见什么问题

任务收获：

1.     了解什么是组件化？

将一个大且复杂的项目分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。简而言之，就是讲代码 化繁为简

2.     前端为什么要要求组件化？

将代码提取成组件库，能提高前端的开发效率，同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

3.     前端实现组件化的好处是什么？

一个项目，不可能只由一个人来完成，肯定是需要团队合作来共同完成的，当多个人合作一起来实现同一个页面的设计时，不可能都同时在同一个页面文件上来写代码，也不可能等待上一个人完成自己相应的任务下一个人才开始拿来在这个的基础上继续做，这个时候，组件化就体现出了它的优点，将一个页面分解成不同个组件，不同的人负责不同的组件设计，每个人都是自己做自己负责的内容，互不影响，最后只需要通过在同一个css文件里面导入每个人做的组件css文件，就能实现共同对页面的设计，

当一个页面设计完，不可能就不用管了，肯定后期还要在原基础上做相应的修改，这个时候在一个拥有很长的内容的css文件里面去找到相应的 html页面需要修改的部分的 css代码，是不是很麻烦（嗯，，，，，这句话自己都读到有点懵，原谅我语言表达能力不行），如果这里使用组件化，直接去找到相应的组件的css文件，进行修改就行了，无形之间给你节约时间。

如果某天，老板突然说了句：“这个地方不需要了，直接删掉”，你又得去css文件里找到相应的内容，然后删掉。删了之后，万一老板突然有说一句：“还是加上好看些，删了的话没那个好看”，呃，，，，，，刚才才删掉，还没有备份的，估计遇到这种情况有点想拿刀去砍你老板，但是也只是想想，你还得重新去写代码，这不是增加多余的事做嘛。但是，如果使用组件化的话，只需要在集合导入组件的css文件里面将导入需要删掉的那条代码注释或者删掉即可，如果需要恢复，重新加上这么一条代码即可，

我就理解的前端组件化优点就这些，但是肯定不可能只有我说的这么点优点，总之，使用组件化是一个很不错的选择，

4.     根据我的代码，具体说说我是怎么实现组件化的？

如图1

这是我本来的代码文件，三个页面的html分别都是只用了一个css文件来设计的，

三个页面的css代码，如果拆解成组件库放在同一个文件夹下的话，会容易搞混淆，不像上面一样一眼就能分辨出来，所以我先做的就是将不同的页面分别放到不同的文件夹下，如图2

总共三个页面，我就拿主页页面来说

如图3

在css文件夹里面有个叫modules的文件夹，里面的内容就是我拆解出的首页的组件库（貌似直接将index.html文件、index.css文件和modules文件夹放到同一个文件夹里面就行了，当时做的时候还想复杂了点，在简而易看懂的情况下，文件夹越少越好，但是如果现在重新改的话又是一个浩大工程，这里改了代码里面还得去修改地址，下次注意就行）

上面已经将index.css代码全部拆解成了几个组件，下面说说怎么导入

首先是在index.css文件里面使用import导入组件文件，如图4

然后在index.html文件里面通过link导入index.css文件就行了

如图5

细心的会发现，这里多了三个文件，其实这三个分别是页面的最顶上联系方式、紧接着的导航菜单栏以及最下方的footer拆解出来的组件文件，如图6所示部分

为什么要单独放到外面来呢，因为三个页面都需要这三个组件文件，如果每个页面都导入自己modules文件夹里面的话，那么三个页面的modules文件夹里面都得有这三个css文件，而如果将这些公共的文件部分拿出来，三个页面都只是导入这三个文件，岂不是少了这部分代码的两倍量，

以上，是我对前端组件化的理解，至于对不对，或者部分地方是否理解正确，我也不清楚，（手动滑稽，，，）

下一计划：

开始任务十五，争取这周早点完成css全部内容，剩下时间再重新好好温习巩固一下，下周一开始下一轮的学习