å端é¢è¯
é®é¢æ±æ»,æ³å°å°±å....
Q: CSS æåªäºæ ·å¼å¯ä»¥ç»åå ç´ ç»§æ¿!
- å¯ç»§æ¿ç:
font-size
,font-weight
,line-height
,color
,cursor
ç - ä¸å¯ç»§æ¿çä¸è¬æ¯ä¼æ¹åçå模åç:
display
,margin
ãborder
ãpadding
ãheight
ç
æ´å å ¨é¢çå¯ä»¥å°å¼ææ¾
Q: è¡å å ç´ æåªäºï¼å级å ç´ æåªäºï¼ 空(void)å ç´ æé£äºï¼
- è¡å
:
input
,span
,a
,img
以ådisplay:inline
çå ç´ - å级:
p
,div
,header
,footer
,aside
,article
,ul
以ådisplay:block
è¿äº - void:
br
,hr
Q: CSS3å®ç°ä¸ä¸ªæå½¢
- æè·¯è·ç»å®ä½ä¸è§å½¢ä¸ä¸ªéç,åªä¸è¿å¤äºä¸ä¸ªåè§å±æ§
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>æå½¢</title>
<style>
.sector {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: #f00 transparent transparent;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="sector"></div>
</body>
</html>
å¤å¶ä»£ç
Q: box-sizing
常ç¨çå±æ§æåªäº? åå«æå¥ä½ç¨?
box-sizing
æ两个å¼:content-box(W3Cæ åç模å)
,border-box(æªå¼æ¨¡å)
,
è¿ä¸ªcss 主è¦æ¯æ¹åçå模å大å°ç计ç®å½¢å¼
å¯è½æ人ä¼é®padding-box
,è¿ä¸ªä¹ååªæ Firefox æ åå®ç°äº,ç®å50+ççæ¬å·²ç»åºé¤;
ç¨ä¸ä¸ªæ åæ¥è·ç¦»,ä¸ä¸ªdiv
ç宽é«åå«100px
,border
为5px
,padding
为5px
<style>
.test {
box-sizing: content-box;
border: 5px solid #f00;
padding:5px;
width: 100px;
height: 100px;
}
</style>
<div class="test"></div>
<!--
content-boxç计ç®å
¬å¼ä¼æ宽é«çå®ä¹æå content,borderå padding å¦å¤è®¡ç®,
ä¹å°±æ¯è¯´ content + padding + border = 120px(çåå®é
大å°)
èborder-boxç计ç®å
¬å¼æ¯æ»ç大å°æ¶µçè¿ä¸è
, content ä¼ç¼©å°,æ¥è®©ç»å¦å¤ä¸¤è
content(80px) + padding(5*2px) + border(5*2px) = 100px
-->
å¤å¶ä»£ç
Q: æ¸ é¤æµ®å¨çæ¹å¼æåªäº?æ¯è¾å¥½çæ¯åªä¸ç§?
常ç¨çä¸è¬ä¸ºä¸ç§.clearfix
, clear:both
,overflow:hidden
;
æ¯è¾å¥½æ¯ .clearfix
,伪å
ç´ ä¸éæ²¹çæ¬...å两è
æå±éæ§..çä¼åæ¯
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<!--
为æ¯æ²¡æ zoom ,_height è¿äº...IE6,7è¿ç±»éè¦ csshack ä¸åæ们èèä¹å
äº
.clearfix è¿æå¦å¤ä¸ç§åæ³...
-->
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
<!--
ç¨display:table æ¯ä¸ºäºé¿å
å¤è¾¹è·marginéå 导è´çmarginå¡é·,
å
é¨å
ç´ é»è®¤ä¼æ为 table-cell åå
æ ¼çå½¢å¼
-->
å¤å¶ä»£ç
clear:both
:è¥æ¯ç¨å¨åä¸ä¸ªå®¹å¨å
ç¸é»å
ç´ ä¸,é£æ¯è´¼å¥½ç...ææ¶åå¨å®¹å¨å¤å°±æäºé®é¢äº, æ¯å¦ç¸é»å®¹å¨çå
裹å±å
ç´ å¡é·
overflow:hidden
:è¿ç§è¥æ¯ç¨å¨å个容å¨å
,å¯ä»¥å½¢æ BFC
é¿å
æµ®å¨é æçå
ç´ å¡é·
Q: CSS ä¸transition
åanimate
æä½åºå«? animate
å¦ä½åçå¨æåä¸å¸§!
è¿ç§é®é¢è§ä»è§æº,æçåç大ä½æ¯è¿æ ·ç..å¾ æææ.
transition
ä¸è¬ç¨æ¥åè¿æ¸¡ç, 没æ¶é´è½´çæ¦å¿µ, éè¿äºä»¶è§¦å(ä¸æ¬¡),没ä¸é´ç¶æ(åªæå¼å§åç»æ)
èanimate
åæ¯åå¨æ,ææ¶é´è½´çæ¦å¿µ(帧å¯æ§),å¯ä»¥éå¤è§¦ååæä¸é´ç¶æ;
è¿æ¸¡çå¼éæ¯å¨æå°,åè ä¸è¬ç¨äºäº¤äºå± å¤,åè ç¨äºæ´»å¨é¡µå± å¤;
è³äºå¦ä½è®©animate
åçå¨æåä¸å¸§ä¹å¥½å,å°±å®èªèº«åæ°çä¸ä¸ªå¼å°±å¯ä»¥äº
animation-fill-mode: forwards;
<!--backwardsååçå¨é¦å¸§,bothæ¯è½®æµ-->
å¤å¶ä»£ç
让æ们æ¥ä¸¾ä¸ªæ å....èªå·±æ°å»ºä¸ä¸ª html è·ä¸ä¸....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Box-sizing</title>
<style>
.test {
box-sizing: border-box;
border: 5px solid #f00;
padding: 5px;
width: 100px;
height: 100px;
position:absolute;
/*
ç®åç姿å¿æåº
@keyframes name : å¨ç»å
duration æç»æ¶é´
timing-function å¨ç»é¢ç
delay 延è¿å¤ä¹
å¼å§
iteration-count 循ç¯æ¬¡æ°
direction å¨ç»æ¹å¼,å¾è¿è¿æ¯æ£å
fill-mode ä¸è¬ç¨æ¥å¤çåçå¨æä¸å¸§
play-state running å¼å§,paused æå ....
æ´å¤çåæ°å»æ¥ææ¡£å§..æå°±ä¸ä¸ä¸å举äº
*/
animation: moveChangeColor ease-in 2.5s 1 forwards running;
}
@keyframes moveChangeColor {
from {
top:0%;
left:5%;
background-color:#f00
}
to{
top:0%;
left:50%;
background-color:#ced;
}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
å¤å¶ä»£ç
Q: å级å ç´ æ°´å¹³åç´å± ä¸çæ¹æ³
æ们è¦èè两ç§æ åµ,å®å®½é«åä¸å®å®½é«ç;
æ¹æ¡ N å¤ç§,æè®°å¾æå¾æ©åè¿è¿ç±»çç¬è®°
ä¼ éé¨:ç½é¡µå ç´ å± ä¸æ»ç¥è®°
Q: è¯´è¯´æ ·å¼æéçä¼å 级;
!important
> è¡å
æ ·å¼ > id
> class
> tag
æ ·å¼æéå¯ä»¥å å , æ¯å¦ id>class
Q: 对HTMLè¯ä¹åçç解
ç®è¨ä¹:å°±æ¯ä¸æ»¥ç¨æ ç¾(æ¯å¦ DIV)/éæåµå¥(æ¯å¦ span>div) ,
ç±»çå½åè¦åç, å©äºæµè§å¨è§£æä¹è³å¼ææ¶å½,ä¹å©äºå¢éåä½åç»´æ¤
Q: JSæå ç§æ°æ®ç±»å,å ¶ä¸åºæ¬æ°æ®ç±»åæåªäº!
ä¸ç§æ°æ®ç±»å
- Boolean
- Null
- Undefined
- Number
- String
- Symbol (ECMAScript 6 æ°å®ä¹)
- Object
(ES6ä¹å)å
¶ä¸5ç§ä¸ºåºæ¬ç±»å:string
,number
,boolean
,null
,undefined
,
ES6åºæ¥çSymbol
ä¹æ¯åå§æ°æ®ç±»å ï¼è¡¨ç¤ºç¬ä¸æ äºçå¼
Object
为å¼ç¨ç±»å(èå´æºå¤§),ä¹å
æ¬æ°ç»ãå½æ°,
Q: null
åundefined
çå·®å¼
大ä½è¯´ä¸ä¸,æ³è¦ç¥å ¶æ以ç¶è¯·å¼ææç´¢
ç¸åç¹:
- å¨
if
å¤æè¯å¥ä¸,å¼é½é»è®¤ä¸ºfalse
- 大ä½ä¸ä¸¤è é½æ¯ä»£è¡¨æ ,å ·ä½çå·®å¼
å·®å¼:
-
null
转为æ°åç±»åå¼ä¸º0,èundefined
转为æ°åç±»å为NaN(Not a Number)
-
undefined
æ¯ä»£è¡¨è°ç¨ä¸ä¸ªå¼è该å¼å´æ²¡æèµå¼,è¿æ¶åé»è®¤å为undefined
-
null
æ¯ä¸ä¸ªå¾ç¹æ®ç对象,æ为常è§çä¸ä¸ªç¨æ³å°±æ¯ä½ä¸ºåæ°ä¼ å ¥(说æ该åæ°ä¸æ¯å¯¹è±¡) - 设置为
null
çåéæè 对象ä¼è¢«å åæ¶éå¨åæ¶
Q: JS çDOM æä½(Nodeèç¹è·ååå¢å æ¥æ¹);
- è·å(太å¤äº,æ
document.getElementById/ClassName/Name/TagName ç,æè querySelector
)
// example
// get Node
var element = document.querySelector('#test');
// 追å
element.appendChild(Node);
// å é¤
element.removeChild(Node);
// æ¥æ¾
element.nextSibling // è·åå
ç´ ä¹åçå
å¼èç¹ , ä¼æ¿å°æ³¨éææ¬,空ç½ç¬¦è¿äº
element.nextElementSibling // çå, è·åæ ç¾(ä¸ä¼æ¿å°æ³¨éææ¬è¿äº)
element.previousSibling // åä¸é¢åç,å¾åæ¾å
å¼èç¹
element.previousElementSibling
// æ¹å¨,æ¯å¦ å±æ§è¿äº
element.setAttribute(name, value); // å¢å å±æ§
element.removeAttribute(attrName); //å é¤å±æ§
// æ¥ä¸ä¸ªç®æçç»ä¹ é¢,é便ä¸ä¸ªç½é¡µè¿½å æå
¥ä¸åDOM(éè¦ç:ä¸è½ innerHTML);
/*
<div id="test">
<span>Hello, World</span>
</div>
*/
// 以ä¸é¢çä¾å为ä¾
var test = document.createElement('div'); // å建ä¸ä¸ªå级å
ç´
test.setAttribute("id","test"); // 设置å
¶id å±æ§
var span = document.createElement('span'); // å建ä¸ä¸ª span
span.innerText = "Hello,world"; // æå
¥ span çææ¬å
容
test.appendChild(span); // ç»åèç¹
element.appendChild(test); //追å å°æ个èç¹åºå
å¤å¶ä»£ç
Q: ç»ä¸ä¸ª DOM
æ·»å æè·åå泡ç两ç§åæ³çäºä»¶ç¹å»,è°å
æ§è¡?
åæ åµåæ:
- ææ¿å°èç¹ç,ä¼å æè·,没ææå¾ä¸å泡寻æ¾
- è¥æ¯éè¿
node.addEventListener('event',callback,bubble or capture)
; è°å è°ç¨è°å æ§è¡
* æç¸å ³çæ¢è®¨:
Q: è°è°ä½ 对ajax çç解,以åç¨åç JS å®ç°æåªäºè¦ç¹éè¦æ³¨æ;
ajax
å
¨ç§°æ¯å¼æ¥ javascript å XML
,ç¨æ¥åæå¡ç«¯è¿è¡æ°æ®äº¤äºç,让æ å·æ°æ¿æ¢é¡µé¢æ°æ®æäºå¯è½;
è³äºæåªäºè¦è¦ç¹,æ¥ä¸ä¸ªç®ççajax
请æ±
var xhr = new XMLHttpRequest(); // 声æä¸ä¸ªè¯·æ±å¯¹è±¡
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){ // readyState 4 代表已åæå¡å¨åé请æ±
if(xhr.status === OK){ // // status 200 代表æå¡å¨è¿åæå
console.log(xhr.responseText); // è¿æ¯è¿åçææ¬
} else{
console.log("Error: "+ xhr.status); // è¿æ¥å¤±è´¥çæ¶åæåºé误
}
}
}
xhr.open('GET', 'xxxx');
// å¦ä½è®¾ç½®è¯·æ±å¤´? xhr.setRequestHeader(header, value);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(null); // getæ¹æ³ send null(亦æè
ä¸ä¼ ,åç´æ¥æ¯ä¼ é header) ,post ç send åæ¯ä¼ éå¼
å¤å¶ä»£ç
æ´ä¸ºè¯¦ç»çå¯ä»¥é 读æ¤å¤;
Q: JS å®ç°ä¸ä¸ªéå å½æ°,æ¯æ¬¡è°ç¨é½èªå¢1;
è¿é主è¦èå¯äºéå ,å½æ°è¡¨è¾¾å¼ä»¥å IIFE(ç«å³æ§è¡è¡¨è¾¾å¼)
var add = (function() {
// 声æä¸åé,ç±äºä¸é¢ returnæ以åéåªä¼å£°æä¸æ¬¡
var count = 0;
return function() {
return console.log(count++);
};
})();
add(); // 0
add(); // 1
add(); // 2
å¤å¶ä»£ç
Q: ['1','2','3'].map(parseInt) è¾åºä»ä¹,为ä»ä¹?
['1','2','3'].map(parseInt); // [1,NaN,NaN]
// å¨æ
// mapæä¸ä¸ªåæ°:æ°ç»å
ç´ ï¼å
ç´ ç´¢å¼ï¼åæ°ç»æ¬èº«
// parseIntæ两个åæ°,å
ç´ æ¬èº«ä»¥åè¿å¶
// çæ¸
äºè¿ä¸¤ä¸ªå°±å¥½åäº...
// ['1','2','3'].map(parseInt); çäºå¦ä¸
['1','2','3'].map(function(item,index,array){
return parseInt(item,index); // æ¯ä¸æ¯ä¸ç®äºç¶
});
// parseInt("1",0); => 1
// parseInt("2",1); => NaN
// parseInt("3",2); => NaN
å¤å¶ä»£ç
Q: 对æ°ç» ['2018-03-05', '2013-06-12','2019-03-12','2018-03-05','2014-02-22'] å»éä¸æåº
æè¿éç¨çæ¯ç»å ES6
ç,代ç éå¾ç
//å¾å¥½ç解, Set å
·æå¼å¯ä¸æ§(ä½ä¸æ¯ææå¼,çä¼ææåºæçå¦å¤ä¸ç¯æç« )
// ç»å...解æ,å¯ä»¥æå¯è¿ä»£(æ¯å¦ arguments/nodelist ç)ç转为æ°ç»
// sort éé¢ä¼ å
¥ 两个å¼æ¯è¾,è¿å-1å1æ¯å 为1代表è¿ä¸ªæ°å¤§æå(ç¸å¯¹),-1代表å°(ç¸å¯¹),0为ç¸ç
let arr = [...new Set(['2018-03-05', '2013-06-12','2019-03-12','2018-03-05','2014-02-22'])].sort(function(a,b){
return a<b ? -1:1; // è¿éè¿åçæ¯ååºç,éåºæ¹ä¸è¿åå¼å°±å¥½äº.æ以æ¯ç¸å¯¹
})
// ["2013-06-12", "2014-02-22", "2018-03-05", "2019-03-12"]
å¤å¶ä»£ç
对äºæ°ç»å»éç,æå ´è¶£çå¯ä»¥çä¸æè¿ç¯æ°´æ:
Q: 对æ°ç»[1,2,3,4,5,'6',7,'8','a','b','z']
è¿è¡ä¹±åº
// æ们ä¾æ§å¯ä»¥ç¨ä¸é¢ç sort çåçå®ç°ä¹±åº
let tempArr = [1,2,3,4,5,'6',7,'8','a','b','z'].sort(function(){
return Math.random() > 0.5 ? -1 : 1;
})
// å 为éé¢æéæºæ°,æ以çæ¡æ²¡ææ åçæ¡,æè¿è¾¹è·äºä¸æ¬¡æ¯è¾åºè¿ä¸ª
//["6", "z", 3, "b", 5, 2, 7, "8", "a", 1, 4]
å¤å¶ä»£ç
ä¸é¢åè¿éé¢éæ¶åå°æ°ç»é¡ºåºçé®é¢,æ³äºè§£ä¸ä¸ºä»ä¹ a-b
,a>b
è¿ç±»å¯ä»¥æ´æ¹æåº
å¯ä»¥ççç¥ä¹å¯¹äºè¿åçæ¢è®¨: ä¼ éé¨:javascriptæåºreturn a-b?
Q: æ±[1, 10, 11, -1,'-5',12, 13, 14, 15, 2, 3, 4, 7, 8, 9]
å
æ大å¼ä¸æå°å¼ä¹å·®
// æ¥ä¸ä¸ªå¾ç²ç³ççæ¬,åªå½ä¼ å
¥æ¯æ°ç»ä¸å¯ä»¥éæ§è½¬ä¸ºæ°åç
function MaxMinPlus(arr) {
// è¿åæ大å¼ä¸æå°å¼ä¹å·®
return Array.isArray(arr) ? Math.max.apply(Math, arr) - Math.min.apply(Math, arr) : console.log('ä¼ å
¥çä¸æ¯æ°ç»äº¦æè
æªè½è§£å³çé误')
}
// ç»ææ¯ 20
// è¥æ¯è¦å®åçè¯,è¦èèä¼ å
¥çæ¯éæ°ç»,
//ä¼ å
¥å符串çæ¶åè¦å¤æ,ç¶ååå²ä¸ºæ°ç»..
// é½è¦èèè¿å»ä»£ç éä¸ç
å¤å¶ä»£ç
Q: 请ç»Array
å®ç°ä¸ä¸ªæ¹æ³,å»éåè¿åéå¤çå符(æ°æ°ç»)
var testArr = [1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3];
Array.prototype.extraChar = function(){
var cacheExtraChar = []; // ç¼åéå¤åºç°çå符
var that = this; // ç¼å this;
this.map(function(item,index){
// æä¹ç解è¿æ®µä»£ç å¢?
// å°±æ¯ååå¾åæ¥æ¾ä¸éåä»åå¾åæ¥æ¾ä¸é,ä¸çå°±æ¯æ²¡æéå¤
// 为ä»ä¹è¿è¦å¤æä¸éç¼å,æ¯è¿æ»¤ç¼åæ°ç»å
å¤æ¬¡åå
¥
(that.indexOf(item) !== that.lastIndexOf(item)) && cacheExtraChar.indexOf(item) === -1 ? cacheExtraChar.push(item) : -1;
});
return cacheExtraChar;
}
testArr.extraChar(); // [1, 3, 7, 2, 4]
// è¥æ¯è¿éè¦æåºå°±åæåºä¸
[1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3]
.extraChar()
.sort(function(a,b){return a-b}) // [1, 2, 3, 4, 7]
å¤å¶ä»£ç
Q: ä¸ä¸ªæ°ç»ä¸ parä¸åæ¾äºå¤ä¸ªäººåçä¿¡æ¯,æ¯ä¸ªäººåçä¿¡æ¯ç± name
å age
ææ({name:'å¼ ä¸',age:15}
).è¯·ç¨ JS å®ç°å¹´é¾ä»å°å°å¤§çæåº;
var par = [{age:5,name:'å¼ ä¸'},{age:3,name:'æå'},{age:15,name:'çäº'},{age:1,name:'é便'}]
var parSort = par.sort(function(a,b){
return a.age - b.age;
})
å¤å¶ä»£ç
Q: å¤æä¸ä¸ªåæå符串åååæ¯å¼åºå符串
- åæå符串就æ¯æ£åºååºé½æ¯ä¸æ ·ç;
- ååæ¯å¼åºå符串åæ¯å符串é½ä¸æ ·,ä½æ¯ä½ç½®å¯è½ä¸ä¸å®ä¸æ ·,æ¯å¦
abcefd
ådceabf
=>return true
åè çæ路就æ¯ç¨æåºæå¼åºææ£..
æ®éç
// åæå¤æ , æ¯å¦ç¨ abcba
var isPalindromes = function(params){
params = params.toString().toLowerCase()
return params === params.split('').reverse().join('');
}
// ååæ¯å¼åºå¤å®,æ¯å¦`abcefd`å`dceabf`
var isAnagram = function(str1, str2) {
str1 = str1.toString().toLowerCase();
str2 = str2.toString().toLowerCase();
return str1.split('').sort().join('') === str2.split('').sort().join('')
}
å¤å¶ä»£ç
è¿é¶ç:å¤ä¸äºç¹æ®å符
è¥æ¯æ们è¦å»é¤ææéåæ¯æ°åçå符,åéè¦ç¨å°æ£å
// è¿é¶ç: isPalindromes('abc_ &b #@a')
var isPalindromes = function(params){
// ä¼ å
¥åæ°å
转为å符串ä¸å
¨é¨è½¬ä¸ºå°å,æåå»é¤å¤ä½å符æ¯è¾
params = params.toString().toLowerCase().replace(/[\W_\s]/g,'');
console.log(params)
return params === params.split('').reverse().join('');
}
// è¿é¶çååæ¯å¼åº: isAnagram('ab *&cef#d','[email protected]^abf')
var isAnagram = function(str1, str2) {
str1 = str1.toString().toLowerCase().replace(/[\W_\s]/g,'');
str2 = str2.toString().toLowerCase().replace(/[\W_\s]/g,'');
return str1.split('').sort().join('') === str2.split('').sort().join('')
}
å¤å¶ä»£ç
Q: JS å®ç°String.trim()
æ¹æ³;
// åçæ¯æ trim()æ¹æ³ç.æ们è¦æ¨¡æä¸ä¸ª;
String.prototype.emuTrim = function(){
// è¿æ¡æ£åå¾å¥½ç解,å°±æ¯æ头é¨å°¾é¨å¤ä½çç©ºæ ¼å符å»é¤
return this.replace(/(^\s*)|(\s*$)/g,'');
}
' fsaf fsdaf f safl lllll '.emuTrim(); //"fsaf fsdaf f safl lllll"
å¤å¶ä»£ç
Q: JS å®ç°å½æ°è¿è¡ä¸ç§åæå°è¾åº0-9;ç»å®å¦ä¸ä»£ç
for(var i=0;i<10;i++){
// TODO
}
å¤å¶ä»£ç
- 解æ³
// è¿éé¢æ¶åå°ä½ç¨å
for(var i=0;i<10;i++){
setTimeout((function(i){
return function(){
console.log(i);
}
})(i),1000);
}
å¤å¶ä»£ç
è¥æ¯ç¨å° ES6...é£ç®ç´ä¸è½åç®ä¾¿äº
for(let i=0;i<10;i++){
setTimeout(function(){
console.log(i);
},1000);
}
å¤å¶ä»£ç
Q: å®ç°å¯¹ä¸ä¸ªæ°ç»æè 对象çæµ æ·è´å"深度"æ·è´
æµ æ·è´å°±æ¯æå±äºæºå¯¹è±¡çå¼é½å¤å¶ä¸éå°æ°ç对象,ä¸ä¼å¼è¾ä¸¤è ç¬ç«çå ååºå;
深度æ·è´åæ¯å®å®å ¨å ¨ä¸¤ä¸ªç¬ç«çå ååºå,äºä¸å¹²æ°
- æµ æ·è´
// è¿ä¸ª ES5ç
function shallowClone(sourceObj) {
// å
å¤æä¼ å
¥çæ¯å¦ä¸ºå¯¹è±¡ç±»å
if (!sourceObj || typeof sourceObj !== 'object') {
console.log('æ¨ä¼ å
¥çä¸æ¯å¯¹è±¡!!')
}
// å¤æä¼ å
¥ç Objæ¯ç±»å,ç¶åç»äºå¯¹åºçèµå¼
var targetObj = sourceObj.constructor === Array ? [] : {};
// éåææ key
for (var keys in sourceObj) {
// å¤æææå±äºèªèº«ååé¾ä¸ç key,èé继æ¿(ä¸æ¸¸ )é£äº
if (sourceObj.hasOwnProperty(keys)) {
// ä¸ä¸å¤å¶è¿æ¥
targetObj[keys] = sourceObj[keys];
}
}
return targetObj;
}
// ES6 å¯ä»¥ç¨ Object.assign(targeObj, source1,source2,source3) æ¥å®ç°å¯¹è±¡æµ
æ·è´
å¤å¶ä»£ç
- 深度æ·è´
// å°±æ¯æéè¦èµå¼çç±»å转为åºæ¬ç±»å(å符串è¿äº)èéå¼ç¨ç±»åæ¥å®ç°
// JOSN对象ä¸çstringifyå¯ä»¥æä¸ä¸ªjs对象åºåå为ä¸ä¸ªJSONå符串ï¼parseå¯ä»¥æJSONå符串ååºåå为ä¸ä¸ªjs对象
var deepClone = function(sourceObj) {
if (!sourceObj || typeof sourceObj !== 'object') {
console.log('æ¨ä¼ å
¥çä¸æ¯å¯¹è±¡!!');
return;
}
// 转->解æ->è¿åä¸æ¥å°ä½
return window.JSON
? JSON.parse(JSON.stringify(sourceObj))
: console.log('æ¨çæµè§å¨ä¸æ¯æ JSON API');
};
å¤å¶ä»£ç
Q: this对象çç解
ç®è¨ä¹:è°è°ç¨æåè°,è¿è¡æ¶çä¸ä¸æç¡®å®,èéå®ä¹çæ¶å就确å®;
强è¡ç»å® this
çè¯,å¯ä»¥ç¨ call
,apply
,bind
,ç®å¤´å½æ°....æ¥ä¿®æ¹this
çæå
è¿ç±»çæç« å¤ªå¤,èªè¡æç´¢å§....
Q: çå°ä½ è¯´å° bind
,è½ç¨ JSç®åç模æ个ä¹?
Function.prototype.emulateBind = function (context) {
var self = this;
return function () {
return self.apply(context);
}
}
å¤å¶ä»£ç
è¿ä¸ªå®ç°å¾ç²ç³...æ´ä¸ºè¯¦ç»å ¨é¢,èèå¨å ¨ç(æ¯å¦åæ°çå¤çä»ä¹ç)...èªè¡è°·æ.
Q:JS çä½ç¨åæ¯ä»ä¹?æä»ä¹ç¹å«ä¹å¤ä¹?
ä½ç¨åå°±æ¯æå®èªèº«çä¸ä¸æåºå(æ¯å¦å½æ°å ),å é¨ä¼æåé声ææå,å½æ°å£°ææåè¿äº;
å½æ°å£°ææåä¼äºåé声ææå..
ä½ç¨åæå ¨å±ä½ç¨ååå级ä½ç¨å(å±é¨,æ¯å¦ç¨ let æè å纯è±æ¬å·ç);
ä½ç¨åä¼å½±åthis
çæå
åçè¡¥å ,æåççæ¶å,é¢è¯å¤§ä½¬åªæ¯ å¯..æ©...æ©...ä¹ä¸ç¥éå ·ä½å¦ä½
Q: æä¹è§£å³è·¨åé®é¢,æåªäºæ¹æ³...
æä¸è¬ç¨è¿ä¸ç§,cors
,nginxåå代ç
,jsonp
-
jsonp
: å纯ç get ä¸äºæ°æ®,å±éæ§å¾å¤§...å°±æ¯å©ç¨scriptæ ç¾çsrcå±æ§æ¥å®ç°è·¨åã -
nginx åå代ç
: 主è¦å°±æ¯ç¨äºnginx.conf
å çproxy_pass http://xxx.xxx.xxx
,ä¼æææ请æ±ä»£çå°é£ä¸ªåå,æå©ä¹æå¼å§.. -
cors
çè¯,å¯æ§æ§è¾å¼º,éè¦åå端é½è®¾ç½®,å ¼å®¹æ§ IE10+ ,æ¯å¦- Access-Control-Allow-Origin: http://foo.example // ååä¹è³æ´ä¸ªååæææååæ¯å¦å 许访é®
- Access-Control-Allow-Methods: POST, GET, OPTIONS // å 许é£äºè¡ä¸ºæ¹æ³
- Access-Control-Allow-Headers: X-PINGOTHER, Content-Type // å 许ç头é¨å段
- Access-Control-Max-Age: 86400 // æææ
Q: 对äºæ³æºå¸¦ä¸äºé´æä¿¡æ¯è·¨åå¦ä½èµ°èµ·?æ¯å¦cookie
!
éè¦é
ç½®ä¸ header Access-Control-Allow-Credentials:true
,å
·ä½ç¨æ³çä¸é¢çnginx
demo
å½ç¶cros
çé
ç½®ä¸ä»
ä»
è¿äº,è¿æå
¶ä»ä¸äº,å
·ä½å¼æå§....
è¥æ¯æ们è¦ç¨ nginx
æè
express
é
ç½®cors
åºè¯¥æä¹æèµ·? æ¥ä¸ªç®æçæ¬ç
- nginx
location / {
# æ£æ¥åååç¼
add_header Access-Control-Allow-Origin xx.xx.com;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type;
add_header Access-Control-Max-Age 86400;
}
å¤å¶ä»£ç
- express, å½ç¶è¿è´§ä¹æä¸äºå«äººå°è£
好ç
cors
ä¸é´ä»¶,æä½æ§æ´å¼º...
let express = require('express');
let app = express();
//设置ææ请æ±ç头é¨
app.all('*', (req, res, next) => {
res.header("Access-Control-Allow-Origin", "xx.xx.com");
res.header("Access-Control-Allow-Headers", "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type");
res.header("Access-Control-Allow-Credentials","true")
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});
å¤å¶ä»£ç
æäºè¿ä¼è·ä½ æ»ç£,,é¤äºè¿äºè¿æå
¶ä»å§¿å¿ä¹...æ说äºä¸ä¸ªHTML5çpostMessage
....
..å 为çå¿æ²¡ç¨è¿,åªæ¯ä»¥åæ¥é çæ¶åäºè§£äºä¸..åªè½å¤§ä½ç¹ä¸
è¿è´§ç¨äºiframe
ä¼ éæ¶æ¯å±
å¤, 大ä½æè¿ä¹ä¸¤æ¥æ¥
-
window
æå¼ä¸ä¸ªå®ä¾,ä¼ éä¸ä¸ªæ¶æ¯å°ä¸ä¸ªxåå - x ååä¸çå¬
message
äºä»¶,è·åä¼ éçæ¶æ¯
è¿è´§çå
¼å®¹æ§æ²¡é£ä¹å¥½,èä¸æ²¡èèå¨å
¨ä¸å®¹æéå CSRF
æ»å»
Q: 对äºXSS
å CSRF
å¦ä½é²è
è¿éå°±ä¸è¯´æ¦å¿µæ§çä¸è¥¿äº
-
XSSçé²è
- æè½æ³å°çå°±æ¯è½¬ä¹
<>
è¿äºé æ代ç ç´æ¥è¿è¡ççæ ç¾..轮询æè æ£åæ¿æ¢- èé¢è¯å®è¯´è¿ç§çæçæä½ä¸,æåæ¥ä»ç»æ¾äºæ¾ç¸å ³èµæ好å没ææ´ä¼æ¹æ¡...æççè¨...
- è¥æ¯æç¨å°
cookie
,设置为http-only
,é¿å 客æ·ç«¯ç篡æ¹
- æè½æ³å°çå°±æ¯è½¬ä¹
-
CSRFçé²èä¸è¬è¿å ç§
- éªè¯ç ,ç¨æ·ä½éªè½ç¶ä¸å¥½,,ä½æ¯å¾å¤åºåä¸å¯ä»¥é²è大å¤æ°æ»å»
- éªè¯ HTTP Referer å段,å¤æ请æ±æ¥æº
- tokenå å¯è§£å¯,è¿ç§æ¯ç®åå¾å¸¸ç¨çæ段äº...
ä»»ä½é²èé½æ代价ç,æ¯å¦éªè¯ç é æçä½éªä¸å¥½,token
滥ç¨é æçæ§è½é®é¢,轮询æ¿æ¢é æçååºæ¶é´ç
Q: æè¿°ä¸cookie
,sessionStorage
,localStorage
çå·®å¼..
-
cookie
: 大å°4KB å·¦å³,è·é请æ±(请æ±å¤´),ä¼å ç¨å¸¦å®½èµæº,ä½æ¯è¥æ¯ç¨æ¥å¤æç¨æ·æ¯å¦å¨çº¿è¿äºæºæ¹ä¾¿ -
sessionStorage
ålocalStorage
大åå°å¼,大å°çæµè§å¨æ¯æ,ä¸è¬ä¸º5MB,æ°æ®åªä¿çå¨æ¬å°,ä¸åä¸æå¡ç«¯äº¤äº.-
sessionStorage
ççåå¨æåªéäºä¼è¯ä¸,å ³éäºå¨åçæ°æ®å°±æ²¡äº. -
localStorage
åä¿çå¨æ¬å°,没æäººä¸ºæ¸ é¤ä¼ä¸ç´ä¿ç
-
Q: javascript
çååé¾ä½ æä¹ç解?
ååé¾ç®æ¯ JS å ä¸ç§ç¬æçæºå¶,
ææ对象é½æä¸ä¸ªå
ç½®[[proto]]
æåå建å®çåå对象(prototype
)
ååé¾çåºæ¬ç¨æ¥å®ç°ç»§æ¿ç¨ç
Q: javascript
éé¢ç继æ¿æä¹å®ç°ï¼å¦ä½é¿å
ååé¾ä¸é¢ç对象å
񄧮
æå¨åçæ¶å,ç¨äºä¸¤ç§,ä¸ä¸ªæ¯ ES5å ES6çæ¹æ¡
- ES5:å¯çç»åå¼ç»§æ¿:éè¿åç¨æé å½æ°æ¥ç»§æ¿å±æ§åååé¾æ¥å®ç°å继æ¿ç¶ã
function ParentClass(name) {
this.name = name;
}
ParentClass.prototype.sayHello = function () {
console.log("I'm parent!" + this.name);
}
function SubClass(name, age) {
//è¥æ¯è¦å¤ä¸ªåæ°å¯ä»¥ç¨apply ç»å ...解æ
ParentClass.call(this, name);
this.age = age;
}
SubClass.prototype = Object.create(ParentClass.prototype);
SubClass.prototype.constructor = SubClass;
SubClass.prototype.sayChildHello = function (name) {
console.log("I'm child " + this.name)
}
let testA = new SubClass('CRPER')
// Object.create()çpolyfill
/*
function pureObject(o){
//å®ä¹äºä¸ä¸ªä¸´æ¶æé å½æ°
function F() {}
//å°è¿ä¸ªä¸´æ¶æé å½æ°çååæåäºä¼ å
¥è¿æ¥ç对象ã
F.prototype = obj;
//è¿åè¿ä¸ªæé å½æ°çä¸ä¸ªå®ä¾ã该å®ä¾æ¥æobjçææå±æ§åæ¹æ³ã
//å 为该å®ä¾çååæ¯obj对象ã
return new F();
}
*/
å¤å¶ä»£ç
- ES6: å ¶å®å°±æ¯ES5çè¯æ³ç³,ä¸è¿å¯è¯»æ§å¾å¼º..
class ParentClass {
constructor(name) {
this.name = name;
}
sayHello() {
console.log("I'm parent!" + this.name);
}
}
class SubClass extends ParentClass {
constructor(name) {
super(name);
}
sayChildHello() {
console.log("I'm child " + this.name)
}
// éæ°å£°æç¶ç±»ååæ¹æ³ä¼è¦å,ES5çè¯å°±æ¯ç´æ¥æä½èªå·±çååé¾ä¸
sayHello(){
console.log("override parent method !,I'm sayHello Method")
}
}
let testA = new SubClass('CRPER')
å¤å¶ä»£ç
Q: ES6+ä½ çæä¹,ç¨è¿åªäºç¹æ§?
- ç®å¤´å½æ°
- ç±»åå¼å
¥å¯¼åºå继æ¿(
class
/import
/export
/extends
) - å符串模æ¿
- Promise
-
let
,const
-
async
/await
- é»è®¤åæ°/åæ°æåé解æè£ é¥°å¨
-
Array.inclueds
/String.padStart|String.padEnd
/Object.assign
Q: let å const æå¥å·®å¼?
-
let
ä¼äº§çå级ä½ç¨å,ä¸ä¼é æåéæå,æ æ³éæ°å£°æ(ä½å¯ä»¥éæ°èµå¼); -
const
- æ¯å¸¸é,è¥æ¯åºæ¬æ°æ®ç±»å,å ·æä¸åæ§(æ æ³éæ°èµå¼æ¹å¨)
- å¼ç¨å¼å¯ä»¥è°æ´å é¨å¼(å¯è½è®¾è®¡çæ¶å没æèèå¨å ¨!
Q: async
åawait
çç¨é?
- 让
promise
çå¼æ¥åæåæ¥è¿è¡æäºå¯è½,await
å¯ä»¥çå°promise
æ§è¡å®æ¯
Q: ç®å¤´å½æ°çthis
æåè°?
è¯å®å¾å¤å°ä¼ä¼´ä¼è¯´æåå±é¨æ¹æ³å !!çæ¡æ¯é误ç...
ç®å¤´å½æ°ææ¹åç并éæ this å±é¨åï¼èæ¯å®å ¨ä¸æ this ç»å®å°éé¢å»;
å°±æ¯ this æ¯åèªå¤é¨çä¸ä¸çº§ä½ç¨å(ä½æ¯åä¸æ¯å¸¸è§ function
çè¯æ³ç³)..
å 为ç®å¤´å½æ°é并ä¸æ¯æ var self = this
æè
.bind(this)
è¿æ ·çåæ³ã
Q: é®çæ¶åä½ ç¨è¿éææ¹æ³,éæå±æ§,ç§æåéä¹?
éææ¹æ³æ¯ES6ä¹åææè¿ä¹ä¸ªç©æ,æè¿ä¹äºç¹ç¹
- æ¹æ³ä¸è½ç» thiså¼ç¨,å¯ä»¥ç»ç±»ç´æ¥å¼ç¨
- éæä¸å¯ä»¥ç»å®ä¾è°ç¨,æ¯å¦
let a = new ParentClass => a.sayHello() ä¼æåºå¼å¸¸
- ç¶ç±»éææ¹æ³,åç±»é
static
æ¹æ³æ²¡æ³è¦çç¶ç±» - éææ¹æ³å¯ä»¥ç»å类继æ¿
- éæå±æ§å¯ä»¥ç»§æ¿ä¹å¯ä»¥è¢«ä¿®æ¹
çä¸é¢ç代ç ..
class ParentClass {
constructor(name) {
this.name = name;
}
static sayHello() {
console.log("I'm parent!" + this.name);
}
static testFunc(){
console.log('emm...Parent test static Func')
}
}
class SubClass extends ParentClass {
constructor(name) {
super(name);
}
sayChildHello() {
console.log("I'm child " + this.name)
}
static sayHello() {
console.log("override parent method !,I'm sayHello Method")
}
static testFunc2() {
console.log(super.testFunc() + 'fsdafasdf');
}
}
ParentClass.sayHello(); // success print
let a = new ParentClass('test');
a.sayHello() // throw error
SubClass.sayHello(); // åå static å¯ä»¥ç»§æ¿ä¸è¦ç
SubClass.testFunc2(); // å¯ä»¥ç»§æ¿
let testA = new SubClass('CRPER');
å¤å¶ä»£ç
ç§æåéè¿ä¸ªæ没çåºæ¥,åªæ¯è¯´äºä¸æ²¡æprivate
è¿ä¸ªå
³é®åååºæ¬ç¨ä¸å线ç人为åºå
æ以åæ¥åªæ¯æ¾äºä¸ç¸å
³çèµæ,åç°æä¸ä¸ªæ¯è¾å¥½ç模ææ¹æ¡,å°±æ¯WeakMap
;
WeakMap
å¯ä»¥é¿å
å
åæ³é²,å½æ²¡æ被å¼å¼ç¨çæ¶åä¼èªå¨ç»å
åå¯åå¨åæ¶äº.
const _ = new WeakMap(); // å®ä¾å,value å¿
须为对象,æ delete,get,has,setå个æ¹æ³,çååé½ç¥éäº
class TestWeakMap {
constructor(id, barcode) {
_.set(this, { id,barcode });
}
testFunc() {
let { id,barcode } = _.get(this); // è·å对åºçå¼
return { id,barcode };
}
}
å¤å¶ä»£ç
å½ç¶ä½ ä¹å¯ä»¥ç¨Symbol
æ¥å®ç°ä¸ä¸ªç§æåé,è¿ä¹æ¯ä¸ä¸ªå¥½æ³å
Q: è°è°ä½ 对 Promise çç解? å ajax æå ³ç³»ä¹?
Promise
åajax
没æåæ¯é±ç´æ¥å
³ç³».promise
åªæ¯ä¸ºäºè§£å³"åè°å°ç±"èè¯çç;
å¹³æ¶ç»å ajax
æ¯ä¸ºäºæ´å¥½ç梳çåæ§å¶æµç¨...è¿éæ们ç®å梳çä¸..
Promise
æä¸ç§ç¶æ,Pending/resolve()/reject();
ä¸äºéè¦æ³¨æçå°ç¹,å¦ä¸
- å¨
Pending
转为å¦å¤ä¸¤ç§ä¹ä¸çç¶ææ¶å,ç¶æä¸å¯å¨æ¹å.. -
Promise
çthen
为å¼æ¥.è(new Promise()
)æé å½æ°å 为åæ¥ -
Promise
çcatch
ä¸è½æè·ä»»ææ åµçé误(æ¯å¦then
éé¢çsetTimout
å æå¨æåºä¸ä¸ªError
) -
Promise
çthen
è¿åPromise.reject()
ä¼ä¸æé¾å¼è°ç¨ -
Promise
çresolve
è¥æ¯ä¼ å ¥å¼èéå½æ°,ä¼åçå¼ç©¿éçç°è±¡ -
Promise
çcatch
è¿æ¯then
,return
çé½æ¯ä¸ä¸ªæ°çPromise
(å¨ Promise 没æ被ä¸æçæ åµä¸)
Promise è¿æä¸äºèªå¸¦çæ¹æ³,æ¯å¦race
,all
,åè
æä»»ä¸ä¸ä¸ªè§£æå®æ¯å°±è¿å,åè
ææ解æå®æ¯è¿å...
å®ç°ä¸ä¸ªå»¶æ¶ç promise å½æ°, å¯ä»¥ç¨
async
åawait
const delay = (time)=> new Promise((resolve,reject)=>{
setTimeout(resolve,time)
})
// test
let testRun = async function(){
console.log(1);
await delay(2000);
console.log('æ两ç§åæ触å',3)
}
// 1 => Promise = > 3
å¤å¶ä»£ç
è¿æ®µä»£ç çè¿è¡ç»ææ¯ä»ä¹?
var test = new Promise((resolve,reject)=>{
resolve();
});
test
.then(data => {
// promise start
console.log('promise first then : ', data);
return Promise.resolve(1); // p1
})
.then(data => {
// promise p1
console.log('get parent(p1) resolve data : ', data);
return Promise.reject(new Error('åå,ä¸æäº,ä½ è½å¥æä½!')); // p2
})
.then(data => {
// promise p2
console.log('result of p2: ', data);
return Promise.resolve(3); // p3
})
.catch(err => {
console.log('err: ', err);
return false;
});
// promise first then : undefined
// get parent(p1) resolve data : 1
// err: Error: åå,ä¸æäº,ä½ è½å¥æä½!
// è¿éå¨ then è¿å Promise.reject()çæ¶åå·²ç»ä¸æäºé¾å¼è°ç¨.ç´æ¥ç» catchæè·å°
å¤å¶ä»£ç
å«æ¥,åå¦ä½ ä¸ç®¡æ没ææè·å°é误,æååæ§è¡ä¸ä¸ªåè°å½æ°å¦ä½å®ç°?
è¿é说çå°±æ¯ç±»ä¼¼try..catch..finally
,ç»Promise
å®ç°ä¸ä¸ª finally;
// finallyæ¯è¾å¥½å ï¼æç
§ç°å¨ç¤¾åºç讨论ï¼finallyçç¹ç¹å¦ä¸ï¼
// url : https://www.v2ex.com/t/205715
//1. ä¸æ¥æ¶ä»»ä½åæ°ï¼åæ¥çvalueæè
Errorå¨finallyéæ¯æ¶ä¸å°ç
//2. å¤çåä¸å½±ååPromiseçç¶æï¼è¯¥rejectè¿æ¯rejectï¼è¯¥resolveè¿æ¯resolve
//3. ä¸å½±åPromiseååä¼ éçä¼ ï¼resolveç¶æè¿æ¯ä¼ éåæ¥çvalueï¼rejectç¶æè¿æ¯ä¼ éåæ¥çError
Promise.prototype.finally = function (callback) {
let P = this.constructor; // è¿éæ¿å°çæ¯ Promise çæé å½æ°
//ä¸ç®¡åé¢ç Promise æ¯fulfilledè¿æ¯rejectedï¼é½ä¼æ§è¡åè°å½æ°callbackã
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};
// ç¨æ³å¾ç®å,å°±æ¯å¯ä»¥ä¼ å
¥ä¸ä¸ªåè°å½æ°..
// https://developers.google.com/web/updates/2017/10/promise-finally
// è¿ä¸ª url ä¸è¯´äº node å chrome çåªäºçæ¬å·²ç»å®ç°äº finally åç¨æ³
// ES 2018å·²ç»æ finally 追å å° promise çååé¾ä¸..
å¤å¶ä»£ç
- <<Promise å¿ ç¥å¿ ä¼ï¼åéé¢)>>: æå©äºä½ æ´å æ·±å»çäºè§£ promise çè¿è¡æ åµ
- å ³äº Promise ç 9 个æ示
- æ´å¤çPromise 详æ å¯ä»¥åè<<JavaScript Promiseè¿·ä½ ä¹¦ï¼ä¸æçï¼>>;
Q: è°è°ä½ 对 TCP çç解;
Q: TCP æ¯å¨åªä¸ªOSI çåªä¸ªå±!é讯è¿ç¨æ¯å ¨åå·¥è¿æ¯ååå·¥(åå·¥)?
A: ä¼ è¾å±,å ¨åå·¥
Q: TCPçé讯çè¿ç¨æ¯æä¹æ ·ç!
A: æ´ä¸ªè¿ç¨æ¯ä¸æ¬¡æ¡æ,å次æ¥æ..
Q: ä½ è¯´ç没é,说说æ´ä¸ªè¿ç¨å¦ä½?
A: 举个æ å,ææ TCP æ¯å两个人ç¨å¯¹è®²æºæ²é(大ç½è¯)..ä¸æ¬¡æ¡æå°±æ¯.A1(å¼å«æ¹,客æ·ç«¯)æ³è¦å¼å« A2(æ§å¶å®¤çææ,æå¡ç«¯)..
A1对ç对讲æºè¯´"over over ,å¬å°è¯·åç"(第ä¸æ¬¡,请æ±åºç) ...
A2æ¶å°ååº"æ¶å°æ¶å°,ä½ è¯´"(第äºæ¬¡,确认åºç)
A1å¼å§å·´æå·´æ个ä¸åè A2没æç»(第ä¸æ¬¡,é讯建ç«)
èå次æ¥æåæ¯ä¸¤è 确认äºç¸å¾è¿°å®æ¯çè¿ç¨..
A1说:"æ§å¶å®¤,æ¥åå®æ¯äº"(第ä¸æ¬¡æ¥æ)
A2说:"ç¥éäº...é£ä¹ä½ åºè¯è¯´å®å°±å¥½å¥½å¬æææ¥....å·´æå·´æ.."(第äºæ¬¡æ¥æ)
A1æ¤æ¶çå¾ æ§å¶å®¤è¯´å®æ¯,èæ§å¶å®¤çååº(第ä¸æ¬¡æ¥æ)
çå° A1åé¦æ§å¶å®¤ç¡®è®¤é½ç¥éå®æ¯äº..(第å次æ¥æ)...
以ä¸é½æ¯çæ°,å¯è½æäºå°æ¹æè¿°ä¸å½,ç¬ç¬å°±å¥½äº
TCP
没æç¾åç¾å»ºç«æåç,ä¼é æé¾æ¥å¤±è´¥çæ
åµæå¾å¤..
æ¯å¦é¿æ¶é´æ²¡åºç(A1å¼äºå天没æååºæè A2åºçäºè A1ä¸åé¸å®)..亦æè 丢å (对讲æºä¹æ²¡äº);
TCP
åè®®ç¸å
³çæç« ç½ä¸å¾å¤,è¥æ¯è¦æ´å å
¨é¢çäºè§£è¯¥å议请èªè¡å¼æ..
æ建议é 读<<TCP-IP详解å·1~å·3>>,è¿ä¸ªæ¯ç½ç»å£ç»...å¾å...æåªçäºä¸ä¸¢ä¸¢..
Q: TCP ä½ äºè§£äº,é£ä¹ OSI ä¸å±åè®®åäºå±ç½ç»æ¶æåºè¯¥ç¥éå§?
对äºè¿ç±»çé®é¢æä¹åªè½å¤§ä½ç¹äºä¸,æ¯ç«ä¸æ¯ä¸æ»ç½ç»è¿åç...
OSI
ä¸å±æ¶µç:ç©çå±,æ°æ®é¾è·¯å±,ç½ç»å±,ä¼ è¾å±,ä¼è¯å±,表示å±,åºç¨å±;
äºå±æ¨¡åå°±æ¯"ä¼è¯,表示,åºç¨å±"å为ä¸å±;
Q: DNS
ç大ä½çæ§è¡æµç¨äºè§£ä¹,å±äºåªä¸ªå±çº§?å·¥ä½å¨åªä¸ªå±çº§?
DNS
å±äºåºç¨å±åè®®, è³äºTCP/UDP
åªä¸å±ä¸é¢è·,çæ
åµ , 大ä½çæ§è¡æµç¨æ¯è¿æ ·ç; DNS é»è®¤ç«¯å£æ¯53,èµ° UDP
- ä¼å 读åæµè§å¨ç¼å
- å ¶æ¬¡ç³»ç»çç¼å
- é½æ²¡æçæ
åµä¸,æ¾æ¬å°
hosts
æ件(æ¯å¦ä½ åäºæ å°å ³ç³»ä¼å 寻æ¾) - å没æçæ åµæ¾æè¿çåå解ææå¡å¨
- å没æåæ©å¤§è®¿é®,æç»æ¾å°æ ¹æå¡å¨,è¿æ¯æ²¡æ就失败äº..
DNS ç解æçå 个记å½ç±»åéè¦äºè§£:
-
A
: ååç´æ¥å° IP -
CNAME
: å¯ä»¥å¤ä¸ªååæ å°å°ä¸ä¸ªä¸»æº,类似å¨Github Page
å°±ç¨CNAME
æå -
MX
: é®ä»¶äº¤æ¢è®°å½,ç¨çä¸å¤,ä¸è¬æ建é®ä»¶æå¡å¨æä¼ç¨å° -
NS
: 解ææå¡è®°å½,å¯ä»¥è®¾ç½®æé,æå®è°è§£æ -
TTL
: å°±æ¯çåæ¶é´(ä¹å«ç¼åæ¶é´),ä¸è¬çåå解æåé½æé»è®¤å¼,ä¹å¯ä»¥äººä¸ºè®¾ç½® -
TXT
: ä¸è¬ææ个主æºåæååç说æ
åæ¥ææ¾ä¸ç¸å ³çèµæ,æå ´è¶£çå¯ä»¥æ·±å ¥äºè§£ä¸,ä¼ éé¨å¦ä¸:
- 梳çLinuxä¸OSIä¸å±ç½ç»ä¸TCP/IPäºå±ç½ç»æ¶æ
- TCP/IPï¼å ï¼åºç¨å±ï¼DNSåHTTPåè®®ï¼
- DNSåå解æ解å
Q: HTTP å HTTPS æä½å·®å¼? å¬è¯´è¿ SPDY ä¹?
æåªæ¯ç²æµ çåçäºä¸...
HTTP
ç¸å¯¹äº HTTPS
æ¥è¯´,é度è¾å¿«ä¸å¼éè¾å°(没æ SSL/TSL) 对æ¥,é»è®¤æ¯80端å£;
HTTP
容æéåååå«æ,èHTTPS
ç¸å¯¹æ¥è¯´å°±è¾ä¸ºå®å
¨ä½å¼éè¾å¤§(æ°æ®ä»¥å å¯çå½¢å¼ä¼ é),é»è®¤ç«¯å£ä¸º443..
HTTP
æ¯ææè·å¨ TCP
ä¸.èHTTPS
è·å¨SSL/TLS
åºç¨å±ä¹ä¸,TCP
ä¸ç
Q: é£ä¹ HTTPS
ä¸çTLS/SSL
æ¯å¦ä½ä¿æ¤æ°æ®ç...
ä¸è¬æ两ç§å½¢å¼,é对称å å¯,çæå ¬é¥åç§é¥,ç§é¥ä¸¢æå¡å¨,å ¬é¥æ¯æ¬¡è¯·æ±å»æ¯å¯¹éªè¯;
æ´ä¸¥è°¨çéç¨ CA(Certificate Authority),ç»**ç¾å....
Q: ä½ è¯´å°å¯¹ç§°å å¯åé对称å å¯,è½è¯´è¯´æ´ä¸ªæµç¨å¦ä½è¿è½¬çä¹(HTTPS)
- 对称å å¯:
- åæ¹é½æåæ ·ç**,æ¯æ¬¡é讯é½è¦çæä¸ä¸ªå¯ä¸**,é度å¾å¿«
- å®å ¨æ§è¾ä½ä¸**å¢é¿çæ°éæå¿«
- é对称å å¯(ä¸è¬ç¨ RSA)
- å®å ¨æ§å¾é«,对èµæºæ¶èå¾å¤§(CPU),ç®å主æµçå å¯ç®æ³(åºæ¬ç¨äºäº¤æ¢**æç¾å,èéææé讯å 容)
- CA(æ°åç¾å):
- è¿ä¸ªæ¯ä¸ºäºé²æ¢ä¸é´äººç»å·æ¢äºé ææ°æ®è¢«çªåèè¯çç
- ç¨ä¸äºæå¨æºæé¢å¸çç®æ³æ¥ç¾å,æå¨æºæåä¸é´äºº,é讯è¿ç¨é½ä¼è·æºææ ¸å¯¹ä¸é
æå¾çå¿ä¸å¤,åæ¥æ¾äºä¸ç¸å ³èµæ,æå ´è¶£å¯ä»¥ç¹å»çç;
- æ·±å ¥æç§HTTPSå®å ¨é®é¢&è¿æ¥å»ºç«å ¨è¿ç¨
- æ·±å ¥ç解 https éä¿¡å å¯è¿ç¨:å£è¯å " : çäºä¸é¢é£ç¯æç« æ¥çä¸é¢,ä¼æ¸ æ°å¾å¤
Q: SPDY
å¬è¯´è¿ä¹.ä»ä¹æ¥ç?
è°·ææ¨è¡ä¸ç§åè®®(HTTP
ä¹ä¸SSLä¹ä¸[TCP]),å¯ä»¥ç®æ¯HTTP2çå身,æè¿ä¹äºä¼ç¹
- å缩æ°æ®(HEADER)
- å¤è·¯å¤ç¨
- ä¼å 级(å¯ä»¥ç»è¯·æ±è®¾ç½®ä¼å 级)
èè¿äºä¼ç¹åºæ¬ HTTP2ä¹ç»§æ¿ä¸æ¥äº..
Q: ä½ å¯¹ HTTP çç¶æåäºè§£å¤å°...
è¿éå举ä¸ä¸¢ä¸¢å¸¸è§ç..
- 1XX: ä¸è¬ç¨æ¥å¤æåè®®æ´æ¢æè
确认æå¡ç«¯æ¶å°è¯·æ±è¿äº
- 100: æå¡ç«¯æ¶å°é¨å请æ±,è¥æ¯æ²¡ææç»çæ åµä¸å¯ä»¥ç»§ç»ä¼ éåç»å 容
- 101: 客æ·ç«¯è¯·æ±åæ¢åè®®,æå¡ç«¯æ¶å°ç¡®è®¤
- 2xx: 请æ±æå,æ¯å¦å建é¾æ¥,请æ±æ¯å¦æ¥å,æ¯å¦æå
容è¿äº
- 200: (æå)æå¡å¨å·²æåå¤çäºè¯·æ±ã
- 201: (å·²å建)请æ±æå并ä¸æå¡å¨å建äºæ°çèµæºã
- 202: (å·²æ¥å)æå¡å¨å·²æ¥å请æ±ï¼ä½å°æªå¤çã
- 204: (æ å 容)æå¡å¨æåå¤çäºè¯·æ±ï¼ä½æ²¡æè¿åä»»ä½å 容ã
- 3XX: ä¸è¬ç¨æ¥å¤æéå®ååç¼å
- 301: ææ请æ±å·²ç»è½¬ç§»å°æ°ç url(æ°¸ä¹ éå®å),ä¼è¢«ç¼å
- 302: 临æ¶éå®å,ä¸ä¼è¢«ç¼å
- 304: æ¬å°èµæºææªæ¹å¨,ä¼å
使ç¨æ¬å°ç(æ ¹æ®
If-Modified-Since or If-Match
å»æ¯å¯¹æå¡å¨çèµæº,ç¼å)
- 4XX: ä¸è¬ç¨æ¥ç¡®è®¤ææä¿¡æ¯,请æ±æ¯å¦åºé,页é¢æ¯å¦ä¸¢å¤±
- 400: 请æ±åºé
- 401: æªææ,ä¸è½è¯»åæäºèµæº
- 403: é»æ¢è®¿é®,ä¸è¬ä¹æ¯æéé®é¢
- 404: 页é¢ä¸¢å¤±,èµæºæ²¡æ¾å°
- 408: 请æ±è¶ æ¶
- 415: åªä»ç±»åä¸è¢«æ¯æï¼æå¡å¨ä¸ä¼æ¥å请æ±ã
- 5XX: åºæ¬é½æ¯æå¡ç«¯çé误
- 500: æå¡ç«¯é误
- 502: ç½å ³é误
- 504: ç½å ³è¶ æ¶
Q: HTTPç请æ±æ¥ææ¯æä¹æ ·ç,è½å¤§ä½ç说ä¸ä¹?
HTTP ç请æ±æ¥æ = 请æ±è¡ + 请æ±å¤´ + 请æ±ä½;
- 请æ±è¡: è¿ä¸ªå¥½ç解就æ¯è®¿é®çæ¹æ³+ åè®®+ 访é®ç URL ææ
- 请æ±å¤´: è¿ä¸ªä¹å¥½ç解,æ¯å¦
accept
,content-type
,user-agent
è¿ç±»å¼é®å¯¹,æå¡ç«¯å¯ä»¥ç´æ¥è¯»åç - 请æ±ä½: æ¯å¦ POST æ交çä¸ä¸ªè¡¨å,æ们ç¼ç åæ¾å¨ä¸é¢éè¦ä¼ éç
æ³æ·±å ¥äºè§£çå ·ä½å¼ææç´¢
Q: 请æ±æ¥æç¥é,é£ä½ 说说cookie
æ¯å¦ä½è·é请æ±ç?
Cookie å°±æ¯ä¿åå¨ HTTP åè®®ç请æ±æè åºç头é¨(Cookie æ¯ç±æå¡ç«¯çæ),è¿æ ·ä¸è·¯æ¼æ³...
Q: Cookie é离æ¯ä»ä¹,å¦ä½å;
cookie é离就æ¯éä½
header
çæ°æ®å å«,以达å°å 快访é®é度çç®ç
æ¹æ¡: éæèµæºä¸¢ CDNæè é主åæ¥å è½½
Q: æµè§å¨ç¼ååæå¡ç«¯çç¼åæ§å¶ä½ äºè§£å¤å°,说说ç?
-
Last-Modified
:- 第ä¸æ¬¡è¯·æ±èµæºä»æå¡å¨æåçä¼èªå¨å¸¦ä¸è¯¥å±æ§
- 第äºæ¬¡è¯·æ±ä¼è·æå¡ç«¯æ¯å¯¹
If-Modified-Since
çæ¶é´,没åå¨å使ç¨æ¬å°ç(ç¶æ304) - ç»å
Expires(è¿ææ¶é´:ç¼åçè½½æ¢æ¶é´)
,è·é请æ±ä¸èµ·ååº..èµæºæ²¡è¿ææ¿æ¬å°,å¦åéæ°è¯·æ±
-
Cache-control
æ¯HTTP1.1
çä¸è¥¿,å¤æèµæºè¿æç»åmax-age
æ¥æ¿ä»£Expires[http 1.0]
-
Etag
:- 第ä¸æ¬¡è¯·æ±url æ¶åä¼ç»æå¡å¨ä¸æ è®°(ä¸ä¸²å符串)
- 第äºæ¬¡è¯·æ±æ¶åä¼æ¯å¯¹æå¡ç«¯ç
If-None-Match
,没ææ¹å¨ä¾æ§æ¿ç¼å(304)
Q: å 个çè让æå°è±¡æ·±å»çé¢
if(!("a" in window)){
var a = 10;
}
console.log(a); // undefined
// !("a" i n window) , è¿å true
// çè¨å°ä¼ä¼´çå¨æ,é常æè°¢,è¿æ¯æ¶ååéæåçé®é¢
/*
var a;
if(!("a" in window)){
a = 10;
}
*/
// åç§é¢
(function(){
var x = c = b = {a:1}
})()
console.log(x.a); // error , x is not defined
console.log(c,b) // {a: 1} {a: 1}
å¤å¶ä»£ç
var count = 0;
console.log(typeof count === "number"); // true , è¿ä¸ªä¸ç¨è§£éäº
console.log(!!typeof count === "number"); // false
// è¿éæ¶åå°å°±æ¯ä¼å
级åå¸å°å¼çé®é¢
// typeof count å°±æ¯å符串"number"
// !!æ¯è½¬ä¸ºå¸å°å¼(ä¸ç®è¿ç®ç¬¦çåç§),é空å符串å¸å°å¼ä¸º true
// æåæ=== æ¯è¾ , true === "number" , return false
å¤å¶ä»£ç
(function(){
var a = b = 3;
})()
console.log(typeof a === "undefined"); // false
console.log(typeof b === "undefined"); // false
// è¿éæ¶åçå°±æ¯ç«å³æ§è¡åéå
çé®é¢,è¿æåéæå,è¿ç®ç¬¦æ§è¡æ¹å(=å·èªå·¦åå³)
// é£ä¸ªå½æ°å¯ä»¥ææè¿æ ·
(function()
var a; /* å±é¨åé,å¤é¨æ²¡æ³è®¿é®*/
b = 3; /* å
¨å±åé,so . window.b === 3 , å¤é¨å¯ä»¥è®¿é®å°*/
a = b;
})()
// è¥æ¯æ¹æè¿æ ·,è¿éé¢åºè¯¥æ¯å¯¹ç
console.log(typeof b === "number" && b ===3
); // true
å¤å¶ä»£ç
function foo(something){
this.a = something;
}
var obj1 = {
foo:foo
};
var obj2 = {};
obj1.foo(2)
console.log(obj1.a) // 2 ,æ¤æ¶ç this ä¸ä¸æè¿å¨ obj1å
,è¥æ¯ obj1.foo å
ä¿åå½åå¼ç¨åæ§è¡ä¼ å,åä¸ä¸æ为 window
obj1.foo.call(obj2,3); // ç¨ call 强è¡æ¹åä¸ä¸æ为 obj2å
console.log(obj2.a); // 3
var bar = new obj1.foo(4); // è¿é产çäºä¸ä¸ªå®ä¾
console.log(obj1.a); // 2
console.log(bar.a); // 4; newçç»å®æ¯éå¼åæ¾å¼ç»å®ä¼å
级æ´é«
å¤å¶ä»£ç
function fn(){
alert(a);
var a = 200;
alert(a);
}
fn(); // undefined / 200 ; æ¶ååéæå
alert(a); // undefined
var a;
alert(a); // undefined
var a = 300;
alert(a); // 300
å¤å¶ä»£ç
var obj1= {
name:'obj1',
fn:function(){
console.log(this.name);
}
};
var obj2 = {name:'obj2'};
var obj3 = {name:'obj3'};
// è¿éé¢ä¸»è¦æ¶åçæ¯ this æåçé®é¢..
obj1.fn(); // obj1
var newFn = obj1.fn;
newFn(); // undefined, this æå window
newFn.call(obj2);// obj2, this æå obj2
obj3.fn = newFn;
/*
Æ (){
console.log(this.name);
}
*/
obj3.fn(); // è¿éæåçæ¯ obj3 .æ以è¾åº obj3
å¤å¶ä»£ç
// è¿éé¢æ¥ä½ä¸ºç¬è¯é¢å¾ç»,å 为è¦åçççæ¡å¾å¤(èæµ·ææ)..åæ£ææ¯éå°äº..
// è¿éé¢ä¸»è¦èæ ¸çæ¯å¯¹ååé¾ç»§æ¿è¿åçç解
function Parent(){
this.a = 1;
this.b = [1,2,this.a];
this.c = {demo:5};
this.show = function(){
console.log(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(); // 15:1,2,1
// å 为 Child èªèº«æ²¡æ show çæ¹æ³,æ以å¾ååé¾çä¸æ¸¸æ¾;
// æ¾å°ç¶ç±»ç,this å 为没æ´æ¹,æ以è¾åºç»æå¦ä¸
child1.show(); // 115:1,2,1
child2.show(); // 125:1,2,1
child1.change(); // æ¹åä¸äºæ°æ®,没æè¾åº
child2.change(); // +1
parent.show(); // 15:1,2,1
child1.show(); // 55:1,2,1,11,12
child2.show(); // 65:1,2,1,11,12
å¤å¶ä»£ç
// è¿éé¢ä¹å¾ç»,å½æ°éå½è°ç¨ç
function test(a,b){
console.log(b);
return {
test:function(c){
return test(c,a);
}
};
// è¿éé¢çç解,ææè¿æ ·å°±å¥½ç解äº
/*function test(a,b){
console.log("a:"+a,"b:"+b);
return {
test:function(c){
console.log("a:"+a,"b:"+b,"c"+c);
return test(c,a);
}
}
}*/
var a = test(100); // undefined, è¿ä¸ªæ¯ä¸è¨èå»ç;
a.test(200); // 100;
a.test(300); // 100;
var b = test(101).test(201).test(301); // undefined/101/201
var c = test(102).test(202); // undefined / 102
c.test(302); // 202
å¤å¶ä»£ç
Q:æå符串 var test='abc345efgabcab'; è¯·æ ¹æ®æ示å®ç°å¯¹åºè¦æ±
- å»æå符串ä¸ç a,b,c å符 ,å½¢æç»æ'345efg';
test.replace(/[abc]/g,''); // "345efg"
å¤å¶ä»£ç
- å°å符串çæ°åç¨æ¬å·æ¬èµ·æ¥, å½¢æç»æ: abc[3][4][5]efg....'
test.replace(/\d/g,'[$&]'); // "abc[3][4][5]efgabcab"
// è¥æ¯æåç»åæç
§$1, $2, $3çå½¢å¼è¿è¡å¼ç¨ï¼è $& å表示çæ¯æ´ä¸ªæ£å表达å¼å¹é
çå
容ã
å¤å¶ä»£ç
- å°å符串ä¸çæ¯ä¸ªæ°åçå¼åå«ä¹ä»¥2,è¾åº:'abc6810....'
var temp = test.split('').map(function(item){
return /^\d$/.test(item) ? item * 2 : item;
}).join('');
// "abc6810efgabcab"
å¤å¶ä»£ç
Q: 使ç¨ä¸å°äºä¸ç§æ¹å¼æ¿æ¢ææ¬"dream"
æ¹æ"package"
,æä¾å符串"I have a dream"
;
- æ£åæ¿æ¢
// è¿æ¯æç®åç代ç éäº..
var str = "I have a dream";
str.replace(/dream/g,"package");
// ä¸ç¨æ£åä¹å¯ä»¥ç´æ¥å符串æ¿æ¢
str.replace("dream","package")
å¤å¶ä»£ç
- æ°ç»éåæ´æ¹
// å¾ç´ç½ç大èåè·¯
var str = "I have a dream";
str.split(" ").map(function(item){
return item === "dream" ? item = "package":item;
}).join(" ");
å¤å¶ä»£ç
- æ°ç»æ¥è¯¢åå²æ³
var str = "I have a dream";
var tempArr = str.split(" "); // ["I", "have", "a", "dream"]
var removeIndex = tempArr.indexOf('dream'); // 3
tempArr.splice(removeIndex,1,"package");
var transStr = tempArr.join(" "); // "I have a package";
å¤å¶ä»£ç
è¿ç±»ä¸ä¸å¼ææ°ç»è¿æ¯æºå¥½å¼ç
è¿ä¸ªæ¯çè¨åºå°ä¼ä¼´æä¾çæ¹æ³..大åå°å¼,å¦ä¸;
// æºä»£ç
// å符串ä¹ææ°ç»ç slice 以å concat çæ¹æ³..æè·¯åæ°ç»å·®ä¸å¤
var str = 'I haved a dream';
str.indexOf('dream') !== -1 ? str.slice(0,str.indexOf('dream')).concat('package'):str;
å¤å¶ä»£ç
Q: è¿æä¸éé¢ç®æ¯æ¶åäºä»¶å¾ªç¯,æ§è¡ä¼å æç..
å°±æ¯ macrotask
åmicrotask
ç¸å
³ç, å
·ä½è®°ä¸èµ·æ¥äº..é£æ¶åç»äºçæ¡è½ç¶å¯¹äº.
è¦è¯´åºæ以ç¶,ç»ç§äºä¸è¸..åæ¥æ¾äºä¸ç¸å ³çèµæ;
- JavaScript è¿è¡æºå¶è¯¦è§£ï¼åè°Event Loop
- æ·±å ¥ç解äºä»¶å¾ªç¯åå¼æ¥æµç¨æ§å¶
- ææä½ éè¦ç¥éçå ³äºå®å ¨ç解 Node.js äºä»¶å¾ªç¯åå ¶åº¦é
Q: ä½ å¯¹åºç¡ç®æ³è¿åææ¡çå¦ä½....
æ¥,è¿çº¸ç»ä½ ,å个快æè¯è¯...
// å¿«æç大ä½æè·¯æ¯è¿æ ·ç,
// æ¾ä¸ªä¸ä½å¼,ä»åæ°ç»åå²åºæ¥,
// å©ä¸çä½ä¸ºä¸¤ä¸ªæ°ç»,æ¯æ¬¡é½å»æ¯è¾;
// ç´å°éå½çç»æåºæ¥, å¹³åå¤æ度O(nlog n)
function quickSort(arr) {
//å¦ææ°ç»é¿åº¦<=1,åç´æ¥è¿å
if (arr.length <= 1) {
return arr;
}
// ä¸é´ä½(åºå)åé¿åº¦çä¸ååä¸åæ´
var pivotIndex = Math.floor(arr.length / 2);
//æä¸é´ä½ä»åæ°ç»åå²åºæ¥, splice ä¼æ¹ååæ°ç»!!!!
var pivot = arr.splice(pivotIndex, 1)[0];
//å®ä¹ä¸¤ä¸ªç©ºæ°ç»æ¥åæ¾æ¯å¯¹åçå¼
var left = [];
var right = [];
//æ¯åºåå°çæ¾å¨leftï¼æ¯åºå大çæ¾å¨right
for (var i = 0 , j = arr.length; i < j; i++) {
if (arr[i] <= pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
//éå½ä¸å» arr = [ left , pivot , right]
// æä¹ä¸ªéå½æ³,å°±æ¯æ¯å¯¹åçæ°ç»è¿æ¯ä¼éå¤ä¹åçååºåååå¼æ¯è¾..ç´å°æå没æå¯ä»¥åäº
return quickSort(left).concat([pivot], quickSort(right));
}
å¤å¶ä»£ç
Q: åä¸ä¸ªäºåæ³æ¥æ¾
// äºåæ³è·å¿«æçæ路差ä¸å¤,对åæ¯è¾
// è¿ä¸ªåªç¨äºæåºå¥½æ°ç»å
çæ¥è¯¢,é«ä½ä½é½ç¥éçæ
åµä¸
function binSearch(target, arr, start, end) {
var start = start || 0; // å
许ä»ä»ä¹ä½ç½®å¼å§,ä¸æ
var end = end || arr.length - 1; // ä»ä¹ä½ç½®ç»æ,ä¸æ
start >= end ? -1 : ''; // 没ææ¾å°,ç´æ¥è¿å-1
var mid = Math.floor((start + end) / 2); // ä¸ä½ä¸æ
if (target == arr[mid]) {
return mid; // æ¾å°ç´æ¥è¿åä¸æ
} else if (target > arr[mid]) {
//ç®æ å¼è¥æ¯å¤§äºä¸ä½å¼,åä¸æ å¾åèµ°ä¸ä½
return binSearch(target, arr, start, mid - 1);
} else {
//è¥æ¯ç®æ å¼å°äºä¸ä½å¼,åä¸æ å¾åéä¸ä½
return binSearch(target, arr, mid + 1, end);
}
}
// binSearch(5,[1,2,3,4,5,6,7,8]) => 4
// æ åºçæ°ç»åéè¦å
æåºå¥½æ°ç»,å¦åä¼å æ 溢åº(æ»å¾ªç¯)
å¤å¶ä»£ç
è¿ç±»çæç« å¾å¤,æå ´è¶£çå¯ä»¥é 读ä¸é¢çä¸äºæç«
ä¼ éé¨:
- <<å大ç»å ¸æåºç®æ³æ»ç»ï¼JavaScriptæè¿°>>
- JavaScriptæ°æ®ç»æåç®æ³
- javascript 常è§æåºç®æ³
Q: 设计模å¼ä½ äºè§£å¤å°?
Q: æç»´æå±é¢: ä½ æ两个ç»çç,æ个100ç±³çé«æ¥¼,æ±ç»ççå¨åªä¸ªæ¥¼å±æä¸ä¼ç¢(ç¨ç次æ°æå°);
é®é¢çè¦ç¹: ç»ççç¢(æé个æ°) ,ç¡®å®æ¥¼å±æ° , æå°æ¬¡æ° => å°±æ¯æ±æä¼çå ¬å¼
å¨è¿éé¢ä¸ç»ç§çä¸è¸,æç第ä¸æ¬¡çæè·¯
å æå,å°±åæ[1-50][51-100], é£å°±æ¯ 1+50 = 51次 ...
é¢è¯å¤§ä½¬è¯´,ä½ ç¨äºå¿«æçæ路就è¯å®ä¸æ¯æä¼ç..
æäºè®¸ä¹ ,æ³å°å¼å¹³æ¹ , è¿æ ·çè¯,æå¤åªè¦20次
ç¶åå说ç»æä¸ä¸ªç,å¨1000ç±³çé«æ¥¼,å¤æå¤å°æ¬¡...ä½æ¯æ ¹æ®æä¸é¢çè¯,
å¼ç«æ¹, , é£æå¤ä¸è¶ è¿30次;
è³äºç¬¬ä¸æ¬¡ä¸¢ççä½ç½®å¦ä½ç¡®å®, å°±æ¯å¼å¹³ä¹åçå¼ä½ä¸ºä¸ä¸ªåºé´.
è¥ N 个çå M ç±³ç大å¦...第ä¸æ¬¡ä¸¢ççé«åº¦åºé´å°±æ¯è¿ä¸ªäº
é¢è¯å¤§ä½¬è¯´è¿ä¸ªè¿å¯ä»¥...é£å°±æä¸åä¸æ®µè½
...åæ¥ç¨ä¸è½çæç´¢å¼ææ¾äºä¸..æä¼æ¹æ¡+æå°æ¬¡æ°éè¦èèçä¸è¥¿å¾å¤,没é£ä¹ç®å
ä¼ éé¨: ç¥ä¹æ人讨论äºè¿ä¸ªé®é¢;
ä½æ¯é«æ°è¿èå¸äº..è¿ç§å¸åççä¸è¸æµé¼....æ½ç©ºå好好ç 究ä¸
Q: ä½ å¯¹ä¼åè¿åäºè§£å¤å°?
大ä½å¸¸è§çæ段äºè§£.
æ¯å¦ä»å®¢æ·ç«¯çæç:
- å缩代ç (JS/CSS),å缩å¾ç
- å并ä¸äºå°å¾ç(
css sprite
) - è¥æ¯æå
ç代ç å°½å¯è½åå²æå¤ä¸ª
chunk
,åå°åä¸chunk
è¿å¤§ - éææ件éç¨ cdn å¼å ¥
- HTTPçç¼å头使ç¨çåç
- åå°ç¬¬ä¸æ¹åºçä¾èµ
- 对äºä»£ç åºè¯¥èèæ§è½æ¥ç¼å,æ¯å¦ä½¿ç¨
requestAnimationFrame
ç»å¶å¨ç»,å°½å¯è½åå°é¡µé¢éç»(DOM æ¹å) - æ¸è¿å级,å¼å
¥
preload
è¿äºé¢å è½½èµæº - çæ
åµç¨
service worker
æ¥ç¼åèµæº(æ¯å¦ç§»å¨ç«¯æç®æ PWA)
æ¯å¦ä»æå¡ç«¯çæ:
- 带宽,åå解æ, å¤åå解æç
- 页é¢åæå¡ç«¯æ¸²æ,åå°å¯¹æµè§å¨çä¾èµ(ä¸ç¨å®¢æ·ç«¯è§£æ)
- æ¸è¿å级,æ¯å¦å¼å ¥ HTTP2(å¤è·¯å¤ç¨,头é¨å缩è¿äºå¯ä»¥ææ¾å å¿«å è½½é度)
å½ç¶,è¿æ¯è¿äºé½æ¯å¾çé¢çç¹å°...å®é å·¥ä½ä¸å»å¼å±è¦å¤æçå¤;
æ¯å¦æ们è¦å¤ä¸ªç»´åº¦å»èèçè¯,è¦å»ä¼å DOM çç»å¶æ¶é´,èµæºçå è½½æ¶é´,åå解æè¿äº;
è¦å ¨é¢çä¼åä¸ä¸ªé¡¹ç®æ¯ä¸ä¸ªå¤§å·¥ç¨...
Q: MySQLæåªäºç´¢å¼ç±»å? ç´¢å¼çæ°æ®ç»æå¨åæ¹å¼? MySQLå MongoDBçå·®å¼
MySQLç´¢å¼ç±»å:
- æ®éç´¢å¼: å°±æ®éçç±»å
- å¯ä¸ç´¢å¼: 代表索å¼çå¼å¯ä¸ä¸éå¤(å
许æ空å¼),ç¸å¯¹äºä¸é¢å¤äºä¸ª
UNIQUE
- 主é®ç´¢å¼:(å建表çè·éå建,å¯ä¸ç´¢å¼ï¼ä¸å 许æ空å¼)
- ç»åç´¢å¼(å°±æ¯å°å¤ä¸ªå段é½å»ºç«å°ä¸ä¸ªç´¢å¼)
ç´¢å¼æå©æå¼,ç¨ç好å å¿«æ¥è¯¢é度,滥ç¨ç´¢å¼ä¼é æ大éç£ç空é´å ç¨,ç»´æ¤æ§ä¹ä¼å¢å¤; ç´¢å¼ä¸ä¼å
å«null
çå;
ç´¢å¼çæ°æ®ç»æå¨åæ¹å¼,æåªç®åäºè§£è¿B-Tree
è³äºMySQL å MongoDBçå·®å¼;
åè
æ¯å
³ç³»åæ°æ®åº, åè
éå
³ç³»åæ°æ®åº(æ°æ®æ¯ä»¥ææ¡£çæ¹å¼å¨å,å¼ä¸º key-value
);
MySQL
åºç¨å±é¢å¾å¹¿,æäºå¡ç³»ç»è¿äº,é¾è¡¨æ¥è¯¢è¿äºé½å¾æ¹ä¾¿.ç»å¸¸ä½ä¸ºå¾å¤ç³»ç»ç主åæ°æ®åº
èMongoDB
ä½ä¸ºNoSQL
,è½ç¶æäºå±é¢ä¸å¦ MySQL
,ä½æ¯åºç¨å±é¢ä¹æºå¹¿, æ¯å¦ç»åå端åä¸äºç¨æ·çæ¦è¦ä¿¡æ¯çç»´æ¤,ä¸äºç¼åä¿¡æ¯çç»´æ¤.
em....å端äºè§£ä¸å¤,ä¹è½ç¹å°å³æ¢....大å¦çæ¶åå¦è¿ä¸äº..é½å·®ä¸å¤è¿ç»èå¸....
Q: JSæ¶é´å段
ç»å®ä¸ä¸ªæ¶é´æ®µåæ¥é¿ï¼æ举该æ¶é´æ®µå æ¥é¿çåå
ä¾å¦ï¼æ¶é´æ®µ
3:00-5:00
ï¼æ¥é¿ä¸º20
åéé£ä¹è¿åçæ°ç»ä¸º
['3:00-3:20', '3:20-3:40'....]
ç
è¿ç±»é®é¢,ä¸è¬é½è¦å 梳ç好æè·¯åæ¥å;
- ç»å®å符串æ¶é´æ®µ,åå²,转æ¢ä¸ºåé
- è·¨æ¥åè·¨æ¶é®é¢
// è¿ä¸ªä¸ä¸æçå°ä¼ä¼´ä¹ååºæ¥äº.æçæ¯å¨å®ç解çæ¹å¼ä¸å 以注éå对åæ°çå¤æåäºèè
// ä»ç解æ³æ¹æ¡å¨ä»ç github ä¸ https://github.com/lyh2668/blog/issues/1 , by lyh2668
// æ¹ä¾¿ä¸äºå°ä¼ä¼´çç解,以ä¸ä»£ç å
å«ES6ç姿å¿(åæ°é»è®¤å¼,åªå¤´å½æ°)
let inputDateRange = (date, step = 30, separator = '-') => {
let startTime, endTime; // å¼å§æ¶é´åç»ææ¶é´
if (Object.prototype.toString.call(date) === '[object String]') {
date = date.trim(); // å»é¤ä¸¤è¾¹çç©ºæ ¼
var tempDate = '';
if (separator) {
tempDate = date.split(separator);
} else {
if (date.indexOf('-') !== -1) {
tempDate = date.split('-');
} else if (date.indexOf('~')) {
tempDate = date.split('~');
} else {
console.log('æ¨ä¼ å
¥çä¹è®¸ä¸æ¯ä¸ä¸ªæ¶é´æ®µ!!!');
}
}
startTime = time2min(tempDate[0]); // ä¼ å
¥çå¼å§æ¶é´
endTime = time2min(tempDate[1]); //ä¼ å
¥çç»ææ¶é´
} else if (Object.prototype.toString.call(date) === '[object Array]') {
if (date.length === 2) {
startTime = time2min(date[0]); // ä¼ å
¥çå¼å§æ¶é´
endTime = time2min(date[1]); //ä¼ å
¥çç»ææ¶é´
}
} else {
console.log('æ¨ä¼ å
¥çä¹è®¸ä¸æ¯ä¸ä¸ªæ¶é´æ®µ!!!');
}
// ä¼ å
¥ç step æ¯å¦ä¸ºæ°å,å¦åæªå¾æ°åé¨å转å
// 为ä»ä¹å NaN æ¯è¾(èªèº«ä¸çæ§),è¥æ¯ä¼ å
¥çè¿æ£åé½æ²¡æ³è¯å«,é£åªè½ç»é»è®¤å¼äº
Object.prototype.toString.call(step) === '[object Number]'
? (step = parseInt(step, 10))
: parseInt(step.replace(/[W\s\b]/g, ''), 10) === NaN
? (step = parseInt(step.replace(/[W\s\b]/g, ''), 10))
: (step = 30);
// è¥æ¯å¼å§æ¶é´å¤§äºç»ææ¶é´åç»ææ¶é´å¾å追å ä¸å¤©
startTime > endTime ? (endTime += 24 * 60) : '';
let transformDate = []; // å¨å转æ¢åçæ°ç»,æ¶é´å段
// å¼å§éåå¤æ,ç¨ while
while (startTime < endTime) {
// å¦æå¼å§æ¶é´+æ¥é¿å¤§äºç»ææ¶é´,åè¿ä¸ªå段ç»æ,å¦åç»ææ¶é´æ¯æ¥é¿éå¢
let right = startTime + step > endTime ? endTime : startTime + step;
transformDate.push(`${min2time(startTime)}-${min2time(right)}`);
startTime += step; // æ¥é¿éå¢
}
return transformDate;
};
// æ¶é´è½¬å为åé
let time2min = time => {
// è·ååå²ç
time.indexOf(':') ? (time = time.trim().split(':')) : '';
return time[0] * 60 + parseInt(time[1]); // è¿å转åçåé
};
// åé转ä¼å符串æ¶é´
let min2time = minutes => {
let hour = parseInt(minutes / 60); // è¿åå¤å°å°æ¶
let minute = minutes - hour * 60; // æ£é¤å°æ¶åå©ä½çåéæ°
hour >= 24 ? (hour = hour - 24) : ''; // è¥æ¯å¤§äºçäº24å°æ¶éè¦æ£é¤ä¸å¤©å¾å°æå©ä¸çå°æ¶
minute < 10 ? (minute = '0' + minute) : ''; // å°äº10çé½è¦è¡¥é¶
hour < 10 ? (hour = '0' + hour) : ''; // å°äº10çé½è¦è¡¥é¶
return `${hour}:${minute}`;
};
// test ,æ¯æåç¬¦ä¸²ä¼ å
¥æ¶é´æ®µ
inputDateRange('3:00-5:00','20d'); // ["03:00-03:20", "03:20-03:40", "03:40-04:00", "04:00-04:20", "04:20-04:40", "04:40-05:00"]
// 亦æè
æ°ç»ä¼ å
¥
inputDateRange(['3:00','5:00'],'45df.3d'); // ["03:00-03:45", "03:45-04:30", "04:30-05:00"]
// step æ¯ææ°å亦æè
带ç¹æ®å符çæ°å
inputDateRange(['6:00','8:00'],'55df.3d'); // ["06:00-06:55", "06:55-07:50", "07:50-08:00"]
inputDateRange('3:00-5:00',60); // ["03:00-04:00", "04:00-05:00"]
å¤å¶ä»£ç
Q: Vue-Router
ç两ç§æ¨¡å¼ä¸»è¦ä¾èµä»ä¹å®ç°ç
-
hash
主è¦ä¾èµlocation.hash
æ¥æ¹å¨ URL,è¾¾å°ä¸å·æ°è·³è½¬çææ.æ¯æ¬¡hash
æ¹åé½ä¼è§¦åhashchange
äºä»¶(æ¥ååºè·¯ç±çåå,æ¯å¦é¡µé¢çæ´æ¢) -
history
主è¦å©ç¨äºHTML5
çhistory
API æ¥å®ç°,ç¨pushState
åreplaceState
æ¥æä½æµè§åå²è®°å½æ
Q: MVVM å MVC çå·®å¼? å¬è¯´è¿ MVP?
è¿ç±»çæç« å¥½å¤,ä¸ä¸ªå¼å模å¼çè¯çé½æåå,ä¸æ¯åæ¶åºç°ç.
ä¼ éé¨:
Q: æ±100~999çææ"æ°´ä»è±"æ°, å°±æ¯ä¸ä½æ°ä¸åæ°åçç«æ¹åçäºèªèº«,æ¯å¦153=1^3+5^3+3^3
- 常è§éåæ³
function threeWaterFlower(rangeStart, rangeEnd) {
var temp = [];
rangeStart = rangeStart || 100;
rangeEnd = rangeEnd || 999;
for (var i = rangeStart; i <= rangeEnd; i++) {
var t = i.toString().split('');
Math.pow(t[0], 3) + Math.pow(t[1], 3) + Math.pow(t[2], 3) == i
? temp.push(i)
: '';
}
return temp;
}
threeWaterFlower(100,999); // [153, 370, 371, 407]
threeWaterFlower(); // [153, 370, 371, 407]
å¤å¶ä»£ç
- æå±åæ³,ES6ç+ä¸å®è±æ°,ä¸æè ¾ä¸èæçæ¬
let manyWaterFlower = (rangeStart = 100, rangeEnd = 999, flower = 3) => {
let temp = [];
for (let i = rangeStart; i <= rangeEnd; i++) {
let t = i
.toString()
.split('')
.map(item => Math.pow(item, flower))
.reduce((cur,next)=> parseInt(cur)+parseInt(next));
let transformT = parseInt(t, 10);
transformT == i ? temp.push(i) : '';
}
return temp;
}
manyWaterFlower(); // [153, 370, 371, 407]
manyWaterFlower(100,10000,4); // [1634, 8208, 9474]
manyWaterFlower(100,10000,5); // [4150, 4151]
å¤å¶ä»£ç
è¿ç§æ¯ç©·ä¸¾éå,è¥æ¯è¦å¿«ä¸ç¹å¢(èèçå¨å ¨ä¸ç¹å¢),以åä¼ åèå´çç«æ£
ç¸ä¿¡å°ä¼ä¼´é½çå¾æ,æå·²ç»å°½é注éäº..
let manyWaterFlower = (flower = 3,rangeStart, rangeEnd ) => {
let temp = [];// ç¼åæææ¾å°çè±å¼
// è¿ä¸æ®µå°±æ¯å¡«å
å¼å§å¾ªç¯çèå´,å¤çå®æ¯å转为æ°å,æ¨èçå¼å§å¼
let flowerRecommandStart = Number(
''.padStart(flower, '0').replace(/^(\d{1})/g, '1')
);
let flowerRecommandEnd = Number(''.padStart(flower, '9'));
// å¤ææ¯å¦ä¼ å
¥å¼å§å¼
if (rangeStart) {
rangeStart > flowerRecommandStart
? (rangeStart = flowerRecommandStart)
: rangeStart;
} else {
rangeStart = flowerRecommandStart;
}
// å¤ææ¯å¦æä¼ å
¥ç»æå¼
if (rangeEnd) {
rangeEnd > flowerRecommandEnd ? (rangeEnd = flowerRecommandEnd) : rangeEnd;
} else {
rangeEnd = flowerRecommandEnd;
}
// è¥æ¯åå§å¼å¤§äºç»æå¼
if (rangeStart > rangeEnd) {
rangeEnd = flowerRecommandEnd;
}
for (let i = rangeStart; i <= rangeEnd; i++) {
let t = i
.toString()
.split('')
.map(item => Math.pow(item, flower))
.reduce((cur, next) => parseInt(cur) + parseInt(next));
let transformT = parseInt(t, 10);
transformT == i ? temp.push(i) : '';
}
return temp;
};
console.time('manyWaterFlower');
manyWaterFlower(4)
console.timeEnd('manyWaterFlower');
// VM34013:4 manyWaterFlower: 8.112060546875ms ,è¿ä¸ªæ¯è·åºæ¥çæ¶é´
ç¨ä¸ä¸ªä¾åç代ç ,ä»100å°9999ç,æ们è·ä¸ä¸çç
console.time('manyWaterFlower');
manyWaterFlower(100,9999,4)
console.timeEnd('manyWaterFlower');
// VM3135:4 manyWaterFlower: 10.51904296875ms
// æç MBP è·10è±ç´æ¥å¡æ»...è·7è±æç¹ä¹
...
console.time('7 flower')
manyWaterFlower(7);
console.timeEnd('7 flower')
// 7 flower: 6489.608154296875ms
// 8 è± CPU çé£æçå«....
console.time('8 flower')
manyWaterFlower(8);
console.timeEnd('8 flower')
// VM644:3 8 flower: 68010.26489257812ms
// 对äºæ们è¿æ²¡æèèæ°å¼æº¢åºçé®é¢..å 为æ£æ´æ°å¨ JS çèå´æ¯æéç.
// æå
´è¶£çå°ä¼ä¼´å¯ä»¥èªè¡å®å
å¤å¶ä»£ç
Q: 请使ç¨éå½ç®æ³å¨ TODO 注éåå®ç°éè¿èç¹ key æ°ç»å¯»æ¾ json 对象ä¸ç对åºå¼
æ¯å¦console.log(findNode(['a1', 'b2'], data)) === data.a1.b2
// 请使ç¨éå½ç®æ³å¨ TODO 注éåå®ç°éè¿èç¹ key æ°ç»å¯»æ¾ json 对象ä¸ç对åºå¼
var data = {
a1: {
b1: 1,
b2: 2,
b3: {
b4: 5
}
},
a2: {
b1: 3,
b2: 4
}
};
function findNode(inPath, inData) {
// TODO
// å¤æä¼ å
¥çæ¯å¦æ¯ä¸ä¸ªæ°ç»
if (Array.isArray(inPath)) {
// å½é¿åº¦ä¸º1çæ¶å寻æ¾è¯¥ key æ¯å¦æå¼,æåè¿å,æ åè¿å-1
if (inPath.length === 1) {
return inData[inPath[0]] ? inData[inPath[0]]: -1;
}else{
return findNode(inPath.slice(1), inData[inPath[0]]);
}
} else{
console.log('æ¨ä¼ å
¥çä¸æ¯ä¸ä¸ªæ°ç»')
}
}
console.log(findNode(['a1', 'b2'], data)); // 2
console.log(findNode(['a1', 'b3','b4'], data)); // 5
å¤å¶ä»£ç
- æ¥ä¸ªæå±ç?æ¯æå符串ææ°ç»ä¼ å
¥;
findNode('a1.b2',data)
?
var data = {
a1: {
b1: 1,
b2: 2,
b3: {
b4: 5
}
},
a2: {
b1: 3,
b2: 4
}
};
// å¤ææ ¼å¼
function isType(params) {
let type = Object.prototype.toString.call(params);
if (type === '[object String]') {
params = params.split('.');
return params;
}
if (type === '[object Array]') {
return params;
}
}
function findNode(inPath, inData) {
inPath = isType(inPath);
// å¤æä¼ å
¥çæ¯å¦æ¯ä¸ä¸ªæ°ç»
if (Array.isArray(inPath)) {
// å½é¿åº¦ä¸º1çæ¶å寻æ¾è¯¥ key æ¯å¦æå¼,æåè¿å,æ åè¿å-1
if (inPath.length === 1) {
return inData[inPath[0]] ? inData[inPath[0]]: -1;
}else{
return findNode(inPath.slice(1), inData[inPath[0]]);
}
} else {
console.log('æ¨ä¼ å
¥çä¸æ¯ä¸ä¸ªæ°ç»');
}
}
console.log(findNode(['a1', 'b2'], data)); // 2
console.log(findNode('a1.b3.b4', data)); // 5
å¤å¶ä»£ç
Q: webpack æ¯ä»ä¹?webpack 常è§çä¼åæ段æåªäº;
webpack æ¯ä¸ä¸ªèµæºå¤çå·¥å ·,å®çåºç°èçäºæ们ç人ååæ¶é´; å¯ä»¥å¯¹èµæºæå ,解æ,åºåå¼å模å¼çç...
常è§çä¼åæ段:
- å离第ä¸æ¹åº(ä¾èµ),æ¯å¦å¼å
¥
dll
- å¼å
¥å¤è¿ç¨ç¼è¯,æ¯å¦
happypack
- æåå
Œ
±çä¾èµæ¨¡å,æ¯å¦
commonChunkPlugin
- èµæºæ··æ·åå缩:æ¯å¦
UglifyJS
- åç¦»æ ·å¼è¿äº,åå°
bundle chunk
ç大å°,æ¯å¦ExtractTextPlugin
- GZIP å缩,å¨æå çæ¶å对èµæºå¯¹é½å缩,åªè¦é¨ç½²çæå¡å¨è½è§£æå³å¯..åå°è¯·æ±ç大å°
- è¿ææéå è½½è¿äº,ä¸è¬ä¸»æµçæ¡æ¶é½æ对åºç模åæå è½½æ¹å¼.
- è³äº
tree shaking
ç®åwebpack3/4å·²ç»é»è®¤éæ
Q: ä»ä½ è¾å ¥ä¸ä¸ª URL å°é¡µé¢æ¸²æç大ä½è¿ç¨...
大ä½è¿ç¨æ¯è¿æ ·ç,æ³äºè§£å¾ç»è´çå¯ä»¥èªè¡å¼æ;
- IP->DNS(æµè§å¨=>ç³»ç»ç¼å=>DNS æå¡å¨)->åå解æå®æ(è¿ä¸æ¥ä¸ç¨å¤ªå¤è§£æå§)
- TCP å议走å®->HTTP(S) åè®®->ç¼å->(åæ请æ±å¤´)-> åé¦æ¥æ
- 请æ±ææ¡£ä¸æ¥->DOM->CSSDOM->éæèµæºä¸è½½->render(ç»å¶ææ¡£)->js 解æ
- ç¨æ·çå°é¡µé¢
Q: Vue çç»ä»¶çé讯æ段æåªäº..
- ç¶-> å:
props
- å-> ç¶:
on
+emit
- ç¶<>å:
on.sync
(è¯æ³ç³)æ¥ç - å
å¼ :
event bus
|vuex
Q: Vuex
ä½ æä¹ç解?
vuex
æ¯ä¸ä¸ªç¶æ管ç容å¨(ä½ ä¹å¯ä»¥ç解为å
¨å±åé),æ°æ®çæµåæ¯æ¯ååæ°æ®æµ,
ä¸æ°æ®å¹¶ä¸å ·ææä¹ åçç¹æ§(é»è®¤æ åµä¸å·æ°å°±éç½®ææç¶æ);
éé¢çä¸äºæ°æ®ä¹è³æ¹æ³,å¯ä»¥å¤§è´ç解为 vue çä¸äºç¹æ§,æ¯å¦
Vuex | Vue |
---|---|
state | data |
getter | computed |
mutation/actions | methods |
è³äºååæ°æ®æµ(å ¨å±åä¾æ¨¡å¼)æä¹ç解
state
åªè½ç»mutation(åæ¥æä½)
æ¹å¨, action
åªè½åé¦ç»mutation
,å¯ä»¥è¿è¡å¼æ¥æä½(æ¯å¦åå端交äºæåæ°æ®), state
è½è§¦å render,action
è½ç¨dispatch
åå..å¦å¾
ç»è¯
è¿æä¸äºé¢ç®è®°ä¸èµ·æ¥äº,就没è¾äº...è¿æä¸äºé¢ç®æ¯çä½ ä¸ªäººåæ¥ç,没æ³å,æ¯å¦
- Q: è®©ä½ æ¥ä¸ºå ¬å¸çä¸ä¸ªé¡¹ç®åææ¯éå,ä½ ä¼æä¹å,为ä»ä¹?
- Q:
React
,Angular
,Vue
çæ¯è¾?- Q: è¯´è¯´ä½ å¯¹
VNode
çç解,diff
çè¿ç¨;- Q:
Vue
çååç»å®å¦ä½å®ç°,ç¨äºä»ä¹æ¨¡å¼(订é 模å¼),大ä½å¦ä½å®ç°ç..- Q:
cmd
/amd
/commonjs
çå·®å¼- Q: å°ç¨åºä»¥å
React Native
çå·®å¼..çç
é¢è¯çè¿ç¨ä¸ç£ç£ç¢°ç¢°æè½åç°èªèº«çå¾å¤ä¸è¶³åéè¦å»åªåçæ¹å.
æä¸å¯¹ä¹å¤è¯·çè¨,ä¼åæ¶è·è¿ä¿®æ£,谢谢åä½å¤§ä½¬
ä½è
ï¼CRPER
é¾æ¥ï¼https://juejin.im/post/5a998991f265da237f1dbdf9
æ¥æºï¼æé
èä½æå½ä½è
ææãåä¸è½¬è½½è¯·èç³»ä½è
è·å¾ææï¼éåä¸è½¬è½½è¯·æ³¨æåºå¤ã