今天完成了什么：

了解什么是组件化；

看js基础；

收获了什么：

什么是组件化开发？

1、页面上的每个 独立的 可视/可交互区域视为一个组件；像例子中，把header，main，footer独立出来就是把他们当成一个个的组件；

组件化开发有什么优势？

1、每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；

组件化的开发的最有价值的地方就是就近维护原则，每个开发者都将清楚的知道，自己所开发的维护的功能单元，其代码必然存在于对应的组件目录里，在那个目录下能找到有关这个功能单元的所有内部逻辑，什么样css样式，js啦，HTML页面结构啦，都在这个文件里，当需要修改的时候，直接去所对应的文件夹中找就好了！

2、由于组件具有独立性，因此组件与组件之间可以 自由组合；

3、页面只不过是组件的容器，负责组合组件形成功能完整的界面；

4、当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

5、系统功能都被分支到独立的模块和组件中，开发者之间不会产生开发时序的依赖，大幅提升并行的开发效率，并且允许随时加入新成员认领组件开发或者维护工作；

为什么要使用组件化开发？他有什么优势？

1、每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；（重点） 组件化的开发的最有价值的地方就是就近维护原则，每个开发者都将清楚的知道，自己所开发的维护的功能单元，其代码必然存在于对应的组件目录里，在那个目录下能找到有关这个功能单元的所有内部逻辑，什么样css样式，js啦，HTML页面结构啦，都在这个文件里，当需要修改的时候，直接去所对应的文件夹中找就好了！

2、由于组件具有独立性，因此组件与组件之间可以 自由组合；

3、页面只不过是组件的容器，负责组合组件形成功能完整的界面；

4、当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

5、系统功能都被分支到独立的模块和组件中，开发者之间不会产生开发时序的依赖，大幅提升并行的开发效率，并且允许随时加入新成员认领组件开发或者维护工作；

组件化（页面的一部分 如header/footer）

页面上每个独立的、可视/可交互区域视为一个组件；

每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；

组件具有独立性，因此组件与组件之前可以自由组合；

页面只不过是组件的容器，负责组合组件行程功能完成的界面；

当不需要某个组件，可以替换或者删除；

组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏这些都视为组件，不同的页面根据内容的需要，去盛放相关组件就可以组成完成的页面。

模块化和组件化的好处就是复用。除了复用还有个好处就是分治，我们可以在不影响其他代码的情况下按需求修改某一独立的模块或是组件； 

如果CSS代码量比较庞大的，会出现这么几个问题： 

1、无法快速确切的知道一个类的作用； 

2、无法快速确定一个类在哪里被使用； 

3、新增一个类是否会造成冲突； 

为了解决以上问题，可以将页面的每一个功能模块（）作为一个独立的组件，然后对组件的内容进行合理的命名（比如BUTTON），从而有助于确定一个CSS代码和相关页面结构的功能，

SASS文件组织

CSS预处理器的特点之一是可以把你的代码分割成很多个文件，而且不会影响性能。这都要归功于Sass的@import命令，只要在你的开发环境下，你调用不管多少文件，最终将编译出一个CSS样式文件。 多个文件中开发，最终合并输出一个文件

为什么要创建文件夹？

在家里，你也不会把所有的纸张放在一个盒子里。你可能会使用一个文件夹。一个用于房子上，一个用于银行，一个用于账单等等。 你在创建CSS的架构的时候也应该如此：你不只是把所有的Sass文件放在一个文件夹下，你会将他们分类。

明天计划：

完成任务；