作者： Yeaseon
Blog：https://yeaseonzhang.github.io

"金三銀四斋扰，金九銀十"擅威，用來形容求職最好的幾個(gè)月缕坎。但是隨著行業(yè)的飽和逆甜，初中級(jí)前端er就業(yè)形勢(shì)不容樂觀衣洁。

行業(yè)狀態(tài)不可控墓捻，我們能做的當(dāng)然只是讓自己變得更加具有競(jìng)爭(zhēng)力。

今年自己也用了幾個(gè)月的時(shí)間來準(zhǔn)備筆記面試坊夫，鞏固基礎(chǔ)知識(shí)砖第。特此將自己在這個(gè)過程總結(jié)的題目分享出來，希望對(duì)于求職和準(zhǔn)備求職的同學(xué)有所幫助环凿。

CSS

列舉不同的清除浮動(dòng)的技巧

/* 1.添加新元素 */
<div class="outer">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="clearfix"></div>
</div>
.clearfix {
  clear: both;
}

/* 2.為父元素增加樣式 */
.clearfix {
  overflow: auto;
  zoom: 1; // 處理兼容性
}

/* 3.:after 偽元素方法 (作用于父元素) */
.outer {
  zoom: 1;
  &:after {
    display: block;
    height: 0;
    clear: both;
    content: '.';
    visibillity: hidden;
  }
}

一像素邊框

使用sass語法梧兼。

/* 定義 */
@mixin border-1px ($color) {
    position: relative;
    &:after {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        context: '';
    }
}

@media (-webkit-min-device-pixel-radio: 1.5), (min-device-pixel-radio: 1.5) {
    border-1px {
        &:after {
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
    border-1px {
        &:after {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

/* 使用方式 */
@inclue border-1px(rgba(7, 17, 27, .1));

形成BFC(Block Formatting Context)的幾種方式

BFC全稱”Block Formatting Context”, 中文為“塊級(jí)格式化上下文”。BFC元素特性表現(xiàn)原則就是智听，內(nèi)部子元素再怎么翻江倒海羽杰，翻云覆雨都不會(huì)影響外部的元素。

• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed

布局

• 圣杯布局和雙飛翼布局

• 左定寬右自適應(yīng)寬度到推，并且等高布局(最小高度200px)

/* HTML */
<div class="container">
  <div class="left">Left silder</div>
  <div class="content">Main content</div>
</div>

/* CSS */
.container {
  overflow: hidden;
}

.left {
  float: left考赛；
  width: 200px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
  background-color: #eee;
}

.content {
  margin-left: 200px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
  background-color: #ccc;
}

.left, .content {
  min-height: 200px;
  height: auto !important;
}

JS

async與defer區(qū)別

異步(async) 腳本將在其加載完成后立即執(zhí)行，而 延遲(defer) 腳本將等待 HTML 解析完成后莉测，并按加載順序執(zhí)行颜骤。

location.replace()與location.asign()區(qū)別

location.replace()的url不會(huì)出現(xiàn)在history中

new操作符

• 創(chuàng)建一個(gè)空對(duì)象，并且this變量引用該對(duì)象悔雹，同時(shí)還繼承了 該函數(shù)的原型
• 屬性和方法被加入到this引用的對(duì)象中
• 新創(chuàng)建的對(duì)象由this所引用复哆，并且最后隱式的返回this

AMD CMD CommonJS

/* AMD是RequireJS對(duì)模塊化的定義
 * CMD是seaJS對(duì)模塊化的定義
 * CommonJS是Node對(duì)模塊化的規(guī)范
 **/

/* AMD 依賴關(guān)系前置 */
define(['./a', './b'], function (a, b) {
    a.something();
    b.something();
})

/* CMD 按需加載，依賴就近 */
define(function (require, exports, module) {
    var a = require('./a');
    a.something();

    var b = require('./b');
    b.something();
})

DOM 操作

// 創(chuàng)建節(jié)點(diǎn)
createDocumentFragment()
createElement()
createTextNode()

// 添加 移除 替換 插入
appendChild()
removeChild()
replaceChild()
insertBefore()

// 查找
getElementsByTagName()
getElementsByName()
getElementsByClassName()
getElementById()
querySelector()
querySelectorAll()

JS設(shè)置css樣式的幾種方式

/* 1.直接設(shè)置style屬性 */
element.style.height = '100px';

/* 2.直接設(shè)置屬性 */
element.setAttribute('height', '100px');

/* 3.使用setAttribute設(shè)置style屬性 */
element.setAttribute('style', 'height: 100px !important');

/* 4.使用setProperty設(shè)置屬性腌零，通過第三個(gè)參數(shù)設(shè)置important */
element.style.setProperty('height', '300px', 'important');

/* 5.設(shè)置cssText */
element.style.cssText += 'height: 100px !important';

阻止默認(rèn)行為

function stopDefault( e ) {
    // 阻止默認(rèn)瀏覽器動(dòng)作(W3C)
    if ( e && e.preventDefault ) {
        e.preventDefault();
    } else {
        // IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
        window.event.returnValue = false;
    }
    return false;
}

阻止冒泡

function stopBubble(e) {
    // 如果提供了事件對(duì)象梯找，則這是一個(gè)非IE瀏覽器
    if ( e && e.stopPropagation ) {
        // 因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
    } else {
        // 否則，我們需要使用IE的方式來取消事件冒泡
        window.event.cancelBubble = true;
    }
}

Ajax交互過程

• 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.
• 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法益涧、URL及驗(yàn)證信息.
• 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).
• 發(fā)送HTTP請(qǐng)求.
• 獲取異步調(diào)用返回的數(shù)據(jù).
• 使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

考察知識(shí)點(diǎn)最廣的JS面試題

function Foo() {
    getName = function () { alert(1); }
    return this;
}
Foo.getName = function () { alert(2); }
Foo.prototype.getName = function () { alert(3); }
var getName = function () { alert(4); }
function getName () { alert(5); }

/* 寫出輸出 */
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

具體講解參見一道常被人輕視的前端JS面試題

JS數(shù)組深淺拷貝

• slice實(shí)現(xiàn)

var arr = ['old', 1, true, null, undefined];

var new_arr = arr.slice();

new_arr[0] = 'new';

console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr) // ["new", 1, true, null, undefined]

• concat實(shí)現(xiàn)

var arr = ['old', 1, true, null, undefined];

var new_arr = arr.concat();

new_arr[0] = 'new';

console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr) // ["new", 1, true, null, undefined]

以上兩種方法只是淺拷貝锈锤，如果數(shù)組元素是基本類型，就會(huì)拷貝一份新的闲询；但是如果數(shù)組元素是對(duì)象或者數(shù)組久免，就只會(huì)拷貝引用（類似指針），修改其中一個(gè)就會(huì)影響另外一個(gè)扭弧。

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}];

var new_arr = arr.concat();

new_arr[0] = 'new';
new_arr[3][0] = 'new1';

console.log(arr) // ["old", 1, true, ['new1', 'old2'], {old: 1}]
console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}]

• JSON.stringify實(shí)現(xiàn)數(shù)組深拷貝

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}];

var new_arr = JSON.parse(JSON.stringify(arr));

new_arr[0] = 'new';
new_arr[3][0] = 'new1';

console.log(arr) // ["old", 1, true, ['old1', 'old2'], {old: 1}]
console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}]

簡(jiǎn)單粗暴阎姥，但是問題是不能拷貝函數(shù)，不推薦鸽捻。

然后我們來手動(dòng)實(shí)現(xiàn)深淺拷貝呼巴。

• 淺拷貝

var shallowCopy = function (obj) {
    // 判斷是否是數(shù)組或者對(duì)象
    if (typeof obj !== 'object') {
        return
    }
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

• 深拷貝

var deepCopy = function (obj) {
    if (typeof obj !== 'object') {
        return
    }
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj
}

數(shù)組去重

• filter + indexOf

function unique (arr) {
    var res = arr.filter(function (item, index, array) {
        return array.indexOf(item) === index;
    })
    return res;
}

• filter + sort

function unique (arr) {
    return arr.concat().sort().filter(function (item, index, array) {
        return !index || item !== array[index - 1];
    })
}

• ES6

function uniqu3 (arr) {
    return [... new Set(arr)];
}

找出數(shù)組中的最大值

• reduce

var arr = [6, 4, 1, 8, 2, 11, 3];

function max (prev, next) {
    return Math.max(prev, next)
}

console.log(arr.reduce(max));

• apply

var arr = [6, 4, 1, 8, 2, 11, 3];

console.log(Math.max.apply(null, arr));

• ES6

var arr = [6, 4, 1, 8, 2, 11, 3];

function max (arr) {
    return Math.max(...arr);
}

console.log(max(arr));

打亂數(shù)組的方法

var arr = [];
for (var i = 0; i < 100; i++) {
    arr[i] = i;
}

arr.sort(function () {
    return 0.5 - Math.random();
});

數(shù)組扁平化

var arr = [1, [2, [3, 4]]];

function flatten(arr) {

    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }

    return arr;
}

console.log(flatten(arr))

排序

// 冒泡
function bubbleSort2(arr) {
    var len = arr.length;
    for (var i = 0; i <= len - 1; i++) {
        for (var j = 0; j <= len - i; j++) {
            if (arr[j + 1] < arr[j]) {
                var temp;
                temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

// 快速排序
function quickSort(arr) {
    if(arr.length == 0) {
        return [];    // 返回空數(shù)組
    }

    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }

    return quickSort(l).concat(c, quickSort(r));
}

數(shù)字格式化 1234567890 -> 1,234,567,890

function formatNum (num) {
    return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
var num = '1234567890';
var res = formatNum(num);
console.log(res);

打亂數(shù)組的方法

var arr = [];
for (var i = 0; i < 100; i++) {
    arr[i] = i;
}

arr.sort(function () {
    return 0.5 - Math.random();
})

尾調(diào)用優(yōu)化

即只保存內(nèi)層函數(shù)的調(diào)用幀(只有開啟嚴(yán)格模式，才會(huì)生效),只有不再用到外層函數(shù)的內(nèi)部變量御蒲，內(nèi)層函數(shù)的調(diào)用幀才會(huì)取代外層函數(shù)的調(diào)用幀衣赶，否則無法進(jìn)行“尾調(diào)用優(yōu)化。

function factorial(n) {
    if (n === 1) return 1;
    return n * factorial(n-1);
}
factorial(5)

/* 優(yōu)化尾遞歸 */
function factorial(n, total) {
    if (n === 1) return total;
    return factorial(n - 1, n * total);
}
factorial(5, 1)

柯里化

實(shí)現(xiàn)add(1,2)和add(1)(2)均輸出3

function add () {
    let sum = 0;
    Array.prototype.forEach.call(arguments, function (item, index){
        if (typeof item !== 'number') {
            return false;
        } else {
            sum += item;
        }
    })
    var tmp = function () {
        Array.prototype.forEach.call(arguments, function (item, index){
            if (typeof item !== 'number') {
                return false;
            } else {
               sum += item;
            }
        })
        return tmp;
    }
    tmp.toString = function () {
        return sum
    }
    return tmp;
}
add(1, 2); // 3
add(1)(2); // 3
add(1, 2, 3)(1, 4)(2, 2)(1) // 16

ES8 新特性

• 字符串填充

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

• values和entries函數(shù)

Object.values(obj)
Object.entries(obj)

• getOwnPropertyDescriptors函數(shù)

Object.getOwnPropertyDescriptors(obj)

• 函數(shù)參數(shù)逗號(hào)結(jié)尾

function es8(var1, var2, var3,) {}

• 異步函數(shù)
  由async關(guān)鍵詞定義的函數(shù)聲明了一個(gè)可以異步執(zhí)行的函數(shù)厚满，返回一個(gè)AsyncFunction類型的對(duì)象府瞄。

fucntion fetchTextByPromise () {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('es8');
        }, 2000);
    });
}
async function sayHello () {
    const externalFetchedText = await fetchTextByPromise();
    console.log(`Hello, ${externalFetchedText}`);
}
sayHello();

數(shù)據(jù)類型判斷

var class2type = {};

'Boolean Number String Function Array Date RegExp Object Error Null Undefined'.split(' ').map((item, index) => {
    class2type['[object ' + item + ']'] = item.toLowerCase();
})

function type (obj) {
    return typeof obj === 'object' || typeof obj === 'function' ?
        class2type[{}.toString.call(obj)] || 'object' : typeof obj;
}

防抖

/*
 * func：需要調(diào)用的函數(shù)
 * wait: 防抖時(shí)間
 * immediate：布爾值，是否立即執(zhí)行
 **/

var debounce = function (func, wait, immediate) {
  var timeout;
  return function () {
    var context = this;
    var args = arguments;

    if (timeout) clearTimeout(timeout);

    if (immediate) {  // 是否立即執(zhí)行func
      var callNow = !timeout;
      timeout = setTimeout(function () {
        timeout = null;
      }, wait)碘箍；

      if (callNow) {
        func.apply(context, args);
      }
    } else {
      timeout = setTimeout(function () {
        func.apply(context, args);
      }, wait);
    }
  }
}

簡(jiǎn)單的字符串模板

var TemplateEngine = function(tpl, data) {
    var re = /<%([^%>]+)?%>/g, match;
    while(match = re.exec(tpl)) {
        tpl = tpl.replace(match[0], data[match[1]])
    }
    return tpl;
}

var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
console.log(TemplateEngine(template, {
    name: "Yeaseon",
    age: 24
}));

// '<p>Hello, my name is Yeaseon. I\'m 24 years old.</p>';

apply遵馆、call和bind

• apply和call

在嚴(yán)格模式下，未指定環(huán)境對(duì)象而調(diào)用函數(shù)丰榴，則this 值不會(huì)轉(zhuǎn)型為window团搞。除非明確把函數(shù)添加到某個(gè)對(duì)象或者調(diào)用apply()或call()，否則this 值將是undefined多艇。

在非嚴(yán)格模式下逻恐，call、apply的第一個(gè)參數(shù)傳遞為null或undefined時(shí)峻黍，函數(shù)體內(nèi)的this會(huì)指向默認(rèn)的宿主對(duì)象复隆，在瀏覽器中則是window。

• apply姆涩、call和bind比較

var obj = {
    x: 81
};

var foo = {
    getX: function () {
        return this.x;
    }
}

console.log(foo.getX.bind(obj)());
console.log(foo.getX.apply(obj));
console.log(foo.getX.call(obj));

很明顯挽拂，bind方法后面多了一對(duì)括號(hào)。也就是說骨饿，當(dāng)你希望改變上下文環(huán)境之后并且立即執(zhí)行亏栈，而是回調(diào)執(zhí)行的時(shí)候（多用于事件監(jiān)聽器函數(shù)）台腥，使用bind()方法，而apply/call則會(huì)立即執(zhí)行函數(shù)绒北。

• 定義一個(gè) log 方法黎侈，讓它可以代理 console.log 方法。

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

• 給每一個(gè) log 消息添加一個(gè)"(app)"的前輟闷游，比如：

log("hello world");    //(app)hello world

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
  console.log.apply(console, args);
};

• apply實(shí)現(xiàn)bind

function bind (fn, context) {
    return function () {
        return fn.apply(context, argument);
    }
}

創(chuàng)建對(duì)象

• 工廠模式

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

• 構(gòu)造函數(shù)模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

• 原型模式

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"

• 構(gòu)造函數(shù) + 原型模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.prototype = {
    constructor : Person,
    sayName : function(){
        alert(this.name);
    }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

JS實(shí)現(xiàn)Jquery的extend()方法

function extend() {
    // 默認(rèn)不進(jìn)行深拷貝
    var deep = false;
    var name, options, src, copy, clone, copyIsArray;
    var length = arguments.length;
    // 記錄要復(fù)制的對(duì)象的下標(biāo)
    var i = 1;
    // 第一個(gè)參數(shù)不傳布爾值的情況下峻汉，target 默認(rèn)是第一個(gè)參數(shù)
    var target = arguments[0] || {};
    // 如果第一個(gè)參數(shù)是布爾值，第二個(gè)參數(shù)是 target
    if (typeof target == 'boolean') {
        deep = target;
        target = arguments[i] || {};
        i++;
    }
    // 如果target不是對(duì)象脐往，我們是無法進(jìn)行復(fù)制的休吠，所以設(shè)為 {}
    if (typeof target !== "object" && !isFunction(target)) {
        target = {};
    }

    // 循環(huán)遍歷要復(fù)制的對(duì)象們
    for (; i < length; i++) {
        // 獲取當(dāng)前對(duì)象
        options = arguments[i];
        // 要求不能為空 避免 extend(a,,b) 這種情況
        if (options != null) {
            for (name in options) {
                // 目標(biāo)屬性值
                src = target[name];
                // 要復(fù)制的對(duì)象的屬性值
                copy = options[name];

                // 解決循環(huán)引用
                if (target === copy) {
                    continue;
                }

                // 要遞歸的對(duì)象必須是 plainObject 或者數(shù)組
                if (deep && copy && (isPlainObject(copy) ||
                        (copyIsArray = Array.isArray(copy)))) {
                    // 要復(fù)制的對(duì)象屬性值類型需要與目標(biāo)屬性值相同
                    if (copyIsArray) {
                        copyIsArray = false;
                        clone = src && Array.isArray(src) ? src : [];

                    } else {
                        clone = src && isPlainObject(src) ? src : {};
                    }

                    target[name] = extend(deep, clone, copy);

                } else if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }

    return target;
};

自定義事件（通過觀察者模式）

function EventTarget () {
    this.handlers = {};
}

EventTarget.prototype = {
    constructor: EventTarget,
    addHandler: function (type, handler) {
        if (typeof this.handlers[type] == 'undefined') {
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler)
    },
    fire: function (event) {
        if (!event.target) {
            event.target = this;
        }
        if (this.handlers[event.type] instanceof Array) {
            var handlers = this.handlers[event.type];
            for (var i = 0, len = handlers.length; i < len; i++) {
                handlers[i](event);
            }
        }
    },
    removeHandler: function (type, handler) {
        if (this.handlers[type] instanceof Array) {
            var handlers = this.handlers[type];
            for (var i = 0, len = handlers.length; i < len; i++) {
                if (handlers[i] === handler) {
                    break;
                }
            }
            handlers.splice(i, 1);
        }
    }
}

安全

跨域的幾種方法

1. 主域相同的跨域

document.domain

2. window.postMessage

3. JSONP跨域(只支持GET)

function todo(data){
  console.log('The author is: '+ data.name);
}

var script = document.createElement('script');
/* 向服務(wù)器www.yeaseonzhang.com發(fā)出請(qǐng)求。注意业簿，該請(qǐng)求的查詢字符串有一個(gè)callback參數(shù)瘤礁，用來指定回調(diào)函數(shù)的名字。 */
script.src = 'http://www.yeaseonzhang.com/author?callback=todo';
document.body.appendChild(script);
/* 服務(wù)器收到這個(gè)請(qǐng)求以后梅尤，會(huì)將數(shù)據(jù)放在回調(diào)函數(shù)的參數(shù)位置返回蔚携。 */
todo({"name": "fewjq"});
/* 由于<script>元素請(qǐng)求的腳本，直接作為代碼運(yùn)行克饶。這時(shí)酝蜒，只要瀏覽器定義了todo函數(shù)，該函數(shù)就會(huì)立即調(diào)用矾湃。作為參數(shù)的JSON數(shù)據(jù)被視為JavaScript對(duì)象亡脑。*/

4. websocket跨域

XSS 和 CSRF

• XSS
• CSRF

性能

CSS 優(yōu)化

• 正確的時(shí)機(jī)調(diào)用CSS
• 使用媒體查詢標(biāo)記<link>，選擇性加載
• 減少css文件數(shù)量
• 壓縮css代碼

渲染

• 瀏覽器渲染原理