学习一 模块化的“高内聚低耦合”
高内聚：尽可能每个模块成员方法只完成一件事（最大限度的聚合）；
低耦合：减少模块之间的交互复杂度（接口数量，参数数据）
一个完整的系统，模块与模块之间，应尽可能的使其独立存在（模块与模块之间的接口，尽量的少而简单）。且每个模块都尽可能的独立完成某个特定的子功能。
如果某两个模块间的关系比较复杂的话，最好首先考虑进一步的模块划分，这样有利于修改和组合。
降低耦合度的方法
1、 多使用模块化编程的思想，在编写之初，模块需要做什么功能、以后需要做哪些扩展，需要长时间的考虑。
2、模块的功能化分尽可能的明确。也可以参考生成动态库的原则，删除一个模块(在不调用的情况下)不影响到程序的正常运行。同时暴露出清晰的接口方便其他人调用。
3、尽量少使用全局变量。除了设备配置外，尽量不要使用其他全局变量。模块内可使用仅在模块内有效的变量，引出接口供其他地方使用。
4、同时遵循一个定义只在一个地方出现。
5、多用设计模式，比如采用MVC(模型-视图-控制)的设计模式就可以降低界面与业务逻辑的耦合度。
6、少使用类的继承，类属性和方法的声明少用public，多用private关键字。多用接口隐藏实现的细节。
增强内聚度方法
1、模块只对外暴露最小限度的接口，形成最低的依赖关系。
2、只要对外接口不变，模块内部的修改，就不得影响其他模块。
3、删除一个模块，应当只影响有依赖关系的其他模块，而不应该影响其他无关部分。
模块化的原则
我的原则是无论是做哪方面的程序设计，在前期规划之前，即便花很久的时间，也需要细化为几个方面。把复杂的问题分解为单独的模块后。个人认为模块化设计应该遵循以下几个主要原则：
1．模块的功能要尽可能独立，模块的对外接口要清晰明了。
模块的独立性原则表现在模块完成独立的功能，与其他模块的联系应该尽可能得简单，各个模块具有相对的独立性。
2．模块的规模要适当。
模块的规模不能太大，也不能太小。如果模块的功能太强，可读性就会较差，若模块的功能太弱，就会有很多的接口。太小的模块尽量做成工具类的接口，除了方便以后使用还能简化代码。如果模块功能太强，尽量做到模块的分解（见第三点）。模块功能尽量使用回调或是switch case的嵌套来实现。这样后续开发人员可以在不读懂全部代码的情况下，也能进行有效的维护或是扩展，同时又不对其他分支功能造成影响。
3．分解模块时要注意层次
在进行多层次任务分解时，要注意对问题进行抽象化。在分解初期，可以只考虑大的模块，在中期，再逐步进行细化，分解成较小的模块进行设计。
学习二 Flex和Grid
经常用到flex，明明也学过grid但很久没用了，重新学习一下。
Flex——有弹性的盒子 Flex是一种一维空间的设置，可以设置子级元素在同一行或者同一列的样式。
Grid——将网页划分为网格 Grid是二维平面的网页布局工具。
grid-template-columns（列）和grid-template-rows（行）定义网格的行和列。grid-area定义网格区域，grid-column和grid-row等属性控制当前网格项（网格中子元素）的位置
A{
display: grid;
grid-template-rows: repeat(2,200px); /* 列的划分 */
grid-template-columns: 200px 200px 200px; /* 行的划分 */
/* 这里的值，既可以写具体的xxpx，又可以写xxfr（可以理解为xx份） */
gap:24px; /* 间隔 */
grid-auto-flow: column; /* 逐列填充 */
justify-items: center; /* 在水平方向居中 */
align-items: center; /* 在垂直方向居中 */
flex-shrink: 0; /* 防止元素被挤压缩 */
}
/* 某个元素跨列 */
a{
grid-column-start: 1;
grid-column-end: 3;
/* 等同于grid-column: 1/-1; 第一条和最后一条网格线之间的区域 */
}
或使用**grid-template-areas**和**grid-area**结合
.item {
display:grid;
grid-template-rows: repeat(4,200px);
grid-template-columns: 200px 200px 200px 200px;
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar content content content"
"footer footer footer footer";
}
.item1 {
background-color: rgb(167,224,8);
grid-area: header;
}
.item2 {
background-color: rgb(197,35,109);
grid-area: sidebar;
}
.item3 {
background-color: rgb(0,0,227);
grid-area: content;
}
.item4 {
background-color: rgb(226,227,9);
grid-area: footer;
}
