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

发表于： 2018-05-28 22:38:59

2 652

一、今日完成的情况

1、把昨天没写完的投票页面写完，接着把结果页面也写完，并提交任务十三。

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

二、明天的计划

1、准备开始任务十四、十五。

2、继续学习JS基础知识。

三、遇到的问题

暂未遇到疑难问题。

四、收获

1、深度思考：如何做默认样式重置?resetting 和 normalizing 之间有什么区别?

（1）CSS RESET：指的是在HTML标签在浏览器里有默认的样式。不同浏览器的默认样式之间也会有差别。这就导致我们在切换页面的时候，浏览器的默认样式往往会发生变化，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式，即“覆盖”浏览器的CSS默认属性，这就是CSS reset。

（2）Normalize.css：指的是一个很小的CSS文件，它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css 是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

（3）RESET和NORMALIZE的区别：1>.Normalize.css与RESET相比保留了有价值的默认值，还可以修复浏览器的bug，且不会让调试工具变的杂乱，并且Normalize.css 是模块化的，拥有详细的文档。

2、移动端有哪些常见布局方式？

（1）方式一：用流式布局，使用百分比来代替传统px作为单位,在大屏小屏自动适应。

（2）方式二：用rem布局，即相对于网站根元素,即根据html元素的font-size来计算大小 ,实现等比例放大缩小布局。

（3）方式三：用固定布局，思路沿用PC端， <head>里把viewport加好，然后设想整个网页的宽度为320px即可。

（4）方式四：用Flexbox布局，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

（5）栅格布局：用bootstrap栅格布局，配合媒体查询，适应不同分辨率的机型。

3、固定宽度布局开发WebApp如何实现多终端下自适应？

在开发移动设备的网站时，可以通过添加<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，为文档指定viewport属性，viewport的宽度为匹配设备屏幕的宽度，禁用缩放，完成对不同分辨率的布局。

任务名称：CSS-TASK-13

成果链接：任务十三

任务耗时：5月26日-5月28日，耗时3天。

技能脑图：

个人脑图：

官网脑图：

任务总结：

1. 任务进度符合预期，未延期。任务13，总体来说还算顺利，和前两个任务要求差不多，还是对之前的任务进行重构，在不使用bootstrap的情况下，利用sass相关的知识，设置样式，如变量、颜色、度量等。本次任务耗时3天，第一天由于讲小课堂导致进度基本为0，第二天状态也不太好，好在第三天状态及时调整了过来，在预计时间内完成了任务，这几天也逐步开始了解一些JS的基础知识，为接下来的JS任务做准备工作。
  本次任务，初步接触到了CSS架构的知识点：
  （1）好的CSS架构需要具备以下几个特性：1>.可预见性；2>.可复用性；3>.可维护性；4>.可拓展性。
  （2）前端模块化：什么是前端模块化？举简单的例子,我们要写一个实现A功能的JS代码,这个功能在项目其他位置也需要用到,那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写,既能实现复用还可以分而治之,同理在写样式的时候,如果我们需要某种特殊的样式,会在很多地方应用,那么我们也可以采用一定的方式进行CSS的模块化,具体说来,JS模块化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的,具体技术大家自行学习。
  前端组件化：什么是前端组件化？页面上的每个独立的、可视/可交互区域视为一个组件;每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护; 由于组件具有独立性,因此组件与组件之间可以自由组合;页面只不过是组件的容器,负责组合组件形成功能完整的界面; 当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。简而言之，组件化就是将页面视为一个容器,页面上各个独立部分例如:头部、导航、焦点图、侧边栏、底部等视为独立组件,不同的页面根据内容的需要,去盛放相关组件组成完整的页面。
2. 脑图对比分析：基本符合官网预期。
3. 任务中遇到的疑难问题，任务较为简单，未遇到疑难问题，一些简答的问题，通过查找资料和求助师兄均得以解决。