摘要：記錄水平垂直居中方法絕對定位方法絕對定位方法方法和的區(qū)別在文檔流中沒有，在文檔流占據空間但不顯示隱形是否繼承不繼承是否占據空間不占據空間頁面屬性更改是否重新渲染重新渲染忘了點擊列表顯示相應內容內容內容內容內容內容方法閉包方法事件代理布爾值是

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）

事件執(zhí)行過程：

事件捕獲階段（事件不執(zhí)行）

處于目標階段（獲取執(zhí)行事件的目標源target并執(zhí)行事件，此階段被看作是冒泡的一部分）

事件冒泡階段

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.將格式統(tǒng)一轉換成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%

做的好：

遇到問題會努力思考

不懂的詢問面試官、與面試官多討論和交流

沒有冷場

不足：

沒有準備好自我介紹

沒有對面試公司提清楚自己的問題

沒有掌控面試的流程和主動權

繼續(xù)準備：

總結面試題

再多看看jquery和css動畫

準備2面和3面（技術負責人、hr、技術總監(jiān)分別準備）