我的面经1

• js

function test(){
    for(var i = 0; i < 3; i++) {
        var img = document.createElement('img');
        img.src = 'img' + i + '.png';
        img.onload = function(){
            alert(i)
        }
        document.body.appendChild(img);
    }
}
test();

问弹出几次弹窗，弹出的是多少？
弹出3次弹窗，弹出结果都是3
for每循环一次，i + 1；循环结束，i变为固定值3；onload调用的时候，i为3，有3张图片，onload执行3次，所以弹出3次

• js基础数据类型包括？譬如Date/error是什么数据类型？
  null undefined string number boolean
  引用数据类型
• childNodes 和children 的区别
  首先看node和element的区别；element是node的一种，只有当nodeType是1时为元素节点，即element；所以说element是node的一种，element同时扩展了node，有id/children等属性
  children和childNode获取的都是子节点，但是children获取的是元素节点，childNode获取的是所有节点，包括文本节点，注释节点等
• 单页面应用的路由系统是基于什么实现的？
  单页面的路由有两种实现方式：
  1.h5的historyAPI：页面在历史记录中切换时，出发popstate事件，历史记录一般是由pushState/hash锚点等操作产生。
  2.hash路由，也就是常见的# 号：location.hash = url;hash变化时，出发hashChange事件。

• 标准盒子模型包括？有几种描述方式，受什么影响？
  margin border padding content
  分为两种：border-box；标准盒模型：content-box；
  doctype会影响盒模型的呈现方式，标准模式下以标准盒模型呈现

• 请写一个实现script延迟加载的函数，并且当加载完成时收到通知

• async和defer的区别
  script标签中存有2个属性，async和defer
  async：后续文档的加载与渲染与js脚本的加载和执行同步执行
  defer：加载后续文档的过程与js脚本的加载同步执行，但是js脚本的执行在文档解析完成之后

• 不加任何干预的情况下，为什么移动端的click比touch慢？
  移动设备上某个元素的执行顺序是：touchstart touchmove touchend click
  click虽然会在移动设备上识别，但是确实最后才执行
• 以下伪代码如果可以执行的话存在什么问题？

var arr = []; //arr里面包含很多数据
var s = ''// s是一个string或者是数字
if(arr.indexOf(s)){
    do something;
}

s在arr中不存在时，indexOf返回值是-1，if函数执行；s在arr中存在时，只有当 s == arr[0] 时indexOf返回值是0，if函数不执行，其他时候均执行，所以if判断没有意义。
- css选择器有哪些，优先级是怎么计算的
类选择器 id选择器 属性选择器 标签选择器
!important > 内联 > id > 类 = 伪类 = 属性 > 标签 = 伪元素
内联：1000 id: 0100 类 = 伪类 = 属性 ： 0010 标签 = 伪元素： 0001

• transition-property？对哪些属性不起作用？
  transition-property规定使用过渡效果的css属性的名称。包括3个值 none ：没有属性获得过渡效果，all所有属性获得过渡效果，property指定属性名称，多个时逗号分隔。
  应该始终设置transition-duration，否则时长为0不会产生过渡效果
  transition-property只对能够 量化 的属性如width、height起作用，对于不能量化的属性如display不能起到过渡的作用
• 请定义一个通用的数据结构

//1
{
    'data' : 239,
    'error' : false
}
//2
{
    'data' : false,
    'error' : {
        'errorCode': 1,
        'errorName' : 'error'
    }
}
//3
{
    'data' : {
        'id' : 1,
        'name' : 'data'
    },
    'error' : 230
}

利用静态数据类型进行定义