nicecode/nicenote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ddc005c13c
nicenote/public/前端面试准备.html
江志雄 90b97799ce 自动部署
2018-07-13 16:54:43 +08:00

1370 lines
67 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html style="display: none;" lang="zh">
<head>
<meta charset="utf-8">
<!--
© Material Theme
https://github.com/viosey/hexo-theme-material
Version: 1.5.2 -->
<script>
window.materialVersion = "1.5.2"
// Delete localstorage with these tags
window.oldVersion = [
'codestartv1',
'1.3.4',
'1.4.0',
'1.4.0b1',
'1.5.0'
]
</script>
<!-- dns prefetch -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://cdn1.lncld.net"/>
<!-- Meta & Info -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Title -->
<title>
前端面试准备 |
Feax&#39;s Blog
</title>
<!-- Favicons -->
<link rel="icon shortcut" type="image/ico" href="/img/favicon.ico">
<link rel="icon" href="/img/favicon.png">
<meta name="format-detection" content="telephone=no"/>
<meta name="description" itemprop="description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta name="keywords" content="全栈,javascript,react,vue,webpack,koa2,面试">
<meta name="theme-color" content="#70c2cd">
<!-- Disable Fucking Bloody Baidu Tranformation -->
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/css/ie-blocker.css">
<script src="/js/ie-blocker.zhCN.js"></script>
<![endif]-->
<!-- Import lsloader -->
<script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(a){try{localStorage.removeItem(a)}catch(b){}};lsloader.setLS=function(a,c){try{localStorage.setItem(a,c)}catch(b){}};lsloader.getLS=function(a){var c="";try{c=localStorage.getItem(a)}catch(b){c=""}return c};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var b=[];for(var a=0;a<localStorage.length;a++){b.push(localStorage.key(a))}b.forEach(function(e){var f=lsloader.getLS(e);if(window.oldVersion){var d=window.oldVersion.reduce(function(g,h){return g||f.indexOf("/*"+h+"*/")!==-1},false);if(d){lsloader.removeLS(e)}}})}catch(c){}};lsloader.clean();lsloader.load=function(f,a,b,d){if(typeof b==="boolean"){d=b;b=undefined}d=d||false;b=b||function(){};var e;e=this.getLS(f);if(e&&e.indexOf(versionString)===-1){this.removeLS(f);this.requestResource(f,a,b,d);return}if(e){var c=e.split(versionString)[0];if(c!=a){console.log("reload:"+a);this.removeLS(f);this.requestResource(f,a,b,d);return}e=e.split(versionString)[1];if(d){this.jsRunSequence.push({name:f,code:e});this.runjs(a,f,e)}else{document.getElementById(f).appendChild(document.createTextNode(e));b()}}else{this.requestResource(f,a,b,d)}};lsloader.requestResource=function(b,e,a,c){var d=this;if(c){this.iojs(e,b,function(h,f,g){d.setLS(f,h+versionString+g);d.runjs(h,f,g)})}else{this.iocss(e,b,function(f){document.getElementById(b).appendChild(document.createTextNode(f));d.setLS(b,e+versionString+f)},a)}};lsloader.iojs=function(d,b,g){var a=this;a.jsRunSequence.push({name:b,code:""});try{var f=new XMLHttpRequest();f.open("get",d,true);f.onreadystatechange=function(){if(f.readyState==4){if((f.status>=200&&f.status<300)||f.status==304){if(f.response!=""){g(d,b,f.response);return}}a.jsfallback(d,b)}};f.send(null)}catch(c){a.jsfallback(d,b)}};lsloader.iocss=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.iofonts=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.runjs=function(f,c,e){if(!!c&&!!e){for(var b in this.jsRunSequence){if(this.jsRunSequence[b].name==c){this.jsRunSequence[b].code=e}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var a=document.createElement("script");a.appendChild(document.createTextNode(this.jsRunSequence[0].code));a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else{if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var d=this;var a=document.createElement("script");a.src=this.jsRunSequence[0].path;a.type="text/javascript";this.jsRunSequence[0].status="loading";a.onload=function(){d.jsRunSequence.shift();if(d.jsRunSequence.length>0){d.runjs()}};document.body.appendChild(a)}}};lsloader.tagLoad=function(b,a){this.jsRunSequence.push({name:a,code:"",path:b,status:"failed"});this.runjs()};lsloader.jsfallback=function(c,b){if(!!this.jsnamemap[b]){return}else{this.jsnamemap[b]=b}for(var a in this.jsRunSequence){if(this.jsRunSequence[a].name==b){this.jsRunSequence[a].code="";this.jsRunSequence[a].status="failed";this.jsRunSequence[a].path=c}}this.runjs()};lsloader.cssfallback=function(e,c,b){if(!!this.cssnamemap[c]){return}else{this.cssnamemap[c]=1}var d=document.createElement("link");d.type="text/css";d.href=e;d.rel="stylesheet";d.onload=d.onerror=b;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(d,a)};lsloader.runInlineScript=function(c,b){var a=document.getElementById(b).innerText;this.jsRunSequence.push({name:c,code:a});this.runjs()}})();</script>
<!-- Import queue -->
<script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>
<!-- Import CSS -->
<style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","/css/material.min.css?Z7a72R1E4SxzBKR/WGctOA==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","/css/style.min.css?MKetZV3cUTfDxvMffaOezg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="prettify_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_css","/css/prettify.min.css?zp8STOU9v89XWFEnN+6YmQ==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="prettify_theme"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_theme","/css/prettify/vibrant-ink.min.css?e5E/qqGcGveS7VTH4M896w==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<!-- Config CSS -->
<!-- Other Styles -->
<style>
body, html {
font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
overflow-x: hidden !important;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
a {
color: #679cc5;
}
.mdl-card__media,
#search-label,
#search-form-label:after,
#scheme-Paradox .hot_tags-count,
#scheme-Paradox .sidebar_archives-count,
#scheme-Paradox .sidebar-colored .sidebar-header,
#scheme-Paradox .sidebar-colored .sidebar-badge{
background-color: #785470 !important;
}
/* Sidebar User Drop Down Menu Text Color */
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
color: #785470 !important;
}
#post_entry-right-info,
.sidebar-colored .sidebar-nav li:hover > a,
.sidebar-colored .sidebar-nav li:hover > a i,
.sidebar-colored .sidebar-nav li > a:hover,
.sidebar-colored .sidebar-nav li > a:hover i,
.sidebar-colored .sidebar-nav li > a:focus i,
.sidebar-colored .sidebar-nav > .open > a,
.sidebar-colored .sidebar-nav > .open > a:hover,
.sidebar-colored .sidebar-nav > .open > a:focus,
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
color: #785470 !important;
}
.toTop {
background: #1a1d3a !important;
}
.material-layout .material-post>.material-nav,
.material-layout .material-index>.material-nav,
.material-nav a {
color: #1a1d3a;
}
#scheme-Paradox .MD-burger-layer {
background-color: #1a1d3a;
}
#scheme-Paradox #post-toc-trigger-btn {
color: #1a1d3a;
}
.post-toc a:hover {
color: #679cc5;
text-decoration: underline;
}
</style>
<!-- Theme Background Related-->
<style>
body{
background-image: url(/img/bg.png);
}
</style>
<!-- Fade Effect -->
<style>
.fade {
transition: all 800ms linear;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
}
.fade.out{
opacity: 0;
}
</style>
<!-- Import Font -->
<!-- Import Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- Import Material Icons -->
<style id="material_icons"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_icons","/css/material-icons.css?pqhB/Rd/ab0H2+kZp0RDmw==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<!-- Import jQuery -->
<script>lsloader.load("jq_js","/js/jquery.min.js?qcusAULNeBksqffqUM2+Ig==", true)</script>
<!-- WebAPP Icons -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Feax&#39;s Blog">
<meta name="msapplication-starturl" content="http://blog.jzxer.cn/前端面试准备.html">
<meta name="msapplication-navbutton-color" content="#70c2cd">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Feax&#39;s Blog">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/img/favicon.png">
<!-- Site Verification -->
<meta name="baidu-site-verification" content="z1eJ8hGeNJ" />
<!-- RSS -->
<link rel=alternate type="application/atom+xml" href="/atom.xml">
<!-- The Open Graph protocol -->
<meta property="og:url" content="http://blog.jzxer.cn/前端面试准备.html">
<meta property="og:type" content="blog">
<meta property="og:title" content="前端面试准备 | Feax&#39;s Blog">
<meta property="og:image" content="/img/favicon.png">
<meta property="og:description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta property="og:article:tag" content="面试">
<meta property="article:published_time" content="Sun Aug 27 2017 10:12:07 GMT+0800">
<meta property="article:modified_time" content="Fri May 25 2018 16:01:48 GMT+0800">
<!-- The Twitter Card protocol -->
<meta name="twitter:card" content="summary_large_image">
<!-- Add canonical link for SEO -->
<link rel="canonical" href="http://blog.jzxer.cn/前端面试准备.html" />
<!-- Structured-data for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": "http://blog.jzxer.cn/前端面试准备.html",
"headline": "前端面试准备",
"datePublished": "Sun Aug 27 2017 10:12:07 GMT+0800",
"dateModified": "Fri May 25 2018 16:01:48 GMT+0800",
"author": {
"@type": "Person",
"name": "Feax",
"image": {
"@type": "ImageObject",
"url": "/img/avatar.png"
},
"description": "对的，坚持！,,错的，放弃！"
},
"publisher": {
"@type": "Organization",
"name": "Feax&#39;s Blog",
"logo": {
"@type":"ImageObject",
"url": "/img/favicon.png"
}
},
"keywords": ",面试全栈,javascript,react,vue,webpack,koa2",
"description": "web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2",
}
</script>
<!-- Analytics -->
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?fd3e8c663917a054564de87b31397113';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Custom Head -->
</head>
<body id="scheme-Paradox" class="lazy">
<div class="material-layout mdl-js-layout has-drawer is-upgraded">
<!-- Main Container -->
<main class="material-layout__content" id="main">
<!-- Top Anchor -->
<div id="top"></div>
<!-- Hamburger Button -->
<button class="MD-burger-icon sidebar-toggle">
<span class="MD-burger-layer"></span>
</button>
<!-- Post TOC -->
<!-- Back Button -->
<!--
<div class="material-back" id="backhome-div" tabindex="0">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
href="#" onclick="window.history.back();return false;"
target="_self"
role="button"
data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons" role="presentation">arrow_back</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</a>
</div>
-->
<!-- Left aligned menu below button -->
<button id="post-toc-trigger-btn"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">format_list_numbered</i>
</button>
<ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
<ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#技术分类"><span class="post-toc-number">1.</span> <span class="post-toc-text">技术分类</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#JS-行为层"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">JS (行为层)</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#typeof-返回哪些数据类型"><span class="post-toc-number">1.1.1.</span> <span class="post-toc-text">typeof 返回哪些数据类型</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3种强制类型转换两种隐式类型转换"><span class="post-toc-number">1.1.2.</span> <span class="post-toc-text">3种强制类型转换两种隐式类型转换</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#数组方法pop-push-unshift-shift"><span class="post-toc-number">1.1.3.</span> <span class="post-toc-text">数组方法pop() push() unshift() shift()</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#ajax请求-get-和-post-的区别"><span class="post-toc-number">1.1.4.</span> <span class="post-toc-text">ajax请求 get 和 post 的区别</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#call-和-apply-的区别"><span class="post-toc-number">1.1.5.</span> <span class="post-toc-text">call 和 apply 的区别</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#ajax-请求时，如何解析-json-数据"><span class="post-toc-number">1.1.6.</span> <span class="post-toc-text">ajax 请求时，如何解析 json 数据</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#闭包是什么？"><span class="post-toc-number">1.1.7.</span> <span class="post-toc-text">闭包是什么？</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#添加-删除-替换-插入到某个节点的方法"><span class="post-toc-number">1.1.8.</span> <span class="post-toc-text">添加 删除 替换 插入到某个节点的方法</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#javascript-同源策略"><span class="post-toc-number">1.1.9.</span> <span class="post-toc-text">javascript 同源策略</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#编写一个-b-继承-a-的方法"><span class="post-toc-number">1.1.10.</span> <span class="post-toc-text">编写一个 b 继承 a 的方法</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#如何阻止事件冒泡和默认事件"><span class="post-toc-number">1.1.11.</span> <span class="post-toc-text">如何阻止事件冒泡和默认事件</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#谈谈this对象的理解"><span class="post-toc-number">1.1.12.</span> <span class="post-toc-text">谈谈this对象的理解</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#简单讲下-node-的使用场景"><span class="post-toc-number">1.1.13.</span> <span class="post-toc-text">简单讲下 node 的使用场景</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#node-的优点和缺点提出自己的看法"><span class="post-toc-number">1.1.14.</span> <span class="post-toc-text">node 的优点和缺点提出自己的看法</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#常用的一款框架"><span class="post-toc-number">1.1.15.</span> <span class="post-toc-text">常用的一款框架</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#CSS-表现层"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">CSS (表现层)</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#清除浮动"><span class="post-toc-number">1.2.1.</span> <span class="post-toc-text">清除浮动</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#居中设置"><span class="post-toc-number">1.2.2.</span> <span class="post-toc-text">居中设置</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#1·-水平居中"><span class="post-toc-number">1.2.2.1.</span> <span class="post-toc-text">1· 水平居中</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#2·-垂直居中"><span class="post-toc-number">1.2.2.2.</span> <span class="post-toc-text">2· 垂直居中</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#link-和-import的区别"><span class="post-toc-number">1.2.3.</span> <span class="post-toc-text">link 和 @import的区别</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#css-盒子模型"><span class="post-toc-number">1.2.4.</span> <span class="post-toc-text">css 盒子模型</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#css-选择符号"><span class="post-toc-number">1.2.5.</span> <span class="post-toc-text">css 选择符号</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#HTML-结构层"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">HTML (结构层)</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#什么是语义化的HTML"><span class="post-toc-number">1.3.1.</span> <span class="post-toc-text">什么是语义化的HTML</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#自动化编程"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">自动化编程</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#前端自动化工具？"><span class="post-toc-number">1.4.1.</span> <span class="post-toc-text">前端自动化工具？</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#其他"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">其他</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#描述一下cookies，sessionStorage-和localStorage的区别？"><span class="post-toc-number">1.5.1.</span> <span class="post-toc-text">描述一下cookies，sessionStorage 和localStorage的区别？</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#如何实现浏览器内多个标签之间的通信"><span class="post-toc-number">1.5.2.</span> <span class="post-toc-text">如何实现浏览器内多个标签之间的通信</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#IE6-BUG-的解决办法"><span class="post-toc-number">1.5.3.</span> <span class="post-toc-text">IE6 BUG 的解决办法</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#你有哪些性能优化的方法"><span class="post-toc-number">1.5.4.</span> <span class="post-toc-text">你有哪些性能优化的方法</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#http-状态码有哪些？分别代表啥意思？"><span class="post-toc-number">1.5.5.</span> <span class="post-toc-text">http 状态码有哪些？分别代表啥意思？</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#一个页面从输入-url-到页面显示完成，中间发生了什么？"><span class="post-toc-number">1.5.6.</span> <span class="post-toc-text">一个页面从输入 url 到页面显示完成，中间发生了什么？</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#总结"><span class="post-toc-number">1.6.</span> <span class="post-toc-text">总结</span></a></li></ol></li></ol>
</ul>
<!-- Layouts -->
<!-- Post Module -->
<div class="material-post_container">
<div class="material-post mdl-grid">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<!-- Post Header(Thumbnail & Title) -->
<!-- Paradox Post Header -->
<!-- Random Thumbnail -->
<div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
<script type="text/ls-javascript" id="post-thumbnail-script">
var randomNum = Math.floor(Math.random() * 19 + 1);
$('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
$('.post_thumbnail-random').addClass('lazy');
</script>
<p class="article-headline-p">
前端面试准备
</p>
</div>
<!-- Paradox Post Info -->
<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
<!-- Author Avatar -->
<div id="author-avatar">
<img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
</div>
<!-- Author Name & Date -->
<div>
<strong>Feax</strong>
<span>8月 27, 2017</span>
</div>
<div class="section-spacer"></div>
<!-- Favorite -->
<!--
<button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
<i class="material-icons" role="presentation">favorite</i>
<span class="visuallyhidden">favorites</span>
</button>
-->
<!-- Qrcode -->
<button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">devices other</i>
<span class="visuallyhidden">devices other</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
<li class="mdl-menu__item">在其它设备中阅读本文章</li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN4AAADeCAAAAAB3DOFrAAACaklEQVR42u3aQXKDQAwEQP//08kHAh5JIBNXc3K5iJfmsKuM9Pr56uuFh4eHh4eHh4f3MN4rvv74oYvuPPrb3rPh4eHh7fDebLUHCx997n1z/rnwbHh4eHiLvPON+3zJc0a0oQfrnt+Dh4eH92ReUiKfHyq938HDw8P777y87O6VyHh4eHjP5+VLnhfW1TsT3lLWgoeHhxfzJmXu3Z9X+3t4eHh4Aa880jTGV4+l1ZkyPDw8vIBXjWjzMjoJDpKgofw8eHh4eCu8/N/+fIvPhwOq0XA5xsXDw8O7lDdv6vcaWjkgb4bh4eHh7fCqIWn+KHkBfX5gJMU6Hh4e3j5vEtpOivLqOFcUbeDh4eHdzJts+tWtPymRJ2MNeHh4eDu8ZKPvPUr1YOg12Eb9PTw8PLwWr9ekr45e9Qrx3kgWHh4e3g7v2ph1XqYna5VHB/Dw8PAu4vUK3GrLP48n5ocKHh4e3t28agRwLftwc48Pg1FKjYeHhzeuOd+05OPvm8NSrd/Bw8PD2+flkUSyrVdf1qSMxsPDw/sUL2/nJ8v0Bg6SwjpZBQ8PD2+TVw1S8038qpeVh854eHh4m7y8HZW3yqqrzC88PDy8TV51OHUSUkzi2mZKjYeHh3cRr7ztBpFBHg1Xo5DLJiPw8PDwBrxXfOXgalCbBx94eHh4z+FVY4Xqtl59ob1oAw8PD2+flw8B5A2t6phCFd8cHcDDw8P7EK8Xs1YPmFuGrvDw8PDWeQms12abDxbg4eHhbfKqTa88fq2+xORV4uHh4X2Wl0cAvcCiF1Xkhw0eHh7eJu/7Ljw8PDw8PDw8vAdcv6udzkr5NrDRAAAAAElFTkSuQmCC">
</ul>
<!-- Tags (bookmark) -->
<button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">bookmark</i>
<span class="visuallyhidden">bookmark</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
<li class="mdl-menu__item">
<a class="post_tag-link" href="/tags/面试/">面试</a>
</ul>
<!-- Share -->
<button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
<!-- Leancloud Views -->
<a class="post_share-link" href="#">
<li class="mdl-menu__item">
<span id="/前端面试准备.html" class="leancloud-views_num" data-flag-title="前端面试准备">
&nbsp;浏览量
</span>
</li>
</a>
<!-- Share Weibo -->
<a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=前端面试准备&url=http://blog.jzxer.cn/前端面试准备.html&pic=http://blog.jzxer.cn/img/favicon.ico&searchPic=false&style=simple" target="_blank">
<li class="mdl-menu__item">
分享到微博
</li>
</a>
<!-- Share Twitter -->
<a class="post_share-link" href="https://twitter.com/intent/tweet?text=前端面试准备&url=http://blog.jzxer.cn/前端面试准备.html&via=Feax" target="_blank">
<li class="mdl-menu__item">
分享到 Twitter
</li>
</a>
<!-- Share Facebook -->
<a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://blog.jzxer.cn/前端面试准备.html" target="_blank">
<li class="mdl-menu__item">
分享到 Facebook
</li>
</a>
<!-- Share Google+ -->
<a class="post_share-link" href="https://plus.google.com/share?url=http://blog.jzxer.cn/前端面试准备.html" target="_blank">
<li class="mdl-menu__item">
分享到 Google+
</li>
</a>
<!-- Share LinkedIn -->
<a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=http://blog.jzxer.cn/前端面试准备.html&title=前端面试准备" target="_blank">
<li class="mdl-menu__item">
分享到 LinkedIn
</li>
</a>
<!-- Share QQ -->
<a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Feax&#39;s Blog&title=前端面试准备&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=http://blog.jzxer.cn/img/favicon.ico&url=http://blog.jzxer.cn/前端面试准备.html" target="_blank">
<li class="mdl-menu__item">
分享到 QQ
</li>
</a>
<!-- Share Telegram -->
</ul>
</div>
<!-- Post Content -->
<div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
<p>整理一些面试题，以备用</p>
<h2 id="技术分类"><a href="#技术分类" class="headerlink" title="技术分类"></a>技术分类</h2><h3 id="JS-行为层"><a href="#JS-行为层" class="headerlink" title="JS (行为层)"></a>JS (行为层)</h3><h4 id="typeof-返回哪些数据类型"><a href="#typeof-返回哪些数据类型" class="headerlink" title="typeof 返回哪些数据类型"></a>typeof 返回哪些数据类型</h4><ul>
<li>obj num fun bool undefined</li>
</ul>
<h4 id="3种强制类型转换两种隐式类型转换"><a href="#3种强制类型转换两种隐式类型转换" class="headerlink" title="3种强制类型转换两种隐式类型转换"></a>3种强制类型转换两种隐式类型转换</h4><ul>
<li>parseInt parseFloat number</li>
<li>== - ===</li>
</ul>
<h4 id="数组方法pop-push-unshift-shift"><a href="#数组方法pop-push-unshift-shift" class="headerlink" title="数组方法pop() push() unshift() shift()"></a>数组方法pop() push() unshift() shift()</h4><ul>
<li>push() 尾部添加 pop() 尾部删除</li>
<li>unshift() 头部添加 shift() 头部删除</li>
</ul>
<h4 id="ajax请求-get-和-post-的区别"><a href="#ajax请求-get-和-post-的区别" class="headerlink" title="ajax请求 get 和 post 的区别"></a>ajax请求 get 和 post 的区别</h4><ul>
<li>一个在 url 后面，一个放在虚拟载体里面</li>
<li>有大小限制</li>
<li>安全问题</li>
<li>应用不同 </li>
</ul>
<h4 id="call-和-apply-的区别"><a href="#call-和-apply-的区别" class="headerlink" title="call 和 apply 的区别"></a>call 和 apply 的区别</h4><ul>
<li>object.call(this, obj1,obj2,obj3)</li>
<li>object.apply(this, argument)</li>
</ul>
<h4 id="ajax-请求时，如何解析-json-数据"><a href="#ajax-请求时，如何解析-json-数据" class="headerlink" title="ajax 请求时，如何解析 json 数据"></a>ajax 请求时，如何解析 json 数据</h4><ul>
<li>使用eval parse，介于安全性考虑 使用parse 更靠谱</li>
<li>eval 可以解析任何字符串，parse只解析json格式的字符串</li>
</ul>
<h4 id="闭包是什么？"><a href="#闭包是什么？" class="headerlink" title="闭包是什么？"></a>闭包是什么？</h4><ul>
<li>闭包就是能够读取其他函数内部变量的函数</li>
</ul>
<h4 id="添加-删除-替换-插入到某个节点的方法"><a href="#添加-删除-替换-插入到某个节点的方法" class="headerlink" title="添加 删除 替换 插入到某个节点的方法"></a>添加 删除 替换 插入到某个节点的方法</h4><ul>
<li>obj.appendChild()</li>
<li>obj.innersetBefore()</li>
<li>obj.replaceChild()</li>
<li>obj.removeChild()</li>
</ul>
<h4 id="javascript-同源策略"><a href="#javascript-同源策略" class="headerlink" title="javascript 同源策略"></a>javascript 同源策略</h4><ul>
<li>一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合</li>
</ul>
<h4 id="编写一个-b-继承-a-的方法"><a href="#编写一个-b-继承-a-的方法" class="headerlink" title="编写一个 b 继承 a 的方法"></a>编写一个 b 继承 a 的方法</h4><pre><code class="js"> function A(name) {
this.name = name;
this.sayHello = function(){alert(this.name+ &quot;say hello!&quot;)}
}
function B(name, id) {
this.temp = A
this.temp(name)
delete this.temp
this.id = id
this.checkId = function(ID) {alert(this.id == ID)}
}
</code></pre>
<h4 id="如何阻止事件冒泡和默认事件"><a href="#如何阻止事件冒泡和默认事件" class="headerlink" title="如何阻止事件冒泡和默认事件"></a>如何阻止事件冒泡和默认事件</h4><pre><code class="js"> function stopBubble(e) {
if (e &amp;&amp; e.stopPropagation) {
e.stopPropgation ()
} else {
window.event.cancelBubble = true
}
return false
}
</code></pre>
<h4 id="谈谈this对象的理解"><a href="#谈谈this对象的理解" class="headerlink" title="谈谈this对象的理解"></a>谈谈this对象的理解</h4><ul>
<li>this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化</li>
<li>但是有一个原则，this 指向的就是调用函数的那个对象</li>
<li>this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象</li>
</ul>
<h4 id="简单讲下-node-的使用场景"><a href="#简单讲下-node-的使用场景" class="headerlink" title="简单讲下 node 的使用场景"></a>简单讲下 node 的使用场景</h4><ul>
<li>高并发，聊天，实时消息推送</li>
</ul>
<h4 id="node-的优点和缺点提出自己的看法"><a href="#node-的优点和缺点提出自己的看法" class="headerlink" title="node 的优点和缺点提出自己的看法"></a>node 的优点和缺点提出自己的看法</h4><ul>
<li><p>优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙</p>
</li>
<li><p>缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持</p>
</li>
</ul>
<h4 id="常用的一款框架"><a href="#常用的一款框架" class="headerlink" title="常用的一款框架"></a>常用的一款框架</h4><ul>
<li>vuejs reactjs jQuery angular</li>
</ul>
<h3 id="CSS-表现层"><a href="#CSS-表现层" class="headerlink" title="CSS (表现层)"></a>CSS (表现层)</h3><h4 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h4><ul>
<li>使用clear</li>
<li>使用overflow</li>
<li>使用css的*：after</li>
</ul>
<h4 id="居中设置"><a href="#居中设置" class="headerlink" title="居中设置"></a>居中设置</h4><h5 id="1·-水平居中"><a href="#1·-水平居中" class="headerlink" title="1· 水平居中"></a>1· 水平居中</h5><ul>
<li>flex布局<blockquote>
<p>设置justify-content：center；</p>
</blockquote>
</li>
</ul>
<h5 id="2·-垂直居中"><a href="#2·-垂直居中" class="headerlink" title="2· 垂直居中"></a>2· 垂直居中</h5><ul>
<li>多行文本（内联元素）<blockquote>
<p>a: 插入 table ，再设置vertical-align: middle;<br>b: 先设置display： table-cell；再设置vertical-align: middle;</p>
</blockquote>
</li>
</ul>
<h4 id="link-和-import的区别"><a href="#link-和-import的区别" class="headerlink" title="link 和 @import的区别"></a>link 和 @import的区别</h4><ul>
<li>link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css</li>
<li>页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载</li>
<li>import 只在 ie5 以上被识别</li>
</ul>
<h4 id="css-盒子模型"><a href="#css-盒子模型" class="headerlink" title="css 盒子模型"></a>css 盒子模型</h4><ul>
<li>content，padding，margin，border</li>
</ul>
<h4 id="css-选择符号"><a href="#css-选择符号" class="headerlink" title="css 选择符号"></a>css 选择符号</h4><ul>
<li>id选择器</li>
<li>类选择器</li>
<li>标签选择器</li>
<li>相邻选择器 +</li>
<li>子选择器 &gt;</li>
<li>后代选择器</li>
<li>通配符选择器 *</li>
<li>属性选择器 （a[rel = ‘external’])</li>
<li>伪类选择器 hover nth-child</li>
<li>优先级<blockquote>
<p>!important &gt; id &gt; class &gt; tag</p>
</blockquote>
</li>
</ul>
<h3 id="HTML-结构层"><a href="#HTML-结构层" class="headerlink" title="HTML (结构层)"></a>HTML (结构层)</h3><h4 id="什么是语义化的HTML"><a href="#什么是语义化的HTML" class="headerlink" title="什么是语义化的HTML"></a>什么是语义化的HTML</h4><ul>
<li>直观的认识标签，有益于 SEO</li>
<li>有利于开源之后阅读代码的人更容易阅读</li>
<li>便于后期维护和理解</li>
</ul>
<h3 id="自动化编程"><a href="#自动化编程" class="headerlink" title="自动化编程"></a>自动化编程</h3><h4 id="前端自动化工具？"><a href="#前端自动化工具？" class="headerlink" title="前端自动化工具？"></a>前端自动化工具？</h4><ul>
<li>gulp</li>
<li>webpack</li>
</ul>
<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><h4 id="描述一下cookies，sessionStorage-和localStorage的区别？"><a href="#描述一下cookies，sessionStorage-和localStorage的区别？" class="headerlink" title="描述一下cookies，sessionStorage 和localStorage的区别？"></a>描述一下cookies，sessionStorage 和localStorage的区别？</h4><ul>
<li>cookie 在浏览器和服务器之间来回传递，SS和LS不会</li>
<li>SS和LS 的储存空间更大</li>
<li>SS和LS 有更多丰富易用的接口</li>
<li>SS和LS 是有各自的储存空间</li>
<li>LS 储存是永久性的，SS 关闭浏览器就没了</li>
</ul>
<h4 id="如何实现浏览器内多个标签之间的通信"><a href="#如何实现浏览器内多个标签之间的通信" class="headerlink" title="如何实现浏览器内多个标签之间的通信"></a>如何实现浏览器内多个标签之间的通信</h4><ul>
<li>调用LS Cookies 等本地储存方式</li>
</ul>
<h4 id="IE6-BUG-的解决办法"><a href="#IE6-BUG-的解决办法" class="headerlink" title="IE6 BUG 的解决办法"></a>IE6 BUG 的解决办法</h4><ul>
<li>双边距，float引起，使用display</li>
<li>3像素问题，float引起， 使用display：inline-3px</li>
<li>超链接 hover 点击失效， 注意顺序</li>
<li>无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）</li>
</ul>
<h4 id="你有哪些性能优化的方法"><a href="#你有哪些性能优化的方法" class="headerlink" title="你有哪些性能优化的方法"></a>你有哪些性能优化的方法</h4><ul>
<li>减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器</li>
<li>前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，</li>
<li>图片预加载，将样式表放在头部，脚本放在底部，加上时间戳</li>
<li>用innerHTML代替dom操作，减少dom操作次数，优化js性能</li>
<li>当需要设置的样式很多时，设置className而不是直接操作dom</li>
<li>避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，</li>
<li>前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询</li>
<li>减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。</li>
<li>程序优化永远要优化慢的部分</li>
</ul>
<h4 id="http-状态码有哪些？分别代表啥意思？"><a href="#http-状态码有哪些？分别代表啥意思？" class="headerlink" title="http 状态码有哪些？分别代表啥意思？"></a>http 状态码有哪些？分别代表啥意思？</h4><ul>
<li>100-199 用于指定客户端相应的某些动作</li>
<li>200-299 用于表示请求成功</li>
<li>300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息</li>
<li>400-499 用于指出客户端的错误。<blockquote>
<p>400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到</p>
</blockquote>
</li>
<li>500-599 用于支持服务器错误。501 服务器不可用</li>
</ul>
<h4 id="一个页面从输入-url-到页面显示完成，中间发生了什么？"><a href="#一个页面从输入-url-到页面显示完成，中间发生了什么？" class="headerlink" title="一个页面从输入 url 到页面显示完成，中间发生了什么？"></a>一个页面从输入 url 到页面显示完成，中间发生了什么？</h4><ul>
<li>查找浏览器缓存</li>
<li>DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求</li>
<li>进行HTTP 协议对话</li>
<li>客户端发送报头</li>
<li>文档开始下载</li>
<li>文档树建立，根据标记请求所需指定mime类型的文件</li>
<li>文件显示</li>
<li>浏览器这边做的工作大致分为以下几步：<blockquote>
<p>加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）<br>解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）</p>
</blockquote>
</li>
</ul>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul>
<li>怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长</li>
</ul>
<blockquote style="margin: 2em 0 0;padding: 0.5em 1em;border-left: 3px solid #F44336;background-color: #F5F5F5;list-style: none;">
<p><strong>
<p>转载请注明出处，谢谢!</p>
</strong>
<br>
<strong>本文链接：</strong><a href="http://blog.jzxer.cn/前端面试准备.html">http://blog.jzxer.cn/前端面试准备.html</a>
</p>
</blockquote>
</div>
<!-- Post Comments -->
<div id="comment" style='padding:10px;' class="vcomment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var GUEST_INFO = ['nick','mail','link'];
var guest_info = 'nick,mail,link'.split(',').filter(function(item){
return GUEST_INFO.indexOf(item) > -1
});
var notify = 'false' == true;
var verify = 'false' == true;
new Valine({
el: '.vcomment',
notify: notify,
verify: verify,
appId: "ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz",
appKey: "hUSwCACEEbPBcGUh42RMzy6P",
placeholder: "Just go go",
pageSize:'10',
avatar:'identicon',
lang:'zh-cn'
});
</script>
</div>
<!-- Post Prev & Next Nav -->
<nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
<!-- Prev Nav -->
<a href="/如何成为一名合格的CEO.html" id="post_nav-newer" class="prev-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_back</i>
</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
新篇
</a>
<!-- Section Spacer -->
<div class="section-spacer"></div>
<!-- Next Nav -->
<a href="/commonJS和AMD-CMD.html" id="post_nav-older" class="next-content">
旧篇
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_forward</i>
</button>
</a>
</nav>
</div>
</div>
<!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>
<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
<div id="sidebar-main">
<!-- Sidebar Header -->
<div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
<!-- Top bar -->
<div class="top-bar"></div>
<!-- Sidebar toggle button -->
<button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons">clear_all</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple">
</span>
</span>
</button>
<!-- Sidebar Avatar -->
<div class="sidebar-image">
<img src="/img/avatar.png" alt="Feax's avatar">
</div>
<!-- Sidebar Email -->
<a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
710328466@qq.com
<b class="caret"></b>
</a>
</div>
<!-- Sidebar Navigation -->
<ul class="nav sidebar-nav">
<!-- User dropdown -->
<li class="dropdown">
<ul id="settings-dropdown" class="dropdown-menu">
<li>
<a href="710328466@qq.com" target="_blank" title="给我发邮件">
<i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
给我发邮件
</a>
</li>
</ul>
</li>
<!-- Homepage -->
<li id="sidebar-first-li">
<a href="/">
<i class="material-icons sidebar-material-icons">home</i>
主页
</a>
</li>
<!-- Archives -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">inbox</i>
归档
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/archives/2018/06/">六月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/05/">五月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/04/">四月 2018<span class="sidebar_archives-count">7</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/02/">二月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/01/">一月 2018<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/10/">十月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/09/">九月 2017<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/08/">八月 2017<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/07/">七月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/06/">六月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/04/">四月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/11/">十一月 2016<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/08/">八月 2016<span class="sidebar_archives-count">1</span></a>
</ul>
</li>
<!-- Categories -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
分类
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/categories/CSS/">CSS<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/HTML/">HTML<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/IDE/">IDE<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/JS/">JS<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/categories/nodeJS/">nodeJS<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/categories/storage/">storage<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/vue/">vue<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/web前端/">web前端<span class="sidebar_archives-count">10</span></a></li><li><a class="sidebar_archives-link" href="/categories/web项目/">web项目<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/代理/">代理<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/博客搭建/">博客搭建<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/安全/">安全<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/数据库/">数据库<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/服务器/">服务器<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/本地储存/">本地储存<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/版本管理/">版本管理<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/生活/">生活<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/categories/自动化/">自动化<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/阅读/">阅读<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/音乐/">音乐<span class="sidebar_archives-count">7</span></a>
</ul>
</li>
<!-- Pages -->
<li>
<a href="/timeline" title="时间轴">
<i class="material-icons sidebar-material-icons">calendar_today</i>
时间轴
</a>
</li>
<li class="divider"></li>
<li>
<a href="/tags" title="标签">
<i class="material-icons sidebar-material-icons">label</i>
标签
</a>
</li>
<li>
<a href="/gallery" title="图库">
<i class="material-icons sidebar-material-icons">dashboard</i>
图库
</a>
</li>
<li>
<a href="/footprint" title="我的足迹">
<i class="material-icons sidebar-material-icons">flight</i>
我的足迹
</a>
</li>
<li>
<a href="/about" title="关于我">
<i class="material-icons sidebar-material-icons">sentiment_satisfied_alt</i>
关于我
</a>
</li>
<li class="divider"></li>
<!-- Article Number -->
<li>
<a href="/archives">
文章总数
<span class="sidebar-badge">55</span>
</a>
</li>
<li class="divider"></li>
</ul>
<!-- Sidebar Footer -->
<!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->
<!-- Sidebar Divider -->
<!-- Theme Material -->
<!-- Help & Support -->
<!--
<a href="mailto:hiviosey@gmail.com" class="sidebar-footer-text-a">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
sidebar.help
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</div>
</a>
-->
<!-- Feedback -->
<!--
<a href="https://github.com/viosey/hexo-theme-material/issues" target="_blank" class="sidebar-footer-text-a">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
sidebar.feedback
<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
</a>
-->
<!-- About Theme -->
<!--
-->
</div>
<!-- Sidebar Image -->
</aside>
<!-- Footer Top Button -->
<div id="back-to-top" class="toTop-wrap">
<a href="#top" class="toTop">
<i class="material-icons footer_top-i">expand_less</i>
</a>
</div>
<!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
<!-- Paradox Footer Left Section -->
<div class="mdl-mini-footer--left-section sns-list">
<!-- Twitter -->
<a href="https://twitter.com/Rockhellbear" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
<span class="visuallyhidden">Twitter</span>
</button><!--
--></a>
<!-- Facebook -->
<!-- Google + -->
<!-- Weibo -->
<a href="http://weibo.com/5330486979/fans?topnav=1&amp;wvr=6&amp;mod=message&amp;need_filter=1" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-weibo">
<span class="visuallyhidden">Weibo</span>
</button><!--
--></a>
<!-- Instagram -->
<a href="https://www.instagram.com/jzxer/?hl=zh-cn" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-instagram">
<span class="visuallyhidden">Instagram</span>
</button><!--
--></a>
<!-- Tumblr -->
<!-- Github -->
<a href="https://github.com/j710328466" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
<span class="visuallyhidden">Github</span>
</button><!--
--></a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/in/%E5%BF%97%E9%9B%84-%E6%B1%9F-338928105/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-linkedin">
<span class="visuallyhidden">LinkedIn</span>
</button><!--
--></a>
<!-- Zhihu -->
<!-- Bilibili -->
<a href="https://space.bilibili.com/73148384/#/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-bilibili">
<span class="visuallyhidden">Bilibili</span>
</button><!--
--></a>
<!-- Telegram -->
<!-- V2EX -->
</div>
<!--Copyright-->
<div id="copyright">
Copyright&nbsp;©&nbsp;2016&nbsp;-<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>Feax's Blog
<br>
<p>爱音乐，爱生活！</p>
</div>
<!-- Paradox Footer Right Section -->
<!--
I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
它不会影响美观并可以给开发者很大的支持。 :)
-->
<div class="mdl-mini-footer--right-section">
<div>
<div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
<!-- <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div> -->
</div>
</div>
</footer>
<!-- Import JS File -->
<script>lsloader.load("lazyload_js","/js/lazyload.min.js?1BcfzuNXqV+ntF6gq+5X3Q==", true)</script>
<script>lsloader.load("js_js","/js/js.min.js?V/53wGualMuiPM3xoetD5Q==", true)</script>
<script>lsloader.load("np_js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==", true)</script>
<script type="text/ls-javascript" id="NProgress-script">
NProgress.configure({
showSpinner: true
});
NProgress.start();
$('#nprogress .bar').css({
'background': '#efe8d8'
});
$('#nprogress .peg').css({
'box-shadow': '0 0 10px #efe8d8, 0 0 15px #efe8d8'
});
$('#nprogress .spinner-icon').css({
'border-top-color': '#efe8d8',
'border-left-color': '#efe8d8'
});
setTimeout(function() {
NProgress.done();
$('.fade').removeClass('out');
}, 800);
</script>
<script>lsloader.load("sm_js","/js/smoothscroll.js?lOy/ACj5suSNi7ZVFVbpFQ==", true)</script>
<!-- Leancloud -->
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>
AV.initialize('ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz', 'hUSwCACEEbPBcGUh42RMzy6P');
</script>
<script type="text/ls-javascript" id="leancloud-views-script">
function showTime(Counter) {
var query = new AV.Query(Counter);
$('.leancloud-views_num').each(function() {
var url = $(this).attr('id').trim();
query.equalTo('url', url);
query.find({
success: function(results) {
if (results.length === 0) {
var content = '0 ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
return;
}
for (var i = 0; i < results.length; i++) {
var object = results[i];
var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
}
},
error: function(object, error) {
console.log('Error: ' + error.code + ' ' + error.message);
}
});
});
}
function addCount(Counter) {
var Counter = AV.Object.extend('Counter');
url = $('.leancloud-views_num').attr('id').trim();
title = $('.leancloud-views_num').attr('data-flag-title').trim();
var query = new AV.Query(Counter);
query.equalTo('url', url);
query.find({
success: function(results) {
if (results.length > 0) {
var counter = results[0];
counter.fetchWhenSave(true);
counter.increment('time');
counter.save(null, {
success: function(counter) {
var content = counter.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
},
error: function(counter, error) {
console.log('Failed to save Visitor num, with error message: ' + error.message);
}
});
} else {
var newcounter = new Counter();
newcounter.set('title', title);
newcounter.set('url', url);
newcounter.set('time', 1);
newcounter.save(null, {
success: function(newcounter) {
console.log('newcounter.get(\'time\')='+newcounter.get('time'));
var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
},
error: function(newcounter, error) {
console.log('Failed to create');
}
});
}
},
error: function(error) {
console.log('Error:' + error.code + ' ' + error.message);
}
});
}
$(function() {
var Counter = AV.Object.extend('Counter');
if ($('.leancloud-views_num').length === 1) {
addCount(Counter);
} else if ($('.post-title-link').length > 1) {
showTime(Counter);
}
});
</script>
<!-- UC Browser Compatible -->
<script>
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('ucbrowser')>0) {
document.write('<link rel="stylesheet" href="/css/uc.css">');
alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
}
</script>
<!-- Import prettify js -->
<script>lsloader.load("prettify_js","/js/prettify.min.js?WN07fivHQSMKWy7BmHBB6w==", true)</script>
<!-- Window Load -->
<!-- add class for prettify -->
<script type="text/ls-javascript" id="window-load">
$(window).on('load', function() {
// Post_Toc parent position fixed
$('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
});
$(function() {
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
prettyPrint();
})
</script>
<!-- MathJax Load-->
<!-- Bing Background -->
<script type="text/ls-javascript" id="lazy-load">
// Offer LazyLoad
queue.offer(function(){
$('.lazy').lazyload({
effect : 'show'
});
});
// Start Queue
$(document).ready(function(){
setInterval(function(){
queue.execNext();
},200);
});
</script>
<!-- Custom Footer -->
<script>
(function(){
var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')
for (var i = 0; i < scriptList.length; ++i) {
var item = scriptList[i];
lsloader.runInlineScript(item.id,item.id);
}
})()
console.log('\n %c © Material Theme | Version: 1.5.2 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>
</main>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink