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

20170913記錄

// 方法1: 絕對(duì)定位1
// 方法2: 絕對(duì)定位2
// 方法3: flex
// 方法4: css3 transform transalte

display在文檔流中沒有，visibility在文檔流占據(jù)空間但不顯示（隱形）

1. 是否繼承 display不繼承
2. 是否占據(jù)空間 display不占據(jù)空間
3. 頁(yè)面屬性更改是否重新渲染 display重新渲染

    
內(nèi)容1

    
內(nèi)容2

    
內(nèi)容3

    
內(nèi)容4

    ...
    
內(nèi)容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í)行）

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

事件冒泡階段

delegate() 為指定元素（被選中元素的子元素）添加一個(gè)或多個(gè)事件處理程序
on() jquery中的事件綁定都是基于on方法的，所以那些方法都可以使用on方法來(lái)代替的

// 1.默認(rèn)情況 格式"YYYY-MM-DD HH:MM:SS"
function dateFormat (time, format) {
  // 2.默認(rèn)格式轉(zhuǎn)換機(jī)制
  var formatValue = format || "YYYY-MM-DD HH:MM:SS" // 默認(rèn)值設(shè)置
  var dateValue = new Date(time);
  return formatObj[formatValue](dateValue)
}

// 3.將格式統(tǒng)一轉(zhuǎn)換成00
function fixed2 (str) {
  return str < 10 ? "0" + str : str
}

// 4.考慮所有格式情況的組合 根據(jù)題目要求只有四種組合情況
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 = "理才網(wǎng)";

agrguments是一個(gè)類似數(shù)組的對(duì)象，對(duì)應(yīng)于傳遞給函數(shù)的參數(shù)

參數(shù)也可以被設(shè)置：arguments[1] = "new value"

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

解題思路：
- 切割字符串為數(shù)組
- 遍歷產(chǎn)生字典
- 根據(jù)出現(xiàn)次數(shù)排序
- 輸出出現(xiàn)次數(shù)最多的字符數(shù)組

function analysisString (str) {
    var str = str || "",
        arr = str.split(""),// 1.分割字符串為數(shù)組
        numMap = {}, // 記錄所有字符的出現(xiàn)頻次
        mostArray = []; // 記錄所有出現(xiàn)次數(shù)最多的字符，保存在數(shù)組中
    // 2.遍歷所有字符字典
    arr.forEach(function (item) {
        // 記錄所有字符的出現(xiàn)頻次，保存在對(duì)象中
        // 記錄所有出現(xiàn)次數(shù)最多的字符， 保存在數(shù)組中
        numMap.increase(item);
        mostArray.add(item);
    });
    // 3.根據(jù)出現(xiàn)次數(shù)進(jìn)行數(shù)組排序
    mostArray = mostArray.sort(function (a, b) {
        return numMap[b] - numMap[a]; // 從大到小排序
    }).filter(function (item, i) { // 過濾，當(dāng)當(dāng)前次數(shù)等于最大次數(shù)時(shí)添加在mostArray數(shù)組里
        if (numMap[item] === numMap[mostArray[0]]) {
            return item;
        }
    });
    // 4.返回出現(xiàn)字符次數(shù)最多的數(shù)組和最多次數(shù)
    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) { // 數(shù)組中沒有這個(gè)字符
        self.push(item);
    }
    return self;
};
console.log(analysisString("hayleyliuhui"));

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





str.split(reg).join(""); // ["", "理才網(wǎng)", "上線成功", "!", ""]
str.join(""); // 理才網(wǎng)上線成功！

基本上問的問題都回答出來(lái)了，考察知識(shí)點(diǎn)主要是css布局、js事件代理、js函數(shù)、jquery、多個(gè)事件同步處理、css動(dòng)畫、vue

感受：

主要考察css布局和js事件代理和數(shù)組操作

職位是一個(gè)人負(fù)責(zé)某個(gè)項(xiàng)目的管理后臺(tái)，項(xiàng)目組有20多個(gè)前端，平時(shí)有技術(shù)分享會(huì)

技術(shù)棧jquery40%、vue60%

做的好：

遇到問題會(huì)努力思考

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

沒有冷場(chǎng)

不足：

沒有準(zhǔn)備好自我介紹

沒有對(duì)面試公司提清楚自己的問題

沒有掌控面試的流程和主動(dòng)權(quán)

繼續(xù)準(zhǔn)備：

總結(jié)面試題

再多看看jquery和css動(dòng)畫

準(zhǔn)備2面和3面（技術(shù)負(fù)責(zé)人、hr、技術(shù)總監(jiān)分別準(zhǔn)備）