发表于: 2018-08-20 22:14:50
4 654
今天完成的任务
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进行一次改写
评论