面试总结（给自己看的）

摘要：记录水平垂直居中方法绝对定位方法绝对定位方法方法和的区别在文档流中没有，在文档流占据空间但不显示隐形是否继承不继承是否占据空间不占据空间页面属性更改是否重新渲染重新渲染忘了点击列表显示相应内容内容内容内容内容内容方法闭包方法事件代理布尔值是

20170913记录

// 方法1: 绝对定位1
// 方法2: 绝对定位2
// 方法3: flex
// 方法4: css3 transform transalte

display在文档流中没有，visibility在文档流占据空间但不显示（隐形）

1. 是否继承 display不继承
2. 是否占据空间 display不占据空间
3. 页面属性更改是否重新渲染 display重新渲染

    
内容1

    
内容2

    
内容3

    
内容4

    ...
    
内容1000

// 方法1:闭包
var lists = document.querySelectorAll("#ul li");
for (var i = 0; i < lists.length; i++) {
    (function(i) {
        console.log(lists[i]);
        lists[i].onclick = function () {
            alert(this.innerHTML);
        }
    })(i)
}
// 方法2:jquery on事件代理
var lists = document.getElementById("ul").children;
for (var i = 0; i < lists.length; i++) {
    (function(i) {
        console.log(lists[i]);
        lists[i].addEventListener("click", function (e) {
            alert(e.target.innerHTML);
        }, false); // 布尔值是否捕获
    })(i)
}

原理：利用事件冒泡和事件源（target）

事件执行过程：

事件捕获阶段（事件不执行）

处于目标阶段（获取执行事件的目标源target并执行事件，此阶段被看作是冒泡的一部分）

事件冒泡阶段

delegate() 为指定元素（被选中元素的子元素）添加一个或多个事件处理程序
on() jquery中的事件绑定都是基于on方法的，所以那些方法都可以使用on方法来代替的

// 1.默认情况 格式"YYYY-MM-DD HH:MM:SS"
function dateFormat (time, format) {
  // 2.默认格式转换机制
  var formatValue = format || "YYYY-MM-DD HH:MM:SS" // 默认值设置
  var dateValue = new Date(time);
  return formatObj[formatValue](dateValue)
}

// 3.将格式统一转换成00
function fixed2 (str) {
  return str < 10 ? "0" + str : str
}

// 4.考虑所有格式情况的组合 根据题目要求只有四种组合情况
var formatObj = {
  "YYYY-MM-DD HH:MM:SS": function (date) {
    var Y, M, D, h, m, s, last;
    Y = date.getFullYear() + "-";
    M = fixed2(date.getMonth() + 1) + "-";
    D = fixed2(date.getDate()) + " ";
    h = fixed2(date.getHours()) + ":";
    m = fixed2(date.getMinutes()) + ":";
    s = fixed2(date.getSeconds());
    last = Y + M + D + h + m + s;
    return last;
  },
  "YYYY-MM-DD HH:MM": function (date) {
    var Y, M, D, h, m, last;
    Y = date.getFullYear() + "-";
    M = fixed2(date.getMonth() + 1) + "-";
    D = fixed2(date.getDate()) + " ";
    h = fixed2(date.getHours()) + ":";
    m = fixed2(date.getMinutes());
    last = Y + M + D + h + m;
    return last;
  },
  "YYYY-MM HH:MM:SS": function (date) {
    var Y, M, h, m, s, last;
    Y = date.getFullYear() + "-";
    M = fixed2(date.getMonth() + 1) + " ";
    h = fixed2(date.getHours()) + ":";
    m = fixed2(date.getMinutes()) + ":";
    s = fixed2(date.getSeconds());
    last = Y + M + h + m + s;
    return last;
  },
  "YYYY-MM HH:MM": function (date) {
    var Y, M, D, h, m, s, last;
    Y = date.getFullYear() + "-";
    M = fixed2(date.getMonth() + 1) + " ";
    h = fixed2(date.getHours()) + ":";
    m = fixed2(date.getMinutes());
    last = Y + M + h + m;
    return last;
  }
}
dateFormat(1350052653, "YYYY-MM-DD HH:MM") // 1970-01-16 23:00:52
dateFormat(1350052653, "YYYY-MM-DD HH:MM") // 1970-01-16 23:00
dateFormat(1350052653, "YYYY-MM HH:MM:SS") // 1970-01 23:00:52
dateFormat(1350052653, "YYYY-MM HH:MM") // 1970-01 23:00

function result (a, b, c) {
    arguments[1] = c;
    return b;
}
alert(result(1, 2, 3)); // 3
alert(result(daydao)); // undefined
var daydao = "理才网";

agrguments是一个类似数组的对象，对应于传递给函数的参数

参数也可以被设置：arguments[1] = "new value"

https://segmentfault.com/q/10... 参考

解题思路：
- 切割字符串为数组
- 遍历产生字典
- 根据出现次数排序
- 输出出现次数最多的字符数组

function analysisString (str) {
    var str = str || "",
        arr = str.split(""),// 1.分割字符串为数组
        numMap = {}, // 记录所有字符的出现频次
        mostArray = []; // 记录所有出现次数最多的字符，保存在数组中
    // 2.遍历所有字符字典
    arr.forEach(function (item) {
        // 记录所有字符的出现频次，保存在对象中
        // 记录所有出现次数最多的字符， 保存在数组中
        numMap.increase(item);
        mostArray.add(item);
    });
    // 3.根据出现次数进行数组排序
    mostArray = mostArray.sort(function (a, b) {
        return numMap[b] - numMap[a]; // 从大到小排序
    }).filter(function (item, i) { // 过滤，当当前次数等于最大次数时添加在mostArray数组里
        if (numMap[item] === numMap[mostArray[0]]) {
            return item;
        }
    });
    // 4.返回出现字符次数最多的数组和最多次数
    return {
        mostArray: mostArray,
        freqNum: numMap[mostArray[0]]
    };

}
Object.prototype.increase = function (key) {
    var self = this,
        val = self[key]*1 || 0;
    self[key] = val + 1;
    return self;
};
Array.prototype.add = function (item) {
    var self = this;
    if (self.indexOf(item) < 0) { // 数组中没有这个字符
        self.push(item);
    }
    return self;
};
console.log(analysisString("hayleyliuhui"));

以下分别代表什么意思
+
*
?
*?
{}
[]
()
var str = "
理才网上线成功!
";
var reg = /<[/a-z]+>/;





str.split(reg).join(""); // ["", "理才网", "上线成功", "!", ""]
str.join(""); // 理才网上线成功！

基本上问的问题都回答出来了，考察知识点主要是css布局、js事件代理、js函数、jquery、多个事件同步处理、css动画、vue

感受：

主要考察css布局和js事件代理和数组操作

职位是一个人负责某个项目的管理后台，项目组有20多个前端，平时有技术分享会

技术栈jquery40%、vue60%

做的好：

遇到问题会努力思考

不懂的询问面试官、与面试官多讨论和交流

没有冷场

不足：

没有准备好自我介绍

没有对面试公司提清楚自己的问题

没有掌控面试的流程和主动权

继续准备：

总结面试题

再多看看jquery和css动画

准备2面和3面（技术负责人、hr、技术总监分别准备）