中台开发文档

.gitignore

+node_modules/
+
+.env
+.idea/
+.tags
+npm-debug.log
+build/
+build_lib/
+package-lock.json
+
+.idea

.travis.yml

+language: node_js
+node_js: stable
+
+# S: Build Lifecycle
+install:
+  - npm install cnpm -g
+  - cnpm install
+
+
+#before_script:
+ # - npm install -g gulp
+
+script:
+  - npm run build
+
+after_script:
+  - cd  ./docs/.vuepress/dist
+  - git init
+  - git config user.name "poetries"
+  - git config user.email "jingguanliuye@gmail.com"
+  - git add -A
+  - git commit -m "Update docs"
+  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:gh-pages
+# E: Build LifeCycle
+
+branches:
+  only:
+    - dev
+env:
+ global:
+   - GH_REF: github.com/poetries/FE-Interview-Questions.git
+   

README.md

+> 基于vuepress构建
\ No newline at end of file

deploy.sh

+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+set -e
+
+# 生成静态文件
+npm run build
+
+# 进入生成的文件夹
+cd docs/.vuepress/dist
+
+# 如果是发布到自定义域名
+echo 'blog.poetries.top' > CNAME
+
+git init
+git remote add origin https://github.com/poetries/FE-Interview-Questions.git
+git add -A
+git commit -m 'deploy'
+
+# 如果发布到 https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+
+# 如果发布到 https://<USERNAME>.github.io/<REPO>
+ git push -f  master:gh-pages
\ No newline at end of file

docs/.vuepress/config.js

+module.exports = {
+    base:'/zhiyong/',
+    // dest:'public', //指定 vuepress build 的输出目录
+    title: '知用科技中台系统',
+    description: '知用科技中台系统',
+    // 为每个代码块显示行号
+    markdown: {
+      lineNumbers: false
+    },
+    themeConfig: {
+        nav: [
+          { text: '模板设计器', link: '/improve/' },
+          { text: '场景设计器', link: '/base/' },
+          { text: '场景组件介绍', link: '/advance/' },
+          { text: '模板组件介绍', link: '/computed-base/' },
+          { text: '场景配置流程', link: '/excellent/' },
+          { text: '模板配置流程', link: '/simply/' },
+          // { text: '综合', link: '/comprehensive/' },
+          // { text: '其他', link: '/review/' },
+          // { text: 'QA', link: '/qa/' },
+          //{ text: 'Blog', link: 'http://blog.poetries.top/' },
+          //{ text: 'Github', link: 'https://github.com/poetries/' },
+        ],
+        sidebar: [
+          {
+            title: '模板设计器',
+            collapsable: false,
+            children: [
+              '/improve/'
+            ]
+          },
+          {
+            title: '模板组件介绍',
+            children: [
+              '/computed-base/'
+            ]
+          },
+          {
+            title: '模板配置流程',
+            children: [
+              '/simply/'
+            ]
+          },
+          {
+            title: '场景设计器',
+            children: [
+              '/base/'
+            ]
+          },
+          {
+            title: '场景组件介绍',
+            children: [
+              '/advance/'
+            ]
+          },
+          {
+            title: '场景配置流程',
+            children: [
+              '/excellent/'
+            ]
+          },
+          {
+            title: '中台系统说明',
+            children: [
+              '/comprehensive/'
+            ]
+          },
+          // {
+          //   title: '其他',
+          //   children: [
+          //     '/review/'
+          //   ]
+          // },
+          //  {
+          //   title: 'QA',
+          //   children: [
+          //     '/qa/'
+          //   ]
+          // }
+        ],
+        // lastUpdated: 'Last Updated',
+        // // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
+        // repo: 'poetries/FE-Interview-Questions/tree/dev',
+        // // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
+        // // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
+        // repoLabel: '查看源码',
+
+        // // 以下为可选的编辑链接选项
+
+        // // 假如你的文档仓库和项目本身不在一个仓库：
+        // // docsRepo: 'poetries/FE-Interview-Questions',
+        // // 假如文档不是放在仓库的根目录下：
+        // docsDir: 'docs',
+        // // 假如文档放在一个特定的分支下：
+        // docsBranch: 'dev',
+        // // 默认是 false, 设置为 true 来启用
+        // editLinks: true,
+        // // 默认为 "Edit this page"
+        // editLinkText: '帮助我们改善此页面！'
+      }
+    }

docs/.vuepress/dist/404.html

+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>FE-Interview</title>
+    <meta name="description" content="前端面试题整理">
+    
+    
+    <link rel="preload" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css" as="style"><link rel="preload" href="/FE-Interview-Questions/assets/js/app.988874f4.js" as="script"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/10.5fa31a90.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/11.5bcfe1b7.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/2.8a56b217.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/3.25bd3157.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/4.9fba53f9.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/5.2c24076d.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/6.02410588.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/7.726d87b3.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/8.4f8e9f80.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/9.0d0e8e6c.js">
+    <link rel="stylesheet" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>Looks like we've got some broken links.</blockquote> <a href="/FE-Interview-Questions/" class="router-link-active">Take me home.</a></div></div></div>
+    <script src="/FE-Interview-Questions/assets/js/app.988874f4.js" defer></script>
+  </body>
+</html>

docs/.vuepress/dist/assets/css/0.styles.826b6fd6.css

+.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto}.home .hero{text-align:center}.home .hero img{max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.custom-code-highlight .content code[data-v-099ab69c]{color:#c7254e;background-color:#f9f2f4;font-size:14px;border-radius:5px;padding-left:5px;padding-right:5px;margin:auto 3px}.custom-code-highlight .content blockquote[data-v-099ab69c]{padding:2px 30px;color:#555;border-left:6px solid #c7e6cc;background:#f1f5f3;font-size:1rem}.badge[data-v-099ab69c]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff;margin-right:5px;background-color:#42b983}.badge.middle[data-v-099ab69c]{vertical-align:middle}.badge.top[data-v-099ab69c]{vertical-align:top}.badge.green[data-v-099ab69c],.badge.tip[data-v-099ab69c]{background-color:#42b983}.badge.error[data-v-099ab69c]{background-color:#da5961}.badge.warn[data-v-099ab69c],.badge.warning[data-v-099ab69c],.badge.yellow[data-v-099ab69c]{background-color:#e7c000}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/FE-Interview-Questions/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:1.5rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title{display:block}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem;position:relative}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}.navbar .links .nav-links{flex:1}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}}.page-edit,.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit,.page-nav{padding:2rem}}@media (max-width:419px){.page-edit,.page-nav{padding:1.5rem}}.page{padding-bottom:2rem}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#aaa}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.sidebar-button{display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.sidebar-group:not(.first){margin-top:1em}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading{cursor:auto;color:inherit}.sidebar-heading{color:#999;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:0 1.5rem;margin-top:0;margin-bottom:.5rem}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading:.open .arrow{top:-.18em}.sidebar-group-items{transition:height .1s ease-out;overflow:hidden}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem 0}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-links{padding:1.5rem 0}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar .sidebar-links{padding:1rem 0}}.sw-update-popup{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid #3eaf7c;border-radius:3px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);text-align:center}.sw-update-popup button{margin-top:.5em;padding:.25em 2em}.sw-update-popup-enter-active,.sw-update-popup-leave-active{transition:opacity .3s,transform .3s}.sw-update-popup-enter,.sw-update-popup-leave-to{opacity:0;transform:translateY(50%) scale(.5)}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#3eaf7c;border-left-color:#3eaf7c;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.content pre,.content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.content pre[class*=language-] code,.content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number,div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.content:not(.custom){padding:2rem}}@media (max-width:419px){.content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:15px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.content:not(.custom)>:first-child{margin-top:3.6rem}.content:not(.custom) a:hover{text-decoration:underline}.content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.content:not(.custom) img{max-width:100%}.content.custom{padding:0;margin:0}.content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1.2rem;color:#999;border-left:.25rem solid #dfe2e5;margin-left:0;padding-left:1rem}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.content:not(.custom)>h1,.content:not(.custom)>h2,.content:not(.custom)>h3,.content:not(.custom)>h4,.content:not(.custom)>h5,.content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.content:not(.custom)>h1:first-child,.content:not(.custom)>h2:first-child,.content:not(.custom)>h3:first-child,.content:not(.custom)>h4:first-child,.content:not(.custom)>h5:first-child,.content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.content:not(.custom)>h1:first-child+.custom-block,.content:not(.custom)>h1:first-child+p,.content:not(.custom)>h1:first-child+pre,.content:not(.custom)>h2:first-child+.custom-block,.content:not(.custom)>h2:first-child+p,.content:not(.custom)>h2:first-child+pre,.content:not(.custom)>h3:first-child+.custom-block,.content:not(.custom)>h3:first-child+p,.content:not(.custom)>h3:first-child+pre,.content:not(.custom)>h4:first-child+.custom-block,.content:not(.custom)>h4:first-child+p,.content:not(.custom)>h4:first-child+pre,.content:not(.custom)>h5:first-child+.custom-block,.content:not(.custom)>h5:first-child+p,.content:not(.custom)>h5:first-child+pre,.content:not(.custom)>h6:first-child+.custom-block,.content:not(.custom)>h6:first-child+p,.content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.custom-layout{padding-top:3.6rem}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}.theme-container.no-navbar .custom-layout{padding-top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.icon.outbound{color:#aaa;display:inline-block}.custom-code-highlight .content code{color:#c7254e;background-color:#f9f2f4;font-size:14px;border-radius:5px;padding-left:5px;padding-right:5px;margin:auto 3px}.custom-code-highlight .content blockquote{padding:2px 30px;color:#555;border-left:6px solid #c7e6cc;background:#f1f5f3;font-size:1rem}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}
\ No newline at end of file

docs/.vuepress/dist/assets/img/search.83621669.svg

+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

docs/.vuepress/dist/assets/js/10.5fa31a90.js

+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{168:function(t,s,e){"use strict";e.r(s);var a={mounted:function(){var t=document.createElement("script");t.type="text/javascript",t.charset="UTF-8",t.src="http://tajs.qq.com/stats?sId=59154049",document.body.appendChild(t)}},n=e(0),r=Object(n.a)(a,function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"content"},[t._m(0),t._v(" "),e("blockquote",[e("p",[e("a",{attrs:{href:"https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",target:"_blank",rel:"noopener noreferrer"}},[t._v("如果您觉得有帮助，可以\b打赏我"),e("OutboundLink")],1),t._v(" "),e("img",{attrs:{src:"!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)",alt:""}})])]),t._v(" "),e("blockquote",[e("p",[e("a",{attrs:{href:"https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png",target:"_blank",rel:"noopener noreferrer"}},[t._v("关注微信公众号获取更多面试题：@静观流叶"),e("OutboundLink")],1),t._v(" "),e("img",{attrs:{src:"!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png)",alt:""}})])]),t._v(" "),t._m(1),t._v(" "),t._m(2),t._v(" "),t._m(3),t._m(4),t._v(" "),t._m(5),t._m(6),t._v(" "),t._m(7),t._v(" "),t._m(8),t._m(9),t._v(" "),t._m(10),t._v(" "),t._m(11),t._m(12),t._v(" "),t._m(13),t._v(" "),t._m(14),t._v(" "),t._m(15),t._v(" "),t._m(16),t._v(" "),t._m(17),t._v(" "),t._m(18),t._v(" "),t._m(19),t._v(" "),t._m(20),t._v(" "),e("p",[t._v("用处？")]),t._v(" "),t._m(21),t._v(" "),t._m(22),t._v(" "),t._m(23),t._v(" "),t._m(24),t._v(" "),t._m(25),t._v(" "),t._m(26),t._v(" "),t._m(27),t._v(" "),t._m(28),t._v(" "),t._m(29),t._v(" "),t._m(30),t._v(" "),t._m(31),t._v(" "),t._m(32),t._v(" "),t._m(33),t._v(" "),t._m(34),t._v(" "),t._m(35),t._v(" "),t._m(36),t._v(" "),t._m(37),t._v(" "),t._m(38),t._v(" "),t._m(39),t._v(" "),t._m(40),t._v(" "),t._m(41),t._v(" "),t._m(42),t._v(" "),t._m(43),t._v(" "),t._m(44),t._v(" "),t._m(45),t._v(" "),t._m(46),t._v(" "),t._m(47),t._v(" "),t._m(48),t._v(" "),t._m(49),t._v(" "),t._m(50),t._v(" "),t._m(51),t._m(52),t._v(" "),t._m(53),t._v(" "),t._m(54),t._v(" "),t._m(55),t._v(" "),t._m(56),t._v(" "),t._m(57),t._v(" "),t._m(58),t._v(" "),t._m(59),t._v(" "),t._m(60),t._v(" "),t._m(61),t._v(" "),t._m(62),t._v(" "),t._m(63),t._v(" "),t._m(64),t._v(" "),t._m(65),t._v(" "),t._m(66),t._v(" "),t._m(67),t._v(" "),t._m(68),t._v(" "),t._m(69),t._v(" "),t._m(70),t._v(" "),t._m(71),t._v(" "),t._m(72),t._v(" "),t._m(73),t._v(" "),t._m(74),t._v(" "),t._m(75),t._v(" "),t._m(76),t._v(" "),t._m(77),t._v(" "),t._m(78),t._v(" "),t._m(79),t._v(" "),t._m(80),t._v(" "),t._m(81),t._v(" "),t._m(82),t._v(" "),t._m(83),t._m(84),t._v(" "),t._m(85),t._m(86),t._v(" "),t._m(87),t._v(" "),t._m(88),t._m(89),t._v(" "),t._m(90),t._v(" "),t._m(91),t._v(" "),t._m(92),t._v(" "),t._m(93),t._v(" "),t._m(94),t._v(" "),t._m(95),t._v(" "),t._m(96),t._v(" "),t._m(97),t._v(" "),t._m(98),t._v(" "),t._m(99),t._v(" "),t._m(100),t._v(" "),t._m(101),t._v(" "),t._m(102),t._v(" "),t._m(103),t._v(" "),t._m(104),t._v(" "),t._m(105),t._m(106),t._v(" "),t._m(107),t._v(" "),t._m(108),t._m(109),t._v(" "),t._m(110),t._v(" "),t._m(111),t._v(" "),t._m(112),t._v(" "),t._m(113),t._v(" "),t._m(114),t._v(" "),t._m(115),t._v(" "),t._m(116),t._m(117),t._m(118),t._v(" "),t._m(119),t._v(" "),t._m(120),t._v(" "),t._m(121),t._v(" "),t._m(122),t._m(123),t._m(124),t._v(" "),t._m(125),t._v(" "),t._m(126),t._v(" "),t._m(127),t._v(" "),t._m(128),t._v(" "),t._m(129),t._v(" "),t._m(130),t._v(" "),t._m(131),t._v(" "),t._m(132)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"第六部分：精简版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#第六部分：精简版","aria-hidden":"true"}},[this._v("#")]),this._v(" 第六部分：精简版")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"一、css相关"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、css相关","aria-hidden":"true"}},[this._v("#")]),this._v(" 一、CSS相关")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_1-1-左边定宽，右边自适应方案：float-margin，float-calc"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-1-左边定宽，右边自适应方案：float-margin，float-calc","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.1 左边定宽，右边自适应方案：float + margin，float + calc")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-css extra-class"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案1 */")]),t._v(" \n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".left")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" left"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".right")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案2 */")]),t._v(" \n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".left")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" left"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".right")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("100% - 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" left"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_1-2-左右两边定宽，中间自适应：float，float-calc-圣杯布局（设置bfc，margin负值法），flex"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-2-左右两边定宽，中间自适应：float，float-calc-圣杯布局（设置bfc，margin负值法），flex","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.2 左右两边定宽，中间自适应：float，float + calc, 圣杯布局（设置BFC，margin负值法），flex")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-css extra-class"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap > div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案1 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".left")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" left"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".right")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" right"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案2 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".left")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" left"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".right")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" right"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("100% - 240px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案3 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".left")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".right")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 120px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_1-3-左右居中"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-3-左右居中","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.3 左右居中")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("行内元素: "),e("code",[t._v("text-align: center")])]),t._v(" "),e("li",[t._v("定宽块状元素: 左右 "),e("code",[t._v("margin")]),t._v(" 值为 "),e("code",[t._v("auto")])]),t._v(" "),e("li",[t._v("不定宽块状元素: "),e("code",[t._v("table")]),t._v("布局，"),e("code",[t._v("position + transform")])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-css extra-class"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案1 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inline"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* or */")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* display: inline-block; */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案2 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 auto"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 方案2 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" relative"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absulote"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("left")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("-50%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_1-4-上下垂直居中"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-4-上下垂直居中","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.4 上下垂直居中")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("定高："),e("code",[t._v("margin")]),t._v("，"),e("code",[t._v("position + margin")]),t._v("(负值)")]),t._v(" "),e("li",[t._v("不定高："),e("code",[t._v("position")]),t._v(" + "),e("code",[t._v("transform")]),t._v("，"),e("code",[t._v("flex")]),t._v("，"),e("code",[t._v("IFC + vertical-align:middle")])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-css extra-class"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 定高方案1 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50px 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("   \n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 定高方案2 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" -25px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不定高方案1 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateY")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("-50%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不定高方案2 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不定高方案3 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap::before")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("content")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inline-block"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("vertical-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" middle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrap")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inline-block"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  \n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("vertical-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" middle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_1-5-盒模型：content（元素内容）-padding（内边距）-border（边框）-margin（外边距）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-5-盒模型：content（元素内容）-padding（内边距）-border（边框）-margin（外边距）","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.5 盒模型：content（元素内容） + padding（内边距） + border（边框） + margin（外边距）")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("延伸： "),s("code",[this._v("box-sizing")])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("content-box")]),t._v("：默认值，总宽度 = "),e("code",[t._v("margin")]),t._v(" + "),e("code",[t._v("border")]),t._v(" + "),e("code",[t._v("padding")]),t._v(" + "),e("code",[t._v("width")])]),t._v(" "),e("li",[e("code",[t._v("border-box")]),t._v("：盒子宽度包含 "),e("code",[t._v("padding")]),t._v(" 和 "),e("code",[t._v("border")]),t._v("，"),e("code",[t._v("总宽度 = margin + width")])]),t._v(" "),e("li",[e("code",[t._v("inherit")]),t._v("：从父元素继承 "),e("code",[t._v("box-sizing")]),t._v(" 属性")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_1-6-bfc、ifc、gfc、ffc：fc（formatting-contexts），格式化上下文"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-6-bfc、ifc、gfc、ffc：fc（formatting-contexts），格式化上下文","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.6 BFC、IFC、GFC、FFC：FC（Formatting Contexts），格式化上下文")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[s("code",[this._v("BFC")]),this._v("：块级格式化上下文，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此(按照这个理念来想，只要脱离文档流，肯定就能产生 "),s("code",[this._v("BFC")]),this._v(")。产生 "),s("code",[this._v("BFC")]),this._v(" 方式如下")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("float")]),t._v(" 的值不为 "),e("code",[t._v("none")]),t._v("。")]),t._v(" "),e("li",[e("code",[t._v("overflow")]),t._v(" 的值不为 "),e("code",[t._v("visible")]),t._v("。")]),t._v(" "),e("li",[e("code",[t._v("position")]),t._v(" 的值不为 "),e("code",[t._v("relative")]),t._v(" 和 "),e("code",[t._v("static")]),t._v("。")]),t._v(" "),e("li",[e("code",[t._v("display")]),t._v(" 的值为 "),e("code",[t._v("table-cell")]),t._v(", "),e("code",[t._v("table-caption")]),t._v(", "),e("code",[t._v("inline-block")]),t._v("中的任何一个")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("用处？常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[e("code",[t._v("IFC")]),t._v("：内联格式化上下文，"),e("code",[t._v("IFC")]),t._v(" 的 "),e("code",[t._v("line")]),t._v(" "),e("code",[t._v("box")]),t._v("（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 "),e("code",[t._v("padding/margin")]),t._v(" 影响)。")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[e("code",[t._v("IFC")]),t._v("中的"),e("code",[t._v("line box")]),t._v("一般左右都贴紧整个 "),e("code",[t._v("IFC")]),t._v("，但是会因为 "),e("code",[t._v("float")]),t._v(" 元素而扰乱。"),e("code",[t._v("float")]),t._v(" 元素会位于 IFC 与 "),e("code",[t._v("line box")]),t._v(" 之间，使得 "),e("code",[t._v("line box")]),t._v(" 宽度缩短。 同个 "),e("code",[t._v("ifc")]),t._v(" 下的多个 "),e("code",[t._v("line box")]),t._v(" 高度会不同。 "),e("code",[t._v("IFC")]),t._v("中时不可能有块级元素的，当插入块级元素时（如 "),e("code",[t._v("p")]),t._v(" 中插入 "),e("code",[t._v("div")]),t._v("）会产生两个匿名块与 "),e("code",[t._v("div")]),t._v(" 分隔开，即产生两个 "),e("code",[t._v("IFC")]),t._v(" ，每个 "),e("code",[t._v("IFC")]),t._v(" 对外表现为块级元素，与 "),e("code",[t._v("div")]),t._v(" 垂直排列。")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("水平居中：当一个块要在环境中水平居中时，设置其为 "),e("code",[t._v("inline-block")]),t._v(" 则会在外层产生"),e("code",[t._v("IFC")]),t._v("，通过 "),e("code",[t._v("text-align")]),t._v(" 则可以使其水平居中。")]),t._v(" "),e("li",[t._v("垂直居中：创建一个 "),e("code",[t._v("IFC")]),t._v("，用其中一个元素撑开父元素的高度，然后设置其 "),e("code",[t._v("vertical-align")]),t._v(": "),e("code",[t._v("middle")]),t._v("，其他行内元素则可以在此父元素下垂直居中")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("ul",[e("li",[e("strong",[t._v("GFC")]),t._v("：网格布局格式化上下文（"),e("code",[t._v("display: grid")]),t._v("）")]),t._v(" "),e("li",[e("strong",[t._v("FFC")]),t._v("：自适应格式化上下文（"),e("code",[t._v("display: flex")]),t._v("）")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"二、js-基础（es5）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、js-基础（es5）","aria-hidden":"true"}},[this._v("#")]),this._v(" 二、JS 基础（ES5）")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_2-1-原型"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-1-原型","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.1 原型")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("这里可以谈很多，只要围绕 "),s("code",[this._v("[[ prototype ]]")]),this._v(" 谈，都没啥问题")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_2-2-闭包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-2-闭包","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.2 闭包")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("牵扯作用域，可以两者联系起来一起谈")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_2-3-作用域"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-3-作用域","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.3 作用域")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("词法作用域，动态作用域")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_2-4-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-4-this","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.4 this")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("不同情况的调用，"),e("code",[t._v("this")]),t._v("指向分别如何。顺带可以提一下 "),e("code",[t._v("es6")]),t._v(" 中箭头函数没有 "),e("code",[t._v("this")]),t._v(", "),e("code",[t._v("arguments")]),t._v(", "),e("code",[t._v("super")]),t._v(" 等，这些只依赖包含箭头函数最接近的函数")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_2-5-call，apply，bind-三者用法和区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-5-call，apply，bind-三者用法和区别","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.5 call，apply，bind 三者用法和区别")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("参数、绑定规则（显示绑定和强绑定），运行效率（最终都会转换成一个一个的参数去运行）、运行情况（"),e("code",[t._v("call")]),t._v("，"),e("code",[t._v("apply")]),t._v(" 立即执行，"),e("code",[t._v("bind")]),t._v(" 是"),e("code",[t._v("return")]),t._v(" 出一个 "),e("code",[t._v("this")]),t._v(" “固定”的函数，这也是为什么 "),e("code",[t._v("bind")]),t._v(" 是强绑定的一个原因）")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("注：“固定”这个词的含义，它指的固定是指只要传进去了 "),e("code",[t._v("context")]),t._v("，则 "),e("code",[t._v("bind")]),t._v(" 中 "),e("code",[t._v("return")]),t._v(" 出来的函数 "),e("code",[t._v("this")]),t._v(" 便一直指向 "),e("code",[t._v("context")]),t._v("，除非 "),e("code",[t._v("context")]),t._v(" 是个变量")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_2-6-变量声明提升"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-6-变量声明提升","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.6 变量声明提升")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[s("code",[this._v("js")]),this._v(" 代码在运行前都会进行 "),s("code",[this._v("AST")]),this._v(" 解析，函数申明默认会提到当前作用域最前面，变量申明也会进行提升。但赋值不会得到提升。关于 "),s("code",[this._v("AST")]),this._v(" 解析，这里也可以说是形成词法作用域的主要原因")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"三、js-基础（es6）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、js-基础（es6）","aria-hidden":"true"}},[this._v("#")]),this._v(" 三、JS 基础（ES6）")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_3-1-let，const"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-1-let，const","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.1 let，const")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[e("code",[t._v("let")]),t._v(" 产生块级作用域（通常配合 "),e("code",[t._v("for")]),t._v(" 循环或者 "),e("code",[t._v("{}")]),t._v(" 进行使用产生块级作用域），"),e("code",[t._v("const")]),t._v(" 申明的变量是常量（内存地址不变）")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_3-2-promise"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-2-promise","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.2 Promise")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("这里你谈 "),e("code",[t._v("promise")]),t._v("的时候，除了将他解决的痛点以及常用的 "),e("code",[t._v("API")]),t._v(" 之外，最好进行拓展把 "),e("code",[t._v("eventloop")]),t._v(" 带进来好好讲一下，"),e("code",[t._v("microtask")]),t._v("(微任务)、"),e("code",[t._v("macrotask")]),t._v("(任务) 的执行顺序，如果看过 "),e("code",[t._v("promise")]),t._v(" 源码，最好可以谈一谈 原生 "),e("code",[t._v("Promise")]),t._v(" 是如何实现的。"),e("code",[t._v("Promise")]),t._v(" 的关键点在于"),e("code",[t._v("callback")]),t._v(" 的两个参数，一个是 "),e("code",[t._v("resovle")]),t._v("，一个是 "),e("code",[t._v("reject")]),t._v("。还有就是 "),e("code",[t._v("Promise")]),t._v(" 的链式调用（"),e("code",[t._v("Promise.then()")]),t._v("，每一个 "),e("code",[t._v("then")]),t._v(" 都是一个责任人）")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_3-3-generator"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-3-generator","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.3 Generator")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("遍历器对象生成函数，最大的特点是可以交出函数的执行权")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("function")]),t._v(" 关键字与函数名之间有一个星号；")]),t._v(" "),e("li",[t._v("函数体内部使用 "),e("code",[t._v("yield")]),t._v("表达式，定义不同的内部状态；")]),t._v(" "),e("li",[e("code",[t._v("next")]),t._v("指针移向下一个状态")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("这里你可以说说 "),e("code",[t._v("Generator")]),t._v("的异步编程，以及它的语法糖 "),e("code",[t._v("async")]),t._v(" 和 "),e("code",[t._v("awiat")]),t._v("，传统的异步编程。"),e("code",[t._v("ES6")]),t._v(" 之前，异步编程大致如下")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("回调函数")]),this._v(" "),s("li",[this._v("事件监听")]),this._v(" "),s("li",[this._v("发布/订阅")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("传统异步编程方案之一：协程，多个线程互相协作，完成异步任务。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_3-4-async、await"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-4-async、await","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.4 async、await")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[s("code",[this._v("Generator")]),this._v(" 函数的语法糖。有更好的语义、更好的适用性、返回值是 "),s("code",[this._v("Promise")]),this._v("。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("code",[this._v("async => *")])]),this._v(" "),s("li",[s("code",[this._v("await => yield")])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 基本用法")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("timeout")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ms"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resolve"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resolve"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ms"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("    \n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("asyncConsole")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ms"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("timeout")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ms"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("asyncConsole")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello async and await'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("注：最好把2，3，4 连到一起讲")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_3-5-amd，cmd，commonjs，es6-module：解决原始无模块化的痛点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-5-amd，cmd，commonjs，es6-module：解决原始无模块化的痛点","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.5 AMD，CMD，CommonJs，ES6 Module：解决原始无模块化的痛点")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("strong",[t._v("AMD")]),t._v("："),e("code",[t._v("requirejs")]),t._v(" 在推广过程中对模块定义的规范化产出，提前执行，推崇依赖前置")]),t._v(" "),e("li",[e("strong",[t._v("CMD")]),t._v("："),e("code",[t._v("seajs")]),t._v(" 在推广过程中对模块定义的规范化产出，延迟执行，推崇依赖就近")]),t._v(" "),e("li",[e("strong",[t._v("CommonJs")]),t._v("：模块输出的是一个值的 "),e("code",[t._v("copy")]),t._v("，运行时加载，加载的是一个对象（"),e("code",[t._v("module.exports")]),t._v(" 属性），该对象只有在脚本运行完才会生成")]),t._v(" "),e("li",[e("strong",[t._v("ES6 Module")]),t._v("：模块输出的是一个值的引用，编译时输出接口，"),e("code",[t._v("ES6")]),t._v("模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"四、框架相关"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、框架相关","aria-hidden":"true"}},[this._v("#")]),this._v(" 四、框架相关")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_4-1-数据双向绑定原理：常见数据绑定的方案"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-1-数据双向绑定原理：常见数据绑定的方案","aria-hidden":"true"}},[this._v("#")]),this._v(" 4.1 数据双向绑定原理：常见数据绑定的方案")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("Object.defineProperty（vue）")]),t._v("：劫持数据的 "),e("code",[t._v("getter")]),t._v(" 和 "),e("code",[t._v("setter")])]),t._v(" "),e("li",[t._v("脏值检测（"),e("code",[t._v("angularjs")]),t._v("）：通过特定事件进行轮循\n发布/订阅模式：通过消息发布并将消息进行订阅")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_4-2-vdom：三个-part"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-2-vdom：三个-part","aria-hidden":"true"}},[this._v("#")]),this._v(" 4.2 VDOM：三个 part")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("虚拟节点类，将真实 "),e("code",[t._v("DOM")]),t._v("节点用 "),e("code",[t._v("js")]),t._v(" 对象的形式进行展示，并提供 "),e("code",[t._v("render")]),t._v(" 方法，将虚拟节点渲染成真实 "),e("code",[t._v("DOM")])]),t._v(" "),e("li",[t._v("节点 "),e("code",[t._v("diff")]),t._v(" 比较：对虚拟节点进行 "),e("code",[t._v("js")]),t._v(" 层面的计算，并将不同的操作都记录到 "),e("code",[t._v("patch")]),t._v(" 对象")]),t._v(" "),e("li",[e("code",[t._v("re-render")]),t._v("：解析 "),e("code",[t._v("patch")]),t._v(" 对象，进行 "),e("code",[t._v("re-render")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("补充1：VDOM 的必要性？")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("strong",[t._v("创建真实DOM的代价高")]),t._v("：真实的 "),e("code",[t._v("DOM")]),t._v(" 节点 "),e("code",[t._v("node")]),t._v(" 实现的属性很多，而 "),e("code",[t._v("vnode")]),t._v(" 仅仅实现一些必要的属性，相比起来，创建一个 "),e("code",[t._v("vnode")]),t._v(" 的成本比较低。")]),t._v(" "),e("li",[e("strong",[t._v("触发多次浏览器重绘及回流")]),t._v("：使用 "),e("code",[t._v("vnode")]),t._v(" ，相当于加了一个缓冲，让一次数据变动所带来的所有 "),e("code",[t._v("node")]),t._v(" 变化，先在 "),e("code",[t._v("vnode")]),t._v(" 中进行修改，然后 "),e("code",[t._v("diff")]),t._v(" 之后对所有产生差异的节点集中一次对 "),e("code",[t._v("DOM tree")]),t._v(" 进行修改，以减少浏览器的重绘及回流。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("补充2：vue 为什么采用 vdom？")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("引入 "),s("code",[this._v("Virtual DOM")]),this._v(" 在性能方面的考量仅仅是一方面。")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("性能受场景的影响是非常大的，不同的场景可能造成不同实现方案之间成倍的性能差距，所以依赖细粒度绑定及 "),e("code",[t._v("Virtual DOM")]),t._v(" 哪个的性能更好还真不是一个容易下定论的问题。")]),t._v(" "),e("li",[e("code",[t._v("Vue")]),t._v(" 之所以引入了 "),e("code",[t._v("Virtual DOM")]),t._v("，更重要的原因是为了解耦 "),e("code",[t._v("HTML")]),t._v("依赖，这带来两个非常重要的好处是：")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("ul",[e("li",[t._v("不再依赖 "),e("code",[t._v("HTML")]),t._v(" 解析器进行模版解析，可以进行更多的 "),e("code",[t._v("AOT")]),t._v(" 工作提高运行时效率：通过模版 "),e("code",[t._v("AOT")]),t._v(" 编译，"),e("code",[t._v("Vue")]),t._v(" 的运行时体积可以进一步压缩，运行时效率可以进一步提升；")]),t._v(" "),e("li",[t._v("可以渲染到 "),e("code",[t._v("DOM")]),t._v(" 以外的平台，实现 "),e("code",[t._v("SSR")]),t._v("、同构渲染这些高级特性，"),e("code",[t._v("Weex")]),t._v("等框架应用的就是这一特性。")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("综上，"),s("code",[this._v("Virtual DOM")]),this._v(" 在性能上的收益并不是最主要的，更重要的是它使得 "),s("code",[this._v("Vue")]),this._v(" 具备了现代框架应有的高级特性。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_4-3-vue-和-react-区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-3-vue-和-react-区别","aria-hidden":"true"}},[this._v("#")]),this._v(" 4.3 vue 和 react 区别")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("相同点：都支持 "),e("code",[t._v("ssr")]),t._v("，都有 "),e("code",[t._v("vdom")]),t._v("，组件化开发，实现 "),e("code",[t._v("webComponents")]),t._v(" 规范，数据驱动等")]),t._v(" "),e("li",[t._v("不同点："),e("code",[t._v("vue")]),t._v(" 是双向数据流（当然为了实现单数据流方便管理组件状态，"),e("code",[t._v("vuex")]),t._v(" 便出现了），"),e("code",[t._v("react")]),t._v(" 是单向数据流。"),e("code",[t._v("vue")]),t._v("的 "),e("code",[t._v("vdom")]),t._v(" 是追踪每个组件的依赖关系，不会渲染整个组件树，"),e("code",[t._v("react")]),t._v(" 每当应该状态被改变时，全部子组件都会 "),e("code",[t._v("re-render")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_4-4-为什么用-vue"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-4-为什么用-vue","aria-hidden":"true"}},[this._v("#")]),this._v(" 4.4 为什么用 vue")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("简洁、轻快、舒服")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"五、网络基础类"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、网络基础类","aria-hidden":"true"}},[this._v("#")]),this._v(" 五、网络基础类")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_5-1-跨域"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-1-跨域","aria-hidden":"true"}},[this._v("#")]),this._v(" 5.1 跨域")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("很多种方法，但万变不离其宗，都是为了搞定同源策略。重用的有 "),e("code",[t._v("jsonp")]),t._v("、"),e("code",[t._v("iframe")]),t._v("、"),e("code",[t._v("cors")]),t._v("、"),e("code",[t._v("img")]),t._v("、H"),e("code",[t._v("TML5 postMessage")]),t._v("等等。其中用到 "),e("code",[t._v("html")]),t._v(" 标签进行跨域的原理就是 "),e("code",[t._v("html")]),t._v(" 不受同源策略影响。但只是接受 "),e("code",[t._v("Get")]),t._v(" 的请求方式，这个得清楚。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[s("strong",[this._v("延伸1：img iframe script 来发送跨域请求有什么优缺点？")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("1. "),s("code",[this._v("iframe")])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("优点：跨域完毕之后"),e("code",[t._v("DOM")]),t._v("操作和互相之间的"),e("code",[t._v("JavaScript")]),t._v("调用都是没有问题的")]),t._v(" "),e("li",[t._v("缺点：1.若结果要以"),e("code",[t._v("URL")]),t._v("参数传递，这就意味着在结果数据量很大的时候需要分割传递，巨烦。2.还有一个是"),e("code",[t._v("iframe")]),t._v("本身带来的，母页面和"),e("code",[t._v("iframe")]),t._v("本身的交互本身就有安全性限制。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("2. script")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("优点：可以直接返回"),s("code",[this._v("json")]),this._v("格式的数据，方便处理")]),this._v(" "),s("li",[this._v("缺点：只接受"),s("code",[this._v("GET")]),this._v("请求方式")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("3. 图片ping")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("优点：可以访问任何"),s("code",[this._v("url")]),this._v("，一般用来进行点击追踪，做页面分析常用的方法")]),this._v(" "),s("li",[this._v("缺点：不能访问响应文本，只能监听是否响应")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[s("strong",[this._v("延伸2：配合 webpack 进行反向代理？")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("code",[this._v("webpack")]),this._v(" 在 "),s("code",[this._v("devServer")]),this._v(" 选项里面提供了一个 "),s("code",[this._v("proxy")]),this._v(" 的参数供开发人员进行反向代理")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  target"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://www.example.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// your target host")]),t._v("\n  changeOrigin"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// needed for virtual hosted sites")]),t._v("\n  pathRewrite"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'^/api'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),t._v("  "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rewrite path")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("然后再配合 "),s("code",[this._v("http-proxy-middleware")]),this._v(" 插件对 "),s("code",[this._v("api")]),this._v(" 请求地址进行代理")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" express "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" proxy "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http-proxy-middleware'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// proxy api requests")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" exampleProxy "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里的 options 就是 webpack 里面的 proxy 选项对应的每个选项")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mount `exampleProxy` in web server")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("express")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\napp"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" exampleProxy"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\napp"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("然后再用 "),s("code",[this._v("nginx")]),this._v(" 把允许跨域的源地址添加到报头里面即可")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("说到 "),s("code",[this._v("nginx")]),this._v(" ，可以再谈谈 "),s("code",[this._v("CORS")]),this._v(" 配置，大致如下")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("location "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("$request_method "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'OPTIONS'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    add_header "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Access-Control-Allow-Origin'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  \n    add_header "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Access-Control-Allow-Methods'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'GET, POST, OPTIONS'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n    add_header "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Access-Control-Allow-Credentials'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'true'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    add_header "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Access-Control-Allow-Headers'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'DNT, X-Mx-ReqToken, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  \n    add_header "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Access-Control-Max-Age'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("86400")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  \n    add_header "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Content-Type'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text/plain charset=UTF-8'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  \n    add_header "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Content-Length'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  \n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  \n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_5-2-http-无状态无连接"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-2-http-无状态无连接","aria-hidden":"true"}},[this._v("#")]),this._v(" 5.2 http 无状态无连接")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("http")]),t._v(" 协议对于事务处理没有记忆能力")]),t._v(" "),e("li",[t._v("对同一个"),e("code",[t._v("url")]),t._v("请求没有上下文关系")]),t._v(" "),e("li",[t._v("每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影响后面的请求应答情况")]),t._v(" "),e("li",[t._v("服务器中没有保存客户端的状态，客户端必须每次带上自己的状态去请求服务器")]),t._v(" "),e("li",[t._v("人生若只如初见，请求过的资源下一次会继续进行请求")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("http协议无状态中的 状态 到底指的是什么？！")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("【状态】的含义就是：客户端和服务器在某次会话中产生的数据")]),t._v(" "),e("li",[t._v("那么对应的【无状态】就意味着：这些数据不会被保留")]),t._v(" "),e("li",[t._v("通过增加"),e("code",[t._v("cookie")]),t._v("和"),e("code",[t._v("session")]),t._v("机制，现在的网络请求其实是有状态的")]),t._v(" "),e("li",[t._v("在没有状态的"),e("code",[t._v("http")]),t._v("协议下，服务器也一定会保留你每次网络请求对数据的修改，但这跟保留每次访问的数据是不一样的，保留的只是会话产生的结果，而没有保留会话")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_5-3-http-cache：就是-http-缓存"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-3-http-cache：就是-http-缓存","aria-hidden":"true"}},[this._v("#")]),this._v(" 5.3 http-cache：就是 http 缓存")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("1. 首先得明确 http 缓存的好处")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("减少了冗余的数据传输，减少网费")]),t._v(" "),e("li",[t._v("减少服务器端的压力")]),t._v(" "),e("li",[e("code",[t._v("Web")]),t._v(" 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间")]),t._v(" "),e("li",[t._v("加快客户端加载网页的速度")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("2. 常见 http 缓存的类型")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("私有缓存（一般为本地浏览器缓存）")]),this._v(" "),s("li",[this._v("代理缓存")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("3. 然后谈谈本地缓存")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("本地缓存是指浏览器请求资源时命中了浏览器本地的缓存资源，浏览器并不会发送真正的请求给服务器了。它的执行过程是")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("第一次浏览器发送请求给服务器时，此时浏览器还没有本地缓存副本，服务器返回资源给浏览器，响应码是"),e("code",[t._v("200 OK")]),t._v("，浏览器收到资源后，把资源和对应的响应头一起缓存下来")]),t._v(" "),e("li",[t._v("第二次浏览器准备发送请求给服务器时候，浏览器会先检查上一次服务端返回的响应头信息中的"),e("code",[t._v("Cache-Control")]),t._v("，它的值是一个相对值，单位为秒，表示资源在客户端缓存的最大有效期，过期时间为第一次请求的时间减去"),e("code",[t._v("Cache-Control")]),t._v("的值，过期时间跟当前的请求时间比较，如果本地缓存资源没过期，那么命中缓存，不再请求服务器")]),t._v(" "),e("li",[t._v("如果没有命中，浏览器就会把请求发送给服务器，进入缓存协商阶段。")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("与本地缓存相关的头有："),e("code",[t._v("Cache-Control")]),t._v("、"),e("code",[t._v("Expires")]),t._v("，"),e("code",[t._v("Cache-Control")]),t._v("有多个可选值代表不同的意义，而"),e("code",[t._v("Expires")]),t._v("就是一个日期格式的绝对值。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("3.1 Cache-Control")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[s("code",[this._v("Cache-Control")]),this._v("是"),s("code",[this._v("HTPP")]),this._v("缓存策略中最重要的头，它是"),s("code",[this._v("HTTP/1.1")]),this._v("中出现的，它由如下几个值")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("no-cache")]),t._v("：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在"),e("code",[t._v("ETag")]),t._v("，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载")]),t._v(" "),e("li",[e("code",[t._v("no-store")]),t._v("：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源")]),t._v(" "),e("li",[e("code",[t._v("public")]),t._v("：可以被所有的用户缓存，包括终端用户和"),e("code",[t._v("CDN")]),t._v("等中间代理服务器。")]),t._v(" "),e("li",[e("code",[t._v("private")]),t._v("：只能被终端用户的浏览器缓存，不允许"),e("code",[t._v("CDN")]),t._v("等中继缓存服务器对其缓存。")]),t._v(" "),e("li",[e("code",[t._v("max-age")]),t._v("：从当前请求开始，允许获取的响应被重用的最长时间（秒）。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[this._v("# 例如：")]),this._v("\n\nCache-Control: public, max-age"),s("span",{pre:!0,attrs:{class:"token operator"}},[this._v("=")]),this._v("1000 \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[this._v("# 表示资源可以被所有用户以及代理服务器缓存，最长时间为1000秒。")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("3.2 Expires")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[e("code",[t._v("Expires")]),t._v("是"),e("code",[t._v("HTTP/1.0")]),t._v("出现的头信息，同样是用于决定本地缓存策略的头，它是一个绝对时间，时间格式是如"),e("code",[t._v("Mon, 10 Jun 2015 21:31:12 GMT")]),t._v("，只要发送请求时间是在"),e("code",[t._v("Expires")]),t._v("之前，那么本地缓存始终有效，否则就会去服务器发送请求获取新的资源。如果同时出现"),e("code",[t._v("Cache-Control：max-age")]),t._v("和"),e("code",[t._v("Expires")]),t._v("，那么"),e("code",[t._v("max-age")]),t._v("优先级更高。他们可以这样组合使用")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[this._v("Cache-Control: public\nExpires: Wed, Jan 10 2018 00:27:04 GMT\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("3.3 所谓的缓存协商")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("当第一次请求时服务器返回的响应头中存在以下情况时")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[t._v("没有 "),e("code",[t._v("Cache-Control")]),t._v(" 和 "),e("code",[t._v("Expires")])]),t._v(" "),e("li",[e("code",[t._v("Cache-Control")]),t._v(" 和 "),e("code",[t._v("Expires")]),t._v(" 过期了")]),t._v(" "),e("li",[e("code",[t._v("Cache-Control")]),t._v(" 的属性设置为 "),e("code",[t._v("no-cache")]),t._v(" 时")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("那么浏览器第二次请求时就会与服务器进行协商，询问浏览器中的缓存资源是不是旧版本，需不需要更新，此时，服务器就会做出判断，如果缓存和服务端资源的最新版本是一致的，那么就无需再次下载该资源，服务端直接返回"),e("code",[t._v("304 Not Modified")]),t._v(" 状态码，如果服务器发现浏览器中的缓存已经是旧版本了，那么服务器就会把最新资源的完整内容返回给浏览器，状态码就是"),e("code",[t._v("200 Ok")]),t._v("，那么服务端是根据什么来判断浏览器的缓存是不是最新的呢？其实是根据"),e("code",[t._v("HTTP")]),t._v("的另外两组头信息，分别是："),e("code",[t._v("Last-Modified/If-Modified-Since")]),t._v(" 与 "),e("code",[t._v("ETag/If-None-Match")]),t._v("。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("Last-Modified 与 If-Modified-Since")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("浏览器第一次请求资源时，服务器会把资源的最新修改时间"),s("code",[this._v("Last-Modified:Thu, 29 Dec 2011 18:23:55 GMT")]),this._v("放在响应头中返回给浏览器")]),this._v(" "),s("li",[this._v("第二次请求时，浏览器就会把上一次服务器返回的修改时间放在请求头"),s("code",[this._v("If-Modified-Since:Thu, 29 Dec 2011 18:23:55")]),this._v("发送给服务器，服务器就会拿这个时间跟服务器上的资源的最新修改时间进行对比")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("如果两者相等或者大于服务器上的最新修改时间，那么表示浏览器的缓存是有效的，此时缓存会命中，服务器就不再返回内容给浏览器了，同时"),s("code",[this._v("Last-Modified")]),this._v("头也不会返回，因为资源没被修改，返回了也没什么意义。如果没命中缓存则最新修改的资源连同"),s("code",[this._v("Last-Modified")]),this._v("头一起返回")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[this._v("# 第一次请求返回的响应头")]),this._v("\nCache-Control:max-age"),s("span",{pre:!0,attrs:{class:"token operator"}},[this._v("=")]),this._v("3600\nExpires: Fri, Jan 12 2018 00:27:04 GMT\nLast-Modified: Wed, Jan 10 2018 00:27:04 GMT\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[this._v("# 第二次请求的请求头信息")]),this._v("\nIf-Modified-Since: Wed, Jan 10 2018 00:27:04 GMT\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("这组头信息是基于资源的修改时间来判断资源有没有更新，另一种方式就是根据资源的内容来判断，就是接下来要讨论的 "),s("code",[this._v("ETag")]),this._v(" 与 "),s("code",[this._v("If-None-Match")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("ETag与If-None-Match")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[s("code",[this._v("ETag/If-None-Match")]),this._v("与"),s("code",[this._v("Last-Modified/If-Modified-Since")]),this._v("的流程其实是类似的，唯一的区别是它基于资源的内容的摘要信息（比如"),s("code",[this._v("MD5 hash")]),this._v("）来判断")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("blockquote",[e("p",[t._v("浏览器发送第二次请求时，会把第一次的响应头信息"),e("code",[t._v("ETag")]),t._v("的值放在"),e("code",[t._v("If-None-Match")]),t._v("的请求头中发送到服务器，与最新的资源的摘要信息对比，如果相等，取浏览器缓存，否则内容有更新，最新的资源连同最新的摘要信息返回。用"),e("code",[t._v("ETag")]),t._v("的好处是如果因为某种原因到时资源的修改时间没改变，那么用"),e("code",[t._v("ETag")]),t._v("就能区分资源是不是有被更新。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[this._v("# 第一次请求返回的响应头：")]),this._v("\n\nCache-Control: public, max-age"),s("span",{pre:!0,attrs:{class:"token operator"}},[this._v("=")]),this._v("31536000\nETag: "),s("span",{pre:!0,attrs:{class:"token string"}},[this._v('"15f0fff99ed5aae4edffdd6496d7131f"')]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[this._v("# 第二次请求的请求头信息：")]),this._v("\n\nIf-None-Match: "),s("span",{pre:!0,attrs:{class:"token string"}},[this._v('"15f0fff99ed5aae4edffdd6496d7131f"')]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_5-4-cookie-和-session"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-4-cookie-和-session","aria-hidden":"true"}},[this._v("#")]),this._v(" 5.4 cookie 和 session")])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("session")]),t._v("： 是一个抽象概念，开发者为了实现中断和继续等操作，将 "),e("code",[t._v("user agent")]),t._v("和 "),e("code",[t._v("server")]),t._v(" 之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是 "),e("code",[t._v("session")]),t._v(" 的概念")]),t._v(" "),e("li",[e("code",[t._v("cookie")]),t._v("：它是一个世纪存在的东西，"),e("code",[t._v("http")]),t._v(" 协议中定义在 "),e("code",[t._v("header")]),t._v(" 中的字段，可以认为是 "),e("code",[t._v("session")]),t._v(" 的一种后端无状态实现")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("现在我们常说的 "),s("code",[this._v("session")]),this._v("，是为了绕开 "),s("code",[this._v("cookie")]),this._v(" 的各种限制，通常借助 "),s("code",[this._v("cookie")]),this._v("本身和后端存储实现的，一种更高级的会话状态实现")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("code",[this._v("session")]),this._v(" 的常见实现要借助"),s("code",[this._v("cookie")]),this._v("来发送 "),s("code",[this._v("sessionID")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"_5-5-安全问题，如-xss-和-csrf"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-5-安全问题，如-xss-和-csrf","aria-hidden":"true"}},[this._v("#")]),this._v(" 5.5 安全问题，如 XSS 和 CSRF")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("code",[this._v("XSS")]),this._v("：跨站脚本攻击，是一种网站应用程序的安全漏洞攻击，是代码注入的一种。常见方式是将恶意代码注入合法代码里隐藏起来，再诱发恶意代码，从而进行各种各样的非法活动")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("防范：记住一点 “所有用户输入都是不可信的”，所以得做输入过滤和转义")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",[e("li",[e("code",[t._v("CSRF")]),t._v("：跨站请求伪造，也称 "),e("code",[t._v("XSRF")]),t._v("，是一种挟制用户在当前已登录的"),e("code",[t._v("Web")]),t._v("应用程序上执行非本意的操作的攻击方法。与 "),e("code",[t._v("XSS")]),t._v(" 相比，"),e("code",[t._v("XSS")]),t._v("利用的是用户对指定网站的信任，"),e("code",[t._v("CSRF")]),t._v("利用的是网站对用户网页浏览器的信任。")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("防范：用户操作验证（验证码），额外验证机制（"),s("code",[this._v("token")]),this._v("使用）等")])])}],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file

docs/.vuepress/dist/assets/js/11.5bcfe1b7.js

+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{166:function(n,w,o){}}]);
\ No newline at end of file

docs/.vuepress/dist/assets/js/2.8a56b217.js

+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{164:function(t,n,e){},165:function(t,n,e){"use strict";var a=e(164);e.n(a).a},175:function(t,n,e){"use strict";e.r(n);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,n){var e=n.props,a=n.slots;return t("span",{class:["badge",e.type,e.vertical]},e.text||a().default)}},r=(e(165),e(0)),i=Object(r.a)(a,void 0,void 0,!1,null,"099ab69c",null);n.default=i.exports}}]);
\ No newline at end of file

docs/.vuepress/dist/assets/js/3.25bd3157.js

+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{172:function(t,e,n){"use strict";n.r(e);var s={mounted:function(){var t=document.createElement("script");t.type="text/javascript",t.charset="UTF-8",t.src="http://tajs.qq.com/stats?sId=59154049",document.body.appendChild(t)}},c=n(0),a=Object(c.a)(s,function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);e.default=a.exports}}]);
\ No newline at end of file

docs/.vuepress/dist/assets/js/6.02410588.js

+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{170:function(_,e,v){"use strict";v.r(e);var t={mounted:function(){var _=document.createElement("script");_.type="text/javascript",_.charset="UTF-8",_.src="http://tajs.qq.com/stats?sId=59154049",document.body.appendChild(_)}},i=v(0),c=Object(i.a)(t,function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("div",{staticClass:"content"},[_._m(0),_._v(" "),v("blockquote",[v("p",[v("a",{attrs:{href:"https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",target:"_blank",rel:"noopener noreferrer"}},[_._v("如果您觉得有帮助，可以\b打赏我"),v("OutboundLink")],1),_._v(" "),v("img",{attrs:{src:"!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)",alt:""}})])]),_._v(" "),v("blockquote",[v("p",[v("a",{attrs:{href:"https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png",target:"_blank",rel:"noopener noreferrer"}},[_._v("关注微信公众号获取更多面试题：@静观流叶"),v("OutboundLink")],1),_._v(" "),v("img",{attrs:{src:"!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png)",alt:""}})])]),_._v(" "),_._m(1),_._v(" "),_._m(2),_._v(" "),_._m(3),_._v(" "),_._m(4),_._v(" "),_._m(5),_._v(" "),_._m(6),_._v(" "),_._m(7),_._v(" "),_._m(8),_._v(" "),_._m(9),_._v(" "),_._m(10),_._v(" "),_._m(11),_._v(" "),_._m(12),_._v(" "),_._m(13),_._v(" "),_._m(14),_._v(" "),_._m(15),_._v(" "),_._m(16),_._v(" "),_._m(17),_._v(" "),_._m(18),_._v(" "),_._m(19),_._v(" "),v("ul",[_._m(20),_._v(" "),v("li",[_._v("移动端的缓存机制有哪几种？")]),_._v(" "),_._m(21),_._v(" "),v("li",[_._v("过万条数据如何加载和渲染？")]),_._v(" "),v("li",[_._v("如何在前端解析二进制，流媒体、图片二进制数据怎样渲染到页面上？")]),_._v(" "),v("li",[_._v("如何解析二进制音频、视频？")]),_._v(" "),v("li",[_._v("文件如何显示上传百分比？")]),_._v(" "),v("li",[_._v("如何制作一个富文本，需要考虑哪些结构？")]),_._v(" "),_._m(22),_._v(" "),v("li",[_._v("如何在浏览器里面裁剪图片？如何裁剪视频，对视频做逐帧分析？")]),_._v(" "),v("li",[_._v("如何实现一个具有引导功能的组件库？")]),_._v(" "),_._m(23),_._v(" "),_._m(24),_._v(" "),_._m(25),_._v(" "),v("li",[_._v("数据埋点的意义是什么？应当针对哪些数据进行埋点？如何构建一个埋点系统？")]),_._v(" "),v("li",[_._v("小程序的实现原理是什么？"),v("a",{attrs:{href:"https://github.com/phodal/articles/issues/32",target:"_blank",rel:"noopener noreferrer"}},[_._v("这【五篇】文章将带你深入了解「微信小程序」"),v("OutboundLink")],1)])]),_._v(" "),_._m(26),_._v(" "),_._m(27),_._v(" "),_._m(28),_._v(" "),_._m(29),_._v(" "),_._m(30),_._v(" "),_._m(31),_._v(" "),_._m(32),_._v(" "),_._m(33)])},[function(){var _=this.$createElement,e=this._self._c||_;return e("h1",{attrs:{id:"第七部分：综合问题版"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#第七部分：综合问题版","aria-hidden":"true"}},[this._v("#")]),this._v(" 第七部分：综合问题版")])},function(){var _=this.$createElement,e=this._self._c||_;return e("blockquote",[e("p",[this._v("这里不做解答，请自行查阅相关答案。")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h2",{attrs:{id:"一、基础"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#一、基础","aria-hidden":"true"}},[this._v("#")]),this._v(" 一、基础")])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_1-1-html"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1-1-html","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.1 HTML")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[v("code",[_._v("html5")]),_._v("新标签有哪些")]),_._v(" "),v("li",[v("code",[_._v("canvas")]),_._v("、"),v("code",[_._v("svg")]),_._v("、"),v("code",[_._v("webGL")])]),_._v(" "),v("li",[_._v("你是如何理解 "),v("code",[_._v("HTML")]),_._v("语义化的，有什么好处")]),_._v(" "),v("li",[_._v("前端需要注意哪些"),v("code",[_._v("SEO")]),_._v("?")]),_._v(" "),v("li",[v("code",[_._v("manifest")]),_._v("、"),v("code",[_._v("worker")]),_._v("、"),v("code",[_._v("socket")])]),_._v(" "),v("li",[v("code",[_._v("input")]),_._v("和"),v("code",[_._v("textarea")]),_._v("的区别")]),_._v(" "),v("li",[_._v("用一个"),v("code",[_._v("div")]),_._v("模拟"),v("code",[_._v("textarea")]),_._v("的实现")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_1-2-css"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1-2-css","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.2  CSS")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[v("code",[_._v("css3")]),_._v("有什么新特性，浏览器支持怎么样")]),_._v(" "),v("li",[_._v("伪类是什么？有哪些？会有哪些兼容性问题？如何处理？")]),_._v(" "),v("li",[v("code",[_._v("css")]),_._v("预处理器知道吗？用过哪些？有什么优劣？后处理器知道吗？")]),_._v(" "),v("li",[_._v("盒模型有哪几种？怪异模式和标准模式？")]),_._v(" "),v("li",[v("code",[_._v("less")]),_._v("、"),v("code",[_._v("sass")]),_._v("、"),v("code",[_._v("postcss")]),_._v("、"),v("code",[_._v("prefix")])]),_._v(" "),v("li",[_._v("层叠优先级")]),_._v(" "),v("li",[_._v("圣杯、双飞燕布局")]),_._v(" "),v("li",[v("code",[_._v("float")]),_._v("清除浮动")]),_._v(" "),v("li",[v("code",[_._v("flex")]),_._v("布局、 "),v("code",[_._v("grid")]),_._v("布局、"),v("code",[_._v("table")]),_._v("布局")]),_._v(" "),v("li",[v("code",[_._v("css")]),_._v("以及中轴旋转、动画变换")]),_._v(" "),v("li",[_._v("绘制三角形、矩形、菱形、梯形（奇巧淫技，可以不问）")]),_._v(" "),v("li",[v("code",[_._v("sprite")]),_._v("图（雪碧图）知道吗？"),v("code",[_._v("svg")]),_._v("雪碧图了解吗？")]),_._v(" "),v("li",[v("code",[_._v("px")]),_._v("、"),v("code",[_._v("em")]),_._v("、"),v("code",[_._v("rem")]),_._v("、"),v("code",[_._v("vw")]),_._v("、"),v("code",[_._v("vh")]),_._v("？"),v("code",[_._v("rem")]),_._v("的根节点样式在什么时候设置？")]),_._v(" "),v("li",[v("code",[_._v("position")]),_._v("有哪些？他们的定位原点是什么？")]),_._v(" "),v("li",[_._v("媒体查询用"),v("code",[_._v("css")]),_._v("好还是用"),v("code",[_._v("js")]),_._v("好？")]),_._v(" "),v("li",[v("code",[_._v("link")]),_._v("和"),v("code",[_._v("@import")]),_._v("的区别？")]),_._v(" "),v("li",[_._v("响应式布局的原理")]),_._v(" "),v("li",[v("code",[_._v("css")]),_._v("低版本浏览器兼容问题，额外需要什么后缀来声明浏览器兼容")]),_._v(" "),v("li",[v("code",[_._v("!important")]),_._v("意义，是否应当规避使用？")]),_._v(" "),v("li",[v("code",[_._v("BFC")]),_._v("块级上下文、"),v("code",[_._v("IFC")]),_._v("，实现双栏高度对齐")]),_._v(" "),v("li",[v("code",[_._v("BEM")]),_._v("命名法，有什么优势，有什么劣势")]),_._v(" "),v("li",[v("code",[_._v("1px")]),_._v("边框问题")]),_._v(" "),v("li",[_._v("（水平）居中有哪些实现方式、（垂直）居中有哪些实现方式")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_1-3-javascript"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1-3-javascript","aria-hidden":"true"}},[this._v("#")]),this._v(" 1.3 JavaScript")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[v("code",[_._v("typeof")]),_._v("以及弱类型转换规则？"),v("code",[_._v("NaN")]),_._v("、"),v("code",[_._v("undefined")]),_._v("、"),v("code",[_._v("null")])]),_._v(" "),v("li",[v("code",[_._v("dom")]),_._v("的节点操作？能够背"),v("code",[_._v("api")]),_._v("还是知道"),v("code",[_._v("api")]),_._v("？")]),_._v(" "),v("li",[v("code",[_._v("ajax")]),_._v("是什么？知道底层实现原理吗？知道"),v("code",[_._v("fetch")]),_._v("吗？自己封装过吗？")]),_._v(" "),v("li",[v("code",[_._v("GET")]),_._v("、"),v("code",[_._v("POST")]),_._v("意义？"),v("code",[_._v("restful")]),_._v("架构下还有别的什么请求？"),v("code",[_._v("OPTION")]),_._v("请求是什么？")]),_._v(" "),v("li",[_._v("事件冒泡和事件捕获是怎样的？对应的默认方法有什么？一般在什么情况使用？")]),_._v(" "),v("li",[v("code",[_._v("call")]),_._v("、"),v("code",[_._v("apply")]),_._v("、"),v("code",[_._v("bind")])]),_._v(" "),v("li",[_._v("如何判断数据类型？")]),_._v(" "),v("li",[v("code",[_._v("hoisting")]),_._v("是什么？具体表现是怎样的？")]),_._v(" "),v("li",[_._v("匿名函数是什么？函数表达式和函数声明的区别？")]),_._v(" "),v("li",[v("code",[_._v("let")]),_._v("、"),v("code",[_._v("const")]),_._v("暂时性锁区知道吗？表现是怎样的？")]),_._v(" "),v("li",[_._v("严格模式是什么？有什么好处？"),v("code",[_._v("use strict")])]),_._v(" "),v("li",[v("code",[_._v("arguments")]),_._v("是什么类型？"),v("code",[_._v("callee")]),_._v("和"),v("code",[_._v("caller")]),_._v("有什么区别？")]),_._v(" "),v("li",[v("code",[_._v("Date.format")]),_._v("实现过吗？思路是怎样的？")]),_._v(" "),v("li",[_._v("动画："),v("code",[_._v("setTimeout")]),_._v("何时执行，"),v("code",[_._v("requestAnimationFrame")]),_._v("的优点")]),_._v(" "),v("li",[_._v("你知道"),v("code",[_._v("new")]),_._v("一个对象有几步吗？")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h2",{attrs:{id:"二、高级"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#二、高级","aria-hidden":"true"}},[this._v("#")]),this._v(" 二、高级")])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_2-1-browser"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2-1-browser","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.1 Browser")])},function(){var _=this.$createElement,e=this._self._c||_;return e("ul",[e("li",[this._v("打开一个网页经历了那些过程？")]),this._v(" "),e("li",[this._v("浏览器加载白屏是什么原因？")]),this._v(" "),e("li",[this._v("千万访问量的项目，前端需要注意些什么？")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_2-2-javascript"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2-2-javascript","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.2 JavaScript")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[_._v("表达式和语句有什么区别？如何把语句转换为表达式？")]),_._v(" "),v("li",[_._v("什么叫执行上下文栈(·Execution Context Stack)·? 一个函数调用会产生多少个上下文环境？如何激活一个上下文，什么叫caller(调用者)，什么叫callee(被调用者)？给你一段代码能否画出执行过程中的上下文堆栈变化？")]),_._v(" "),v("li",[_._v("执行上下文包括哪些结构(状态/属性)，如何追踪关联代码的执行进度？")]),_._v(" "),v("li",[v("code",[_._v("eval")]),_._v("在调用的时候有哪些特别的地方？"),v("code",[_._v("eval")]),_._v("函数自身会产生上下文吗？会影响当前的调用上下文吗？")]),_._v(" "),v("li",[_._v("什么叫变量对象？什么叫活动对象？")]),_._v(" "),v("li",[_._v("词法作用域是什么？闭包是如何形成的？")]),_._v(" "),v("li",[v("code",[_._v("var foo = function bar () {}")]),_._v("命名函数表达式中(上述的foo函数)bar变量是定义在哪一层作用域的？")]),_._v(" "),v("li",[v("code",[_._v("(0, 1, 2)")]),_._v(" 的结果是什么？")]),_._v(" "),v("li",[v("code",[_._v("var foo = { value: 2, bar: function () { return this.value; } 中(foo.bar, foo.bar)()")]),_._v("的"),v("code",[_._v("this")]),_._v("值是什么？"),v("code",[_._v("(foo.bar = foo.bar)()、(false || foo.bar)()")]),_._v("呢?")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_2-3-http"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2-3-http","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.3 HTTP")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[v("code",[_._v("http1.0")]),_._v("和"),v("code",[_._v("http1.1")]),_._v("的区别")]),_._v(" "),v("li",[v("code",[_._v("http")]),_._v("请求码有哪些？"),v("code",[_._v("206")]),_._v("、"),v("code",[_._v("302")]),_._v("、"),v("code",[_._v("303")]),_._v("、"),v("code",[_._v("304")]),_._v("、"),v("code",[_._v("307")])]),_._v(" "),v("li",[_._v("能说下"),v("code",[_._v("304")]),_._v("具体怎样实现吗？")]),_._v(" "),v("li",[v("code",[_._v("http")]),_._v("缓存逻辑是怎样的？协商缓存与强缓存？"),v("code",[_._v("Last-Modified")]),_._v(" / "),v("code",[_._v("Etag")]),_._v(" / "),v("code",[_._v("Expires")]),_._v(" / "),v("code",[_._v("Cache-Control")]),_._v("？")]),_._v(" "),v("li",[v("code",[_._v("osi")]),_._v("七层协议和"),v("code",[_._v("tcp/ip")]),_._v("四层协议")]),_._v(" "),v("li",[_._v("三次握手和四次握手")]),_._v(" "),v("li",[_._v("跨域是什么？http协议中如何判断跨域？如何解决跨域问题？")]),_._v(" "),v("li",[v("code",[_._v("http2")]),_._v("具体内容？"),v("code",[_._v("SDPY")]),_._v("了解么？")]),_._v(" "),v("li",[v("code",[_._v("HTTPS")]),_._v("如何实现？"),v("code",[_._v("tsl/ssl")]),_._v("是什么？对称加密、非对称加密在什么时候、对什么数据加密？")]),_._v(" "),v("li",[v("code",[_._v("DNS")]),_._v("劫持是什么？")]),_._v(" "),v("li",[_._v("浏览器在一次 "),v("code",[_._v("HTTP")]),_._v(" 请求中，需要传输一个 "),v("code",[_._v("4097")]),_._v(" 字节的文本数据给服务端，可以采用那些方式?")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_2-4-优化"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2-4-优化","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.4 优化")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[_._v("首屏优化")]),_._v(" "),v("li",[_._v("预加载资源、预解析"),v("code",[_._v("DNS")])]),_._v(" "),v("li",[_._v("懒加载图片怎么做")]),_._v(" "),v("li",[v("code",[_._v("iframe")]),_._v("一般怎么使用？")]),_._v(" "),v("li",[v("code",[_._v("window.onload")]),_._v("、"),v("code",[_._v("document.ready")]),_._v("顺序？"),v("code",[_._v("iframe")]),_._v("会阻塞吗？")]),_._v(" "),v("li",[v("code",[_._v("cdn")]),_._v("是什么？如何查找最近的"),v("code",[_._v("cdn")]),_._v("？")]),_._v(" "),v("li",[v("code",[_._v("gzip")]),_._v("、"),v("code",[_._v("chucked")])]),_._v(" "),v("li",[_._v("前端安全："),v("code",[_._v("xss")]),_._v("攻击和防范、"),v("code",[_._v("CSRF")]),_._v("、"),v("code",[_._v("CORS")])]),_._v(" "),v("li",[_._v("硬件加速怎样开启")]),_._v(" "),v("li",[_._v("优化中会提到缓存的问题，问：静态资源或者接口等如何做缓存优化")]),_._v(" "),v("li",[_._v("页面"),v("code",[_._v("DOM")]),_._v("节点太多，会出现什么问题？如何优化？")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_2-5-products"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2-5-products","aria-hidden":"true"}},[this._v("#")]),this._v(" 2.5 Products")])},function(){var _=this.$createElement,e=this._self._c||_;return e("blockquote",[e("p",[this._v("这里主要是一些生产中真实存在的问题")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("li",[this._v("一个"),e("code",[this._v("feed")]),this._v("流，有哪些展现方式？如果当前页面可视区有5个格子，而你有"),e("code",[this._v("20")]),this._v("条信息需要展示，请问有哪些自动展示的算法？")])},function(){var _=this.$createElement,e=this._self._c||_;return e("li",[this._v("小程序如何与"),e("code",[this._v("native")]),this._v("通信？"),e("code",[this._v("react-native")]),this._v("实现原理？"),e("code",[this._v("jsbridge")]),this._v("如何实现？")])},function(){var _=this.$createElement,e=this._self._c||_;return e("li",[e("code",[this._v("html5")]),this._v("的播放器怎么做？视频直播如何在浏览器里面实现？"),e("code",[this._v("HLS")]),this._v("、"),e("code",[this._v("RTMP")])])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("li",[_._v("如何封装一个"),v("code",[_._v("Form")]),_._v("和"),v("code",[_._v("FormItem")]),_._v("，使其能够跟"),v("code",[_._v("input")]),_._v("、"),v("code",[_._v("select")]),_._v("、"),v("code",[_._v("checkbox")]),_._v("、"),v("code",[_._v("radio")]),_._v("等组件进行 数据存储、数据校验（自定义逻辑）、校验反馈？")])},function(){var _=this.$createElement,e=this._self._c||_;return e("li",[e("code",[this._v("echart")]),this._v("这类图像库的实现原理？")])},function(){var _=this.$createElement,e=this._self._c||_;return e("li",[e("code",[this._v("i18n")]),this._v("的国际化方案应该是怎样的？")])},function(){var _=this.$createElement,e=this._self._c||_;return e("h2",{attrs:{id:"三、-framework"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#三、-framework","aria-hidden":"true"}},[this._v("#")]),this._v(" 三、 Framework")])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_3-1-react"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3-1-react","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.1 React")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[v("code",[_._v("React")]),_._v("的生命周期"),v("code",[_._v("mount")]),_._v("和"),v("code",[_._v("update")]),_._v("描述下")]),_._v(" "),v("li",[v("code",[_._v("React")]),_._v("的生命周期中的"),v("code",[_._v("isBatchingUpdates")]),_._v("了解吗？"),v("code",[_._v("Transaction")]),_._v("知道吗")]),_._v(" "),v("li",[v("code",[_._v("React")]),_._v("的"),v("code",[_._v("vdom")]),_._v("如何实现？"),v("code",[_._v("jsx")]),_._v("是怎样解析的？")]),_._v(" "),v("li",[_._v("React"),v("code",[_._v("的")]),_._v("Fiber`是什么？具有什么样的特性？")]),_._v(" "),v("li",[v("code",[_._v("React")]),_._v("的"),v("code",[_._v("diff/patch")]),_._v("算法原理")]),_._v(" "),v("li",[v("code",[_._v("React")]),_._v("的组件逻辑（受控、非受控）？如何设计一个组件库")]),_._v(" "),v("li",[v("code",[_._v("React")]),_._v("的数据流，"),v("code",[_._v("Redux")]),_._v("、"),v("code",[_._v("Mobx")]),_._v("、"),v("code",[_._v("Rxjs")]),_._v("，发布订阅模式、观察者模式，"),v("code",[_._v("flux")]),_._v("和"),v("code",[_._v("no-flux")])]),_._v(" "),v("li",[v("code",[_._v("React")]),_._v("的事件注册和事件分发知道吗？")]),_._v(" "),v("li",[v("code",[_._v("Redux")]),_._v("解决了什么痛点（有什么优点），又有什么缺点")]),_._v(" "),v("li",[v("code",[_._v("Redux")]),_._v("的中间件有哪些？"),v("code",[_._v("redux-actions")]),_._v("、"),v("code",[_._v("redux-promise")]),_._v("、"),v("code",[_._v("redux-thunk")]),_._v("、"),v("code",[_._v("redux-saga")]),_._v("、"),v("code",[_._v("redux-immutable")]),_._v("了解过哪些？说说中间件的意义")]),_._v(" "),v("li",[v("code",[_._v("Redux")]),_._v("有什么优化方案？")]),_._v(" "),v("li",[v("code",[_._v("SSR")]),_._v("了解过吗？怎样做？了解"),v("code",[_._v("Koa")]),_._v("么？")]),_._v(" "),v("li",[v("code",[_._v("React-Native")]),_._v("了解过吗？"),v("code",[_._v("JavascriptCore")]),_._v("是什么？")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_3-2-vue"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3-2-vue","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.2 Vue")])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[v("code",[_._v("Vue")]),_._v("是如何设计响应式系统的？（依赖收集）")]),_._v(" "),v("li",[_._v("什么时候使用"),v("code",[_._v("computed")]),_._v(", "),v("code",[_._v("methods")]),_._v(","),v("code",[_._v("watch")]),_._v("？之间有什么样区别？")]),_._v(" "),v("li",[v("code",[_._v("template")]),_._v(" 和 "),v("code",[_._v("render(jsx)")]),_._v(" 有什么的联系？")]),_._v(" "),v("li",[v("code",[_._v("this.$nextTick")]),_._v("是如何设计的？")]),_._v(" "),v("li",[v("code",[_._v("Vue")]),_._v(" 组件 "),v("code",[_._v("data")]),_._v(" 为什么必须是函数？")])])},function(){var _=this.$createElement,e=this._self._c||_;return e("h3",{attrs:{id:"_3-3-angularjs"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3-3-angularjs","aria-hidden":"true"}},[this._v("#")]),this._v(" 3.3 AngularJS")])},function(){var _=this.$createElement,e=this._self._c||_;return e("blockquote",[e("p",[this._v("尽管angularJS已经基本退出了历史舞台，但是相信有的同学还是做过相关的项目，并很有可能被面试官问起")])])},function(){var _=this,e=_.$createElement,v=_._self._c||e;return v("ul",[v("li",[v("code",[_._v("angularJS")]),_._v("的数据绑定采用什么机制？详述原理")]),_._v(" "),v("li",[_._v("如果通过"),v("code",[_._v("angularJS")]),_._v("的 "),v("code",[_._v("directive/component")]),_._v(" 规划一套全组件化体系，可能遇到哪些挑战？")]),_._v(" "),v("li",[_._v("一个"),v("code",[_._v("angularJS")]),_._v("应用应当如何良好地分层？")]),_._v(" "),v("li",[v("code",[_._v("ng-click")]),_._v("中写的表达式，能使用JS原生对象上的方法，比如"),v("code",[_._v("Math.max")]),_._v("之类的吗？为什么")])])}],!1,null,null,null);e.default=c.exports}}]);
\ No newline at end of file

docs/.vuepress/dist/comprehensive/index.html

+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>第七部分：综合问题版 | FE-Interview</title>
+    <meta name="description" content="前端面试题整理">
+    
+    
+    <link rel="preload" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css" as="style"><link rel="preload" href="/FE-Interview-Questions/assets/js/app.988874f4.js" as="script"><link rel="preload" href="/FE-Interview-Questions/assets/js/6.02410588.js" as="script"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/10.5fa31a90.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/11.5bcfe1b7.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/2.8a56b217.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/3.25bd3157.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/4.9fba53f9.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/5.2c24076d.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/7.726d87b3.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/8.4f8e9f80.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/9.0d0e8e6c.js">
+    <link rel="stylesheet" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container custom-code-highlight"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/FE-Interview-Questions/" class="home-link router-link-active"><!----> <span class="site-name">FE-Interview</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/FE-Interview-Questions/base/" class="nav-link">基础</a></div><div class="nav-item"><a href="/FE-Interview-Questions/improve/" class="nav-link">进阶</a></div><div class="nav-item"><a href="/FE-Interview-Questions/advance/" class="nav-link">高级</a></div><div class="nav-item"><a href="/FE-Interview-Questions/computed-base/" class="nav-link">通识</a></div><div class="nav-item"><a href="/FE-Interview-Questions/excellent/" class="nav-link">精华</a></div><div class="nav-item"><a href="/FE-Interview-Questions/simply/" class="nav-link">简版</a></div><div class="nav-item"><a href="/FE-Interview-Questions/comprehensive/" class="nav-link router-link-exact-active router-link-active">综合</a></div><div class="nav-item"><a href="http://blog.poetries.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Blog
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/poetries/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/poetries/FE-Interview-Questions" target="_blank" rel="noopener noreferrer" class="repo-link">
+    查看源码
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/FE-Interview-Questions/base/" class="nav-link">基础</a></div><div class="nav-item"><a href="/FE-Interview-Questions/improve/" class="nav-link">进阶</a></div><div class="nav-item"><a href="/FE-Interview-Questions/advance/" class="nav-link">高级</a></div><div class="nav-item"><a href="/FE-Interview-Questions/computed-base/" class="nav-link">通识</a></div><div class="nav-item"><a href="/FE-Interview-Questions/excellent/" class="nav-link">精华</a></div><div class="nav-item"><a href="/FE-Interview-Questions/simply/" class="nav-link">简版</a></div><div class="nav-item"><a href="/FE-Interview-Questions/comprehensive/" class="nav-link router-link-exact-active router-link-active">综合</a></div><div class="nav-item"><a href="http://blog.poetries.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Blog
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/poetries/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/poetries/FE-Interview-Questions" target="_blank" rel="noopener noreferrer" class="repo-link">
+    查看源码
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/FE-Interview-Questions/base/" class="sidebar-link">第一部分：基础篇</a></li></ul></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>进阶</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>高级</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>通识</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>精华</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>简版</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading open"><span>综合</span> <span class="arrow down"></span></p> <ul class="sidebar-group-items"><li><a href="/FE-Interview-Questions/comprehensive/" class="active sidebar-link">第七部分：综合问题版</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#一、基础" class="sidebar-link">一、基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_1-1-html" class="sidebar-link">1.1 HTML</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_1-2-css" class="sidebar-link">1.2  CSS</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_1-3-javascript" class="sidebar-link">1.3 JavaScript</a></li></ul></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#二、高级" class="sidebar-link">二、高级</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_2-1-browser" class="sidebar-link">2.1 Browser</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_2-2-javascript" class="sidebar-link">2.2 JavaScript</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_2-3-http" class="sidebar-link">2.3 HTTP</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_2-4-优化" class="sidebar-link">2.4 优化</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_2-5-products" class="sidebar-link">2.5 Products</a></li></ul></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#三、-framework" class="sidebar-link">三、 Framework</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_3-1-react" class="sidebar-link">3.1 React</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_3-2-vue" class="sidebar-link">3.2 Vue</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/comprehensive/#_3-3-angularjs" class="sidebar-link">3.3 AngularJS</a></li></ul></li></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="第七部分：综合问题版"><a href="#第七部分：综合问题版" aria-hidden="true" class="header-anchor">#</a> 第七部分：综合问题版</h1> <blockquote><p><a href="https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" target="_blank" rel="noopener noreferrer">如果您觉得有帮助，可以打赏我<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> <img src="!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)" alt></p></blockquote> <blockquote><p><a href="https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png" target="_blank" rel="noopener noreferrer">关注微信公众号获取更多面试题：@静观流叶<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> <img src="!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png)" alt></p></blockquote> <blockquote><p>这里不做解答，请自行查阅相关答案。</p></blockquote> <h2 id="一、基础"><a href="#一、基础" aria-hidden="true" class="header-anchor">#</a> 一、基础</h2> <h3 id="_1-1-html"><a href="#_1-1-html" aria-hidden="true" class="header-anchor">#</a> 1.1 HTML</h3> <ul><li><code>html5</code>新标签有哪些</li> <li><code>canvas</code>、<code>svg</code>、<code>webGL</code></li> <li>你是如何理解 <code>HTML</code>语义化的，有什么好处</li> <li>前端需要注意哪些<code>SEO</code>?</li> <li><code>manifest</code>、<code>worker</code>、<code>socket</code></li> <li><code>input</code>和<code>textarea</code>的区别</li> <li>用一个<code>div</code>模拟<code>textarea</code>的实现</li></ul> <h3 id="_1-2-css"><a href="#_1-2-css" aria-hidden="true" class="header-anchor">#</a> 1.2  CSS</h3> <ul><li><code>css3</code>有什么新特性，浏览器支持怎么样</li> <li>伪类是什么？有哪些？会有哪些兼容性问题？如何处理？</li> <li><code>css</code>预处理器知道吗？用过哪些？有什么优劣？后处理器知道吗？</li> <li>盒模型有哪几种？怪异模式和标准模式？</li> <li><code>less</code>、<code>sass</code>、<code>postcss</code>、<code>prefix</code></li> <li>层叠优先级</li> <li>圣杯、双飞燕布局</li> <li><code>float</code>清除浮动</li> <li><code>flex</code>布局、 <code>grid</code>布局、<code>table</code>布局</li> <li><code>css</code>以及中轴旋转、动画变换</li> <li>绘制三角形、矩形、菱形、梯形（奇巧淫技，可以不问）</li> <li><code>sprite</code>图（雪碧图）知道吗？<code>svg</code>雪碧图了解吗？</li> <li><code>px</code>、<code>em</code>、<code>rem</code>、<code>vw</code>、<code>vh</code>？<code>rem</code>的根节点样式在什么时候设置？</li> <li><code>position</code>有哪些？他们的定位原点是什么？</li> <li>媒体查询用<code>css</code>好还是用<code>js</code>好？</li> <li><code>link</code>和<code>@import</code>的区别？</li> <li>响应式布局的原理</li> <li><code>css</code>低版本浏览器兼容问题，额外需要什么后缀来声明浏览器兼容</li> <li><code>!important</code>意义，是否应当规避使用？</li> <li><code>BFC</code>块级上下文、<code>IFC</code>，实现双栏高度对齐</li> <li><code>BEM</code>命名法，有什么优势，有什么劣势</li> <li><code>1px</code>边框问题</li> <li>（水平）居中有哪些实现方式、（垂直）居中有哪些实现方式</li></ul> <h3 id="_1-3-javascript"><a href="#_1-3-javascript" aria-hidden="true" class="header-anchor">#</a> 1.3 JavaScript</h3> <ul><li><code>typeof</code>以及弱类型转换规则？<code>NaN</code>、<code>undefined</code>、<code>null</code></li> <li><code>dom</code>的节点操作？能够背<code>api</code>还是知道<code>api</code>？</li> <li><code>ajax</code>是什么？知道底层实现原理吗？知道<code>fetch</code>吗？自己封装过吗？</li> <li><code>GET</code>、<code>POST</code>意义？<code>restful</code>架构下还有别的什么请求？<code>OPTION</code>请求是什么？</li> <li>事件冒泡和事件捕获是怎样的？对应的默认方法有什么？一般在什么情况使用？</li> <li><code>call</code>、<code>apply</code>、<code>bind</code></li> <li>如何判断数据类型？</li> <li><code>hoisting</code>是什么？具体表现是怎样的？</li> <li>匿名函数是什么？函数表达式和函数声明的区别？</li> <li><code>let</code>、<code>const</code>暂时性锁区知道吗？表现是怎样的？</li> <li>严格模式是什么？有什么好处？<code>use strict</code></li> <li><code>arguments</code>是什么类型？<code>callee</code>和<code>caller</code>有什么区别？</li> <li><code>Date.format</code>实现过吗？思路是怎样的？</li> <li>动画：<code>setTimeout</code>何时执行，<code>requestAnimationFrame</code>的优点</li> <li>你知道<code>new</code>一个对象有几步吗？</li></ul> <h2 id="二、高级"><a href="#二、高级" aria-hidden="true" class="header-anchor">#</a> 二、高级</h2> <h3 id="_2-1-browser"><a href="#_2-1-browser" aria-hidden="true" class="header-anchor">#</a> 2.1 Browser</h3> <ul><li>打开一个网页经历了那些过程？</li> <li>浏览器加载白屏是什么原因？</li> <li>千万访问量的项目，前端需要注意些什么？</li></ul> <h3 id="_2-2-javascript"><a href="#_2-2-javascript" aria-hidden="true" class="header-anchor">#</a> 2.2 JavaScript</h3> <ul><li>表达式和语句有什么区别？如何把语句转换为表达式？</li> <li>什么叫执行上下文栈(·Execution Context Stack)·? 一个函数调用会产生多少个上下文环境？如何激活一个上下文，什么叫caller(调用者)，什么叫callee(被调用者)？给你一段代码能否画出执行过程中的上下文堆栈变化？</li> <li>执行上下文包括哪些结构(状态/属性)，如何追踪关联代码的执行进度？</li> <li><code>eval</code>在调用的时候有哪些特别的地方？<code>eval</code>函数自身会产生上下文吗？会影响当前的调用上下文吗？</li> <li>什么叫变量对象？什么叫活动对象？</li> <li>词法作用域是什么？闭包是如何形成的？</li> <li><code>var foo = function bar () {}</code>命名函数表达式中(上述的foo函数)bar变量是定义在哪一层作用域的？</li> <li><code>(0, 1, 2)</code> 的结果是什么？</li> <li><code>var foo = { value: 2, bar: function () { return this.value; } 中(foo.bar, foo.bar)()</code>的<code>this</code>值是什么？<code>(foo.bar = foo.bar)()、(false || foo.bar)()</code>呢?</li></ul> <h3 id="_2-3-http"><a href="#_2-3-http" aria-hidden="true" class="header-anchor">#</a> 2.3 HTTP</h3> <ul><li><code>http1.0</code>和<code>http1.1</code>的区别</li> <li><code>http</code>请求码有哪些？<code>206</code>、<code>302</code>、<code>303</code>、<code>304</code>、<code>307</code></li> <li>能说下<code>304</code>具体怎样实现吗？</li> <li><code>http</code>缓存逻辑是怎样的？协商缓存与强缓存？<code>Last-Modified</code> / <code>Etag</code> / <code>Expires</code> / <code>Cache-Control</code>？</li> <li><code>osi</code>七层协议和<code>tcp/ip</code>四层协议</li> <li>三次握手和四次握手</li> <li>跨域是什么？http协议中如何判断跨域？如何解决跨域问题？</li> <li><code>http2</code>具体内容？<code>SDPY</code>了解么？</li> <li><code>HTTPS</code>如何实现？<code>tsl/ssl</code>是什么？对称加密、非对称加密在什么时候、对什么数据加密？</li> <li><code>DNS</code>劫持是什么？</li> <li>浏览器在一次 <code>HTTP</code> 请求中，需要传输一个 <code>4097</code> 字节的文本数据给服务端，可以采用那些方式?</li></ul> <h3 id="_2-4-优化"><a href="#_2-4-优化" aria-hidden="true" class="header-anchor">#</a> 2.4 优化</h3> <ul><li>首屏优化</li> <li>预加载资源、预解析<code>DNS</code></li> <li>懒加载图片怎么做</li> <li><code>iframe</code>一般怎么使用？</li> <li><code>window.onload</code>、<code>document.ready</code>顺序？<code>iframe</code>会阻塞吗？</li> <li><code>cdn</code>是什么？如何查找最近的<code>cdn</code>？</li> <li><code>gzip</code>、<code>chucked</code></li> <li>前端安全：<code>xss</code>攻击和防范、<code>CSRF</code>、<code>CORS</code></li> <li>硬件加速怎样开启</li> <li>优化中会提到缓存的问题，问：静态资源或者接口等如何做缓存优化</li> <li>页面<code>DOM</code>节点太多，会出现什么问题？如何优化？</li></ul> <h3 id="_2-5-products"><a href="#_2-5-products" aria-hidden="true" class="header-anchor">#</a> 2.5 Products</h3> <blockquote><p>这里主要是一些生产中真实存在的问题</p></blockquote> <ul><li>一个<code>feed</code>流，有哪些展现方式？如果当前页面可视区有5个格子，而你有<code>20</code>条信息需要展示，请问有哪些自动展示的算法？</li> <li>移动端的缓存机制有哪几种？</li> <li>小程序如何与<code>native</code>通信？<code>react-native</code>实现原理？<code>jsbridge</code>如何实现？</li> <li>过万条数据如何加载和渲染？</li> <li>如何在前端解析二进制，流媒体、图片二进制数据怎样渲染到页面上？</li> <li>如何解析二进制音频、视频？</li> <li>文件如何显示上传百分比？</li> <li>如何制作一个富文本，需要考虑哪些结构？</li> <li><code>html5</code>的播放器怎么做？视频直播如何在浏览器里面实现？<code>HLS</code>、<code>RTMP</code></li> <li>如何在浏览器里面裁剪图片？如何裁剪视频，对视频做逐帧分析？</li> <li>如何实现一个具有引导功能的组件库？</li> <li>如何封装一个<code>Form</code>和<code>FormItem</code>，使其能够跟<code>input</code>、<code>select</code>、<code>checkbox</code>、<code>radio</code>等组件进行 数据存储、数据校验（自定义逻辑）、校验反馈？</li> <li><code>echart</code>这类图像库的实现原理？</li> <li><code>i18n</code>的国际化方案应该是怎样的？</li> <li>数据埋点的意义是什么？应当针对哪些数据进行埋点？如何构建一个埋点系统？</li> <li>小程序的实现原理是什么？<a href="https://github.com/phodal/articles/issues/32" target="_blank" rel="noopener noreferrer">这【五篇】文章将带你深入了解「微信小程序」<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h2 id="三、-framework"><a href="#三、-framework" aria-hidden="true" class="header-anchor">#</a> 三、 Framework</h2> <h3 id="_3-1-react"><a href="#_3-1-react" aria-hidden="true" class="header-anchor">#</a> 3.1 React</h3> <ul><li><code>React</code>的生命周期<code>mount</code>和<code>update</code>描述下</li> <li><code>React</code>的生命周期中的<code>isBatchingUpdates</code>了解吗？<code>Transaction</code>知道吗</li> <li><code>React</code>的<code>vdom</code>如何实现？<code>jsx</code>是怎样解析的？</li> <li>React<code>的</code>Fiber`是什么？具有什么样的特性？</li> <li><code>React</code>的<code>diff/patch</code>算法原理</li> <li><code>React</code>的组件逻辑（受控、非受控）？如何设计一个组件库</li> <li><code>React</code>的数据流，<code>Redux</code>、<code>Mobx</code>、<code>Rxjs</code>，发布订阅模式、观察者模式，<code>flux</code>和<code>no-flux</code></li> <li><code>React</code>的事件注册和事件分发知道吗？</li> <li><code>Redux</code>解决了什么痛点（有什么优点），又有什么缺点</li> <li><code>Redux</code>的中间件有哪些？<code>redux-actions</code>、<code>redux-promise</code>、<code>redux-thunk</code>、<code>redux-saga</code>、<code>redux-immutable</code>了解过哪些？说说中间件的意义</li> <li><code>Redux</code>有什么优化方案？</li> <li><code>SSR</code>了解过吗？怎样做？了解<code>Koa</code>么？</li> <li><code>React-Native</code>了解过吗？<code>JavascriptCore</code>是什么？</li></ul> <h3 id="_3-2-vue"><a href="#_3-2-vue" aria-hidden="true" class="header-anchor">#</a> 3.2 Vue</h3> <ul><li><code>Vue</code>是如何设计响应式系统的？（依赖收集）</li> <li>什么时候使用<code>computed</code>, <code>methods</code>,<code>watch</code>？之间有什么样区别？</li> <li><code>template</code> 和 <code>render(jsx)</code> 有什么的联系？</li> <li><code>this.$nextTick</code>是如何设计的？</li> <li><code>Vue</code> 组件 <code>data</code> 为什么必须是函数？</li></ul> <h3 id="_3-3-angularjs"><a href="#_3-3-angularjs" aria-hidden="true" class="header-anchor">#</a> 3.3 AngularJS</h3> <blockquote><p>尽管angularJS已经基本退出了历史舞台，但是相信有的同学还是做过相关的项目，并很有可能被面试官问起</p></blockquote> <ul><li><code>angularJS</code>的数据绑定采用什么机制？详述原理</li> <li>如果通过<code>angularJS</code>的 <code>directive/component</code> 规划一套全组件化体系，可能遇到哪些挑战？</li> <li>一个<code>angularJS</code>应用应当如何良好地分层？</li> <li><code>ng-click</code>中写的表达式，能使用JS原生对象上的方法，比如<code>Math.max</code>之类的吗？为什么</li></ul></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/poetries/FE-Interview-Questions/edit/dev/docs/comprehensive/README.md" target="_blank" rel="noopener noreferrer">帮助我们改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">1/10/2019, 11:27:52 AM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
+        ←
+        <a href="/FE-Interview-Questions/simply/" class="prev">
+          第六部分：精简版
+        </a></span> <!----></p></div> </div> <!----></div></div>
+    <script src="/FE-Interview-Questions/assets/js/app.988874f4.js" defer></script><script src="/FE-Interview-Questions/assets/js/6.02410588.js" defer></script>
+  </body>
+</html>

docs/.vuepress/dist/index.html

+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>FE-Interview</title>
+    <meta name="description" content="前端面试题整理">
+    
+    
+    <link rel="preload" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css" as="style"><link rel="preload" href="/FE-Interview-Questions/assets/js/app.988874f4.js" as="script"><link rel="preload" href="/FE-Interview-Questions/assets/js/3.25bd3157.js" as="script"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/10.5fa31a90.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/11.5bcfe1b7.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/2.8a56b217.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/4.9fba53f9.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/5.2c24076d.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/6.02410588.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/7.726d87b3.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/8.4f8e9f80.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/9.0d0e8e6c.js">
+    <link rel="stylesheet" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/FE-Interview-Questions/" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">FE-Interview</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/FE-Interview-Questions/base/" class="nav-link">基础</a></div><div class="nav-item"><a href="/FE-Interview-Questions/improve/" class="nav-link">进阶</a></div><div class="nav-item"><a href="/FE-Interview-Questions/advance/" class="nav-link">高级</a></div><div class="nav-item"><a href="/FE-Interview-Questions/computed-base/" class="nav-link">通识</a></div><div class="nav-item"><a href="/FE-Interview-Questions/excellent/" class="nav-link">精华</a></div><div class="nav-item"><a href="/FE-Interview-Questions/simply/" class="nav-link">简版</a></div><div class="nav-item"><a href="/FE-Interview-Questions/comprehensive/" class="nav-link">综合</a></div><div class="nav-item"><a href="http://blog.poetries.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Blog
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/poetries/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/poetries/FE-Interview-Questions" target="_blank" rel="noopener noreferrer" class="repo-link">
+    查看源码
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/FE-Interview-Questions/base/" class="nav-link">基础</a></div><div class="nav-item"><a href="/FE-Interview-Questions/improve/" class="nav-link">进阶</a></div><div class="nav-item"><a href="/FE-Interview-Questions/advance/" class="nav-link">高级</a></div><div class="nav-item"><a href="/FE-Interview-Questions/computed-base/" class="nav-link">通识</a></div><div class="nav-item"><a href="/FE-Interview-Questions/excellent/" class="nav-link">精华</a></div><div class="nav-item"><a href="/FE-Interview-Questions/simply/" class="nav-link">简版</a></div><div class="nav-item"><a href="/FE-Interview-Questions/comprehensive/" class="nav-link">综合</a></div><div class="nav-item"><a href="http://blog.poetries.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Blog
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/poetries/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/poetries/FE-Interview-Questions" target="_blank" rel="noopener noreferrer" class="repo-link">
+    查看源码
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/FE-Interview-Questions/base/" class="sidebar-link">第一部分：基础篇</a></li></ul></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>进阶</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>高级</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>通识</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>精华</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>简版</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>综合</span> <span class="arrow right"></span></p> <!----></div></li></ul> </div> <div class="home"><div class="hero"><!----> <h1>FE-Interview</h1> <p class="description">
+      前端面试题整理
+    </p> <p class="action"><a href="/FE-Interview-Questions/base/" class="nav-link action-button">快速了解 →</a></p></div> <div class="features"><div class="feature"><h2>基础篇</h2> <p>帮你梳理常见的前端基础面试题</p></div><div class="feature"><h2>进阶篇</h2> <p>提炼分析面试难点，助你快速理解</p></div><div class="feature"><h2>通识篇</h2> <p>巩固计算机基础</p></div></div> <div class="content custom"></div> <div class="footer">
+    Copyright © 2018 poetries
+  </div></div> <!----></div></div>
+    <script src="/FE-Interview-Questions/assets/js/app.988874f4.js" defer></script><script src="/FE-Interview-Questions/assets/js/3.25bd3157.js" defer></script>
+  </body>
+</html>

docs/.vuepress/dist/simply/index.html

+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>第六部分：精简版 | FE-Interview</title>
+    <meta name="description" content="前端面试题整理">
+    
+    
+    <link rel="preload" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css" as="style"><link rel="preload" href="/FE-Interview-Questions/assets/js/app.988874f4.js" as="script"><link rel="preload" href="/FE-Interview-Questions/assets/js/10.5fa31a90.js" as="script"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/11.5bcfe1b7.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/2.8a56b217.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/3.25bd3157.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/4.9fba53f9.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/5.2c24076d.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/6.02410588.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/7.726d87b3.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/8.4f8e9f80.js"><link rel="prefetch" href="/FE-Interview-Questions/assets/js/9.0d0e8e6c.js">
+    <link rel="stylesheet" href="/FE-Interview-Questions/assets/css/0.styles.826b6fd6.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container custom-code-highlight"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/FE-Interview-Questions/" class="home-link router-link-active"><!----> <span class="site-name">FE-Interview</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/FE-Interview-Questions/base/" class="nav-link">基础</a></div><div class="nav-item"><a href="/FE-Interview-Questions/improve/" class="nav-link">进阶</a></div><div class="nav-item"><a href="/FE-Interview-Questions/advance/" class="nav-link">高级</a></div><div class="nav-item"><a href="/FE-Interview-Questions/computed-base/" class="nav-link">通识</a></div><div class="nav-item"><a href="/FE-Interview-Questions/excellent/" class="nav-link">精华</a></div><div class="nav-item"><a href="/FE-Interview-Questions/simply/" class="nav-link router-link-exact-active router-link-active">简版</a></div><div class="nav-item"><a href="/FE-Interview-Questions/comprehensive/" class="nav-link">综合</a></div><div class="nav-item"><a href="http://blog.poetries.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Blog
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/poetries/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/poetries/FE-Interview-Questions" target="_blank" rel="noopener noreferrer" class="repo-link">
+    查看源码
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/FE-Interview-Questions/base/" class="nav-link">基础</a></div><div class="nav-item"><a href="/FE-Interview-Questions/improve/" class="nav-link">进阶</a></div><div class="nav-item"><a href="/FE-Interview-Questions/advance/" class="nav-link">高级</a></div><div class="nav-item"><a href="/FE-Interview-Questions/computed-base/" class="nav-link">通识</a></div><div class="nav-item"><a href="/FE-Interview-Questions/excellent/" class="nav-link">精华</a></div><div class="nav-item"><a href="/FE-Interview-Questions/simply/" class="nav-link router-link-exact-active router-link-active">简版</a></div><div class="nav-item"><a href="/FE-Interview-Questions/comprehensive/" class="nav-link">综合</a></div><div class="nav-item"><a href="http://blog.poetries.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Blog
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/poetries/" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/poetries/FE-Interview-Questions" target="_blank" rel="noopener noreferrer" class="repo-link">
+    查看源码
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/FE-Interview-Questions/base/" class="sidebar-link">第一部分：基础篇</a></li></ul></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>进阶</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>高级</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>通识</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>精华</span> <span class="arrow right"></span></p> <!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading open"><span>简版</span> <span class="arrow down"></span></p> <ul class="sidebar-group-items"><li><a href="/FE-Interview-Questions/simply/" class="active sidebar-link">第六部分：精简版</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#一、css相关" class="sidebar-link">一、CSS相关</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_1-1-左边定宽，右边自适应方案：float-margin，float-calc" class="sidebar-link">1.1 左边定宽，右边自适应方案：float + margin，float + calc</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_1-2-左右两边定宽，中间自适应：float，float-calc-圣杯布局（设置bfc，margin负值法），flex" class="sidebar-link">1.2 左右两边定宽，中间自适应：float，float + calc, 圣杯布局（设置BFC，margin负值法），flex</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_1-3-左右居中" class="sidebar-link">1.3 左右居中</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_1-4-上下垂直居中" class="sidebar-link">1.4 上下垂直居中</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_1-5-盒模型：content（元素内容）-padding（内边距）-border（边框）-margin（外边距）" class="sidebar-link">1.5 盒模型：content（元素内容） + padding（内边距） + border（边框） + margin（外边距）</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_1-6-bfc、ifc、gfc、ffc：fc（formatting-contexts），格式化上下文" class="sidebar-link">1.6 BFC、IFC、GFC、FFC：FC（Formatting Contexts），格式化上下文</a></li></ul></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#二、js-基础（es5）" class="sidebar-link">二、JS 基础（ES5）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_2-1-原型" class="sidebar-link">2.1 原型</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_2-2-闭包" class="sidebar-link">2.2 闭包</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_2-3-作用域" class="sidebar-link">2.3 作用域</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_2-4-this" class="sidebar-link">2.4 this</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_2-5-call，apply，bind-三者用法和区别" class="sidebar-link">2.5 call，apply，bind 三者用法和区别</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_2-6-变量声明提升" class="sidebar-link">2.6 变量声明提升</a></li></ul></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#三、js-基础（es6）" class="sidebar-link">三、JS 基础（ES6）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_3-1-let，const" class="sidebar-link">3.1 let，const</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_3-2-promise" class="sidebar-link">3.2 Promise</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_3-3-generator" class="sidebar-link">3.3 Generator</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_3-4-async、await" class="sidebar-link">3.4 async、await</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_3-5-amd，cmd，commonjs，es6-module：解决原始无模块化的痛点" class="sidebar-link">3.5 AMD，CMD，CommonJs，ES6 Module：解决原始无模块化的痛点</a></li></ul></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#四、框架相关" class="sidebar-link">四、框架相关</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_4-1-数据双向绑定原理：常见数据绑定的方案" class="sidebar-link">4.1 数据双向绑定原理：常见数据绑定的方案</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_4-2-vdom：三个-part" class="sidebar-link">4.2 VDOM：三个 part</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_4-3-vue-和-react-区别" class="sidebar-link">4.3 vue 和 react 区别</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_4-4-为什么用-vue" class="sidebar-link">4.4 为什么用 vue</a></li></ul></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#五、网络基础类" class="sidebar-link">五、网络基础类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_5-1-跨域" class="sidebar-link">5.1 跨域</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_5-2-http-无状态无连接" class="sidebar-link">5.2 http 无状态无连接</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_5-3-http-cache：就是-http-缓存" class="sidebar-link">5.3 http-cache：就是 http 缓存</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_5-4-cookie-和-session" class="sidebar-link">5.4 cookie 和 session</a></li><li class="sidebar-sub-header"><a href="/FE-Interview-Questions/simply/#_5-5-安全问题，如-xss-和-csrf" class="sidebar-link">5.5 安全问题，如 XSS 和 CSRF</a></li></ul></li></ul></li></ul></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>综合</span> <span class="arrow right"></span></p> <!----></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="第六部分：精简版"><a href="#第六部分：精简版" aria-hidden="true" class="header-anchor">#</a> 第六部分：精简版</h1> <blockquote><p><a href="https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" target="_blank" rel="noopener noreferrer">如果您觉得有帮助，可以打赏我<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> <img src="!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-1f247397539045cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)" alt></p></blockquote> <blockquote><p><a href="https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png" target="_blank" rel="noopener noreferrer">关注微信公众号获取更多面试题：@静观流叶<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> <img src="!%5B%5D(https://upload-images.jianshu.io/upload_images/1480597-933c7247ddac5ed4.png)" alt></p></blockquote> <h2 id="一、css相关"><a href="#一、css相关" aria-hidden="true" class="header-anchor">#</a> 一、CSS相关</h2> <h3 id="_1-1-左边定宽，右边自适应方案：float-margin，float-calc"><a href="#_1-1-左边定宽，右边自适应方案：float-margin，float-calc" aria-hidden="true" class="header-anchor">#</a> 1.1 左边定宽，右边自适应方案：float + margin，float + calc</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 方案1 */</span> 
+<span class="token selector">.left</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.right</span> <span class="token punctuation">{</span>
+  <span class="token property">margin-left</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 方案2 */</span> 
+<span class="token selector">.left</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.right</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 120px<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="_1-2-左右两边定宽，中间自适应：float，float-calc-圣杯布局（设置bfc，margin负值法），flex"><a href="#_1-2-左右两边定宽，中间自适应：float，float-calc-圣杯布局（设置bfc，margin负值法），flex" aria-hidden="true" class="header-anchor">#</a> 1.2 左右两边定宽，中间自适应：float，float + calc, 圣杯布局（设置BFC，margin负值法），flex</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.wrap</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.wrap &gt; div</span> <span class="token punctuation">{</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 方案1 */</span>
+<span class="token selector">.left</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.right</span> <span class="token punctuation">{</span>
+  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">margin</span><span class="token punctuation">:</span> 0 120px<span class="token punctuation">;</span> 
+<span class="token punctuation">}</span>
+<span class="token comment">/* 方案2 */</span>
+<span class="token selector">.left</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.right</span> <span class="token punctuation">{</span>
+  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 240px<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token property">margin-left</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 方案3 */</span>
+<span class="token selector">.wrap</span> <span class="token punctuation">{</span>
+  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.left</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.right</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="_1-3-左右居中"><a href="#_1-3-左右居中" aria-hidden="true" class="header-anchor">#</a> 1.3 左右居中</h3> <ul><li>行内元素: <code>text-align: center</code></li> <li>定宽块状元素: 左右 <code>margin</code> 值为 <code>auto</code></li> <li>不定宽块状元素: <code>table</code>布局，<code>position + transform</code></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 方案1 */</span>
+<span class="token selector">.wrap</span> <span class="token punctuation">{</span>
+  <span class="token property">text-align</span><span class="token punctuation">:</span> center
+<span class="token punctuation">}</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
+  <span class="token comment">/* or */</span>
+  <span class="token comment">/* display: inline-block; */</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 方案2 */</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 方案2 */</span>
+<span class="token selector">.wrap</span> <span class="token punctuation">{</span>
+  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">position</span><span class="token punctuation">:</span> absulote<span class="token punctuation">;</span>
+  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
+  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="_1-4-上下垂直居中"><a href="#_1-4-上下垂直居中" aria-hidden="true" class="header-anchor">#</a> 1.4 上下垂直居中</h3> <ul><li>定高：<code>margin</code>，<code>position + margin</code>(负值)</li> <li>不定高：<code>position</code> + <code>transform</code>，<code>flex</code>，<code>IFC + vertical-align:middle</code></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 定高方案1 */</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">margin</span><span class="token punctuation">:</span> 50px 0<span class="token punctuation">;</span>   
+<span class="token punctuation">}</span>
+<span class="token comment">/* 定高方案2 */</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
+  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
+  <span class="token property">margin-top</span><span class="token punctuation">:</span> -25px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 不定高方案1 */</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
+  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
+  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 不定高方案2 */</span>
+<span class="token selector">.wrap</span> <span class="token punctuation">{</span>
+  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
+  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* 不定高方案3 */</span>
+<span class="token comment">/* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */</span>
+<span class="token selector">.wrap::before</span> <span class="token punctuation">{</span>
+  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
+  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
+  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.wrap</span> <span class="token punctuation">{</span>
+  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token selector">.center</span> <span class="token punctuation">{</span>
+  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>  
+  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="_1-5-盒模型：content（元素内容）-padding（内边距）-border（边框）-margin（外边距）"><a href="#_1-5-盒模型：content（元素内容）-padding（内边距）-border（边框）-margin（外边距）" aria-hidden="true" class="header-anchor">#</a> 1.5 盒模型：content（元素内容） + padding（内边距） + border（边框） + margin（外边距）</h3> <blockquote><p>延伸： <code>box-sizing</code></p></blockquote> <ul><li><code>content-box</code>：默认值，总宽度 = <code>margin</code> + <code>border</code> + <code>padding</code> + <code>width</code></li> <li><code>border-box</code>：盒子宽度包含 <code>padding</code> 和 <code>border</code>，<code>总宽度 = margin + width</code></li> <li><code>inherit</code>：从父元素继承 <code>box-sizing</code> 属性</li></ul> <h3 id="_1-6-bfc、ifc、gfc、ffc：fc（formatting-contexts），格式化上下文"><a href="#_1-6-bfc、ifc、gfc、ffc：fc（formatting-contexts），格式化上下文" aria-hidden="true" class="header-anchor">#</a> 1.6 BFC、IFC、GFC、FFC：FC（Formatting Contexts），格式化上下文</h3> <blockquote><p><code>BFC</code>：块级格式化上下文，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此(按照这个理念来想，只要脱离文档流，肯定就能产生 <code>BFC</code>)。产生 <code>BFC</code> 方式如下</p></blockquote> <ul><li><code>float</code> 的值不为 <code>none</code>。</li> <li><code>overflow</code> 的值不为 <code>visible</code>。</li> <li><code>position</code> 的值不为 <code>relative</code> 和 <code>static</code>。</li> <li><code>display</code> 的值为 <code>table-cell</code>, <code>table-caption</code>, <code>inline-block</code>中的任何一个</li></ul> <blockquote><p>用处？常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行</p></blockquote> <blockquote><p><code>IFC</code>：内联格式化上下文，<code>IFC</code> 的 <code>line</code> <code>box</code>（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 <code>padding/margin</code> 影响)。</p></blockquote> <blockquote><p><code>IFC</code>中的<code>line box</code>一般左右都贴紧整个 <code>IFC</code>，但是会因为 <code>float</code> 元素而扰乱。<code>float</code> 元素会位于 IFC 与 <code>line box</code> 之间，使得 <code>line box</code> 宽度缩短。 同个 <code>ifc</code> 下的多个 <code>line box</code> 高度会不同。 <code>IFC</code>中时不可能有块级元素的，当插入块级元素时（如 <code>p</code> 中插入 <code>div</code>）会产生两个匿名块与 <code>div</code> 分隔开，即产生两个 <code>IFC</code> ，每个 <code>IFC</code> 对外表现为块级元素，与 <code>div</code> 垂直排列。</p></blockquote> <p>用处？</p> <ul><li>水平居中：当一个块要在环境中水平居中时，设置其为 <code>inline-block</code> 则会在外层产生<code>IFC</code>，通过 <code>text-align</code> 则可以使其水平居中。</li> <li>垂直居中：创建一个 <code>IFC</code>，用其中一个元素撑开父元素的高度，然后设置其 <code>vertical-align</code>: <code>middle</code>，其他行内元素则可以在此父元素下垂直居中</li></ul> <blockquote><ul><li><strong>GFC</strong>：网格布局格式化上下文（<code>display: grid</code>）</li> <li><strong>FFC</strong>：自适应格式化上下文（<code>display: flex</code>）</li></ul></blockquote> <h2 id="二、js-基础（es5）"><a href="#二、js-基础（es5）" aria-hidden="true" class="header-anchor">#</a> 二、JS 基础（ES5）</h2> <h3 id="_2-1-原型"><a href="#_2-1-原型" aria-hidden="true" class="header-anchor">#</a> 2.1 原型</h3> <blockquote><p>这里可以谈很多，只要围绕 <code>[[ prototype ]]</code> 谈，都没啥问题</p></blockquote> <h3 id="_2-2-闭包"><a href="#_2-2-闭包" aria-hidden="true" class="header-anchor">#</a> 2.2 闭包</h3> <blockquote><p>牵扯作用域，可以两者联系起来一起谈</p></blockquote> <h3 id="_2-3-作用域"><a href="#_2-3-作用域" aria-hidden="true" class="header-anchor">#</a> 2.3 作用域</h3> <blockquote><p>词法作用域，动态作用域</p></blockquote> <h3 id="_2-4-this"><a href="#_2-4-this" aria-hidden="true" class="header-anchor">#</a> 2.4 this</h3> <blockquote><p>不同情况的调用，<code>this</code>指向分别如何。顺带可以提一下 <code>es6</code> 中箭头函数没有 <code>this</code>, <code>arguments</code>, <code>super</code> 等，这些只依赖包含箭头函数最接近的函数</p></blockquote> <h3 id="_2-5-call，apply，bind-三者用法和区别"><a href="#_2-5-call，apply，bind-三者用法和区别" aria-hidden="true" class="header-anchor">#</a> 2.5 call，apply，bind 三者用法和区别</h3> <blockquote><p>参数、绑定规则（显示绑定和强绑定），运行效率（最终都会转换成一个一个的参数去运行）、运行情况（<code>call</code>，<code>apply</code> 立即执行，<code>bind</code> 是<code>return</code> 出一个 <code>this</code> “固定”的函数，这也是为什么 <code>bind</code> 是强绑定的一个原因）</p></blockquote> <blockquote><p>注：“固定”这个词的含义，它指的固定是指只要传进去了 <code>context</code>，则 <code>bind</code> 中 <code>return</code> 出来的函数 <code>this</code> 便一直指向 <code>context</code>，除非 <code>context</code> 是个变量</p></blockquote> <h3 id="_2-6-变量声明提升"><a href="#_2-6-变量声明提升" aria-hidden="true" class="header-anchor">#</a> 2.6 变量声明提升</h3> <blockquote><p><code>js</code> 代码在运行前都会进行 <code>AST</code> 解析，函数申明默认会提到当前作用域最前面，变量申明也会进行提升。但赋值不会得到提升。关于 <code>AST</code> 解析，这里也可以说是形成词法作用域的主要原因</p></blockquote> <h2 id="三、js-基础（es6）"><a href="#三、js-基础（es6）" aria-hidden="true" class="header-anchor">#</a> 三、JS 基础（ES6）</h2> <h3 id="_3-1-let，const"><a href="#_3-1-let，const" aria-hidden="true" class="header-anchor">#</a> 3.1 let，const</h3> <blockquote><p><code>let</code> 产生块级作用域（通常配合 <code>for</code> 循环或者 <code>{}</code> 进行使用产生块级作用域），<code>const</code> 申明的变量是常量（内存地址不变）</p></blockquote> <h3 id="_3-2-promise"><a href="#_3-2-promise" aria-hidden="true" class="header-anchor">#</a> 3.2 Promise</h3> <blockquote><p>这里你谈 <code>promise</code>的时候，除了将他解决的痛点以及常用的 <code>API</code> 之外，最好进行拓展把 <code>eventloop</code> 带进来好好讲一下，<code>microtask</code>(微任务)、<code>macrotask</code>(任务) 的执行顺序，如果看过 <code>promise</code> 源码，最好可以谈一谈 原生 <code>Promise</code> 是如何实现的。<code>Promise</code> 的关键点在于<code>callback</code> 的两个参数，一个是 <code>resovle</code>，一个是 <code>reject</code>。还有就是 <code>Promise</code> 的链式调用（<code>Promise.then()</code>，每一个 <code>then</code> 都是一个责任人）</p></blockquote> <h3 id="_3-3-generator"><a href="#_3-3-generator" aria-hidden="true" class="header-anchor">#</a> 3.3 Generator</h3> <blockquote><p>遍历器对象生成函数，最大的特点是可以交出函数的执行权</p></blockquote> <ul><li><code>function</code> 关键字与函数名之间有一个星号；</li> <li>函数体内部使用 <code>yield</code>表达式，定义不同的内部状态；</li> <li><code>next</code>指针移向下一个状态</li></ul> <blockquote><p>这里你可以说说 <code>Generator</code>的异步编程，以及它的语法糖 <code>async</code> 和 <code>awiat</code>，传统的异步编程。<code>ES6</code> 之前，异步编程大致如下</p></blockquote> <ul><li>回调函数</li> <li>事件监听</li> <li>发布/订阅</li></ul> <blockquote><p>传统异步编程方案之一：协程，多个线程互相协作，完成异步任务。</p></blockquote> <h3 id="_3-4-async、await"><a href="#_3-4-async、await" aria-hidden="true" class="header-anchor">#</a> 3.4 async、await</h3> <blockquote><p><code>Generator</code> 函数的语法糖。有更好的语义、更好的适用性、返回值是 <code>Promise</code>。</p></blockquote> <ul><li><code>async =&gt; *</code></li> <li><code>await =&gt; yield</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 基本用法</span>
+
+<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeout</span> <span class="token punctuation">(</span>ms<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">await</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> ms<span class="token punctuation">)</span>    
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">asyncConsole</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> ms<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">await</span> <span class="token function">timeout</span><span class="token punctuation">(</span>ms<span class="token punctuation">)</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+<span class="token function">asyncConsole</span><span class="token punctuation">(</span><span class="token string">'hello async and await'</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>注：最好把2，3，4 连到一起讲</p></blockquote> <h3 id="_3-5-amd，cmd，commonjs，es6-module：解决原始无模块化的痛点"><a href="#_3-5-amd，cmd，commonjs，es6-module：解决原始无模块化的痛点" aria-hidden="true" class="header-anchor">#</a> 3.5 AMD，CMD，CommonJs，ES6 Module：解决原始无模块化的痛点</h3> <ul><li><strong>AMD</strong>：<code>requirejs</code> 在推广过程中对模块定义的规范化产出，提前执行，推崇依赖前置</li> <li><strong>CMD</strong>：<code>seajs</code> 在推广过程中对模块定义的规范化产出，延迟执行，推崇依赖就近</li> <li><strong>CommonJs</strong>：模块输出的是一个值的 <code>copy</code>，运行时加载，加载的是一个对象（<code>module.exports</code> 属性），该对象只有在脚本运行完才会生成</li> <li><strong>ES6 Module</strong>：模块输出的是一个值的引用，编译时输出接口，<code>ES6</code>模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。</li></ul> <h2 id="四、框架相关"><a href="#四、框架相关" aria-hidden="true" class="header-anchor">#</a> 四、框架相关</h2> <h3 id="_4-1-数据双向绑定原理：常见数据绑定的方案"><a href="#_4-1-数据双向绑定原理：常见数据绑定的方案" aria-hidden="true" class="header-anchor">#</a> 4.1 数据双向绑定原理：常见数据绑定的方案</h3> <ul><li><code>Object.defineProperty（vue）</code>：劫持数据的 <code>getter</code> 和 <code>setter</code></li> <li>脏值检测（<code>angularjs</code>）：通过特定事件进行轮循
+发布/订阅模式：通过消息发布并将消息进行订阅</li></ul> <h3 id="_4-2-vdom：三个-part"><a href="#_4-2-vdom：三个-part" aria-hidden="true" class="header-anchor">#</a> 4.2 VDOM：三个 part</h3> <ul><li>虚拟节点类，将真实 <code>DOM</code>节点用 <code>js</code> 对象的形式进行展示，并提供 <code>render</code> 方法，将虚拟节点渲染成真实 <code>DOM</code></li> <li>节点 <code>diff</code> 比较：对虚拟节点进行 <code>js</code> 层面的计算，并将不同的操作都记录到 <code>patch</code> 对象</li> <li><code>re-render</code>：解析 <code>patch</code> 对象，进行 <code>re-render</code></li></ul> <p><strong>补充1：VDOM 的必要性？</strong></p> <ul><li><strong>创建真实DOM的代价高</strong>：真实的 <code>DOM</code> 节点 <code>node</code> 实现的属性很多，而 <code>vnode</code> 仅仅实现一些必要的属性，相比起来，创建一个 <code>vnode</code> 的成本比较低。</li> <li><strong>触发多次浏览器重绘及回流</strong>：使用 <code>vnode</code> ，相当于加了一个缓冲，让一次数据变动所带来的所有 <code>node</code> 变化，先在 <code>vnode</code> 中进行修改，然后 <code>diff</code> 之后对所有产生差异的节点集中一次对 <code>DOM tree</code> 进行修改，以减少浏览器的重绘及回流。</li></ul> <p><strong>补充2：vue 为什么采用 vdom？</strong></p> <blockquote><p>引入 <code>Virtual DOM</code> 在性能方面的考量仅仅是一方面。</p></blockquote> <ul><li>性能受场景的影响是非常大的，不同的场景可能造成不同实现方案之间成倍的性能差距，所以依赖细粒度绑定及 <code>Virtual DOM</code> 哪个的性能更好还真不是一个容易下定论的问题。</li> <li><code>Vue</code> 之所以引入了 <code>Virtual DOM</code>，更重要的原因是为了解耦 <code>HTML</code>依赖，这带来两个非常重要的好处是：</li></ul> <blockquote><ul><li>不再依赖 <code>HTML</code> 解析器进行模版解析，可以进行更多的 <code>AOT</code> 工作提高运行时效率：通过模版 <code>AOT</code> 编译，<code>Vue</code> 的运行时体积可以进一步压缩，运行时效率可以进一步提升；</li> <li>可以渲染到 <code>DOM</code> 以外的平台，实现 <code>SSR</code>、同构渲染这些高级特性，<code>Weex</code>等框架应用的就是这一特性。</li></ul></blockquote> <blockquote><p>综上，<code>Virtual DOM</code> 在性能上的收益并不是最主要的，更重要的是它使得 <code>Vue</code> 具备了现代框架应有的高级特性。</p></blockquote> <h3 id="_4-3-vue-和-react-区别"><a href="#_4-3-vue-和-react-区别" aria-hidden="true" class="header-anchor">#</a> 4.3 vue 和 react 区别</h3> <ul><li>相同点：都支持 <code>ssr</code>，都有 <code>vdom</code>，组件化开发，实现 <code>webComponents</code> 规范，数据驱动等</li> <li>不同点：<code>vue</code> 是双向数据流（当然为了实现单数据流方便管理组件状态，<code>vuex</code> 便出现了），<code>react</code> 是单向数据流。<code>vue</code>的 <code>vdom</code> 是追踪每个组件的依赖关系，不会渲染整个组件树，<code>react</code> 每当应该状态被改变时，全部子组件都会 <code>re-render</code></li></ul> <h3 id="_4-4-为什么用-vue"><a href="#_4-4-为什么用-vue" aria-hidden="true" class="header-anchor">#</a> 4.4 为什么用 vue</h3> <blockquote><p>简洁、轻快、舒服</p></blockquote> <h2 id="五、网络基础类"><a href="#五、网络基础类" aria-hidden="true" class="header-anchor">#</a> 五、网络基础类</h2> <h3 id="_5-1-跨域"><a href="#_5-1-跨域" aria-hidden="true" class="header-anchor">#</a> 5.1 跨域</h3> <blockquote><p>很多种方法，但万变不离其宗，都是为了搞定同源策略。重用的有 <code>jsonp</code>、<code>iframe</code>、<code>cors</code>、<code>img</code>、H<code>TML5 postMessage</code>等等。其中用到 <code>html</code> 标签进行跨域的原理就是 <code>html</code> 不受同源策略影响。但只是接受 <code>Get</code> 的请求方式，这个得清楚。</p></blockquote> <blockquote><p><strong>延伸1：img iframe script 来发送跨域请求有什么优缺点？</strong></p></blockquote> <p><strong>1. <code>iframe</code></strong></p> <ul><li>优点：跨域完毕之后<code>DOM</code>操作和互相之间的<code>JavaScript</code>调用都是没有问题的</li> <li>缺点：1.若结果要以<code>URL</code>参数传递，这就意味着在结果数据量很大的时候需要分割传递，巨烦。2.还有一个是<code>iframe</code>本身带来的，母页面和<code>iframe</code>本身的交互本身就有安全性限制。</li></ul> <p><strong>2. script</strong></p> <ul><li>优点：可以直接返回<code>json</code>格式的数据，方便处理</li> <li>缺点：只接受<code>GET</code>请求方式</li></ul> <p><strong>3. 图片ping</strong></p> <ul><li>优点：可以访问任何<code>url</code>，一般用来进行点击追踪，做页面分析常用的方法</li> <li>缺点：不能访问响应文本，只能监听是否响应</li></ul> <blockquote><p><strong>延伸2：配合 webpack 进行反向代理？</strong></p></blockquote> <p><code>webpack</code> 在 <code>devServer</code> 选项里面提供了一个 <code>proxy</code> 的参数供开发人员进行反向代理</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">'/api'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
+  target<span class="token punctuation">:</span> <span class="token string">'http://www.example.com'</span><span class="token punctuation">,</span> <span class="token comment">// your target host</span>
+  changeOrigin<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// needed for virtual hosted sites</span>
+  pathRewrite<span class="token punctuation">:</span> <span class="token punctuation">{</span>
+    <span class="token string">'^/api'</span><span class="token punctuation">:</span> <span class="token string">''</span>  <span class="token comment">// rewrite path</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre></div><blockquote><p>然后再配合 <code>http-proxy-middleware</code> 插件对 <code>api</code> 请求地址进行代理</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> proxy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'http-proxy-middleware'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// proxy api requests</span>
+<span class="token keyword">const</span> exampleProxy <span class="token operator">=</span> <span class="token function">proxy</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 这里的 options 就是 webpack 里面的 proxy 选项对应的每个选项</span>
+
+<span class="token comment">// mount `exampleProxy` in web server</span>
+<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'/api'</span><span class="token punctuation">,</span> exampleProxy<span class="token punctuation">)</span><span class="token punctuation">;</span>
+app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><blockquote><p>然后再用 <code>nginx</code> 把允许跨域的源地址添加到报头里面即可</p></blockquote> <blockquote><p>说到 <code>nginx</code> ，可以再谈谈 <code>CORS</code> 配置，大致如下</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>location <span class="token operator">/</span> <span class="token punctuation">{</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>$request_method <span class="token operator">=</span> <span class="token string">'OPTIONS'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    add_header <span class="token string">'Access-Control-Allow-Origin'</span> <span class="token string">'*'</span><span class="token punctuation">;</span>  
+    add_header <span class="token string">'Access-Control-Allow-Methods'</span> <span class="token string">'GET, POST, OPTIONS'</span><span class="token punctuation">;</span> 
+    add_header <span class="token string">'Access-Control-Allow-Credentials'</span> <span class="token string">'true'</span><span class="token punctuation">;</span>
+    add_header <span class="token string">'Access-Control-Allow-Headers'</span> <span class="token string">'DNT, X-Mx-ReqToken, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type'</span><span class="token punctuation">;</span>  
+    add_header <span class="token string">'Access-Control-Max-Age'</span> <span class="token number">86400</span><span class="token punctuation">;</span>  
+    add_header <span class="token string">'Content-Type'</span> <span class="token string">'text/plain charset=UTF-8'</span><span class="token punctuation">;</span>  
+    add_header <span class="token string">'Content-Length'</span> <span class="token number">0</span><span class="token punctuation">;</span>  
+    <span class="token keyword">return</span> <span class="token number">200</span><span class="token punctuation">;</span>  
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="_5-2-http-无状态无连接"><a href="#_5-2-http-无状态无连接" aria-hidden="true" class="header-anchor">#</a> 5.2 http 无状态无连接</h3> <ul><li><code>http</code> 协议对于事务处理没有记忆能力</li> <li>对同一个<code>url</code>请求没有上下文关系</li> <li>每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影响后面的请求应答情况</li> <li>服务器中没有保存客户端的状态，客户端必须每次带上自己的状态去请求服务器</li> <li>人生若只如初见，请求过的资源下一次会继续进行请求</li></ul> <p><strong>http协议无状态中的 状态 到底指的是什么？！</strong></p> <ul><li>【状态】的含义就是：客户端和服务器在某次会话中产生的数据</li> <li>那么对应的【无状态】就意味着：这些数据不会被保留</li> <li>通过增加<code>cookie</code>和<code>session</code>机制，现在的网络请求其实是有状态的</li> <li>在没有状态的<code>http</code>协议下，服务器也一定会保留你每次网络请求对数据的修改，但这跟保留每次访问的数据是不一样的，保留的只是会话产生的结果，而没有保留会话</li></ul> <h3 id="_5-3-http-cache：就是-http-缓存"><a href="#_5-3-http-cache：就是-http-缓存" aria-hidden="true" class="header-anchor">#</a> 5.3 http-cache：就是 http 缓存</h3> <p><strong>1. 首先得明确 http 缓存的好处</strong></p> <ul><li>减少了冗余的数据传输，减少网费</li> <li>减少服务器端的压力</li> <li><code>Web</code> 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间</li> <li>加快客户端加载网页的速度</li></ul> <p><strong>2. 常见 http 缓存的类型</strong></p> <ul><li>私有缓存（一般为本地浏览器缓存）</li> <li>代理缓存</li></ul> <p><strong>3. 然后谈谈本地缓存</strong></p> <blockquote><p>本地缓存是指浏览器请求资源时命中了浏览器本地的缓存资源，浏览器并不会发送真正的请求给服务器了。它的执行过程是</p></blockquote> <ul><li>第一次浏览器发送请求给服务器时，此时浏览器还没有本地缓存副本，服务器返回资源给浏览器，响应码是<code>200 OK</code>，浏览器收到资源后，把资源和对应的响应头一起缓存下来</li> <li>第二次浏览器准备发送请求给服务器时候，浏览器会先检查上一次服务端返回的响应头信息中的<code>Cache-Control</code>，它的值是一个相对值，单位为秒，表示资源在客户端缓存的最大有效期，过期时间为第一次请求的时间减去<code>Cache-Control</code>的值，过期时间跟当前的请求时间比较，如果本地缓存资源没过期，那么命中缓存，不再请求服务器</li> <li>如果没有命中，浏览器就会把请求发送给服务器，进入缓存协商阶段。</li></ul> <blockquote><p>与本地缓存相关的头有：<code>Cache-Control</code>、<code>Expires</code>，<code>Cache-Control</code>有多个可选值代表不同的意义，而<code>Expires</code>就是一个日期格式的绝对值。</p></blockquote> <p><strong>3.1 Cache-Control</strong></p> <blockquote><p><code>Cache-Control</code>是<code>HTPP</code>缓存策略中最重要的头，它是<code>HTTP/1.1</code>中出现的，它由如下几个值</p></blockquote> <ul><li><code>no-cache</code>：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在<code>ETag</code>，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载</li> <li><code>no-store</code>：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源</li> <li><code>public</code>：可以被所有的用户缓存，包括终端用户和<code>CDN</code>等中间代理服务器。</li> <li><code>private</code>：只能被终端用户的浏览器缓存，不允许<code>CDN</code>等中继缓存服务器对其缓存。</li> <li><code>max-age</code>：从当前请求开始，允许获取的响应被重用的最长时间（秒）。</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 例如：</span>
+
+Cache-Control: public, max-age<span class="token operator">=</span>1000 
+<span class="token comment"># 表示资源可以被所有用户以及代理服务器缓存，最长时间为1000秒。</span>
+</code></pre></div><p><strong>3.2 Expires</strong></p> <blockquote><p><code>Expires</code>是<code>HTTP/1.0</code>出现的头信息，同样是用于决定本地缓存策略的头，它是一个绝对时间，时间格式是如<code>Mon, 10 Jun 2015 21:31:12 GMT</code>，只要发送请求时间是在<code>Expires</code>之前，那么本地缓存始终有效，否则就会去服务器发送请求获取新的资源。如果同时出现<code>Cache-Control：max-age</code>和<code>Expires</code>，那么<code>max-age</code>优先级更高。他们可以这样组合使用</p></blockquote> <div class="language- extra-class"><pre class="language-text"><code>Cache-Control: public
+Expires: Wed, Jan 10 2018 00:27:04 GMT
+</code></pre></div><p><strong>3.3 所谓的缓存协商</strong></p> <blockquote><p>当第一次请求时服务器返回的响应头中存在以下情况时</p></blockquote> <ul><li>没有 <code>Cache-Control</code> 和 <code>Expires</code></li> <li><code>Cache-Control</code> 和 <code>Expires</code> 过期了</li> <li><code>Cache-Control</code> 的属性设置为 <code>no-cache</code> 时</li></ul> <blockquote><p>那么浏览器第二次请求时就会与服务器进行协商，询问浏览器中的缓存资源是不是旧版本，需不需要更新，此时，服务器就会做出判断，如果缓存和服务端资源的最新版本是一致的，那么就无需再次下载该资源，服务端直接返回<code>304 Not Modified</code> 状态码，如果服务器发现浏览器中的缓存已经是旧版本了，那么服务器就会把最新资源的完整内容返回给浏览器，状态码就是<code>200 Ok</code>，那么服务端是根据什么来判断浏览器的缓存是不是最新的呢？其实是根据<code>HTTP</code>的另外两组头信息，分别是：<code>Last-Modified/If-Modified-Since</code> 与 <code>ETag/If-None-Match</code>。</p></blockquote> <p><strong>Last-Modified 与 If-Modified-Since</strong></p> <ul><li>浏览器第一次请求资源时，服务器会把资源的最新修改时间<code>Last-Modified:Thu, 29 Dec 2011 18:23:55 GMT</code>放在响应头中返回给浏览器</li> <li>第二次请求时，浏览器就会把上一次服务器返回的修改时间放在请求头<code>If-Modified-Since:Thu, 29 Dec 2011 18:23:55</code>发送给服务器，服务器就会拿这个时间跟服务器上的资源的最新修改时间进行对比</li></ul> <blockquote><p>如果两者相等或者大于服务器上的最新修改时间，那么表示浏览器的缓存是有效的，此时缓存会命中，服务器就不再返回内容给浏览器了，同时<code>Last-Modified</code>头也不会返回，因为资源没被修改，返回了也没什么意义。如果没命中缓存则最新修改的资源连同<code>Last-Modified</code>头一起返回</p></blockquote> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 第一次请求返回的响应头</span>
+Cache-Control:max-age<span class="token operator">=</span>3600
+Expires: Fri, Jan 12 2018 00:27:04 GMT
+Last-Modified: Wed, Jan 10 2018 00:27:04 GMT
+</code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 第二次请求的请求头信息</span>
+If-Modified-Since: Wed, Jan 10 2018 00:27:04 GMT
+</code></pre></div><blockquote><p>这组头信息是基于资源的修改时间来判断资源有没有更新，另一种方式就是根据资源的内容来判断，就是接下来要讨论的 <code>ETag</code> 与 <code>If-None-Match</code></p></blockquote> <p><strong>ETag与If-None-Match</strong></p> <blockquote><p><code>ETag/If-None-Match</code>与<code>Last-Modified/If-Modified-Since</code>的流程其实是类似的，唯一的区别是它基于资源的内容的摘要信息（比如<code>MD5 hash</code>）来判断</p></blockquote> <blockquote><p>浏览器发送第二次请求时，会把第一次的响应头信息<code>ETag</code>的值放在<code>If-None-Match</code>的请求头中发送到服务器，与最新的资源的摘要信息对比，如果相等，取浏览器缓存，否则内容有更新，最新的资源连同最新的摘要信息返回。用<code>ETag</code>的好处是如果因为某种原因到时资源的修改时间没改变，那么用<code>ETag</code>就能区分资源是不是有被更新。</p></blockquote> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 第一次请求返回的响应头：</span>
+
+Cache-Control: public, max-age<span class="token operator">=</span>31536000
+ETag: <span class="token string">&quot;15f0fff99ed5aae4edffdd6496d7131f&quot;</span>
+</code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 第二次请求的请求头信息：</span>
+
+If-None-Match: <span class="token string">&quot;15f0fff99ed5aae4edffdd6496d7131f&quot;</span>
+</code></pre></div><h3 id="_5-4-cookie-和-session"><a href="#_5-4-cookie-和-session" aria-hidden="true" class="header-anchor">#</a> 5.4 cookie 和 session</h3> <ul><li><code>session</code>： 是一个抽象概念，开发者为了实现中断和继续等操作，将 <code>user agent</code>和 <code>server</code> 之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是 <code>session</code> 的概念</li> <li><code>cookie</code>：它是一个世纪存在的东西，<code>http</code> 协议中定义在 <code>header</code> 中的字段，可以认为是 <code>session</code> 的一种后端无状态实现</li></ul> <blockquote><p>现在我们常说的 <code>session</code>，是为了绕开 <code>cookie</code> 的各种限制，通常借助 <code>cookie</code>本身和后端存储实现的，一种更高级的会话状态实现</p></blockquote> <p><code>session</code> 的常见实现要借助<code>cookie</code>来发送 <code>sessionID</code></p> <h3 id="_5-5-安全问题，如-xss-和-csrf"><a href="#_5-5-安全问题，如-xss-和-csrf" aria-hidden="true" class="header-anchor">#</a> 5.5 安全问题，如 XSS 和 CSRF</h3> <ul><li><code>XSS</code>：跨站脚本攻击，是一种网站应用程序的安全漏洞攻击，是代码注入的一种。常见方式是将恶意代码注入合法代码里隐藏起来，再诱发恶意代码，从而进行各种各样的非法活动</li></ul> <blockquote><p>防范：记住一点 “所有用户输入都是不可信的”，所以得做输入过滤和转义</p></blockquote> <ul><li><code>CSRF</code>：跨站请求伪造，也称 <code>XSRF</code>，是一种挟制用户在当前已登录的<code>Web</code>应用程序上执行非本意的操作的攻击方法。与 <code>XSS</code> 相比，<code>XSS</code>利用的是用户对指定网站的信任，<code>CSRF</code>利用的是网站对用户网页浏览器的信任。</li></ul> <blockquote><p>防范：用户操作验证（验证码），额外验证机制（<code>token</code>使用）等</p></blockquote></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/poetries/FE-Interview-Questions/edit/dev/docs/simply/README.md" target="_blank" rel="noopener noreferrer">帮助我们改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">1/10/2019, 11:27:52 AM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
+        ←
+        <a href="/FE-Interview-Questions/excellent/" class="prev">
+          第五部分：高频考点
+        </a></span> <span class="next"><a href="/FE-Interview-Questions/comprehensive/">
+          第七部分：综合问题版
+        </a>
+        →
+      </span></p></div> </div> <!----></div></div>
+    <script src="/FE-Interview-Questions/assets/js/app.988874f4.js" defer></script><script src="/FE-Interview-Questions/assets/js/10.5fa31a90.js" defer></script>
+  </body>
+</html>

docs/.vuepress/override.styl

+// showing default values
+$accentColor = #3eaf7c
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #282c34
+
+.custom-code-highlight .content code {
+  color: #c7254e;
+  background-color: #f9f2f4;
+  font-size: 14px;
+  border-radius: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin: auto 3px;
+}
+
+.custom-code-highlight .content blockquote{
+  padding: 2px 30px;
+  color: #555;
+  border-left: 6px solid #c7e6cc;
+  background: #f1f5f3;
+  font-size: 1rem;
+}

docs/CNAME

+blog.poetries.top
\ No newline at end of file

docs/README.md

+---
+home: true
+actionText: 1.0版 →
+actionLink: /improve/
+features:
+- title: 场景设计器
+  details: 通过拖拽组件,动态生成页面配置
+- title: 模板设计器
+  details: 通过表单组件以及sql配置,实现表单展示等
+- title: 流程设计器
+  details: 通过用户配置,实现流程流转
+footer: '版权所有: 成都市知用科技有限责任公司'
+---
+
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>

docs/advance/README.md

+---
+sidebarDepth: 4
+pageClass: custom-code-highlight
+---
+
+
+# 场景设计器组件介绍
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/base/README.md

+---
+sidebarDepth: 4
+pageClass: custom-code-highlight
+---
+
+
+# 场景设计器
+  ![An image](https://mmbiz.qpic.cn/mmbiz_gif/mbvbah2cbzGdEbMQ9PibFrQYI8iaZktchUzNUwswCu5x425cPnCwo6UCd3XIQRZPyDKnGEic03d3iahnFzpKOtCbTw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1)
+
+  场景设计器主要用于对组件拖拽定位,并生成一个全新的页面,配置人员可通过不同的配置从而完成对页面进行修改以适应学院的需求,场景设计器细化可分为以下种类:
+
+>- 大数据设计器
+>- 门户设计器
+>- 后台页面设计器
+
+## 设计器功能介绍
+
+### 大数据设计器
+
+  大数据设计器采用平面设计,即单页面,所有数据列表不存在分页,配置只需循序主模板排版定位,子模板数据查询和组件展示原则即可, 大数据模板本身并不支持路由切换
+
+### 门户设计器
+
+  门户设计器采用多层次,多梯队设计,支持路由之前切换,并可以获取路由携带的各个参数将其参数参入配置项,执行配置人员所配置的对应流程逻辑,门户设计器提供多个**登录模板**,**个人中心模板**,**门户模板**,并支持多个模板之间指定路由切换
+
+#### 登录模板
+
+  内置账号注册,账号登录,密码修改等功能,配置人员只需修改展示文字logo等
+
+#### 个人中心模板
+
+  内置密码修改,手机绑定,邮箱绑定等功能,且支持配置其他点击项,配置人员可根据需求自由调整,修改
+
+#### 门户模板
+
+  内置顶部和底部,主体内容由子模板接入,配置人员完成子模板配置后,直接将子模板Id嵌入即可正常显示,顶部和底部所有数据都可以在配置中进行修改
+
+### 后台设计器
+
+  提供多个后台设计模板,可通过配置路由,动态生成配置路由,并点击时通过切换不同的子模板Id实现路由之间切换
+
+## 设计器模板思路
+
+  设计器为达到多人协同开发,所以模板有**主模板**和**子模板**
+
+### 主模板
+
+  主模板原则上是做页面定位拼接,用以最后形成一个完整的页面,主模板应避免直接进行数据操作,防止页面配置时数据返回错误时导致数据丢失问题.
+
+  每个主模板都可以创建各自独有的子模板,然后通过链接类组件进行连接,最后通过拖拽完成页面定位最后生成页面
+
+### 子模板
+
+  子模板作用为数据的接入和配置,用户可根据需要进行对应图表或轮播等组件嵌入,对应子模板只支持修改各自对应数据,子模板之前数据不可通.
+
+## 组件基础介绍
+
+  每个组件都有各自不同的配置项,用户可以根据每个组件提供的配置项进行不同参数的配置,从而达到数据的成功战术,组件也根据使用场景不同分为以下几类组件
+
+>- 门户级组件
+>- 链接类组件
+>- 普通展示组件
+
+### 门户级组件
+
+  该组件为门户级组件.不支持拖拽,用户可通过配置组件提供的子组件Id,从而将子模板导入内部,门户级组件也可通过配置项进行直接修改门户页面的部分数据展示
+
+**门户模板展示**
+![An image](./mh.png)
+
+**登录模板展示:**
+![An image](./login.png)
+
+**个人中心模板展示:**
+
+![An image](./home.png)
+
+
+
+
+### 链接类组件
+
+  子模板和主模板直接链接的重要组成部分,它可以将子模板内容嵌入主模板中展示,子模板中提供4种模板链接:
+
+- 主模板
+- 子模板
+- 表单模板
+- 事务模板
+
+#### 主模板&&子模板
+
+  配置人员只需要配置主模板Id或者子模板Id即可导入对应模板数据
+
+#### 表单模板
+
+  该模板为模板设计器设计的表单,配置人员需要获取到表单Id并进行Id配置才可导入
+
+#### 事务模板
+
+  该模板不同于表单模板, 该模板指已经配置了流程的,实现了事务流程的模板Id
+
+### 普通展示组件
+
+  原则上数据展示类组件使用模板设计器内提供组件进行编辑,这里展示组件一般表示为大数据类定制性组件(中国地图,世界地图)等,组件内部提供以下三个类型的数据配置
+
+> - 组件定位
+> - 样式配置
+> - sql配置
+> - 数据配置
+
+#### 组件定位
+
+​	 用户可配置左侧定位,顶部定位,用以微调,进行排列,格式为'1px'
+
+#### 样式配置
+
+  用户可配置宽度,高度
+
+#### sql配置
+
+​    组件内部会将数据的配置提供给配置人员,配置人员只需在每个配置项种进行配置并返回对应格式数据,组件即会动态更新
+
+#### 数据配置
+
+  组件的基础配置都存在在数据配置中,例如标题内容,标题颜色等各种各样的配置都将存放在数据配置中
+
+配置实例:
+
+![An image](./cz.png)
+
+## 相关问题说明
+
+### 门户模板的路由切换
+
+门户模板内置相对独立的路由跳转,调用sql配置器自带router进行跳转,方法示例
+
+#### 子模板切换函数
+
+```js
+// bassicId 为跳转主模板ID
+router.push({ 
+                  pathname:`/portal/previewModule/${bassicId}`,
+                  state: {
+                        modelId:id, // 子模板id
+                        modelKey:'concealModel',// 跳转识别值
+                         // 此处可以携带多个参数
+                    }
+            })
+```
+
+#### 独立主模板切换函数
+
+```js
+// bassicId 为跳转主模板ID
+router.push({ 
+                pathname:`/portal/previewModule/${bassicId}`,
+                state: {
+                    modelId:id,// 主模板id
+                    modelKey:'mainModel',// 跳转识别值
+                }
+            })
+```
+
+#### 内部主模板切换函数
+
+```js
+// bassicId 为跳转主模板ID
+router.push({ 
+                pathname:`/portal/previewModule/${bassicId}`,
+                state: {
+                    modelId:id,// 主模板id
+                    modelKey:'mainInSideModel',// 跳转识别值
+                    // 此处可以携带多个参数
+                }
+                })
+```
+
+#### 事务模板切换函数
+
+```js
+// bassicId 为跳转主模板ID
+router.push({ 
+                pathname:`/portal/previewModule/${bassicId}`,
+                state: {
+                    modelId:id,// 事务模板id
+                    modelKey:'formModel',// 跳转识别值
+                    // 此处可以携带多个参数
+                }
+             })
+```
+
+#### 表单模板切换函数
+
+```js
+// bassicId 为跳转主模板ID
+router.push({ 
+                pathname:`/portal/previewModule/${bassicId}`,
+                state: {
+                    modelId:id,// 表单模板ID
+                    modelKey:'formTwoModel',// 跳转识别值
+                    // 此处可以携带多个参数
+                }
+             })
+```
+
+### 组件内置SQl配置自带变量
+
+#### utils
+
+该变量为一个对象,内置以下数据
+
+>moment
+>
+>  时间格式化函数
+>
+>sql
+>
+>  sql请求函数
+>
+>req
+>
+>  req请求函数
+>
+>setValues
+>
+>  参数设置方法
+>
+>router 
+>
+>  路由跳转方法
+>
+>message
+>
+>  消息提示方法
+>
+>md5
+>
+>  加密方法
+
+#### $
+
+**中台自有函数库**
+
+#### router
+
+为当前路由所携带的**路由参数**,调用时应注意
+
+
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/comprehensive/README.md

+---
+sidebarDepth: 4
+pageClass: custom-code-highlight
+---
+
+# 全局配置项说明
+
+## 系统维护中开关(isMaintain)
+
+**配置key:**  *isMaintain*
+
+**配置值**: true 或 false
+
+**配置说明**:如果开启,除admin账号外,所有账户都不得进入
+
+**配置关联**:无
+
+## 维护结束时间(isMainTainTime)
+
+**配置key:**  *isMainTainTime*
+
+**配置值**: 字符时间
+
+**配置说明**:告知用户维护结束时间
+
+**配置关联**:需要配置isMaintain为true方可生效
+
+## 版本(version)
+
+**配置key:**  *version*
+
+**配置值**: 字符版本号
+
+**配置说明**:每次更新版本应增加版本号
+
+**配置关联**:无
+
+## 域名配置(domainName)
+
+**配置key:**  *domainName*
+
+**配置值**: 当前网页域名地址
+
+**配置说明**:主要用于场景设计器预览模板配置
+
+**配置关联**:无
+
+## 转办,回退,撤回流程控制功能(isTrunTo)
+
+**配置key:**  *isTrunTo*
+
+**配置值**: true或false
+
+**配置说明**:主要用于开启转办,回退,撤回流程控制功能
+
+**配置关联**:无
+
+## 关闭流程紧急度显示(isCloseFlowPath)
+
+**配置key:**  *isCloseFlowPath*
+
+**配置值**: true或false
+
+**配置说明**:主要用于全局关闭流程紧急度显示
+
+**配置关联**:无
+
+## 动态添加门户端导向路由(NewHome)
+
+**配置key:**  *NewHome*
+
+**配置值**: 字符串,数组
+
+```js
+// 字符串
+'1239420590712946688'
+// 数组
+// url表明跳转地址
+// id 为场景设计器id
+[{
+    name:"首页",
+    url:'http://zsjy.cdnkxy.com:9111/index.jsp'
+	}
+ ,
+ {
+     name:"新增",
+     id:'1239420590712946688',
+ }
+]
+```
+
+
+
+**配置说明**:主要用于门户动态配置路由地址
+
+**配置关联**:无
+
+## 后台管理左上角logo旁文字(HTlogoText)
+
+**配置key:**  *HTlogoText*
+
+**配置值**: 字符串
+
+**配置说明**:主要用于配置后台页面左上角logo旁文字展示
+
+**配置关联**:无
+
+## 大数据平台地址(bigData)
+
+**配置key:**  *bigData*
+
+**配置值**: 域名地址
+
+**配置说明**:主要用于配置后台页面顶部大数据平台跳转地址
+
+**配置关联**:无
+
+## 首页二维码手机端地址(webMobileAdress)
+
+**配置key:**  *webMobileAdress*
+
+**配置值**: 域名地址
+
+**配置说明**:主要用于首页手机二维码扫描地址
+
+**配置关联**:无
+
+## 是否开启加密(is_open_base16)
+
+**配置key:**  *is_open_base16*
+
+**配置值**: true或false
+
+**配置说明**:主要用于开启全局参数是否加密传输
+
+**配置关联**:无
+
+## web端首页地址(webAdress)
+
+**配置key:**  *webAdress*
+
+**配置值**: 域名地址
+
+**配置说明**:主要用于版本号不一致时,清空缓存,定向跳转到首页
+
+**配置关联**:无
+
+## 移动端首页通知弹框(MobileAD)
+
+**配置key:**  *webAdress*
+
+**配置值**: 域名地址
+
+**配置说明**:主要用于版本号不一致时,清空缓存,定向跳转到首页
+
+**配置关联**:无
+
+## 移动端首页通知弹框标题(mobileADTitle)
+
+**配置key:**  *mobileADTitle*
+
+**配置值**: 字符串
+
+**配置说明**:用于配置移动端首页通知弹框的标题栏数据配置
+
+**配置关联**:需要开启移动端首页弹框(MobileAD)才可生效
+
+## 移动端首页通知弹框内容(MobileADContent)
+
+**配置key:**  *MobileADContent*
+
+**配置值**: 字符串
+
+**配置说明**:用于配置移动端首页通知弹框的标题栏数据配置
+
+**配置关联**:需要开启移动端首页弹框(MobileAD)才可生效
+
+## 移动端首页顶部logo配置(newMobileLogo)
+
+**配置key:**  *newMobileLogo*
+
+**配置值**: 图片
+
+**配置说明**:新版顶部logo,未配置则会使用旧版配置
+
+**配置关联**:无
+
+## 全局默认背景logo(getImg)
+
+**配置key:**  *getImg*
+
+**配置值**: 图片
+
+**配置说明**:web端移动端共用该默认图,当后台图片返回无效时使用该图片展示
+
+**配置关联**:无
+
+## 全局默认应用图标(bgcImg)
+
+**配置key:**  *bgcImg*
+
+**配置值**: 图片
+
+**配置说明**:web端移动端事务图标失效后,使用该图片展示
+
+**配置关联**:无
+
+## 后台管理左上角logo(HTlogo)
+
+**配置key:**  *bgcImg*
+
+**配置值**: 图片
+
+**配置说明**:后台管理页面左上角图片展示
+
+**配置关联**:无
+
+## 移动端端登录logo(mobileLogo)
+
+**配置key:**  *mobileLogo*
+
+**配置值**: 图片
+
+**配置说明**:移动端登录,注册界面展示的logo
+
+**配置关联**:无
+
+## web端登录logo(webLoginLogo)
+
+**配置key:**  *webLoginLogo*
+
+**配置值**: 图片
+
+**配置说明**:web端登录,注册界面展示的logo
+
+**配置关联**:无
+
+## web端首页logo(webHomeLogin)
+
+**配置key:**  *webHomeLogin*
+
+**配置值**: 图片
+
+**配置说明**:web端首页界面展示的logo
+
+**配置关联**:无
+
+## 门户底部联系电话配置(webHomePhone)
+
+**配置key:**  *webHomePhone*
+
+**配置值**: 字符串
+
+**配置说明**:门户底部联系电话配置
+
+**配置关联**:无
+
+## 门户底部邮编(webHomeNumber)
+
+**配置key:**  *webHomeNumber*
+
+**配置值**: 字符串
+
+**配置说明**:门户底部邮编配置
+
+**配置关联**:无
+
+## 门户底部地址(webHomeAddress)
+
+**配置key:**  *webHomeAddress*
+
+**配置值**: 字符串
+
+**配置说明**:门户底部地址配置
+
+**配置关联**:无
+
+## 门户底部版权所有(webHomeCopyright)
+
+**配置key:**  *webHomeCopyright*
+
+**配置值**: 字符串
+
+**配置说明**:门户底部版权所有配置
+
+**配置关联**:无
+
+## 后台管理顶部欢迎词(HTWelcomeText)
+
+**配置key:**  *webHomeCopyright*
+
+**配置值**: 字符串
+
+**配置说明**:后台管理顶部欢迎词配置
+
+**配置关联**:无
+
+## 后台顶部中间图片(HTHeaCenter)
+
+**配置key:**  *HTHeaCenter*
+
+**配置值**: 图片
+
+**配置说明**:后台顶部中间图片配置
+
+**配置关联**:无
+
+## 是否开启单点登录(isSSOLogin)
+
+**配置key:**  *isSSOLogin*
+
+**配置值**: true或false
+
+**配置说明**:是否开启单点登录
+
+**配置关联**:无
+
+## 单点登录路径移动端(ssoUrlMobile)
+
+**配置key:**  *isSSOLogin*
+
+**配置值**: 域名地址
+
+**配置说明**:单点登录移动端地址
+
+**配置关联**:需要开启单点登录(isSSOLogin)才会生效
+
+## 单点登录web路径(ssoUrl)
+
+**配置key:**  *ssoUrl*
+
+**配置值**: 域名地址
+
+**配置说明**:单点登录web端地址
+
+**配置关联**:需要开启单点登录(isSSOLogin)才会生效
+
+## 微信登录密钥(wx_secret)
+
+**配置key:**  *wx_secret*
+
+**配置值**: 字符串
+
+**配置说明**:微信登录密钥配置
+
+**配置关联**:无
+
+## 微信登录appid(wx_appid)
+
+**配置key:**  *wx_appid*
+
+**配置值**: 字符串
+
+**配置说明**:微信登录appid配置
+
+**配置关联**:无
+
+## 阿里云短信appid(aly_appid)
+
+**配置key:**  *aly_appid*
+
+**配置值**: 字符串
+
+**配置说明**:阿里云短信appid配置
+
+**配置关联**:无
+
+## 阿里云短信密钥(aly_secret)
+
+**配置key:**  *aly_secret*
+
+**配置值**: 字符串
+
+**配置说明**:阿里云短信密钥配置
+
+**配置关联**:无
+
+## 数据化校园单点登录SSO应用密钥(authkey)
+
+**配置key:**  *authkey*
+
+**配置值**: 字符串
+
+**配置说明**:数据化校园单点登录SSO应用密钥配置
+
+**配置关联**:无
+
+## 数据化校园单点登录SSO应用id(appid)
+
+**配置key:**  *authkey*
+
+**配置值**: 字符串
+
+**配置说明**:数据化校园单点登录SSO应用id配置
+
+**配置关联**:无
+
+##数据中心数据库id(data_base_save)
+
+**配置key:**  *data_base_save*
+
+**配置值**: 字符串
+
+**配置说明**: 数据中心数据库id配置
+
+**配置关联**:无
+
+## LDAP服务器ip(ldap_ip)
+
+**配置key:**  *ldap_ip*
+
+**配置值**: 字符串
+
+**配置说明**: LDAP服务器ip配置
+
+**配置关联**:无
+
+## LDAP服务器端口(ldap_port)
+
+**配置key:**  *ldap_port*
+
+**配置值**: 字符串
+
+**配置说明**: LDAP服务器端口配置
+
+**配置关联**:无
+
+## 门户底部邮箱(webHomeEmail)
+
+**配置key:**  *webHomeEmail*
+
+**配置值**: 字符串
+
+**配置说明**: 门户底部邮箱配置
+
+**配置关联**:无
+
+## 后台管理底部logo(HTBottomLogo)
+
+**配置key:**  *HTBottomLogo*
+
+**配置值**: 字符串
+
+**配置说明**: 后台管理底部logo配置
+
+**配置关联**:无
+
+## 后台管理顶部背景图(HTBgclogo)
+
+**配置key:**  *HTBgclogo*
+
+**配置值**: 字符串
+
+**配置说明**: 后台管理顶部背景图配置
+
+**配置关联**:无
+
+## 活跃天数设置(active_days)
+
+**配置key:**  *active_days*
+
+**配置值**: 天数
+
+**配置说明**: 活跃天数设置配置
+
+**配置关联**:无
+
+## 任务超时时间(taskDueDate)
+
+**配置key:**  *taskDueDate*
+
+**配置值**: 天数或小时
+
+**配置说明**: 任务超时时间配置
+
+**配置关联**:无
+
+## 报表统计时间段设置(reportTimeSlot)
+
+**配置key:**  *reportTimeSlot*
+
+**配置值**: 数组
+
+```js
+[{"id":"1","name":"小于1天","start":0,"end":1},{"id":"2","name":"1-3天","start":1,"end":3},{"id":"3","name":"3-5天","start":3,"end":5},{"id":"4","name":"5-10天","start":5,"end":10},{"id":"5","name":"大于10天","start":10,"end":100000}]
+```
+
+
+
+**配置说明**: 报表统计时间段设置
+
+**配置关联**:无
+
+## 首页指南(homeHelp)
+
+**配置key:**  *homeHelp*
+
+**配置值**: 数组
+
+```js
+{
+    "blocks":[
+        {
+            "key":"efnre",
+            "text":"13131", // 内容配置位置
+            "type":"unstyled",
+            "depth":0,
+            "inlineStyleRanges":[],
+            "entityRanges":[],
+            "data":{}
+        }
+    ],
+        "entityMap":{}
+}
+```
+
+
+
+**配置说明**: 首页指南配置
+
+**配置关联**:无
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/computed-base/README.md

+
+# 模板设计器组件介绍
+  ![An image](https://mmbiz.qpic.cn/mmbiz_gif/mbvbah2cbzGdEbMQ9PibFrQYI8iaZktchUzNUwswCu5x425cPnCwo6UCd3XIQRZPyDKnGEic03d3iahnFzpKOtCbTw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1)
+
+## 表单基础配置
+
+### 页面名称
+
+用于设置当前表单名
+
+### 样式
+
+表单基础样式配置,接收json文本,以下示例
+
+```json
+{
+    "textAlign":"center",
+    "fontSize":"20px"
+}
+```
+
+### 是否有边框
+
+可选择是否展示表单边框
+
+### 单元格宽度
+
+配置表单整体宽度
+
+## 配置项说明
+
+### 布局 
+
+单元格元素布局,提供居左,居中,居右三种配置项
+
+### 默认值配置
+
+ 当前组件渲染时如果有配置该参数,会默认渲染该参数值
+
+### 是否禁用
+
+ 该配置参数可规定当前组件是否不可被用户使用或点击
+
+### sql配置
+
+ 对组件进行数据库查询,查询后进行配置当前数据默认项
+
+### 单元格样式
+
+ 该配置接收JSON字符串文本,且key值因为驼峰命名法,以下为示例
+
+```json
+{
+    "textAlign":"center",
+    "fontSize":"20px"
+}
+```
+
+### 宽度
+
+ 设置组件宽度
+
+### 标签占比
+
+ 部分组件分为标签和输入栏,我们把每一行宽度等分为24份,通过配置各自的占比,从而做到宽度相对应,标签占比为左边标签名所占用宽度
+
+### 组件占比
+
+  道理同上,我们把每一行宽度等分为24份,然后组件占比通常值接收用户输入的各个操作控件,例如输入框等,组件占比配置应大于标签占比
+
+### 显示标签
+
+ 由于存在标签组件,部分组件需要放弃使用自带的标签配置,所以就需要配置当前配置项,用以关闭自带标签显示
+
+### 标题
+
+ 用以配置组件的标签名
+
+### 渲染方式
+
+  该配置属于特殊配置项,可将指定字段按照用户配置的指定组件渲染
+
+### 默认值字段
+
+ 该字段需要用户自己配置字段并添加入组件即可生效
+
+## 占位文字
+
+ 该配置项用于输入框等组件,在用户第一次输入前,提示用户应该做什么输入
+
+### sql配置
+
+
+
+## 标签
+
+**提供以下配置项**
+> -  布局
+> -  默认值配置
+> -  sql配置
+>
+> 是否可编辑
+>
+>  **不可编辑**
+
+标签组件用于展示文本
+
+## 按钮
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - sql配置
+>
+> 是否可编辑或点击
+>
+>   **用户可点击**
+
+按钮组件用于用户点击执行对应逻辑,并实现与表单互动
+
+## 描述组件
+
+**提供以下配置项**
+
+>- 布局
+>- 标题
+>- 渲染方式
+>- 默认值字段
+>- 标签占比
+>- 组件占比
+>- 单元格样式
+>- 显示标签
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户不可编辑或点击**
+
+描述组件用于展示用户基本信息,或展示一些用户不可操作信息.
+
+## 列表组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 数据默认字段
+> - 是否必填
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可编辑或点击**
+
+将数据以列表(表格)的方式展示给用户观看
+
+## 文本框
+
+**提供以下配置项**
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 显示标签
+>- 占位文字
+>- 数据默认值字段
+>- 默认值
+>- 单元格样式
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户可编辑或点击**
+
+接收用户输入的文本框,为常用组件,表单设计器的基础组成组件
+
+## 隐藏值组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 数据默认值字段
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户不可编辑或点击且不会展示给用户**
+
+对用户隐藏,该组件主要用于将部分参数放置于表单中以供使用.
+
+## 数字输入框组件
+
+**提供以下配置项**
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 显示标签
+>- 数据默认值字段
+>- 默认值
+>- 单元格样式
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户可编辑**
+
+接收用户数字相关的输入,该组件不可输入英文,符号,中文等,必需确保用户只需要输入数字.
+
+## 文本域组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 占位文字
+> - 数据默认值字段
+> - 是否必填
+> - 默认值
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可编辑**
+
+当需要用户输入较多且为多行文本时,使用该组件,用以提供用户足够的编写空间和展示空间
+
+## 单选框组件
+
+**提供以下配置项**
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 显示标签
+>- 数据默认值字段
+>- 是否必填
+>- 默认值
+>- 单元格样式
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户可点击**
+
+该组件用于展示选择性给用户,用户只需鼠标点击即可,不需要用户二次编辑,且提供的选择项中用户只可以选择一个
+
+## 多选框组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 数据默认值字段
+> - 是否必填
+> - 默认值
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可点击**
+
+该组件同样用于提供多个选择项给用户,不同的是,该组件支持用户选择多个选择项并提交
+
+## 下拉选择框组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 占位文字
+> - 数字默认值字段
+> - 是否必填
+> - 默认值
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可点击**
+
+该组件同样用于展示选择性以供用户选择,与单选框组件不同的是,该组件的选择性不会占用展示位.
+
+## 图表组件
+
+**提供以下配置项**
+
+> - 布局
+> - 组件
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 占位文字
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可点击**
+
+结合echarts数据图表,动态生成各种各样的图表供用户观看,参数配置在sql配置中进行数据配置
+
+## 二维码组件
+
+**提供以下配置项**
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 显示标签
+>- 组件占比
+>- 显示标签
+>- 占位文字
+>- 单元格样式
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户可扫描**
+
+生成一个带链接的二维码供给用户扫描执行对应操作
+
+## 弹出列表选择框
+
+**提供以下配置项**
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 显示标签
+>- 组件占比
+>- 显示标签
+>- 占位文字
+>- 数组默认值字段
+>- 是否必填
+>- 单元格样式
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户可点击**
+
+弹出一个列表(表格)组件,展示需要用户选择的数据,选择后回到表单执行下步操作
+
+## 开关控件
+
+**提供以下配置项**
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 显示标签
+>- 数据默认值字段
+>- 是否必填
+>- 默认值
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户可点击**
+
+该组件只支持用户选择是否,根据用户选择执行后续处理
+
+## 日期选择器
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 数据默认值字段
+> - 是否必填
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可点击**
+
+提供一个日期选择栏,用户可根据选择填写对应时间.
+
+## 起止时间选择器
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 默认值时间字段配置
+> - 是否必填
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可点击**
+
+提供一个时间选择栏,不同的是该组件需要用户选择开始时间至结束时间,可通过字段配置默认值
+
+## 附件上传组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 数据默认值字段
+> - 是否必填
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可点击**
+
+该组件提供用户上传文件或图片,用户可根据需求,上传文件以供流程审核人员进行观看
+
+## 位置组件
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 是否显示标签
+>- 数据字段默认值配置
+>- 是否必填
+>- 单元格样式
+>
+>是否可编辑或点击
+>
+>**用户可点击**
+
+该组件采用高德地图定位,组件可定位当前用户地址并提供给用户展示
+
+**注: 使用该组件需要采用https协议**
+
+## 图片上传组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 数据默认值字段
+> - 是否必填
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可点击**
+
+该组件用法等同于附件上传组件,不过只接收图片上传
+
+## 签名组件
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 数组默认值字段
+> - 是否必填
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可编辑**
+
+用户可点击后进行电子签名,确认后会转为图片进行保存
+
+## 组件片段
+
+**提供以下配置项**
+
+> - 布局
+> - 宽度
+> - 是否禁用
+> - 标题
+> - 标签占比
+> - 组件占比
+> - 显示标签
+> - 单元格样式
+> - sql配置
+>
+> 是否可编辑或点击
+>
+> **用户可编辑**
+
+将其他表单内部嵌入到当前表单并共享数据的组件
+
+## 子表单组件
+
+**提供以下配置项**
+
+>- 布局
+>- 宽度
+>- 是否禁用
+>- 标题
+>- 标签占比
+>- 组件占比
+>- 显示标签
+>- 单元格样式
+>- sql配置
+>
+>是否可编辑或点击
+>
+>**用户可编辑**
+
+将多个表单嵌入进当前表单的组件
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/excellent/README.md

+
+# 场景设计器配置流程
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/improve/README.md

+
+# 模板设计器
+  ![An image](https://mmbiz.qpic.cn/mmbiz_gif/mbvbah2cbzGdEbMQ9PibFrQYI8iaZktchUzNUwswCu5x425cPnCwo6UCd3XIQRZPyDKnGEic03d3iahnFzpKOtCbTw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1)
+
+## 简单介绍
+
+  随着新一代信息技术的发展，学校为了满足当前的教学与管理需求，引入了各类业务系统。教务管理、学生管理、科研管理、OA办公、人事管理等系统陆续完成建设，提高了工作效率，促进了教育变革，也使学校的运转速度从火车提到了高铁。
+
+  繁琐且麻烦的表格设计与多层次的表单填写,使学校的事务办理即缓慢且低效.
+
+  因此,模板设计器即应运而生,配置人员可直接在页面上进行配置项配置,通过调用不同的组件,编写不同的sql,从而设计出一个全新可修改表单页面,再搭配流程设计器,在不同流程配置情况下,通过给流程人员展示各自对应的表单供其输入,从而达到无纸化办公,快捷化办公的需求.极大的减少了普通流程办理时所花费的精力以及花费
+
+## 组件简介
+
+  模板设计器提供了非常丰富的组件库,用户可以自主选择自己所需要的组件进行配置,以下为组件列表,组件详情请查看模板组件介绍
+
+- 标签
+- 按钮
+- 描述组件
+- 列表组件
+- 文本框
+- 隐藏值组件
+- 数字输入框组件
+- 文本域组件
+- 单选框
+- 多选框
+- 下拉选择框
+- 图表
+- 二维码
+- 弹出列表选择框
+- 开关控件
+- 日期选择器
+- 起止时间选择器
+- 附件上传组件
+- 位置组件
+- 图片上传组件
+- 签名组件
+- 组件片段
+- 子表单组件
+
+## SQL内置变量介绍
+
+以下为内部提供**变量**,配置人员可直接调用
+
+### obj
+
+
+
+### init
+
+### defaultValues
+
+### env
+
+### index
+
+### fatherCode
+
+### utils
+
+该变量为一个对象,内含以下操作项
+
+> moment
+>
+>   时间格式化方法,将时间戳传入进行格式化展示
+>
+>   示例 moment(传入时间戳).format('YYYY-MM-DD HH:mm:ss')
+>
+> sql
+>
+> message
+>
+> setValues
+>
+> req
+>
+> md5
+>
+> render
+>
+> base64
+
+### $
+
+该变量为中台系统自有函数库,提供数以百计的函数,配置人员可根据提供函数完成对数据的**判空**,**类型判断**,**数据转换**,**数据格式化**等操作
+
+### routerState
+
+该变量为当前路由中所携带的参数数据,模板通过router.push()跳转后,如果在跳转时传入了参数,即可通过当前变量获取传入的参数
+
+
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/qa/README.md

+> `JavaScript`进阶问题列表
+
+# 预留
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/review/README.md

+# 预留
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

docs/simply/README.md

+
+# 模板设计器配置流程
+
+<script>
+export default {
+  mounted () {
+    var script = document.createElement("script");
+    script.type = "text/javascript"
+    script.charset="UTF-8"
+    script.src = "http://tajs.qq.com/stats?sId=59154049"
+    document.body.appendChild(script);
+  }
+}
+</script>
\ No newline at end of file

package.json

+{
+  "name": "fe-docs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vuepress dev docs",
+    "build": "vuepress build docs",
+    "start": "npm run dev"
+  },
+  "author": "poetry",
+  "license": "ISC",
+  "resolutions": {
+    "terser": "3.14.1"
+  },
+  "devDependencies": {
+    "vuepress": "0.14.8",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0"
+  }
+}