发表于： 2018-11-01 09:57:32
1 793
今天完成的事情：任务13
明天计划的事情：熟悉js,完成任务14
遇到的问题和收获如下：
1、什么是模块化，这是百度给的解释：“模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。”
我的理解就是一个页面就像是由拼图拼出来的。而拼图就是模块。
2、模块化的优点：提高代码的重用率，减少代码冗余，易维护，容易找到bug，降低耦合，第一条提高代码的重用率很重要。
3、css面向对象，这一点真的是要看一下，一开始只知道概念，不知道怎么用，开了这个后真是豁然开朗，犹如打了胖师兄一顿，心中一片明亮，换句话说就是贼爽。
（1）封装，封装字面上理解就是包装的意思，也就是尽可能的隐藏内部细节，我觉得就是提取公用的样式写在一个类里，封装是实现CSS模块化的最基本要求，封装成的各个单元就是基本的CSS模块，可灵活用于组建页面的各种显示样式。
（2）继承，子集元素继承父级元素的属性，因为css层叠样式属性，在子集元素中设置也可以覆盖父集元素的属性。继承是实现css模块化的关键。
（3）多态主要用于同一模块在页面的不同部分或者不同页面之间呈现出不同的样式。
另外，我没有完成的点击目录，左侧栏浮出的设计，我找到方法了，不过要用到我还不是很熟悉的js了：
原有内容基础上添加了两个div
<body>
<div "leftContent">...</div>
<div id="rightContent">...</div> /* 注意此处没有class属性 */
</body>
将body设置为body { position: relative; }
然后
.left-content {
position: absolute;
top: 0; right: 100%; bottom: 0; left: 0;
}
.right-content {
position: absolute;
top: 0; right: -75%; bottom: 0; left: 75%; /* 注意此处left与right值是互补的，如果不写right部分，文字会挤到左边，不会像图上那样文字内容很少 */
}
然后为目录添加点击事件，先检查#rightContent是否有类.right-content，如果有则移除，如果无则添加，这样就不会对原来的样式产生破坏，只在新添加的类下新增一些样式，因为背景颜色有变化、且为一些元素增加了圆角
<script>
function helloLeft() {
var rightContent = document.getElementById("rightContent");
var leftContent = document.getElementById("leftContent");
if (rightContent.classList.contains("right-content")==true) {
rightContent.classList.remove("right-content");
leftContent.style.right = "100%";
}
else {
rightContent.classList.add("right-content");
leftContent.style.right = "25%";
}
}
</script>
返回列表
评论