[深圳|结业弟子]JS-徐炜|2018年05月25日的日报-技能树.IT修真院

发表于： 2018-05-25 21:42:58

2 583

一、今日完成的情况

1、任务十二。上午重写了任务六的页面。

2、总结任务十二，梳理深度思考。

3、准备任务十三，查看分离样式表等知识点。

二、明天的计划

1、上午再熟悉熟悉小课堂的PPT和演示demo，下午要讲课了有点紧张。

2、做任务十三，重写任务七。

三、遇到的问题

暂未遇到疑难问题。

四、收获

1、深度思考：开发过程中应该遵守哪些编码规范和class命名规范？

规范的内容很多，就不一一列举了，下面整理一些自己在任务中容易犯的规范上的错误。

（1）代码又臭又长：应尽可能提高代码模块的复用，样式尽量用组合的方式。

（2）单位使用不规范：往往没有去掉小数点前的“0”，例如：0.8rem应写成.8rem。

（3）16进制颜色代码通常都使用了全称，有些颜色代码是可以缩写的，能缩写的就尽量缩写，提高用户体验为主。

（4）为选择器命名不规范：当使用长名称或词组命名时，可以使用中横线划分开来为选择器命名。

2、深度思考：那种规范才是最好的规范？

符合web标准,语义化html,结构表现行为分离,兼容性优良；页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。简而言之：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。这样的规范可以称为好的规范。

3、分离样式表：拆分样式表成模块、组件和元素三部分，其中组件是模块的集合，模块是元素的集合，元素是最小的代码片段。例如页眉是组件，它包括了导航栏和logo模块，导航栏的菜单元素，logo的图片和文字元素。

4、模快化：

（1）划分为JS模块（独立的算法和数据单元）：浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，DOM操作(dom)，工具函数(utils)，以及组件里的JS单元。

（2）CSS模块（独立的功能性样式单元）：栅格系统(grid)，字体图标(icon-fonts)，动画样式(animate)，以及组件里的CSS单元。

（3）UI组件（独立的可视/可交互功能单元）：页头(header)，页尾(footer)，导航栏(nav)，搜索框(search)。

（4）页面（容器）：首页(index)，列表页(list)，用户管理(user)。

任务名称：CSS-TASK-12

成果链接：任务十二

任务耗时：5月24日-5月25日，耗时2天。

技能脑图：

个人脑图：

官网脑图：

任务总结：

1. 任务进度符合预期，未延期。任务十二和任务十一一样，还是使用scss对任务五和六的两个页面进行重构，基本没有遇到太多的问题，在做这个任务的过程之中，同样使用到了sass相关的基础知识，例如变量、继承和嵌套。
  做完任务，梳理了一下深度思考：
  （1）那种规范才是最好的规范？
  符合web标准,语义化html,结构表现行为分离,兼容性优良；页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。简而言之：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。这样的规范可以称为好的规范。
  （2）开发过程中应该遵守哪些编码规范和class命名规范？
  规范的内容很多，就不一一列举，下面整理一些自己在任务中容易犯的规范上的错误。
  （1）代码又臭又长：应尽可能提高代码模块的复用，样式尽量用组合的方式。
  （2）单位使用不规范：往往没有去掉小数点前的“0”，例如：0.8rem应写成.8rem。
  （3）16进制颜色代码通常都使用了全称，有些颜色代码是可以缩写的，能缩写的就尽量缩写，提高用户体验为主。
  （4）为选择器命名不规范：当使用长名称或词组命名时，可以使用中横线划分开来为选择器命名。
2. 脑图对比分析：基本符合官网预期。
3. 任务中遇到的疑难问题，任务较为简单，未遇到疑难问题，一些简答的问题，通过查找资料和求助师兄均得以解决。