繼續磕面經(前端)
title: 繼續磕面經
toc: true
date: 2018-09-26 17:31:07
categories:javascript
- Web
tags:css
- JavaScript
- HTML
- CSS
- Vue
- 設計模式
- HTTP
- ES6
js的基本數據類型
Undefined、Null、Boolean、Number、String五種基本數據類型html
獲取變量的數據類型有哪些方法
typeof，返回六種結果：undefined、boolean、number、string、object、function前端typeof ''; // string typeof 1; // number typeof true; // boolean typeof undefined; // undefined typeof null; //object typeof []; // object typeof new Function(); //function typeof new Date(); //object typeof new RegExp(); //object
instanceof，判斷是不是一個類的實例vuetrue instanceof Boolean; // false 1 instanceof Number; // false '' instanceof String; // false [] instanceof Array; // true ({}) instanceof Object; // true (function(){}) instanceof Function; // true new Boolean(true) instanceof Boolean; // trueinstanceof實現原理，沿着原型鏈尋找：javafunction myInstanceof(left, right) { left = left.__proto__; right = right.prototype; while (true) { if (left === null) return false; if (left === right) return true; left = left.__proto__; } }constructor，一個類的constructor會指向本身的引用。jquery須要注意的是：webpack
null和undefined是無效的對象，所以沒有constructor，須要經過typeof來判斷。- JS對象的constructor是不穩定的。當開發者重寫prototype後，原有的constructor會丟失，constructor會默認爲Object。
''.constructor == String; // true (1).constructor Number; // true true.constructor == Boolean; // true new Function().constructor == Function; // true new Date().constructor == Date; //true
Object.prototype.toStringes6Object.prototype.toString.call(''); //[object String] Object.prototype.toString.call(1); //[object Number] Object.prototype.toString.call(true); //[object Boolean] Object.prototype.toString.call(undefined); //[object Undefined] Object.prototype.toString.call(null); //[object Null] Object.prototype.toString.call(new Function()); //[object Function] Object.prototype.toString.call(new Date()); //[object Date] Object.prototype.toString.call([]); //[object Array] Object.prototype.toString.call(new RegExp()); //[object RegExp] Object.prototype.toString.call(new Error()); //[object Error] Object.prototype.toString.call(document); //[object HTMLDocument] Object.prototype.toString.call(window); //[object global] window是全局對象global的引用 // 代碼來自 紅塵客棧-古月 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/mozuncangtianbaxue/article/details/77151598?utm_source=copy
JS的拷貝？
基本數據類型會新開闢一個數據段來保存值，web
可是對象的拷貝其實是拷貝了對實際對象的引用，咱們能夠把對象名看作指針。
深拷貝的方法
須要注意的是：slice()和concat()只深拷貝了一級屬性。
遞歸複製全部屬性
function deepClone(arg) { if (arg == null || typeof arg != 'object') return arg; let newObj = Array.isArray(arg) ? [] : {}; for (let key in arg) { if (arg[key] != null && typeof arg[key] == 'object') { newObj[key] = deepClone(arg[key]); } else { newObj[key] = arg[key]; } } return newObj; }使用JSON的parse和stringify
function deepClone(arg) { return typeof arg == 'object' ? JSON.parse(JSON.stringify(arg)) : arg; }使用JQuery的extend方法
$.extend([deep], target, object1[, objectN ])- 用於將一個或多個對象的內容合併到目標對象
- 若是多個對象具備相同的屬性，則後者會覆蓋前者的屬性值
function deepClone(arg) { if (arg == null || typeof arg != 'object') return arg; if (arg instanceof Array) return $.extend(true,[],arg); else return $.extend(true,{},arg); }
CSS單位有哪些
相對長度
| 單位 | 描述 |
|---|---|
| em | 它是描述相對於應用在當前元素的字體尺寸，因此它也是相對長度單位。通常瀏覽器字體大小默認爲16px，則2em == 32px； |
| ex | 依賴於英文子母小 x 的高度 |
| ch | 數字 0 的寬度 |
| rem | 根元素（html）的 font-size |
| vw | viewpoint width，視窗寬度，1vw=視窗寬度的1% |
| vh | viewpoint height，視窗高度，1vh=視窗高度的1% |
| vmin | vw和vh中較小的那個。 |
| vmax | vw和vh中較大的那個。 |
| % | 介紹連接 |
絕對長度
| 單位 | 描述 |
|---|---|
| cm | 釐米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| px | 像素 (1px = 1/96 of 1in) |
| pt | point，大約1/72英寸； (1pt = 1/72in) |
| pc | pica，大約6pt，1/6英寸； (1pc = 12 pt) |
網頁渲染的流程
參考：https://www.cnblogs.com/dojo-lzz/p/3983335.html
頁面解析渲染該過程主要分爲如下步驟：
- 解析HTML
- 構建DOM樹
- DOM樹與CSS樣式進行附着構造呈現樹
- 佈局
- 繪製
- 瀏覽器怎麼知道收到的包是html文件（content-type）
- CSS會阻塞DOM解析麼（不會阻塞DOM解析，會阻塞DOM渲染，阻塞後面的JS執行）
- 知道哪些content-type（參考連接）
- text/html ：HTML格式
- text/css：CSS格式
- text/plain ：純文本格式
- text/xml ：XML格式
- image/gif ：gif圖片格式
- image/jpeg ：jpg圖片格式
- image/png ：png圖片格式
- application/xml ： XML數據格式
- application/x-javascript：.js
- application/json ： JSON數據格式
- application/pdf ： pdf格式
- application/msword ： Word文檔格式
- application/octet-stream ： 二進制流數據（如文件下載）
- application/x-www-form-urlencoded ： POST 提交數據
- multipart/form-data ： 表單上傳文件
- bfc（看這裏）
- 清浮動的方法（父元素:after，結尾空div clear，父元素定義height，overflow，父元素table，結尾br clear）
- 水平方向有margin疊加麼（沒有）
JS繼承
- 原型鏈繼承
- 借用構造函數
- 組合繼承
- 原型式繼承（淺拷貝）
- 寄生式繼承（原型式繼承的加強版）
- 寄生組合式繼承
- 原型繼承能夠繼承非原型屬性麼
- 修正constructor
- apply/call方法和原型方法的區別
vue：v-model
雙向綁定
<input v-model="searchText">
等價於：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
設計模式
單例模式
- 用來解決哪些問題——一個全局使用的類頻繁地建立與銷燬。
- 只能用閉包實現麼
- 寫個單例模式
// es5實現
// 最簡單的實現，沒有什麼封裝性
var singleton1 = {
attr: 1,
method: function() {return this.attr;}
};
// 利用構造函數內部解析，不安全
function singleton2 {
if (singleton2.instance !== undefined) {
return singleton2.instance;
}
this.name = "xxx";
this.age = "20";
singleton2.instance = this;
}
// 利用閉包
var singleton3 = (function() {
var instance;
function constructor() {
// blabla
}
function getInstance() {
if (instance === undefined) {
instance = new constructor();
}
return instance;
}
return {
getInstance: getInstance;
};
})();
// ================================================
// es6 實現
// 懶漢式單例
class Singleton1 {
// 構造方法
constructor() {
// this.xxx = xxx
}
static getInstance() {
if (!this.instance) {
this.instance = new Singleton1()
}
return this.instance
}
}
// 餓漢式單例
class Singleton2 {
// 構造方法
constructor() {
// this.xxx = xxx
}
static getInstance() {
return this.instance
}
}
Singleton2.prototype.instance = new Singleton2()
預解析
在當前做用域下，js運行以前，會把帶有var和function關鍵字的事先聲明，並在內存中安排好。而後再從上到下執行js語句。函數聲明會最早獲得提高，而後是變量聲明。
DOM
- 已知父節點獲取第一個子節點（parentObj.firstChild）
- 查兄弟節點（previousSibing前一個，nextSibing後一個）
- 在某個子節點後面插入節點（利用nextSibing、lastChild、insertBefore()、appendChild()）
對象的存儲方式
實際存儲在堆中，在棧中存儲的是堆內存儲地址。
因此能夠把變量名看作指針。
內存回收方式
標記清除、引用計數（問題：循環引用，IE9以前BOM和DOM是COM實現的，垃圾收集採用的是引用計數，所以也會出現問題）
String爲何有length屬性
基本包裝類型
已知一個function ClassA() {}，如何使得new ClassA()和ClassA()返回的值都是新的實例
函數內部判斷this是否爲window
用數據結構表示項目之間的依賴
雙向鏈表？map？不知道。。。
判斷一個圖有沒有環
無向圖：不斷去掉度爲1的點
有向圖：拓撲排序
從輸入url到顯示完成了什麼
- 用戶輸入URL地址
- 瀏覽器解析URL解析出主機名
- 瀏覽器將主機名轉換成服務器ip地址（瀏覽器先查找本地DNS緩存列表 沒有的話 再向瀏覽器默認的DNS服務器發送查詢請求 同時緩存）
- 瀏覽器將端口號從URL中解析出來
- 瀏覽器創建一條與目標Web服務器的TCP鏈接（三次握手）
- 瀏覽器向服務器發送一條HTTP請求報文
- 服務器向瀏覽器返回一條HTTP響應報文
- 瀏覽器解析文檔
- 若是文檔中有資源 重複6 7 8 動做 直至資源所有加載完畢
- 關閉鏈接
- 渲染頁面
- 瀏覽器會不會緩存dns
- 會，不一樣瀏覽器緩存時間不同
- https多了什麼步驟
- https: http + 通訊加密 + 證書 + 完整性保護，http secure
- 證書能夠證實服務器或客戶端的身份
- ssl: secure socket layer，安全套接層
- 多了SSL安全套接層。HTTP直接和TCP通訊。當使用SSL時，則變爲先和SSL通訊，再由SSL和TCP通訊。因此HTTPS能夠看作身披SSL協議外殼的HTTP。
- 假如客戶端最大下行10m，服務端最大上行100m，服務端會直接以10m的速率發包麼（加增乘減，AIMD）
- 上行就是上傳的速度,下行就是下載的速度
- 加法增大（Additive Increase）：執行擁塞避免算法後，使擁塞窗口緩慢增大，以防止網絡過早出現擁塞
- 乘法減少（Multiplicative Decrease）：不論在慢開始階段或擁塞避免階段，只要出現超時，就把慢開始門限值減半（當前擁塞窗口的一半）
- 將這兩種算法結合起來被稱爲AIMD算法
- 瀏覽器解析數據是所有收到才解析仍是邊收邊解析
- 若是加載
<link>須要十秒，分別在head和body那麼加載時用戶會看到什麼 - script，同上，還有外聯/內聯
<!-- 做者：toln 連接：https://www.zhihu.com/question/61309490/answer/304391361 來源：知乎 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。 --> HTML的加載不會受到js加載的影響 頁面渲染的大體過程爲，先下載解析HTML並創建DOM樹，再解析css繪製渲染樹。前者搭建頁面結構，後者增添頁面樣式。而在創建DOM樹的過程就會遇到諸如img、外聯css和script標籤，此時就要加載外部資源了。加載資源是由單獨的下載線程進行異步加載的，瀏覽器會並行加載，不過具體並行最大數量是有必定限制的，不一樣瀏覽器可能不同。可是加載css和js資源比較特殊，它們的加載會影響頁面渲染。css加載不會阻塞DOM樹解析，但會阻塞渲染（這是因爲渲染依賴於css，若是不等css加載完就渲染的話那麼等css加載解析完又得從新渲染，可能又要重繪或者回流）。對於js資源的加載，則會阻塞DOM樹的構建和渲染，除非設置了script標籤的異步屬性。 放在head中會在解析DOM樹和渲染頁面前就加載，並阻塞頁面。js正常狀況下加載完就會當即執行，在js腳本中只能訪問當前script以上的DOM，腳本執行結束後再繼續解析DOM。js執行引擎和頁面渲染是由不一樣的線程來執行，但這二者是互斥的，也就是說js執行過程是沒法構建DOM和渲染頁面的。這是一種優化機制，因爲js可能會對DOM及樣式進行修改，若是解析js過程當中同時構建DOM，就可能形成先後內容不一致或者重複構建。因此應該把script放在body中，使頁面更快完成渲染。
實現parse函數解析?b=1&c=2這樣的字段
function myParse(arg) {
arg = arg.split('?')[1].split('&');
let obj = {};
for (let i = 0; i < arg.length; i++) {
obj[arg[i].split('=')[0]] = arg[i].split('=')[1];
}
return obj;
}
箭頭函數的區別，能當作構造函數麼
ES6如何獲取函數參數
rest
setTimeout準時麼
不許時，只是到了時間後加入執行隊列
ES6手寫觀察者模式
觀察者模式
定義對象間的一種一對多的依賴關係，當一個對象的狀態發生改變時，全部依賴於它的對象都將獲得通知。
產生0-100的隨機數
Math.floor(Math.random()*100);
http報文結構，header有哪些字段
起始行、首部、主體。之間由CR+LF（回車換行）隔開。
header：首部
跨域
只有當 域名、協議、端口 都相同時才視爲同源。
方法：
- 跨資源共享
- document.domain
- 圖像ping
- jsonp
- comet
- websocket
手寫全部排序算法和DFS、BFS
快排、堆排、基數排序
// 插入排序
function insertionSort(arr) {
for (var i = 1; i < arr.length; i++) {
var tmp = arr[i];
var j = i-1;
while (j >= 0 && tmp < arr[j]) {
arr[j+1] = arr[j--];
}
arr[j+1] = tmp;
}
return arr;
}
// 二分插入排序
function binaryInsertionSort(arr) {
for (var i = 1; i < arr.length; i++) {
var tmp = arr[i], left = 0, right = i-1;
while (left <= right) {
var mid = parseInt((left + right) / 2);
if (arr[mid] < tmp) left = mid + 1;
else right = mid-1;
}
for (var j = i; j > left; j--) {
arr[j] = arr[j-1];
}
arr[left] = tmp;
}
return arr;
}
盒模型
標準盒模型和IE盒模型
session和cookie區別
替換元素
瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容
img、input、textarea、select、obejct、button、label都是替換元素（置換元素）
面向對象的特性
封裝繼承多態
封裝：把客觀事物封裝成抽象的類，而且類能夠把本身的數據和方法只讓可信的類或者對象操做，對不可信的進行信息隱藏。
繼承：可使用現有類的全部功能，並在無需從新編寫原來的類的狀況下對這些功能進行擴展。
多態：實現多態，有二種方式：覆蓋，重載。
同步異步區別
- 同步方法調用一旦開始，調用者必須等到方法調用返回後，才能繼續後續的行爲。
- 異步方法調用更像一個消息傳遞，一旦開始，方法調用就會當即返回，調用者就能夠繼續後續的操做。而，異步方法一般會在另一個線程中，「真實」地執行着。整個過程，不會阻礙調用者的工做。
js異步加載方法
defer、async、建立script插入到DOM中
串行和並行
串行是指多個任務時，各個任務按順序執行，完成一個以後才能進行下一個。
並行指的是多個任務能夠同時執行。
數據庫index及實現
進程和線程
| 方面 | 進程 | 線程 |
|---|---|---|
| 根本區別 | 操做系統資源分配的基本單位 | 任務調度和執行的基本單位 |
| 開銷方面 | 每一個進程都有獨立的代碼和數據空間（程序上下文），程序之間的切換會有較大的開銷 | 線程能夠看作是輕量級的進程。同一類線程共享代碼和數據空間，每一個線程都有本身獨立的運行棧和程序計數器，線程之間切換的開銷很小 |
| 所處環境 | 操做系統中多個進程能夠併發運行 | 同一個進程中能夠有多個線程同時執行（經過CPU調度，在每一個時間片中只有一個線程執行） |
| 內存分配 | 系統在運行時會爲每一個進程分配不一樣的內存空間 | 除了CPU外，系統不會爲線程分配內存（線程使用的資源來自其所屬進程的資源），線程組之間只能共享資源 |
| 包含關係 | 進程能夠包含多個線程，且這些線程能夠併發運行 | 線程是進程的一部分，因此線程也被稱爲輕權進程或者輕量級進程 |
進程間通訊方法
- 共享內存
- 信息傳遞
- 管道通訊
進程或線程的同步方法
管程、信號量
尾遞歸
若一個函數在尾位置調用自己（或是一個尾調用自己的其餘函數等），則稱這種狀況爲尾遞歸，是遞歸的一種特殊情形。而形式上只要是最後一個return語句返回的是一個完整函數，它就是尾遞歸。這裏注意：尾調用不必定是遞歸調用，可是尾遞歸必定是尾調用。
position
浮動
聖盃佈局、雙飛翼佈局
<!DOCTYPE html>
<html>
<head>
<title>聖盃佈局</title>
<style type="text/css">
.main, .left, .right {
position: relative;
float: left;
min-height: 150px;
}
.container {
padding: 0 300px 0 200px;
}
.main {
width: 100%;
background-color: red;
}
.left {
width: 200px;
margin-left: -100%;
left: -200px;
background-color: green;
}
.right {
width: 300px;
margin-left: -300px;
left: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>雙飛翼佈局</title>
<style type="text/css">
.container, .left, .right {
position: relative;
float: left;
min-height: 150px;
}
.main {
padding: 0 300px 0 200px;
}
.container {
width: 100%;
background-color: red;
}
.left {
width: 200px;
margin-left: -100%;
background-color: green;
}
.right {
width: 300px;
margin-left: -300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
動畫實現div無限旋轉
@keyframes rotate{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
div {
animation: rotate 3s linear infinite;
}
前端性能優化
https://blog.csdn.net/mapbar_front/article/details/79836443
304實現原理
若是web服務器返回304響應，則表示此請求的本地緩存是最新的，能夠直接使用。這種方法能夠節省帶寬，避免重複響應。
webSocket是哪一層的
應用層
實現add(1)(2)(3) == 6
function add(num) {
num += add.num?add.num:0;
add.num = num;
return add;
}
add.valueOf = function() {
return add.num;
};
實現相似於(10).add(5).reduce(2).add(1)的鏈式調用
Number.prototype.add = function(num) {return this+num;};
Number.prototype.reduce = function(num) {return this-num;};
js是單線程的，如何實現定時
setTimeout
ES6代理
Proxy 能夠理解成，在目標對象以前架設一層「攔截」，外界對該對象的訪問，都必須先經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。
Proxy 這個詞的原意是代理，用在這裏表示由它來「代理」某些操做，能夠譯爲「代理器」。
http://es6.ruanyifeng.com/#docs/proxy
Object.create()
Object.create()方法建立一個新對象，使用現有的對象來提供新建立的對象的__proto__。
計算一個數轉換成二進制後1的個數
function oneCount(num) {
var re = 0;
num = num.toString(2);
for (var i = 0; i < num.length; i++) {
if (num[i] == '1') re++;
}
return re;
}
HTTP長鏈接
HTTP/1.1開始Connection:keep-alive
狀態碼5xx
服務器端問題
https默認端口
443
tcp鏈接過程當中的狀態考察
https://blog.csdn.net/qwertyupoiuytr/article/details/68938963
三次握手四次揮手詳細
http2.0
多路複用和1.x請求的區別
unsigned int類型擴展長度
一個長度爲一百萬的數組中，超過一半都是某一個值，求這個值
https://blog.csdn.net/bzfys/article/details/73733917
漸進加強和優雅降級
漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。
沒有輔助空間的狀況下交換兩個數的值
function swap1(a, b) {
b = a + b;
a = b - a;
b = b - a;
}
// 使用異或
function swap2(a, b) {
b = a ^ b;
a = b ^ a;
b = b ^ a;
}
前端安全
XSS——跨站腳本攻擊
CSRF——跨站請求僞造
SQL注入
let暫時性死區和塊級做用域
類數組
對於一個普通的對象來講，若是它的全部property名均爲非負整數，同時也有相應的length屬性，那麼雖然該對象並非由Array構造函數所建立的，它依然呈現出數組的行爲，在這種狀況下，這些對象被稱爲「類數組對象」。
與普通對象不一樣的是，類數組對象擁有一個特性：能夠在類數組對象上應用數組的操做方法。
var o ={0:42,1:52,2:63,length:3}
console.log(Array.prototype.join.call(o));//「42,52,63」
console.log(Array.prototype.slice.call(o,1,2));//52
在瀏覽器環境中，document.getElementsByTagName()語句返回的就是一個類數組對象。
在function調用中，function代碼內的arguments變量(保存傳入的參數)也是一個類數組對象。
在ECMAScript 5標準中，字符串string就是一個只讀的類數組對象：
var s = "History"; console.log(s[3]);//"t" console.log(Array.prototype.join.call(s, " "));//"H i s t o r y"
for in 缺點
for..in循環會把原型(prototype)中方法與屬性給遍歷出來，因此這可能會致使代碼中出現意外的錯誤。
爲了不這個問題，咱們可使用對象的hasOwnProperty()方法來避免這個問題。
forEach()
ES6中map遍歷實現原理
數組去重
死鎖
https詳細過程
加密算法，對稱仍是非對稱。md5,SHA,AES
模塊化
webpack、AMD、CMD
數組的各類方法
內存換頁算法
事件循環
ajax調用中，後臺數據返回線程和前端UI線程是怎樣通訊和交互的，說一下實現原理
手寫封裝jsonp
function myCallback(data) {
console.log(data);
}
function jsonp(url, data, callback) {
if (data == 'string') {
callback = data;
data = {};
}
url += url.indexOf('?') == -1 ? '?' : '&';
url += 'callback=' + callback;
for (var key in data) {
url += '&' + key + '=' + data[key];
}
var script = document.createElement('script');
script.setAttribute('src', url);
document.querySelector('head').appendChild(script);
}
事件委託
也叫事件代理。
利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。
TCP和UDP
soket阻塞模式
doctype
AJAX實現原理，手寫實現
使用XMLHttpRequest實現
transform實現垂直居中
.center {
position: relative;
top: 50%;
transform: translateX(-50%);
}
call、apply、bind
bind返回修改this後的函數
call和apply當即執行，call順序傳參，apply傳入數組
vuex流程
vue生命週期
前端緩存機制
js多位數字每隔三位加一個逗號
function addCommas0(num) {
num = (num || 0).toString();
var re = '';
while (num.length > 3) {
re = ',' + num.slice(-3) + re;
num = num.slice(0, num.length-3);
}
if (num) re = num + re;
return re;
}
function addCommas1(num) {
return num.toLocaleString();
}
function addCommas2(num) {
return (num || 0).toString().replace(/\B(?=(?:\d{3})+\b)/g, ',')
}
其中正則方法參考自https://www.cnblogs.com/sivkun/p/7123963.html
\d 等價於[0-9]，表示數字字符
關於\b和\B能夠看這個，很易懂
(?=(?:\d{3})+\b)) 裏的 (?= ) 部分表示匹配一個位置，這個位置以後的內容符合這個括號裏的條件，也就是 (?:\d{3})+\b
()表示捕獲分組，()會把每一個分組裏的匹配的值保存起來，使用$n(n是一個數字，表示第n個捕獲組的內容)
(?:)表示非捕獲分組，和捕獲分組惟一的區別在於，非捕獲分組匹配的值不會保存起來
(?:\d{3})+\b 表示一串長度能夠被三整除的數字直至末尾
移動端適配
https://blog.csdn.net/chenjuan1993/article/details/81710022
移動端的性能優化
https://blog.csdn.net/u010683915/article/details/71043188
實現getElementsByClassName
function getElementsByClassName(className) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else {
var elements = [];
var allNodes = document.getElementsByTagName('*');
for (var i = 0; i < allNodes.length; i++) {
var tmpClassNames = allNodes[i].className.replace(/\s+/g,',').split(',');
for (var j = 0; j < tmpClassNames.length; j++) {
if (tmpClassName[j] == className) {
elements.push(allNodes[i]);
break;
}
}
}
return elements;
}
}
DOM 選擇器
document.getElementById()——元素id在ie8如下的瀏覽器不區分id大小寫，並且也返回匹配的name屬性的元素
document.getElementsByName()——只有部分標籤name可生效（表單、表單元素、img、iframe）
document.getElementsByTagName()
document.getElementsByClassName()——ie8和ie8如下的ie版本中沒有
CSS選擇器：（不是實時的）
在css中怎麼選，這裏就怎麼選
document.querySelector()
document.querySelectorAll()
Web前端打包工具
https://baijiahao.baidu.com/s?id=1577252811128016864&wfr=spider&for=pc
webpack 首選
gulp 其次
grunt 已經落伍
jquery選擇器實現
瀏覽器最小顯示的字體大小 若是想要顯示更小怎麼辦
12px transform
commomJS AMD CMD es6用的哪一個
https://www.cnblogs.com/dongdongseven/p/7724106.html
$documnent.ready() VS window.onload() 哪一種先執行
$document.ready()在DOM加載完畢時執行
window.onload()在整個頁面全部資源都加載完成時執行
屬性getter和setter
由getter和setter定義的屬性稱爲存儲器屬性。
當程序查詢存儲器屬性的值時，JavaScript調用getter方法（無參數）。
當程序設置存儲器屬性的值時，JavaScript調用setter方法，將賦值表達式右側的值當作參數傳入setter。能夠忽略setter的返回值。
若是屬性同時具備setter和getter方法，那麼它是一個讀/寫屬性。
若是隻有getter方法，那麼就是一個只讀屬性。
若是隻有setter方法，那麼就是一個只寫屬性，讀取只寫屬性老是返回undefined。
var p = {
// 數據屬性
x: 1.0,
y: 1.0,
// 存儲器屬性
get r() {
return Math.sqrt(this.x*this.x + this.y*this.y);
},
set r(newValue) {
var oldValue = Math.sqrt(this.x*this.x + this.y*this.y);
var ratio = newValue/oldValue;
this.x *= ratio;
this.y *= ratio;
}
};
Object.definePropoty()
Object.defineProperty(obj, prop, descriptor)
obj
要在其上定義屬性的對象。
prop
要定義或修改的屬性的名稱。
descriptor
將被定義或修改的屬性描述符。
| configurable | enumerable | value | writable | get | set | |
|---|---|---|---|---|---|---|
| 數據描述符 | Yes | Yes | Yes | Yes | No | No |
| 存取描述符 | Yes | Yes | No | No | Yes | Yes |
var o = {}; // 建立一個新對象
// 在對象中添加一個屬性與數據描述符的示例
Object.defineProperty(o, "a", {
value : 37,
writable : true,
enumerable : true,
configurable : true
});
// 對象o擁有了屬性a，值爲37
// 在對象中添加一個屬性與存取描述符的示例
var bValue;
Object.defineProperty(o, "b", {
get : function(){
return bValue;
},
set : function(newValue){
bValue = newValue;
},
enumerable : true,
configurable : true
});
o.b = 38;
// 對象o擁有了屬性b，值爲38
// o.b的值如今老是與bValue相同，除非從新定義o.b
// 數據描述符和存取描述符不能混合使用
Object.defineProperty(o, "conflict", {
value: 0x9f91102,
get: function() {
return 0xdeadbeef;
}
});
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
解釋性語言和編譯性語言
計算機不能直接理解高級語言，只能直接理解機器語言，因此必需要把高級語言翻譯成機器語言，計算機才能執行高級語言編寫的程序。
翻譯的方式有兩種，一個是編譯，一個是解釋。兩種方式只是翻譯的時間不一樣。
解釋性語言的定義：
解釋性語言的程序不須要編譯，在運行程序的時候才翻譯，每一個語句都是執行的時候才翻譯。這樣解釋性語言每執行一次就須要逐行翻譯一次，效率比較低。
現代解釋性語言一般把源程序編譯成中間代碼，而後用解釋器把中間代碼一條條翻譯成目標機器代碼，一條條執行。
編譯性語言的定義：
編譯性語言寫的程序在被執行以前，須要一個專門的編譯過程，把程序編譯成爲機器語言的文件，好比exe文件，之後要運行的話就不用從新翻譯了，直接使用編譯的結果就好了（exe文件），由於翻譯只作了一次，運行時不須要翻譯，因此編譯型語言的程序執行效率高。
代碼三要素
可讀性
可維護性
可變動性
- 1. 前端面試經歷（持續更新）
- 2. 繼續前行
- 3. 前端面試——JS繼承
- 4. 前端面經
- 5. 2020，繼續前行！
- 6. 前端面試經
- 7. 前端面經(四）
- 8. 2020前端面經
- 9. 2020 WTM 繼續向前
- 10. 前端面試題系列 - 繼承
- 更多相關文章...
- • C# 繼承 - C#教程
- • Swift 繼承 - Swift 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端面試經歷（持續更新）
- 2. 繼續前行
- 3. 前端面試——JS繼承
- 4. 前端面經
- 5. 2020，繼續前行！
- 6. 前端面試經
- 7. 前端面經(四）
- 8. 2020前端面經
- 9. 2020 WTM 繼續向前
- 10. 前端面試題系列 - 繼承