发表于： 2019-07-10 21:02:57
1 903
今天完成了什么：
小课堂内容；
任务14头部部分；
遇到了什么问题：
修改任务14的时候弄了很久才页面布局整体上用width：80%的宽，也就是100%的屏幕有80%的宽度，然后用margin：0 auto让盒子居中这样就产生了类似bootstrap的效果，左右俩边留白；
收获了什么：
了解下组件库部分内容：
组件库有哪些作用？
利于开发，维护，便于写作开发，增加开发效率。
组件库的本质是什么？
组件库就是界面设计常用控件或元素的集合
为什么要做组件库？
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用， 而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长， 经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
组件化的初衷并非提高一致性、利于团队合作这些高大上的目的，而是人类进步的第一生产力——「懒」。 消灭重复劳动是提高效率的主要途径，勤劳如小蜜蜂的设计师也不例外，那么组件化就是无论交互前端开发还是UI设计中我们不得不思考的问题。
①从开发者角度来看： 在CSS上，保证代码上的模块化，具有独立作用域； 内部的布局，字体的变化(不包括颜色这类是不可控的)只由其最外层容器影响； 在容器不受外部影响变化的前提下，内部容器的样式不被外部所影响。极大提高工程编译速度,
②进行组件化拆分后，每个业务或者功能都是一个单独的工程，这个单独的工程可以独立编译运行，拆分后的工程通常都比较小，代码量也比较少，我再也不用像以前编译一下得等待好几分钟了。
从公司角度来看： 业务划分更佳清晰，新人接手更佳容易，可以按组件分配开发任务； 项目可维护性更强，提高开发效率； 更好排查问题，某个组件出现问题，直接对组件进行处理； 开发测试过程中，可以只编译自己那部分代码，不需要编译整个项目代码。
优点：
1极大提高工程编译速度
2业务模块解耦，有利于多人团队协作开发
业务组件之间不能相互引用，每个组件都把对应的业务功能收敛在一个工程里，彼此互不打扰。 在多人团队里，每个人只负责自己的业务模块，他对业务功能的增删改查，都只限定在自己的这个业务模块里，不会影响其他人的业务，他代码质量的好坏也只会影响到自己的业务模块；对测试来说，也十分方便，大部分情况下，我们只需要着重测试修改过的业务组件即可，而不用老是进行全部回归测试。
3组件化是功能重用的基石
业务组件类似一个个积木一样，我们可以用积木搭建出不同的房子，同理我们也可以创建多个不同的APP。我们只需要维护好每个组件，需要用到该组件的功能时，一建引用集成就可以了。
缺点：
1:组件化开发前期可能要花费更多的时间来进行模块拆分；
2:一个人的小项目完全没必要组件化开发，那样只会给自己带来更多的工作量；
3:组件化可能会带来更多重复的代码；
4:组件化需要良好的架构设计，包括怎么拆分业务，组件之间怎么通信等等，
5:需要有个高水平的架构师统筹全局，经验不足的同学盲目进行组件化反而会适得其反，带来更多的麻烦；
布局（.g-） 语义 命名 简写 文档 doc doc 头部 head hd 主体 body bd 尾部 foot ft 主栏 main mn 主栏子容器 mainc mnc 侧栏 side sd 侧栏子容器 sidec sdc 盒容器 wrap/box wrap/box 模块（.m-）、元件（.u-） 语义 命名 简写 导航 nav nav 子导航 subnav snav 面包屑 crumb crm 菜单 menu menu 选项卡 tab tab 标题区 head/title hd/tt 内容区 body/content bd/ct 列表 list lst 表格 table tb 表单 form fm 热点 hot hot 排行 top top 登录 login log 标志 logo logo 广告 advertise ad 搜索 search sch 幻灯 slide sld 提示 tips tips 帮助 help help 新闻 news news 下载 download dld 注册 regist reg 投票 vote vote 版权 copyright cprt 结果 result rst 标题 title tt 按钮 button btn 输入 input ipt 功能（.f-） 语义 命名 简写 浮动清除 clearboth cb 向左浮动 floatleft fl 向右浮动 floatright fr 内联块级 inlineblock ib 文本居中 textaligncenter tac 文本居右 textalignright tar 文本居左 textalignleft tal 垂直居中 verticalalignmiddle vam 溢出隐藏 overflowhidden oh 完全消失 displaynone dn 字体大小 fontsize fs 字体粗细 fontweight fw 皮肤（.s-） 语义 命名 简写 字体颜色 fontcolor fc 背景 background bg 背景颜色 backgroundcolor bgc 背景图片 backgroundimage bgi 背景定位 backgroundposition bgp 边框颜色 bordercolor bdc 状态（.z-） 语义 命名 简写 选中 selected sel 当前 current crt 显示 show show 隐藏 hide hide 打开 open open 关闭 close close 出错 error err 不可用 disabled dis
了解了下nec的命名规范；
例如class=“g-hd”表示头部，css文件里是.g-hd{};
统一语义理解和命名
明天计划：
任务14走起；
返回列表
评论