日志 | Frontend 问题解决流

本地的 Markdown 文件不方便管理图片，有的问题用图片要直观一些，所以在这里写一份。有很多细碎的知识点不方便时时记录，大多是记录我印象深刻的。
有的地方可能理解得不对，欢迎交流。

2016-05-06

1. 设置两列表格的不同对齐方式：CSS Selector
2. 调整确认提交按钮的高度：因为 body 设置了 padding，所以重新在此处将 padding 设小一些
3. table 内部的线条样式：一直在 table 中改没有作用，最后发现应该在 td 改才行。
4. input 框有的边无法完整显示——换了不同的浏览器，发现好像是 Chrome 是这样。可通过 border 属性设置。

2016-05-07

1. 布局问题：用 position 实现了

2016-05-08

1. 用 float 实现三栏式布局：宽度设置为百分比，否则浏览器大小变化时，无法适应。使用 float 时，若将 width 设置为固定 px ，则在浏览器大小变化的时候，无法确定为某种布局。 float 的出处是文字和图片的混排，在这方面的表现很好。

2016-05-14

1. 清除浮动是什么？——看了清除浮动的文章，现在学到的是：设置为 float 的元素脱离了文档流，从而在显示上会出现一些问题，比如说一个 div 内部都是 float 元素时，这个 div 内部相当于是没有元素，无法撑开，而清除浮动就是要解决这个问题，让其按照初始想法来显示。但是清除浮动这潭水很深，我看了 stackoverflow 上那篇很多赞的回答，仍然觉得理解不深，可能还是需要通过实践来学习。
2. 实现直角扇形：应用 border-radius 的属性，将其设置与宽度高度都相等，可以通过 border-top-left-radius 来同时设置两边的弧长。
3. 居中问题：水平居中可以应用 margin 的左右为 auto 来实现，但是垂直如何实现？

2016-05-15

1. 回答昨天的居中问题——最开始我只会用 margin 设置为 auto 来实现水平居中，但是现在的浏览器对 top 与 bottom 的 auto 并不支持，于是觉得要想实现垂直居中，需要获取父元素或者视的大小，这样通过计算便能够获得居中的位置。今天看了一篇解决办法，它用的是接近的思想，但是很巧妙，尝试思考放在笔记里去了。

2016-05-18

1. footer 无法定位到页面底部，body 无法被里面的内容完全撑开：5.19 解决，见笔记问题导向部分。

2016-05-19

1. 两列表格不同的对齐方式（5.6 的问题，看自己是否还记得）
2. 文本的垂直居中

2016-05-28

1. border-width 设置之后没有效果：这个只有在 border 的效果不是 none 时才有效。所以用语句 border: 2px solid red; 可以一句解决几个问题。

2016-06-03

1. 找不到地方记录想要学习的问题，也记到这里来。HTML 语义化到底是指什么？我查了一下资料，有四点：标签化、便于 SEO、方便其他的设备解析和渲染、更具有可读性而便于维护。但是我觉得不止这么简单，还需要继续查阅学习。

2016-07-11

1. 任务5中，浮动出现问题，期望效果：换行后另起一行，左对齐开始排列。实际：换行后第二行从右边开始，左侧腾空。
   解决：因为我没有设置高度，导致第一行的最后一个元素的高度被压缩，本该在第二行的元素挤到了第一行末尾，看起来像是在换行后右对齐。设置了高度之后即解决。
   ![问题效果]
   ](http://upload-images.jianshu.io/upload_images/839636-ce43b15b75a9352d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   
   

   问题细节
2. 段落间距具体指什么
   line-height 减去 字体大小 = 行间距

2016-07-12

1. 首行缩进 2 个字符
   text-indent: 2em;

• slice
• push

主要在应用 CSS 的知识，所以没有遇到太大的问题。

2016-07-13

1. click 事件绑定 DOM

• sort( function )
• 把引用 JavaScript 的标签写错，type="text/javascript"，漏写了 text，导致无法正确运行。

2016-07-14

事件代理机制解决了我的一个小问题，它有一个好处：

节省大量重复的事件监听，以减少浏览器资源消耗。还有一个好处就是让HTML独立起来，比如之后还有要加子元素的需求，也不需要再为其单独加事件监听了。
来源：事件机制 | 前端工程师手册

所以它有这样的应用场景，当需要绑定事件的元素是后期动态生成时，可以不必绑定每一个元素，而只需绑定其父元素。

具体实例：
需求：添加数据时，table中显示新加入的数据，每条数据后会有一个删除按钮，点击删除按钮可删除数据。
未使用事件代理机制的思路是：每新添加一条数据，就为该数据对应的按钮绑定一个监听事件。
使用事件代理机制的思路：为整个table绑定监听事件，点击时通过识别当前点击的目标元素，达到确认所需删除数据的目的。

在这种情况下，需要区分事件对象的两个属性：
currentTarget——指处理事件的元素，我理解为绑定了事件处理程序的元素，即实例中的table
target——指触发事件的目标节点，即实际上触发了事件的元素

2016-07-15

1. error: document not defined
   调试的过程中报了这样的错误，后来发现问题是，我在 Webstorm 中点击调试选择的是 js 文件，同时因为已经打开了一个浏览器预览 html 页面，但实际上调试 js 文件时获取不到相对应的 document 对象。
   解决：调试的时候注意选择 html :)

• 一个疑问：
  选中
  这样写的时候，点击 label 中的文本也能选中相应的 radio，那么具体是怎么实现的呢，点击文本的时候发生了什么？内在的机制原理是什么？
  （未解决的疑问，搜了一下没找着，任务完成以后回来阅读解决）
  可参考：
  Trigger Click on Input when Label is Clicked
  Using “label for” on radio buttons
  W3C 文档 H44: Using label elements to associate text labels with form controls

2016-07-16

1. style 的定义有三种形式，分别涉及 HTML CSS JS。

• for in —— 循环枚举对象的属性，很有用。

2016-07-17

1. style.height
   我发现在 JavaScript 里面操作元素样式时，如果直接赋值为数字，则会自动加上 px 的单位，我不知道这是不是其默认值，但是解决了一些麻烦。比如我当我需要将值进行运算的时候，直接用数值将会方便很多。
   查了一下书：

在标准模式下所有度量值都必须指定一个度量单位。
混杂模式下将style.width设为“20”，浏览器会假设它是“20px”；
但在标准模式下，这样设置会因为没有度量单位被忽略。
最好始终指定度量单位。

• switch
  在 ECMAScript 中，每个 case 的值不一定是常量，可以是表达式。此时给 switch 传递参数 true，这样便能在 case 的表达式求值返回布尔值之后进行匹配。
• 字符串和对象不同
  var dat = new Date("2016-01-01");——Date对象
  var dat = "2016-01-01";——字符串
  这两个语句得到的是不同的结果，所能进行的操作也不同。运用的时候注意。

2016-07-18

1. 选择框（select、option）的 change 事件与其他类型的触发条件有区别。
   选择框的 change 事件： 在选中选项时触发事件；
   其他表单元素的 change 事件： 在值被修改，且焦点离开当前字段的时候触发。

• 完成一个完整的交互功能，回顾反思一下。
  最开始有点畏难情绪，于是分出块来写了个清单，一步一步的写。（函数）大致进行的思路和我印象深刻的点是：

  1. 渲染基础图表：DOM2 级样式操作，absolute 定位+边距模拟柱状图，配色
  • radio 事件绑定：click 事件，获取 target 属性
  • 切换粒度的数据处理（按天的数据处理→按周计算周均值的处理→按月）：switch 处理，计算均值
  • select 发生改变的事件绑定：change 事件
  • 切换城市的数据处理。

  其中比较有难度的部分是处理数据计算平均数的部分，借用 Date 的属性来遍历了所有原始数据，嵌套两层循环完成粒度上的分组。

  按周的分组是以 7 天为内循环，按月的分组则是利用 date.setMonth() 设定相差一月的起始日期来进行内部循环。

2016-07-23

今天一直在研究一个问题，现在有了一点眉目，但是具体的还是需要明天再研究。
问题很简单，在做冒泡排序的可视化时，使用 JavaScript 修改 CSS 样式无法实现一步步变化的效果。

我希望实现的效果（图为调试时单步进行的效果）

但实际上运行时是这样失去细节的（图为调试时每轮排序的效果）

最开始我以为是运行太快所以看不见，想通过写 sleep 函数来实现延迟，但实际运行时，仍然是中间运行过程很漫长，最后直接显示最终结果。
之后了解了浏览器的渲染原理，才发现浏览器会积攒很多次操作后才统一渲染。
还有很多文章觉得应该好好看一看：

• 浏览器渲染 | 前端工程师手册——参考资料值得读（另外发现这个前端工程师手册的一个小细节很棒，会自动在你读过的页面后标记绿色对勾，很有意思，让人有种打怪升级的感觉）
• 关于JS动态修改CSS样式问题（class和style）——这篇文章仅仅列举了两种修改方式，总结不完全，一种是替换 className，另一种是直接访问.style进行修改。
• CSS 对比 JavaScript 动画 | Google Developers——动画方面的问题，我觉得这是一种解决思路，用动画效果来实现延迟。也顺便实现我最初的设想。
• 求索：GSAP的动画快于jQuery吗？为何？ | SegmentFault——了解一下具体的动画效果的评估指标，使用 Chrome 中的 Timeline 查看 scripting， rendering， painting， loading 等所用的时间以及所占的比例，渲染时的 fps。作者的思路是写不同的测试来试验比较其性能。

其他：另外看文章的时候看到了 D3.js 更新了 4.0 版本，去逛了逛实例，好美！

2016-07-24

浏览器的渲染

浏览器的渲染线程和 JS 的执行线程是互斥的，JavaScript 默认是阻塞加载。—— JavaScript的加载与执行 | 前端工程师手册

这也是上面所述问题中网页出现假死的原因，当 JS 脚本在执行的时候，无法渲染新修改的样式，所以只能显示出最终的结果。

我目前的疑问：要用 requestAnimationFrame 来实现的话，那么它会和 JS 的执行有冲突吗？我希望实现在循环内部进行 repaint。

看了很多资料……requestAnimationFrame， 浏览器原理， 以及这篇精读了很久的文章 Javascript高性能动画与页面渲染（主要因为文章里又有很多外链的文章）。然后我意识到了一个问题，我一直在看原理，虽然有勾画思考，但吸收的效率仍然很低。还不如边看边做 Demo 来验证想法和文章思路。今后改进学习方法。

另外，我遇到问题的直接反应是去搜相关原理，觉得弄明白基础运作原理之后，便能更明白如何使用。而另一种思路是，搜一搜这个问题，看看别人的思考方式和过程，作为扩宽思路的参考。在学习研究阶段采取前一种方法无可厚非，但后者也可以适当地试一试。

例如我换了搜索关键词的时候：
用js实现快排加演示-js排程初探
JS异步阻塞的迷思

2016-07-29

Sorting Algorithms Animations
Data Structure Visualizations —— 可视化的数据结构和算法 | 酷壳的翻译
比较排序
可视化排序-参照
D3 Tutorials
JavaScript异步代码排程策略