发表于： 2018-08-20 22:14:50
4 655
今天完成的任务
a.导航栏的拆分理解
b.header的编写
c.组件库的学习。
遇到的问题: 啥都别说了：一图流
中间还是出了很多问题，开始理解错了，一开始想的是用<div>来做按钮，然后用伪类来做点击导出ul效果。后来发现这个办法是错误的，因为如果设置了display:none；的话，伪类是不起作用的；于是又换方式，改用input + label来搞定。因为后面修改了，导致全局都要重新维修，磕磕绊绊弄了大半个小时，元凶是 input + label 的联系后，要做一个点击关联，也就是 input + 关联下面的 Ul,不是同级父元素，也不相邻，关联不了，所以开始我做在上面的Input按钮就必须弄下来，跟Ul相邻并有同级父元素；这就导致了第二个问题，因为按钮和上面的Logo不是同一级了，导致如果用浮动来干的话会把Ul也带上去，所以这给按钮的定位已经不能用浮动了，要换成absolute来定位，这样就达成想要的效果了。
收获：
html的模块化、css的模块化，以及js的模块化，这三者我们称为（web）前端模块化
回顾一下我们最开始学的css
个简单的手打的列表模块。
但是这样写会有一些隐患：
- a.按照这个顺序写下去，选择器会越写越长，造成书写累赘；
- b.越来越长的选择器容易使我们混淆dom的空间顺序，想象如果有好几个平级的选择器（如.box .list .item a与.box .list .item span），我们可能一时看不出这两者的关系，是父子还是兄弟元素？
- c.维护困难，假设我们需要重构这个box，在.box和.list之间加入一层.wrap，在.item与a和span之间加入一层.block，那简直就是个灾难，我们要谨慎地找到确切的位置，然后再找到所有匹配的、长长的选择器，在合适的位置全部做修改；
- d.我们很难从做到复用，假设我们在另外一个页面也需要这个box，那我们就需要把所有跟box相关的部分复制粘贴一份，而当这个box需要修改的时候，我们可能要重新找出所有用到这个box的地方，然后又是复制粘贴一份很是麻烦
总结一下大致可以分成一下几个特点：：
- 选择器繁琐冗长；
- 命名冲突；
- 层级结构不清晰；
- 代码难以复用；
这个时候就要运用前面学习的代码规范来做规划
分成几下几点
a.复用
要实现代码复用很简单，我们只需要提供一个公共css库，来存放我们的公共样式以及公共模块即可：然后我们在其他的css文件中引用这个common.css，这样就实现了代码的复用，只要是想全局共享的样式和模块，只要在这里添加进去就可以了。
b.规范
编程规范使得我们的项目在一定程度上是可维护的。比如针对类名污染制定了命名规范，针对选择器指定了书写选择器所要遵循的规范，等等。这些规范都在一定程度上约束了css的书写，使得项目不至于混乱。
c.框架
框架是指构成页面的基础结构，它是一个页面的筋骨。我们假设有个页面index.html，它的整体最外围表现为一个class为.g-index的div，然后它由页头（.g-hd）、主体（.g-bd）、页脚（.g-ft）三个部分组成：这样我们就大概能描绘出一个页面的基本轮廓了。紧接着我们来给它补充一些模块。
d.模块
模块是页面上数量最多，同时也是最重要的部分，它是代码复用的主体部分，是一个个按照功能划分的区域，如导航栏、轮播图、登录窗口、信息列表等等，模块之间相互独立，分布在页面上，嵌在框架的各个位置上，组成一个丰富多彩的页面。
e.原件
元件是独立的、可重复使用的，并且在某些情况下可以作为模块的组成部分的一种细颗粒。比如一个按钮，一个logo等等。某种意义上说，它其实可以等同于模块，因为它们两者的区别只是规模不同而已。模块更强调一个功能完整的整体，而元件则更强调独立性。
f.重构
有了命名规范，我们可以对common进行一次改写
返回列表
评论