TC - front end

JS

1、一個陣列 par 中存放有多個人員的資訊，每個人員的資訊由年齡 age 和姓名 name 組成，如{age: 2, name: ‘xx’}。請寫一段 JS 程式，對這個陣列按年齡從小到大進行排序。

function getAge (arr) {
return arr.sort(function(x,y){
return x.age - y.age;
});
}

2、有字串 var = ‘abc345efgabcab’，請寫出 3 條 JS 語句分別實現如下 3 個功能：
1）去掉字串中的a、b、c 字元，形成結果：‘345efg’
2）將字串中的數字用中括號括起來，形成結果：‘abc[3][4][5]efgabcab’
3）將字串中的每個數字的值分別乘以 2，形成結果：‘abc6810efgabcab’

str.replace(/[a-c]/g,’’);
str.replace(/(\d)/g, “[$1]”);
str.replace(/(\d)/g, function(a){return a*2});

3、請寫一段 JS 程式類，定義一個列表類List，該類包含兩個成員：屬性 length（表示列表中的元素個數）和方法 add （像列表中新增元素），其中要求建構函式和 add 方法的引數為動態引數。

function List(arrArg){
this.arr = arrArg || [];
this.arrlength = this.arr.length || 0;
}

List.prototype = {
constructor: List,
add: function(arg) {
this.arr.push(arg);
this.arrlength = this.arr.length;
return this.arr;
}

}

4、請問以下 JS 程式有什麼問題？應該如何優化？

function setStyle(element) {
element.style.fontWeight = “bold”;
element.style.textDecoration = “none”;
element.style.color = “#000000”;
}
我這邊優化如下：

function setStyle(element) {
if (!element.style) {
return;
}
var eleStyle = element.style;
eleStyle.fontWeight = “bold”;
eleStyle.textDecoration = “none”;
eleStyle.color = “#000000”;
}

5、請寫出一下正規表示式：
1）匹配一個全部是數字的字串
2）提取一個 url 所使用的協議型別如 http、ftp 和 host 名稱

我這邊實現如下：

// 1)
var str = ‘1234’;
/^\d+KaTeX parse error: Expected 'EOF', got '\/' at position 81: …a-zA-Z]{3,5})\:\̲/̲\/)?(www\.)?([a…/);

6、請寫出下面 JS 程式中幾個 document.write 的結果：

function Parent() {
this.a = 1;
this.b = [1, 2, this.a];
this.c = {demo: 5};
this.show = function() {
document.write(this.a + ’ ’ + this.c.demo + ‘:’ + this.b + ‘
’)
}
}
function Child() {
this.a = 2;
this.change = function() {
this.b.push(this.a);
this.a = this.b.length;
this.c.demo = this.a++;
}
}
Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();

7、請用 js 程式實現二分演算法。

8、JS作用域:
for es5

1、沒有var宣告屬於全域性申明，一般不太規範
2、變數提前在申明前使用，變數提升
3、js沒有塊級作用域，只有函式作用域
4、函式內部可以訪問外部變數，外部無法訪問內部變數
5、函式中變數查詢是就近原則去尋找

作用域鏈：多層巢狀，最深層的作用域在作用域鏈的最開始層（水平描述在最左側），最上層的作用域window在作用域鏈的最終層（水平描述在最右側），作用域鏈最深訪問處理越耗時；

9、變數查詢順序
javascript搜尋引擎LHS和RHS作用域鏈查詢

LHS - 等號左側: 試圖找到變數容器的本身，對其賦值；
RHS - 等號右側：找到變數

非嚴格模式下，a = 4; console.log(a); // LHS查詢，找不到變數給它賦值全域性變數
console.log(b); b = 4; // RHS查詢，找不到變數，則返回引用異常未定義ReferenceError：b is not defined

func();
// 先通過RHS查詢變數，可以找到定義不報ReferenceError錯, 但使用不合法;
// func 為undefined,執行了一個函式
var func = function () {
console.log(100);
};

ReferenceError代表作用域判別失敗，也就是作用域內查詢變數失敗。
TypeError代表作用域判別成功，但是對結果的操作是非法或者不合理的。

10、JS事件模型

DOM0級模型
html事件繫結：

html事件

js事件繫結:
var ep = document.getElementById(‘eventP’);
ep.onclick = fun;
事件移除：
ep.onclick = null;

IE事件模型
var btn = document.getElementById(’.btn’);
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

DOM2級模型
見 11、
11、瀏覽器事件模型
捕獲階段
目標階段
冒泡階段

一個3層元素結構模型，點選最裡層元素，觸發流程：
由外向裡層層捕獲，到目標，層層向上冒泡，
如果給目標繫結捕獲和冒泡事件，即觸發2次，

addEventListener(event, fn, Boolean);
// event, 事件方法
// fn 執行事件函式
// Booolean, true為捕獲階段觸發事件，false為冒泡階段觸發事件

attachEvent(on + ‘event’, fn); // ie事件模型， 僅有冒泡階段事件處理，沒有捕獲階段的程式控制，但整個事件流程也是有捕獲和冒泡的；

阻止事件傳播
e.stopPropagation()，阻止事件傳播既可以是在冒泡階段，也可以是在捕獲階段；
（e.stopPropagation()很少用到在捕獲階段去阻止事件的傳播，大家就以為e.stopPropagation()只能阻止事件在冒泡階段傳播。）

阻止預設行為
e.preventDefault()， 預設行為是指：點選a標籤就轉跳到其他頁面、拖拽一個圖片到瀏覽器會自動開啟、點選表單的提交按鈕會提交表單等等，因為有的時候我們並不希望發生這些事情，所以需要阻止預設行為。

DOM事件模型中的事件物件常用屬性:

    type用於獲取事件型別

    target獲取事件目標

    stopPropagation()阻止事件冒泡

	preventDefault()阻止事件預設行為

IE事件模型中的事件物件常用屬性:

	type用於獲取事件型別
	
	srcElement獲取事件目標
	
	cancelBubble阻止事件冒泡
	
	returnValue阻止事件預設行為

自定義事件：
JS中已經內建了很多事件，如click, mouseover等等，但是內建事件畢竟有限，有時候我們想自己定義一些事件，例如三連擊，threeclick。如何實現自定義事件呢？

首先要建立一個事件。可以使用以下方式:

var event = new Event('threeclick', {"bubbles":true, "cancelable":false});
然後我們需要為事件註冊監聽函式:

target.addEventListener('threeclick', hello, false);
最後我們要在合適的時機觸發該事件，我們可以使用dispatchEvent函式。該方法在當前節點觸發指定事件，從而觸發監聽函式執行。該方法返回一個布林值，只要有一個監聽函式呼叫了Event.preventDefault(), 則返回false, 否則返回true。
target.dispatchEvent(event);

JQuery Event模型
JQuery解決的一個主要問題就是瀏覽器的相容問題，它有自己的事件模型實現方式。它主要有以下特性:

重定義了JQuery.Event物件, 統一了事件屬性和方法, 統一了事件模型

可以在一個事件型別上新增多個事件處理函式, 可以一次新增多個事件型別的事件處理函式

支援自定義事件(事件名稱空間)

提供了toggle, hover組合事件

提供了one, live-die, delegate-undelegate

提供了統一的事件封裝, 繫結, 執行, 銷燬機制

$(document).ready();

....

12、事件捕獲作用

13、事件代理原理／事件委託
事件代理： 事件在冒泡過程中會上傳到父節點，因此可以把子節點的監聽函式定義在父節點上，由父節點的監聽函式統一處理多個子元素的事件，這種方式稱為事件代理(Event delegation)。
我們有一個div元素，它包含三個按鈕:

<div id="box">
    <input type="button" value="按鈕" id="btn">
    <input type="button" value="按鈕2" id="btn2">
    <input type="button" value="按鈕3" id="btn3">
</div>
我們可以在父節點上一次性的為所有子節點註冊監聽函式:

var box = document.getElementById('box');

box.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'input') {
    // some code
  }
});

14、脫敏資料：可逆脫敏（進行序列化等轉化可轉化回來的資料）與不可逆脫敏（將資料轉化為某種資料形式，不可轉化回原始資料）

15、js和flash這樣的外掛是如何互動的呢？ ExternalInterface

flash使用的actionscript跟javascript是非常相通的，下面描述如何互相呼叫函式:
1:javascript呼叫flash中的函式
在flash的指令碼中增加
程式碼:import flash.external.ExternalInterface;
假定要呼叫的函式是hello，as程式碼如下
程式碼:function hello(){
return “hello”;
}
ExternalInterface.addCallback(“hello”, this, hello);
//第一個引數為匯出函式名，第三個引數為as的函式名
這樣就可以在js中呼叫as的hello函式了
2：flash呼叫js的函式
ExternalInterface.call(“hello2”, “jacky”);
//第一個引數是js的函式名，後面的是js函式的引數
3：如何互相呼叫

html程式碼如下：
程式碼:<object type="application/x-shockwave-flash" data="test.swf" width="525" height="390" name="test">
                        <param name="allowScriptAccess" value="sameDomain" />
                        <param name="movie" value="test.swf" />
                        <param name="quality" value="high" />
                        <param name="scale" value="noScale" />
                        <param name="wmode" value="transparent" />
                        
</object>

function callFromFlash() {
    var a=thisMovie("test").hello();
    alert(a);
}

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName]
    }
    else {
        return document[movieName]
    }
}

最近開發網站時遇到一個問題，如何與FLASH裡的AS指令碼進行互動？

需要在Flash裡讀取網頁JavaScript裡的值，用於控制兩個Flash協同顯示內容。

最後終於在Flash找到了ExternalInterface類，要求環境：AS 1.0，Flash Player 8.0以上

一、在網頁中通過JavaScript呼叫Flash裡的ActionScript：
可以通過ExternalInterface的addCallback方法，在Flash裡註冊一個可以供網頁上的JavaScript或ActiveX呼叫的方法，具體程式碼如下：
程式程式碼

import flash.external.*;
var methodName:String = “PlayBB”;
var instance:Object = null;
var method:Function = playB;
var ws:Boolean = ExternalInterface.addCallback(methodName, instance, method);

在JavaScript中呼叫時，需要為Flash所在的Object標籤設定一個ID，並且設定allowScriptAccess屬性，示例程式碼如下：
程式程式碼

網頁中的JavaScript具體的呼叫示例：
程式程式碼

function thisMovie(movieName) {
if (navigator.appName.indexOf(“Microsoft”) != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
(“topFlash”).PlayBB();

二、在Flash的ActionScript中呼叫網頁裡的JavaScript：
直接使用ExternalInterface的Call方法就可以了，示例程式碼如下：
程式程式碼

import flash.external.*;
var obj:Object = ExternalInterface.Call(“JavaScript方法”, “引數”);

引數可以是任何As中的型別，在呼叫時Flash會自動封裝，多引數使用,分隔。

16、jquery ajax支援的傳輸資料型別：
xml html script json jsonp text

17、判斷一個字串物件str是否為String?
var str = new String(‘1ksdmw’);
// 通過instanceOf判斷是否為例項, str instanceOf String , true
// typeof str // “object”

Css佈局及重構

1、viewpoint：移動裝置訪問頁面的畫素檢視縮放關係，
device-width
user-scalable: no-scale
target-densitydpi: device-dpi: high-dpi, medium-dpi, low-dpi

例：
(設定螢幕寬度為裝置寬度，禁止使用者手動調整縮放)

(設定螢幕密度為高頻，中頻，低頻自動縮放，禁止使用者手動調整縮放) https://blog.csdn.net/shenlei19911210/article/details/51284910

2、border: none（無邊框樣式），border: 0（邊框寬度為0，但如果設定寬度不只是需要設定這個值就行，還需要設定1px solid #color等）；
css sprite: 多張圖片的合併大小通常還會比單張加起來的總和要小；

3、關於ie和firefox的描述：
innerText IE支援，FIREFOX也支援
document.createElement FIREFOX支援，IE也支援
setAttribute(‘class’，‘styleClass’) FIREFOX支援，
IE也支援但寫法為: setAttribute(‘className’，‘styleClass’)

4、假設當前螢幕分別率為1024×768，定義一個居中的佔螢幕一半大小的表格的語句是

瀏覽器及伺服器相關

1、狀態碼

2、dns

3、cdn

4、Netscape原網景公司，mozilla後該公司成立的組織，後該組織建立的gecko引擎，因其市場優異很多開發會根據mozilla標識開發更優良的程式碼，
微軟ie瀏覽器與之競爭，微軟仿造加入mozilla引起這種混亂風，很多瀏覽器開始仿造加入mozilla標誌，chrome, safari，opera等等，因此現在很混亂。
為什麼瀏覽器User-agent總是有Mozilla字樣？
https://zhidao.baidu.com/question/1767408752449075980.html
5、常見的瀏覽器端的儲存技術
cookie
localStorage
userData
// session為服務端建立

cookie 是靠譜的瀏覽器都支援；
localStorge 比 cookie 存的更多，獲取更方便，而且儲存內容不會隨請求傳送給伺服器；session 雖然需要 cookie 支援（通常存放加密過的 sessionId），但是不在瀏覽器端存放主要資訊，排除；
IE 支援 userData 儲存資料，但是基本很少使用到，除非有很強的瀏覽器相容需求。

Node

1、設計一個批量輸入的頁面，一次輸入5000條記錄，如何設計：
分批次處理：將資料分批次，然後交予非同步處理
非同步處理：通過nodejs非同步讀取檔案操作非同步處理，readFile

安全

1、XSS，CSRF，hash碰撞，闡述與防治

前沿