前端问题总结整理，持续更新和学习，找到想做的就加油做个行动派吧！

千万不要为了当前不好而跳槽，一定是要因为将来会更好而跳槽！

HTML

CSS

  • 实现一个叉号有几种实现方式
    1.切图 2.先用一个span画一个长方形，圆角，然后使用transform倾斜 3.CSS3中使用Webfont 4.伪类

    1
    TODO 代码实现

  • CSS常用选择器
    ID、类、伪类、父子选择器等等

Javascript

  • 原型链 prototype
    MDN

实现的本质是重新原型对象。

  • 原生ajax写法
    XMLHttpRequest, XMLHttpResponse

  • 事件模型和事件传播机制问题
    浏览器中事件可以分为三种：鼠标事件；键盘事件；HTML事件；
    捕获和冒泡的顺序在不同浏览器中不同，IE下事件流采用的是冒泡，基于DOM标准兼容浏览器通常采用先捕获后冒泡方式。

addEventListener() & removeEventListener()
所有 DOM 节点都包含这两个方法，都接受三个参数：要处理的事件名，作为事件处理程序的函数，一个布尔值。最后这个参数布尔值，true表示在捕获时调用事件处理函数，false表示在冒泡时调用时间处理函数。

1
2
3
4
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
  alert("click");
}, flase);
  • 跨域 JSONP 实现原理
    原理：回调函数
    JSONP 由两部分组成：回调函数和数据。

For Example:

1
2
3
4
5
6
function handleResponse(response) {
  alert("You're at IP " + response.ip + ", which is in " + response.city);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.fisrtChild);

  • <script>中defer和asyc区别和加载顺序

    • asyc: 异步脚本虽然立即下载脚本，不应该方案页面中其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本有效。不能保证按照指定的先后顺序执行，建议异步脚本不要在加载期间修改 DOM。
    • defer: 延迟脚本可以延迟到文档完全被解析和显示之后再执行。只针对外部脚本有效。在现实当中，延迟脚本不一定按照顺序执行，不一定会在 DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本

  • 闭包：指有权访问另一个函数作用域中的变量和函数。

  • 作用域：当代码在一个环境执行时，会创建变量对象的一个作用域。
    理解：类似 Java 的成员变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var color = "blue";
    function changeColor() {
      var anotherColor = "red";

      function swapColor() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
        // 这里可以访问 color, anotherColor 和 tempColor
      }
      // 这里可以访问 color, anotherColor
      swapColor();
    }
    // 这里只能访问 color
    changeColor();