├── docs ├── .nojekyll ├── vue │ ├── index.md │ ├── image │ │ ├── 2.png │ │ └── v-1.jpeg │ ├── 254.md │ ├── _sidebar.md │ ├── v-2.md │ └── temp.md ├── node │ ├── index.md │ ├── _sidebar.md │ ├── n-2.md │ ├── 251.md │ └── n-1.md ├── synthesize │ ├── index.md │ ├── image │ │ ├── webpack-hot.jpg │ │ └── wsoursemap.jpg │ ├── com-3.md │ ├── webpack-hot.md │ ├── com-4.md │ ├── com-5.md │ ├── com-6.md │ ├── _sidebar.md │ ├── inv-1.md │ ├── com-1.md │ ├── com-2.md │ ├── com-7.md │ └── hybrid-h5.md ├── basic-computer │ ├── index.md │ ├── http │ │ ├── tcp-ip-1.md │ │ ├── http-10.md │ │ ├── http-7.md │ │ ├── http-9.md │ │ ├── http-1.md │ │ ├── http-4.md │ │ ├── http-6.md │ │ ├── http-request.md │ │ ├── http-11.md │ │ ├── http-8.md │ │ ├── http-bas.md │ │ ├── http-get-post.md │ │ ├── http-2.md │ │ ├── http-3.md │ │ └── http-5.md │ ├── image │ │ ├── 4.jpg │ │ ├── http.jpg │ │ └── browser │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ └── 3.jpg │ ├── browser │ │ ├── 004.md │ │ ├── 001.md │ │ ├── 253.md │ │ ├── 007.md │ │ ├── 002.md │ │ ├── 003.md │ │ ├── 006.md │ │ └── 005.md │ ├── other │ │ └── 1.md │ └── _sidebar.md ├── javascript │ ├── index.md │ ├── images │ │ └── 1.jpg │ ├── reallyKnow │ │ ├── rk-44.md │ │ ├── rk-15.md │ │ ├── rk-16.md │ │ ├── rk-22.md │ │ ├── rk-29.md │ │ ├── rk-23.md │ │ ├── rk-25.md │ │ ├── rk-26.md │ │ ├── rk-31.md │ │ ├── rk-14.md │ │ ├── rk-33.md │ │ ├── rk-36.md │ │ ├── rk-43.md │ │ ├── rk-35.md │ │ ├── rk-6.md │ │ ├── rk-19.md │ │ ├── rk-17.md │ │ ├── rk-20.md │ │ ├── rk-11.md │ │ ├── rk-30.md │ │ ├── rk-34.md │ │ ├── rk-27.md │ │ ├── rk-12.md │ │ ├── rk-42.md │ │ ├── rk-5.md │ │ ├── rk-10.md │ │ ├── rk-18.md │ │ ├── rk-21.md │ │ ├── rk-28.md │ │ ├── rk-39.md │ │ ├── rk-38.md │ │ ├── rk-4.md │ │ ├── rk-24.md │ │ ├── rk-13.md │ │ ├── rk-32.md │ │ ├── rk-8.md │ │ ├── rk-7.md │ │ ├── rk-37.md │ │ ├── rk-41.md │ │ ├── rk-40.md │ │ ├── rk-3.md │ │ ├── rk-1.md │ │ ├── rk-2.md │ │ └── rk-9.md │ ├── basic │ │ ├── js-1-4.md │ │ ├── js-1-3.md │ │ ├── 26.md │ │ ├── js-1-2.md │ │ ├── js-1-19.md │ │ ├── js-1-21.md │ │ ├── js-1-5.md │ │ ├── js-1-17.md │ │ ├── js-1-9.md │ │ ├── js-1-11.md │ │ ├── js-1-10.md │ │ ├── 255.md │ │ ├── js-1-14.md │ │ ├── js-1-22.md │ │ ├── js-1-12.md │ │ ├── pro-1.md │ │ ├── settimeout.md │ │ ├── js-1-13.md │ │ ├── js-1-7.md │ │ ├── js-1-6.md │ │ ├── js-1-20.md │ │ ├── pro-2.md │ │ ├── js-1-16.md │ │ ├── js-1-18.md │ │ ├── js-1-8.md │ │ ├── js-1-15.md │ │ ├── js-1-1.md │ │ ├── 25.md │ │ ├── 24.md │ │ └── 23.md │ ├── regexp │ │ ├── regexp-4.md │ │ ├── regexp-3.md │ │ ├── regexp-10.md │ │ ├── regexp-9.md │ │ ├── regexp-2.md │ │ ├── regexp-1.md │ │ ├── regexp-7.md │ │ ├── regexp-8.md │ │ ├── regexp-6.md │ │ └── regexp-5.md │ ├── mustKnow │ │ ├── mk-35.md │ │ ├── mk-30.md │ │ ├── mk-23.md │ │ ├── mk-20.md │ │ ├── mk-34.md │ │ ├── mk-31.md │ │ ├── mk-7.md │ │ ├── mk-8.md │ │ ├── mk-13.md │ │ ├── mk-32.md │ │ ├── mk-21.md │ │ ├── mk-28.md │ │ ├── mk-25.md │ │ ├── mk-10.md │ │ ├── mk-33.md │ │ ├── mk-36.md │ │ ├── mk-5.md │ │ ├── mk-24.md │ │ ├── mk-26.md │ │ ├── mk-4.md │ │ ├── mk-11.md │ │ ├── mk-18.md │ │ ├── mk-9.md │ │ ├── mk-6.md │ │ ├── mk-1.md │ │ ├── mk-22.md │ │ ├── mk-27.md │ │ ├── mk-16.md │ │ ├── mk-3.md │ │ ├── mk-15.md │ │ ├── mk-14.md │ │ ├── mk-19.md │ │ ├── mk-17.md │ │ ├── mk-2.md │ │ ├── mk-29.md │ │ └── mk-12.md │ ├── string-1.md │ ├── promise │ │ ├── p-1.md │ │ └── p-2.md │ ├── this │ │ ├── this-2.md │ │ ├── this-4.md │ │ ├── this-3.md │ │ ├── this-5.md │ │ ├── this-1.md │ │ └── this-6.md │ ├── js-nan.md │ ├── array │ │ ├── array-1.md │ │ ├── array-2.md │ │ ├── array-4.md │ │ ├── array-6.md │ │ └── array-5.md │ ├── promise-1.md │ ├── bb-1.md │ ├── js-memoi.md │ ├── codes.md │ ├── basic.md │ ├── important-1.md │ └── important │ │ └── im-2.md ├── .DS_Store ├── algorithm │ ├── alg-4.md │ ├── algorithm-1.md │ ├── image │ │ ├── 5.jpg │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.jpg │ │ └── sort-compare.png │ ├── 12.md │ ├── 7.md │ ├── alg-5.md │ ├── 11.md │ ├── 10.md │ ├── index.md │ ├── 8.md │ ├── _sidebar.md │ ├── alg-6.md │ ├── 9.md │ ├── 13.md │ ├── alg-3.md │ ├── 14.md │ └── alg-2.md ├── js-code.png ├── assets │ ├── .DS_Store │ ├── images │ │ ├── 1.jpg │ │ └── 2.png │ ├── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ └── reset.css ├── css │ ├── index.md │ ├── images │ │ └── css_articlex.gif │ ├── 5.md │ ├── css-ip.md │ ├── link-import.md │ ├── css-3.md │ ├── css3-2.md │ ├── css3-1.md │ ├── css-link.md │ ├── css-hack.md │ ├── css-1.md │ ├── css-height.md │ ├── css-2.md │ ├── css-boxs.md │ ├── css-wi-he-code.md │ ├── word-wrap.md │ ├── css-bfc.md │ ├── css-jjyy.md │ ├── css-4.md │ ├── css-position.md │ ├── css-clear.md │ ├── _sidebar.md │ ├── css-hidden.md │ └── 6.md ├── html │ ├── index.md │ ├── html5.md │ ├── html5-1.md │ ├── 001.md │ ├── html-nh.md │ ├── html-nk.md │ ├── html-4.md │ ├── iframe.md │ ├── html-line.md │ ├── basic.md │ ├── html5-2.md │ ├── html5-3.md │ ├── html-qjsx.md │ ├── html-csl.md │ ├── html-yyh.md │ ├── hl-1.md │ ├── html-hs.md │ ├── _sidebar.md │ ├── html-tx.md │ └── html-doctype.md ├── web-logo-120.png ├── react │ ├── 252.md │ ├── index.md │ ├── re-17.md │ ├── re-18.md │ ├── re-3.md │ ├── re-9.md │ ├── re-13.md │ ├── re-10.md │ ├── re-12.md │ ├── re-14.md │ ├── re-1.md │ ├── re-16.md │ ├── re-15.md │ ├── re-2.md │ ├── re-5.md │ ├── re-8.md │ ├── re-11.md │ ├── re-19.md │ ├── re-20.md │ ├── _sidebar.md │ ├── re-4.md │ ├── re-6.md │ └── re-7.md ├── news.md ├── _navbar.md ├── _coverpage.md ├── README.md ├── _sidebar.md └── welcome.md ├── .travis.yml ├── .DS_Store ├── package.json ├── demo.js ├── .gitignore ├── README.md └── LICENSE /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | script: true -------------------------------------------------------------------------------- /docs/vue/index.md: -------------------------------------------------------------------------------- 1 | # Vue -------------------------------------------------------------------------------- /docs/node/index.md: -------------------------------------------------------------------------------- 1 | # Node -------------------------------------------------------------------------------- /docs/synthesize/index.md: -------------------------------------------------------------------------------- 1 | # 综合其它 -------------------------------------------------------------------------------- /docs/basic-computer/index.md: -------------------------------------------------------------------------------- 1 | # 计算机基础 -------------------------------------------------------------------------------- /docs/javascript/index.md: -------------------------------------------------------------------------------- 1 | # Font-end-interview-js 2 | 3 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/.DS_Store -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "docsify-cli": "^4.4.1" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/.DS_Store -------------------------------------------------------------------------------- /docs/algorithm/alg-4.md: -------------------------------------------------------------------------------- 1 | # 用二分查找实现 **indexOf** 方法，不允许用递归（鹅厂） 2 | 3 | ?> 欢迎大家给出自己的答案 4 | 5 | -------------------------------------------------------------------------------- /docs/basic-computer/http/tcp-ip-1.md: -------------------------------------------------------------------------------- 1 | # TCP/IP协议图 2 | 3 | ![image](../image/http.jpg) 4 | 5 | -------------------------------------------------------------------------------- /docs/js-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/js-code.png -------------------------------------------------------------------------------- /docs/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/assets/.DS_Store -------------------------------------------------------------------------------- /docs/css/index.md: -------------------------------------------------------------------------------- 1 | # CSS 2 | 3 | * [MDN：CSS 参考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference) -------------------------------------------------------------------------------- /docs/html/index.md: -------------------------------------------------------------------------------- 1 | # HTML 2 | 3 | * [MDN：HTML（超文本标记语言）](https://developer.mozilla.org/zh-CN/docs/Web/HTML) -------------------------------------------------------------------------------- /docs/vue/image/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/vue/image/2.png -------------------------------------------------------------------------------- /docs/web-logo-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/web-logo-120.png -------------------------------------------------------------------------------- /docs/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/assets/images/1.jpg -------------------------------------------------------------------------------- /docs/assets/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/assets/images/2.png -------------------------------------------------------------------------------- /docs/vue/image/v-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/vue/image/v-1.jpeg -------------------------------------------------------------------------------- /docs/algorithm/algorithm-1.md: -------------------------------------------------------------------------------- 1 | # 常见排序算法的时间复杂度,空间复杂度 2 | 3 | ### `图例：` 4 | 5 | ![image](image/sort-compare.png) 6 | -------------------------------------------------------------------------------- /docs/algorithm/image/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/algorithm/image/5.jpg -------------------------------------------------------------------------------- /docs/algorithm/image/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/algorithm/image/6.png -------------------------------------------------------------------------------- /docs/algorithm/image/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/algorithm/image/7.png -------------------------------------------------------------------------------- /docs/algorithm/image/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/algorithm/image/8.jpg -------------------------------------------------------------------------------- /docs/javascript/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/javascript/images/1.jpg -------------------------------------------------------------------------------- /docs/basic-computer/image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/basic-computer/image/4.jpg -------------------------------------------------------------------------------- /docs/css/images/css_articlex.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/css/images/css_articlex.gif -------------------------------------------------------------------------------- /docs/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /docs/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /docs/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /docs/basic-computer/image/http.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/basic-computer/image/http.jpg -------------------------------------------------------------------------------- /docs/react/252.md: -------------------------------------------------------------------------------- 1 | # 什么渲染劫持？ 2 | 3 | > 高阶组件可以在render函数中做非常多的操作，从而控制原组件的渲染输出，只要改变了原组件的渲染，我们都将它称之为一种渲染劫持. 4 | > HOC（高阶组件）有一种反向继承的用法。 -------------------------------------------------------------------------------- /docs/algorithm/image/sort-compare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/algorithm/image/sort-compare.png -------------------------------------------------------------------------------- /docs/synthesize/image/webpack-hot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/synthesize/image/webpack-hot.jpg -------------------------------------------------------------------------------- /docs/synthesize/image/wsoursemap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/synthesize/image/wsoursemap.jpg -------------------------------------------------------------------------------- /docs/basic-computer/image/browser/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/basic-computer/image/browser/1.jpg -------------------------------------------------------------------------------- /docs/basic-computer/image/browser/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/basic-computer/image/browser/2.jpg -------------------------------------------------------------------------------- /docs/basic-computer/image/browser/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nieyafei/front-end-interview/HEAD/docs/basic-computer/image/browser/3.jpg -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-44.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | ```js 4 | 5 | ``` 6 | 7 | **参考资料：** 8 | 9 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-4.md: -------------------------------------------------------------------------------- 1 | # 使用原生JS实现 2 | 3 | ```js 4 | (10).add(10).reduce(2).add(10) //28 5 | ``` 6 | 7 | ?> 10 + 10 - 2 + 10 = 28 8 | 9 | **注意是原生js，原型链上`Number.prototype`** -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-4.md: -------------------------------------------------------------------------------- 1 | # 判断字符串是否包含数字 2 | 3 | ```js 4 | function includesNumber(str) { 5 | var re=/\d/; 6 | return re.test(str); 7 | } 8 | ``` 9 | 10 | -------------------------------------------------------------------------------- /docs/react/index.md: -------------------------------------------------------------------------------- 1 | # React 2 | 3 | * [排名前500位ReactJS面试问题与答案的列表](https://github.com/sudheerj/reactjs-interview-questions) 4 | * [React.js 小书](https://github.com/huzidaha/react-naive-book) -------------------------------------------------------------------------------- /docs/news.md: -------------------------------------------------------------------------------- 1 | # 最新更新 2 | 3 | * [一道被轻视的JS代码题目](javascript/basic/25.md) 4 | * [如何减少回流?](basic-computer/browser/006.md) 5 | * [V8如何执行一段JS代码?](basic-computer/other/1.md) 6 | * [N皇后（高频）](algorithm/14.md) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-3.md: -------------------------------------------------------------------------------- 1 | # 写一个函数，满足以下的情况 2 | 3 | ```js 4 | var fn=function(a,b,c){ 5 | return a+b+c; 6 | } 7 | ``` 8 | 9 | ?> 函数需要满足 curry(fn)(1)(2)(3) //6 10 | 11 | **可以自己做一下，在评论中给出自己的答案** -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-15.md: -------------------------------------------------------------------------------- 1 | # 加号 VS 减号 2 | 3 | ```js 4 | '5' + 3 5 | '5' - 3 6 | ``` 7 | 8 | ?> `结果是` 53 2 9 | 10 | **参考资料：** 11 | 12 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-16.md: -------------------------------------------------------------------------------- 1 | # 该死的代码加减 2 | 3 | ```js 4 | 1 + - + + + - + 1 5 | ``` 6 | 7 | ?> `结果是` 2 8 | 9 | 10 | **参考资料：** 11 | 12 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-3.md: -------------------------------------------------------------------------------- 1 | # 请实现一个函数用来匹配包括`.`和`*`的正则表达式 2 | 3 | ?> 模式中的字符`.`表示任意一个字符，而`*`表示它前面的字符可以出现任意次（包含0次）。 在本题中，匹配是指字符串的所有字符匹配整个模式。例如，字符串`"aaa"`与模式`"a.a"`和`"ab*ac*a"`匹配，但是与`"aa.a"`和`"ab*a"`均不匹配 4 | 5 | -------------------------------------------------------------------------------- /docs/html/html5.md: -------------------------------------------------------------------------------- 1 | # 什么是HTML5？ 2 | 3 | ?> HTML5 是下一代 HTML 标准。 4 | 5 | ?> HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 6 | 7 | ?> HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 8 | 9 | ?> HTML5的设计目的是为了在移动设备上支持多媒体 -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-10.md: -------------------------------------------------------------------------------- 1 | # 检测人民币金额，两位小数 2 | 3 | ```js 4 | var money = "10029233.34" 5 | var reg = /^(([1-9]\d*)|0)(\.\d{2})?$/; 6 | 7 | // 检测 8 | reg.test(money); 9 | 10 | // true 和 false 11 | ``` -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-9.md: -------------------------------------------------------------------------------- 1 | # 匹配ip地址 2 | 3 | ```js 4 | var ipStr = "255.254.1.1"; 5 | var reg = /(([01]?\d\d?|2[0-4]\d|25[0-5])\.){3}([01]?\d\d?|2[0-4]\d|25[0-5])/g; 6 | 7 | // 匹配 8 | console.log(str.match(reg)); 9 | ``` -------------------------------------------------------------------------------- /docs/javascript/basic/26.md: -------------------------------------------------------------------------------- 1 | # 使用window.open(url)下载文件时为什么会被浏览器拦截？如何解决？ 2 | 3 | > 1.将window.open放在按钮的单击事件中执行 4 | 5 | > 2.动态创建一个a标签，设置url 和 target,执行click,最后移除 6 | 7 | 8 | [题目来源](https://github.com/haizlin/fe-interview/issues/2673) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-2.md: -------------------------------------------------------------------------------- 1 | # javascript有哪几种数据类型 2 | 3 | **六种基本数据类型** 4 | 5 | - `undefined` 6 | - `null` 7 | - `string` 8 | - `boolean` 9 | - `number` 10 | - `symbol(ES6)` 11 | 12 | **一种引用类型** 13 | 14 | - `Object` -------------------------------------------------------------------------------- /docs/node/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [Node](node/index.md) 3 | 4 | * Node 5 | * [什么是错误优先的回调函数？](node/n-1.md) 6 | * [如何避免回调地狱？](node/n-2.md) 7 | * [NodeJs的特性主要有哪些？适用于哪些场景开发？](node/251.md) 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-19.md: -------------------------------------------------------------------------------- 1 | # 输出结果？（完美世界） 2 | 3 | ```js 4 | function a(){ 5 | let arr = [1,2,3]; 6 | return arr; 7 | } 8 | 9 | let b = a(); 10 | b.push(4,5); 11 | let c= a(); 12 | console.log(b,c); 13 | ``` 14 | 15 | -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-2.md: -------------------------------------------------------------------------------- 1 | # 对字符串var str = "1000000000" 进行科学计数法，比如结果是1.000.000.000 ☆☆☆☆☆ 2 | 3 | > 答案：/(?=(\b)(\d{3})+$)/g 4 | 5 | ```js 6 | var reg = /(?=(\B)(\d{3})+$)/g; 7 | var str = "1000000000"; 8 | str.replace(reg,"."); 9 | ``` -------------------------------------------------------------------------------- /docs/react/re-17.md: -------------------------------------------------------------------------------- 1 | # react项目中，constructor(){ this.target = this.func.bind(this); },JSX里onChange={this.target}的写法，为什么要比非bind的func = () => {}的写法效率高 请解释其中的原理 2 | 3 | ```js 4 | constructor(){ 5 | this.target = this.func.bind(this); 6 | } 7 | ``` -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-22.md: -------------------------------------------------------------------------------- 1 | # 谨记优先级 2 | 3 | ```js 4 | [1 < 2 < 3, 3 < 2 < 1] 5 | ``` 6 | 7 | ?> `结果是` [true, true] 8 | 9 | > **`<` 和 `>` 的优先级都是`从左到右`** 10 | 11 | **参考资料：** 12 | 13 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-1.md: -------------------------------------------------------------------------------- 1 | # 检验一个字符串首尾是否含有数字 ☆☆ 2 | 3 | > 答案：/^\d | \d$/g 4 | 5 | 此题的意思是，首有数字或者尾有数字 6 | `\d`代表数字 7 | `^` 代表首 8 | `$` 代表尾 9 | `|` 或的意思 10 | `g` 全部匹配 11 | 12 | **如果此题变化为：检验一个字符串首位是否都包含数字** 13 | 14 | > 答案：/^\d[\s\S]*\d$/g -------------------------------------------------------------------------------- /docs/_navbar.md: -------------------------------------------------------------------------------- 1 | * 快链 2 | * [Flutter资源](https://github.com/nieyafei/flutter-resources) 3 | * [前端资源整理收集文档](https://github.com/nieyafei/front-end-resources) 4 | * [CODEHTML博客](http://codehtml.cn/fe-blog/) 5 | * [前端DEMO特效收集](http://codehtml.cn/front-end-demo/#/) -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-7.md: -------------------------------------------------------------------------------- 1 | # 判断是否以元音字母结尾 2 | 3 | > 1、元音字母包括 a，e，i，o，u，以及对应的大写 4 | 5 | > 2、包含返回 true，否则返回 false 6 | 7 | ```js 8 | function endsWithVowel(str) { 9 | return /[a,e,i,o,u]$/i.test(str); 10 | } 11 | ``` 12 | 13 | ?> 确定元音集合`[a,e,i,o,u]` -------------------------------------------------------------------------------- /docs/vue/254.md: -------------------------------------------------------------------------------- 1 | # 自己如何实现 Vue 的数据监听，能检测到 DOM 新增加绑定的属性吗？ 2 | 3 | - `Object.defineproperty()` 4 | 5 | > 通过`Object.defineproperty()`,把这些属性全部转为 getter/setter 6 | 7 | ![image](./image/2.png) 8 | 9 | - [题目来源](https://juejin.im/post/6854899692178948109#comment) 10 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-35.md: -------------------------------------------------------------------------------- 1 | # 下面代码会返回什么？ 2 | 3 | ```js 4 | console.log(typeof typeof 1); 5 | ``` 6 | 7 | ?> `typeof 1` 返回 `"number"` and `typeof "number"` 返回 `"string"` 8 | 9 | **参考资料：** 10 | 11 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-29.md: -------------------------------------------------------------------------------- 1 | # 构造函数的函数 2 | 3 | ```js 4 | function f() {} 5 | var a = f.prototype, b = Object.getPrototypeOf(f); 6 | a === b 7 | ``` 8 | 9 | ?> `结果是` false 10 | 11 | **参考资料：** 12 | 13 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/html/html5-1.md: -------------------------------------------------------------------------------- 1 | # HTML5 为什么只需要写 ？ 2 | 3 | > HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 4 | 5 | > 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。 6 | 7 | **参考资料** 8 | 9 | [w3school](http://www.w3school.com.cn/html5/html5_doctype.asp) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-21.md: -------------------------------------------------------------------------------- 1 | # 代码块输出结果 2 | 3 | ```js 4 | var i = 0; 5 | function fun(){ 6 | i++; 7 | if(i < 10){ 8 | fun(); 9 | }else{ 10 | return i 11 | } 12 | } 13 | console.log(fun()); 14 | ``` 15 | 16 | 结果: 17 | 18 | ``` 19 | undefined 20 | ``` -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-23.md: -------------------------------------------------------------------------------- 1 | # 最经典的WTF 2 | 3 | ```js 4 | 2 == [[[2]]] 5 | ``` 6 | 7 | ?> `结果是` true 8 | 9 | > 数组`[2]`强制转换成数字的过程会先调用它的 `toString` 方法转成字符串，然后再转成数字,然后递归调用，最终转成`2` 10 | 11 | **参考资料：** 12 | 13 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-25.md: -------------------------------------------------------------------------------- 1 | # 自动提升为全局变量 2 | 3 | ```js 4 | (function(){ 5 | var x = y = 1; 6 | })(); 7 | console.log(y); 8 | console.log(x); 9 | ``` 10 | 11 | ?> `结果是` 1 error 12 | 13 | **参考资料：** 14 | 15 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-5.md: -------------------------------------------------------------------------------- 1 | # 代码片段，请输出结果？ 2 | 3 | ```js 4 | var a = {}; 5 | Object.defineProperty(a, "name", { 6 | writable: false, 7 | value: 'a' 8 | }) 9 | 10 | var b = Object.create(a); 11 | b.name = 'b'; 12 | console.log(b.name); 13 | ``` 14 | 15 | > `结果`： a -------------------------------------------------------------------------------- /docs/vue/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [Vue](basic-computer/index.md) 3 | 4 | * Vue 5 | * [你能写一个 Vue 的双向数据绑定吗？](vue/v-1.md) 6 | * [vue 如何解析模板？](vue/temp.md) 7 | * [写React/Vue项目时为什么要在组件中写key，其作用是什么?](vue/v-2.md) 8 | * [自己如何实现 Vue 的数据监听，能检测到 DOM 新增加绑定的属性吗？](vue/254.md) 9 | -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-26.md: -------------------------------------------------------------------------------- 1 | # 正则表达式 2 | 3 | ```js 4 | var a = /123/, 5 | b = /123/; 6 | a == b 7 | a === b 8 | ``` 9 | 10 | ?> `结果是` false false 11 | 12 | > 每个字面的正则表达式都是一个单独的实例，即使它们的内容相同 13 | 14 | **参考资料：** 15 | 16 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-31.md: -------------------------------------------------------------------------------- 1 | # 替换(replace)陷阱 2 | 3 | ```js 4 | "1 2 3".replace(/\d/g, parseInt) 5 | ``` 6 | 7 | ?> `结果是` "1 NaN 3" 8 | 9 | > 此题变成调用`parseInt(1, 0)`、`parseInt(2, 2)`和`parseInt(3, 4)` 10 | 11 | **参考资料：** 12 | 13 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/css/5.md: -------------------------------------------------------------------------------- 1 | # 如何解决a标点击后hover事件失效的问题? 2 | 3 | 检测css代码原则顺序 4 | 5 | > `LoVe HAte`原则: link→visited→hover→active 6 | 7 | - `a:link`：未访问时的样式，一般省略成a 8 | - `a:visited`：已经访问后的样式 9 | - `a:hover`：鼠标移上去时的样式 10 | - `a:active`：鼠标按下时的样式 11 | 12 | * [题目来源](https://juejin.im/post/5eb55ceb6fb9a0436748297d) -------------------------------------------------------------------------------- /docs/css/css-ip.md: -------------------------------------------------------------------------------- 1 | # CSS优先级算法如何计算？ 2 | 3 | > 元素选择符： 1 4 | 5 | > class选择符： 10 6 | 7 | > id选择符：100 8 | 9 | > 元素标签：1000 10 | 11 | - ** !important声明的样式优先级最高，如果冲突再进行计算。** 12 | 13 | - ** 如果优先级相同，则选择最后出现的样式。** 14 | 15 | - ** 继承得到的样式的优先级最低。** 16 | 17 | **参考资料：** 18 | 19 | [CSS选择器优先级](css-ip.md) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-14.md: -------------------------------------------------------------------------------- 1 | # 关于“==” 2 | 3 | ```js 4 | [] == [] 5 | ``` 6 | 7 | ?> false 8 | 9 | > 如果比较的两个对象指向的是同一个对象，就返回 true，否则就返回 false，此题这是两个不同的数组对象 10 | 11 | **参考资料：** 12 | 13 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 14 | 15 | [参考解析](http://f2ex.cn/do-you-really-know-javascript/) -------------------------------------------------------------------------------- /docs/html/001.md: -------------------------------------------------------------------------------- 1 | # HTML5如何监听video的全屏和退出全屏？ 2 | 3 | ```js 4 | window.resize 5 | 6 | function checkFull(){ 7 | 　var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled; 8 | 　if(isFull === undefined) isFull = false; 9 | 　return isFull; 10 | } 11 | ``` -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-30.md: -------------------------------------------------------------------------------- 1 | # 下面的代码块，会输出什么？ 2 | 3 | ```js 4 | for (let i = 0; i < 5; i++) { 5 | setTimeout(function() { 6 | console.log(i); 7 | }, i * 1000 ); 8 | } 9 | ``` 10 | 11 | ?> `结果是` 0 1 2 3 4 12 | 13 | **参考资料：** 14 | 15 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/react/re-18.md: -------------------------------------------------------------------------------- 1 | # 什么是虚拟DOM？ 2 | 3 | **Virtual DOM 是一种编程概念。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。** 4 | 5 | **文章推荐：** 6 | 7 | - [Virtual DOM 及内核](https://zh-hans.reactjs.org/docs/faq-internals.html#___gatsby) 8 | 9 | - [探索Virtual DOM的前世今生](https://zhuanlan.zhihu.com/p/35876032) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-23.md: -------------------------------------------------------------------------------- 1 | # 24、下面的代码块，会输出什么？为什么？ 2 | 3 | ```js 4 | (function(x) { 5 | return (function(y) { 6 | console.log(x); 7 | })(2) 8 | })(1); 9 | ``` 10 | 11 | ?> `结果：` 1 12 | 13 | **闭包能够访问外部作用域的变量或参数** 14 | 15 | **参考资料：** 16 | 17 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/node/n-2.md: -------------------------------------------------------------------------------- 1 | # 如何避免回调地狱？ 2 | 3 | ?> 模块化: 将回调函数转换为独立的函数 4 | 5 | ?> 使用流程控制库，例如[aync](https://www.npmjs.com/package/async) 6 | 7 | ?> 使用Promise 8 | 9 | ?> 使用aync/await 10 | 11 | 等等...,有很多答案，取决于使用场景 12 | 13 | **参考资料：** 14 | 15 | [Async/Await替代Promise的6个理由](https://blog.fundebug.com/2017/04/04/nodejs-async-await/) 16 | 17 | -------------------------------------------------------------------------------- /docs/_coverpage.md: -------------------------------------------------------------------------------- 1 | ![logo](./web-logo-120.png ':no-zoom') 2 | 3 | # Font-end-interview 4 | 5 | > 前端面试interview的题目收集，持续更新(目前252道) 6 | 7 | > **勿浅尝辄止** 8 | 9 | * 评论中可以给出自己的见解和答案，一起学习进步 10 | 11 | [GitHub](https://github.com/nieyafei/front-end-interview) 12 | [同步语雀](https://www.yuque.com/codehtml/front-end-interview) 13 | [开始阅读](/welcome.md) -------------------------------------------------------------------------------- /docs/css/link-import.md: -------------------------------------------------------------------------------- 1 | # link与@import的区别 2 | 3 | ?> - link是HTML方式， @import是CSS方式 4 | 5 | ?> - link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC 6 | 7 | ?> - link可以通过rel="alternate stylesheet"指定候选样式 8 | 9 | ?> - 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式 10 | 11 | ?> - @import必须在样式规则之前，可以在css文件中引用其他文件 12 | 13 | **`总体来说：link优于@import`** 14 | 15 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-20.md: -------------------------------------------------------------------------------- 1 | # 21、执行以下代码时输出是什么？解释一下为什么？ 2 | 3 | ```js 4 | console.log(false == '0') 5 | console.log(false === '0') 6 | ``` 7 | 8 | **结果：** 9 | 10 | ```js 11 | true 12 | false 13 | ``` 14 | 15 | ?> `"==="`叫做严格运算符，`"=="`叫做相等运算符 16 | 17 | **参考资料：** 18 | 19 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/string-1.md: -------------------------------------------------------------------------------- 1 | # 请给字符串都添加上原型方法 spacify，可以让一个字符串的每个字母都多出一个空格的间隔 2 | 3 | `"ScriptOJ".spacify() // => "S c r i p t O J"` 4 | 5 | ### 答案解析： 6 | 7 | ```js 8 | String.prototype.spacify = function () { 9 | return this.split('').join(' ') 10 | } 11 | ``` 12 | 13 | **参考资料：** 14 | 15 | [本题来源](http://blog.sourcing.io/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-8.md: -------------------------------------------------------------------------------- 1 | # 邮政编码的验证（开头不能为0，共6位） 2 | 3 | ```js 4 | function isPostalCode(str){ 5 | return /^[1-9][0-9]{5}$/.test(str) 6 | } 7 | ``` 8 | 9 | **参考资料：** 10 | 11 | [正则表达式](http://www.runoob.com/regexp/regexp-syntax.html) 12 | 13 | [MDN: 正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions) -------------------------------------------------------------------------------- /docs/html/html-nh.md: -------------------------------------------------------------------------------- 1 | # 介绍一下你对浏览器内核的理解？ 2 | 3 | ### 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 4 | 5 | > 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 6 | 7 | ### JS引擎则：解析和执行javascript来实现网页的动态效果。 8 | 9 | > 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。 -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-33.md: -------------------------------------------------------------------------------- 1 | # 正则test陷阱 2 | 3 | ```js 4 | var lowerCaseOnly = /^[a-z]+$/; 5 | [lowerCaseOnly.test(null), lowerCaseOnly.test()] 6 | ``` 7 | 8 | ?> `结果是` [true, true] 9 | 10 | > **`test`方法的参数会被调用`toString`强制转换成字符串，此题转换的字符串是`null`、`undefined`** 11 | 12 | **参考资料：** 13 | 14 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/algorithm/12.md: -------------------------------------------------------------------------------- 1 | # 手写冒泡排序 2 | 3 | ```js 4 | function bubbleSort(arr){ 5 | for(let i = 0; i < arr.length; i++) { 6 | for(let j = 0; j < arr.length - i - 1; j++) { 7 | if(arr[j] > arr[j+1]) { 8 | let temp = arr[j] 9 | arr[j] = arr[j+1] 10 | arr[j+1] = temp 11 | } 12 | } 13 | } 14 | return arr 15 | } 16 | ``` -------------------------------------------------------------------------------- /docs/basic-computer/http/http-10.md: -------------------------------------------------------------------------------- 1 | # TCP和UDP的区别 2 | 3 | - TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。 4 | - TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。 5 | - TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。 6 | - TCP只能是1对1的，UDP支持1对1,1对多。 7 | - TCP的首部较大为20字节，而UDP只有8字节。 8 | - TCP是面向连接的可靠性传输，而UDP是不可靠的。 9 | -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-17.md: -------------------------------------------------------------------------------- 1 | # 如何实现一个 new? 2 | 3 | ```js 4 | function _new(fn, ...arg) { 5 | const obj = Object.create(fn.prototype); 6 | const ret = fn.apply(obj, arg); 7 | return ret instanceof Object ? ret : obj; 8 | } 9 | ``` 10 | 11 | **题目来源：** 12 | 13 | [如何实现一个 new](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/12) -------------------------------------------------------------------------------- /docs/node/251.md: -------------------------------------------------------------------------------- 1 | # NodeJs的特性主要有哪些？适用于哪些场景开发？ 2 | 3 | ### 特性： 4 | - 它是一个Javascript运行环境 5 | - 依赖于Chrome V8引擎进行代码解释 6 | - 事件驱动 7 | - 非阻塞I/O，不会傻等I/O语句结束，而会执行后面的语句 8 | - 轻量、可伸缩，适于实时数据交互应用 9 | - 单进程，单线程，减少了内存开销，操作系统的内存换页 10 | 11 | ### 适用场景： 12 | 13 | > NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景 14 | 15 | - RESTful API 16 | 17 | - 统一Web应用的UI层 18 | 19 | - 大量Ajax请求的应用 20 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Font-end-interview 2 | 3 | [![Build Status](https://travis-ci.org/nieyafei/front-end-interview.svg?branch=master)](https://travis-ci.org/nieyafei/front-end-interview) 4 | [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) 5 | 6 | 前端面试interview题目收集，持续更新，勿浅尝辄止 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/algorithm/7.md: -------------------------------------------------------------------------------- 1 | # 归并、快排、堆排有何区别? 2 | 3 | |排序|时间复杂度(最好情况)|时间复杂度(最坏情况)|空间复杂度|稳定性| 4 | |:--------:|:--------:|:--------:|:--------:|:--------:| 5 | |快速排序|O(nlogn)|O(n^2)|O(logn)~O(n)|不稳定| 6 | |归并排序|O(nlogn)|O(nlogn)|O(n)|稳定| 7 | |堆排序|O(nlogn)|O(nlogn)|O(1)|不稳定| 8 | 9 | ![image](image/5.jpg) 10 | 11 | * [题目来源](https://juejin.im/post/5e8b261ae51d4546c0382ab4#heading-70) -------------------------------------------------------------------------------- /docs/basic-computer/browser/004.md: -------------------------------------------------------------------------------- 1 | # 怎么预防文件上传漏洞？ 2 | 3 | > 服务器未校验上传的文件，致使黑客可以上传恶意脚本等方式 4 | 5 | **预防策略：** 6 | 7 | - 用文件头来检测文件类型，使用白名单过滤(有些文件可以从其中一部分执行，只检查文件头无效，例如 PHP 等脚本语言)； 8 | - 上传后将文件彻底重命名并移动到不可执行的目录下； 9 | - 升级服务器软件以避免路径解析漏洞； 10 | - 升级用到的开源编辑器； 11 | - 管理后台设置强密码。 12 | 13 | **参考资料：** 14 | 15 | [题目来源](https://juejin.im/post/5dca1b376fb9a04a9f11c82e#heading-10) 16 | -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-36.md: -------------------------------------------------------------------------------- 1 | # 无效日期 2 | 3 | ```js 4 | var a = new Date("epoch") 5 | ``` 6 | 7 | ?> `结果是` Invalid Date 8 | 9 | > 对于此题，`a instance Date` 的结果是 `true`, 但是它是无效的Date。Date对象内部是用一个数字来存储时间的，在这个例子中，这个数字是 NaN 10 | 11 | **参考资料：** 12 | 13 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 14 | 15 | [此题解析](http://f2ex.cn/do-you-really-know-javascript/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-43.md: -------------------------------------------------------------------------------- 1 | # 重复声明变量 2 | 3 | ```js 4 | function foo(a) { 5 | var a; 6 | return a; 7 | } 8 | function bar(a) { 9 | var a = 'bye'; 10 | return a; 11 | } 12 | console.log([foo('hello'), bar('hello')]) 13 | ``` 14 | 15 | ?> `结果是` ["hello", "bye"] 16 | 17 | **参考资料：** 18 | 19 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-35.md: -------------------------------------------------------------------------------- 1 | # 保留字 class 2 | 3 | ```js 4 | var a = {class: "Animal", name: 'Fido'}; 5 | console.log(a.class); 6 | ``` 7 | 8 | > 答案`取决于浏览器`, `class` 是保留字，但是在Chrome、Firefox和Opera中可以作为属性名称，在IE中是禁止的。另一方面，其实所有浏览器基本接受大部分的关键字（如：`int`、`private`、`throws`等）作为变量名，而`class`是禁止的 9 | 10 | **参考资料：** 11 | 12 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-6.md: -------------------------------------------------------------------------------- 1 | # 死循环陷阱 2 | 3 | ```js 4 | var END = Math.pow(2, 53); 5 | var START = END - 100; 6 | var count = 0; 7 | for (var i = START; i <= END; i++) { 8 | count++; 9 | } 10 | console.log(count); 11 | ``` 12 | 13 | ?> 这个会陷入一个死循环，`2^53`是最大的值，因此`2^53+1` 等于 `2^53` 14 | 15 | **参考资料：** 16 | 17 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/css/css-3.md: -------------------------------------------------------------------------------- 1 | # display:inline-block 什么时候会显示间隙？ 2 | 3 | ?> 该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素） 4 | 5 | > 1、有空格时候会有间隙 解决：移除空格 6 | 7 | > 2、`margin`正值的时候 解决：`margin`使用负值 8 | 9 | > 3、使用`font-size`时候 解决：`font-size:0`、`letter-spacing`、`word-spacing` 10 | 11 | 12 | **参考资料：** 13 | 14 | [MDN: display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 15 | -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-9.md: -------------------------------------------------------------------------------- 1 | # 请说出下面的代码块输出结果？ 2 | 3 | ```js 4 | var length = 10; 5 | function fn(){ 6 | console.log(this); 7 | console.log(this.length); 8 | } 9 | 10 | var obj = { 11 | length: 5, 12 | method: function(fn){ 13 | fn(); 14 | arguments[0](); 15 | } 16 | } 17 | obj.method(fn, 9); 18 | ``` 19 | 20 | > 结果：window 10 21 | 22 | > Arguments 2 23 | -------------------------------------------------------------------------------- /docs/algorithm/alg-5.md: -------------------------------------------------------------------------------- 1 | # 「移动零」，给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。 2 | 3 | ``` 4 | 输入: [0,1,0,3,12] 5 | 输出: [1,3,12,0,0] 6 | ``` 7 | 8 | **说明：** 9 | > 必须在原数组上操作，不能拷贝额外的数组。 10 | > 尽量减少操作次数。 11 | 12 | 点击来源题目能看到各路答案 13 | 14 | **题目来源：** 15 | 16 | [算法题「移动零」，给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/132) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-11.md: -------------------------------------------------------------------------------- 1 | # call和apply的区别，性能哪一个更好？ 2 | 3 | ```js 4 | Function.prototype.apply 5 | Function.prototype.call 6 | ``` 7 | 8 | **区别：** 9 | 10 | **性能：** 11 | 12 | [call和apply的性能对比](https://github.com/noneven/__/issues/6) 13 | 14 | 15 | **原文链接：** 16 | 17 | [call 和 apply 的区别是什么，哪个性能更好一些](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/84) 18 | -------------------------------------------------------------------------------- /docs/javascript/promise/p-1.md: -------------------------------------------------------------------------------- 1 | # Promise中的执行顺序 2 | 3 | ```js 4 | let promise = new Promise(function(resolve, reject) { 5 | console.log('Promise'); 6 | resolve(); 7 | }); 8 | 9 | promise.then(function() { 10 | console.log('resolved'); 11 | }); 12 | 13 | console.log('Hi,CODEHTML!'); 14 | ``` 15 | 16 | #### 打印结果: 17 | 18 | ```js 19 | Promise 20 | Hi,CODEHTML! 21 | resolved 22 | ``` -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-19.md: -------------------------------------------------------------------------------- 1 | # 损失精度的IEEE 754 2 | 3 | ```js 4 | var a = 111111111111111110000, 5 | b = 1111; 6 | a + b; 7 | ``` 8 | 9 | ?> `结果是` 111111111111111110000 10 | 11 | **参考资料：** 12 | 13 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 14 | 15 | [WIKI: Double-precision floating-point format](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) -------------------------------------------------------------------------------- /docs/react/re-3.md: -------------------------------------------------------------------------------- 1 | # 什么情况下你会优先选择使用 Class Component 而不是 Functional Component？ 2 | 3 | ?> 英：When would you use a Class Component over a Functional Component? 4 | 5 | **答：** 6 | 7 | > 在组件需要包含内部状态或者使用到生命周期函数的时候使用 `Class Component` ，否则使用函数式组件。 8 | 9 | **参考资料：** 10 | 11 | [题目来源](https://segmentfault.com/a/1190000008102870) 12 | 13 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-10.md: -------------------------------------------------------------------------------- 1 | # 解释代码块结果？ 2 | 3 | ```js 4 | var s = []; 5 | var arr = s; 6 | for (var i = 0; i < 3; i++) { 7 | var pusher = { 8 | value: "item"+i 9 | },tmp; 10 | if (i !== 2) { 11 | tmp = []; 12 | pusher.children = tmp; 13 | } 14 | arr.push(pusher); 15 | arr = tmp; 16 | } 17 | console.log(s[0]); 18 | ``` 19 | **仔细思考一下，看看打印结果是什么？并且解释为什么？** 20 | 21 | -------------------------------------------------------------------------------- /docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | * 面试题收集 2 | * [最新更新](news.md) 3 | * [计算机基础](basic-computer/index.md) 4 | * [HTML](html/index.md) 5 | * [CSS](css/index.md) 6 | * [Javascript](javascript/index.md) 7 | * [React](react/index.md) 8 | * [Vue](vue/index.md) 9 | * [Node](node/index.md) 10 | * [算法](algorithm/index.md) 11 | * [综合其它](synthesize/index.md) 12 | 13 | * 其他 14 | * [Emoji自用-MarkDown](emoji.md) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-17.md: -------------------------------------------------------------------------------- 1 | # 淘气的map 2 | 3 | ```js 4 | var ary = Array(3); 5 | ary[0]=2 6 | ary.map(function(elem) { return '1'; }); 7 | ``` 8 | 9 | ?> ["1", undefined x 2] 10 | 11 | **参考资料：** 12 | 13 | [MDN: Array.prototype.map()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 14 | 15 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-20.md: -------------------------------------------------------------------------------- 1 | # 反转reverse 2 | 3 | ```js 4 | var x = [].reverse; 5 | x(); 6 | ``` 7 | 8 | ?> `结果是` window 9 | 10 | > `reverse()` 方法将数组中元素的位置颠倒,并返回该数组的引用 11 | 12 | **参考资料：** 13 | 14 | [MDN：Array.prototype.reverse()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 15 | 16 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/react/re-9.md: -------------------------------------------------------------------------------- 1 | # shouldComponentUpdate 的作用是啥以及为何它这么重要？ 2 | 3 | ?> 英：What does shouldComponentUpdate do and why is it important? 4 | 5 | **答：** 6 | 7 | > `shouldComponentUpdate` 允许我们手动地判断是否要进行组件更新 8 | 9 | > 根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新 10 | 11 | **参考资料：** 12 | 13 | [题目来源](https://segmentfault.com/a/1190000008102870) 14 | 15 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/css/css3-2.md: -------------------------------------------------------------------------------- 1 | # :before 和 ::before 区别? 2 | 3 | > **伪元素由双冒号和伪元素名称组成** 4 | 5 | ?> **单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。** 6 | 7 | > 双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等 8 | 9 | > 对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。 10 | 11 | **参考资料：** 12 | 13 | [MDN: ::before (:before)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before) 14 | -------------------------------------------------------------------------------- /docs/html/html-nk.md: -------------------------------------------------------------------------------- 1 | # 常见的浏览器内核有哪些？ 2 | 3 | > `Trident内核`：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML] 4 | 5 | > `Gecko内核`：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 6 | 7 | > `Presto内核`：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] 8 | 9 | > `Webkit内核`：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] 10 | 11 | ### 详细： 12 | 13 | [浏览器内核的解析和对比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-11.md: -------------------------------------------------------------------------------- 1 | # parseInt小贼 2 | 3 | ```js 4 | parseInt(3, 8); 5 | parseInt(3, 2); 6 | parseInt(3, 0); 7 | ``` 8 | 9 | ?> `结果是` 3, NaN, 3 10 | 11 | > **语法：parseInt(string, radix);** 12 | 13 | **参考资料：** 14 | 15 | [MDN: parseInt()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt) 16 | 17 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-30.md: -------------------------------------------------------------------------------- 1 | # 禁止修改函数名 2 | 3 | ```js 4 | function foo() { } 5 | var oldName = foo.name; 6 | foo.name = "bar"; 7 | [oldName, foo.name] 8 | ``` 9 | 10 | ?> `结果是` ["foo", "foo"] 11 | 12 | **参考资料：** 13 | 14 | [MDN: Function.name](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name) 15 | 16 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-34.md: -------------------------------------------------------------------------------- 1 | # 逗号定义数组 2 | 3 | ```js 4 | [,,,].join(", ") 5 | ``` 6 | 7 | ?> `结果是` ", , " 8 | 9 | > 所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null， 则会转化成空字符串。 10 | 11 | **参考资料：** 12 | 13 | [MDN: Array.prototype.join()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 14 | 15 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/this/this-2.md: -------------------------------------------------------------------------------- 1 | # 代码块题 2 | 3 | ### 请回答打印结果是什么 4 | 5 | ```js 6 | var num = 10; 7 | var obj = { 8 | num:8, 9 | inner: { 10 | num: 6, 11 | print: function () { 12 | console.log(this.num); 13 | } 14 | } 15 | } 16 | num = 888; 17 | obj.inner.print(); 18 | var fn = obj.inner.print; 19 | fn(); 20 | (obj.inner.print)(); 21 | (obj.inner.print = obj.inner.print)(); 22 | 23 | ``` -------------------------------------------------------------------------------- /docs/react/re-13.md: -------------------------------------------------------------------------------- 1 | # createElement 与 cloneElement 的区别是什么？ 2 | 3 | ?> 英：What is the difference between createElement and cloneElement? 4 | 5 | **答：** 6 | 7 | > `createElement` 函数是 `JSX` 编译之后使用的创建 `React Element` 的函数，而 `cloneElement` 则是用于复制某个元素并传入新的 `Props`。 8 | 9 | **参考资料：** 10 | 11 | [题目来源](https://segmentfault.com/a/1190000008102870) 12 | 13 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/javascript/basic/255.md: -------------------------------------------------------------------------------- 1 | # 懒加载除了滚轮监听还有什么？ 2 | 3 | - 交叉观察者 4 | 5 | > 利用`IntersectionObserver`接口 (从属于`Intersection Observer API`) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。 6 | 当子元素与父元素发生交叉，则表示进入可视区域啦。 7 | 8 | - [IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) 9 | 10 | - [题目来源](https://juejin.im/post/6854899692178948109#comment) 11 | -------------------------------------------------------------------------------- /docs/javascript/js-nan.md: -------------------------------------------------------------------------------- 1 | # NaN 是什么？它的类型是什么？你如何可靠地测试一个值是否等于 NaN ？ 2 | 3 | > NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。 4 | 5 | ** isNaN() 全局函数来判断一个值是否是 NaN 值** 6 | 7 | 8 | > 首先，**NaN 意味着“不是数字”，但它的类型是 Number** 9 | 10 | 11 | > 其次，**NaN 与所有值都不相等，包括它自己。** 12 | 13 | 14 | **一个更好的解决办法是使用 value !== value，如果值等于NaN，只会产生true。 15 | 另外，ES6提供了一个新的 Number.isNaN() 函数，这是一个不同的函数，并且比老的全局 isNaN() 函数更可靠。** -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-14.md: -------------------------------------------------------------------------------- 1 | # 如何合并数组中相邻且重复的元素? 2 | 3 | ```js 4 | // 示例 5 | merge([3,2,2,4,5,5,6,2,1]); // 输出[3,2,4,5,6,2,1] 6 | merge([3,2,3]); // 输出[3,2,3] 7 | merge([2,2,3]); // 输出[2,3] 8 | ``` 9 | 10 | **答案：** 11 | 12 | ``` 13 | (arr + ',').replace(/(\d+,)\1+/ig, '$1').split(',').slice(0, -1); 14 | ``` 15 | 16 | **题目来源：** 17 | 18 | [合并数组中相邻且重复的元素](https://juejin.im/pin/5c9383af51882544934703d5) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-22.md: -------------------------------------------------------------------------------- 1 | # 如何让(a===1&&a===2&&a===3)的值为true? 2 | 3 | ```js 4 | var value = 1; 5 | Object.defineProperty(window, "a", { 6 | get() { 7 | return this.value++; 8 | } 9 | }); 10 | 11 | if (a === 1 && a === 2 && a === 3) { 12 | console.log("你好!"); 13 | } 14 | ``` 15 | 16 | **题目来源：** 17 | 18 | [大厂面试题分享：如何让(a===1&&a===2&&a===3)的值为true?](https://juejin.im/post/5e66dc416fb9a07cab3aaa0a) 19 | -------------------------------------------------------------------------------- /docs/algorithm/11.md: -------------------------------------------------------------------------------- 1 | # IP还原 2 | 3 | > 给定一个只包含数字的字符串，复原它并返回所有可能的 IP 地址格式。 4 | 5 | > 有效的 IP 地址正好由四个整数（每个整数位于 0 到 255 之间组成），整数之间用 '.' 分隔。 6 | 7 | ### 示例: 8 | ``` 9 | 输入: "25525511135" 10 | 11 | 输出: ["255.255.11.135", "255.255.111.35"] 12 | ``` 13 | 14 | ### 请按以下函数实现 15 | 16 | ```js 17 | /** 18 | * @param {string} s 19 | * @return {string[]} 20 | */ 21 | 22 | function restoreIpAddresses(s) { 23 | 24 | }; 25 | ``` -------------------------------------------------------------------------------- /docs/basic-computer/http/http-7.md: -------------------------------------------------------------------------------- 1 | # 从输入URL到页面加载发生了什么 2 | 3 | **大概分为以下过程** 4 | 5 | - DNS解析 6 | 7 | - TCP连接 8 | 9 | - 发送HTTP请求 10 | 11 | - 服务器处理请求并返回HTTP报文 12 | 13 | - 浏览器解析渲染页面 14 | 15 | - 连接结束 16 | 17 | [cinwell website](https://segmentfault.com/a/1190000006879700 ':include :type=iframe width=100% height=800px') 18 | 19 | 20 | 21 | 22 | **参考资料：** 23 | 24 | [题目来源](https://segmentfault.com/a/1190000006879700) 25 | -------------------------------------------------------------------------------- /docs/css/css3-1.md: -------------------------------------------------------------------------------- 1 | # CSS3新增伪类有那些? 2 | 3 | - **p:first-of-type** 4 | 5 | > 选择属于其父元素的首个元素 6 | 7 | - **p:last-of-type** 8 | 9 | > 选择属于其父元素的最后元素 10 | 11 | - **p:only-of-type** 12 | 13 | > 选择属于其父元素唯一的元素 14 | 15 | - **p:only-child** 16 | 17 | > 选择属于其父元素的唯一子元素 18 | 19 | - **p:nth-child(2)** 20 | 21 | > 选择属于其父元素的第二个子元素 22 | 23 | - **:enabled :disabled ** 24 | 25 | > 表单控件的禁用状态。 26 | 27 | - **:checked** 28 | 29 | > 单选框或复选框被选中。 -------------------------------------------------------------------------------- /docs/javascript/array/array-1.md: -------------------------------------------------------------------------------- 1 | # 代码块 2 | 3 | ```js 4 | var obj = { 5 | "2": "a", 6 | "3": "b", 7 | "length": 2, 8 | "push": Array.prototype.push 9 | } 10 | obj.push("c"); 11 | obj.push("d"); 12 | 13 | ``` 14 | 15 | 16 | 通过上面的代码块得出 obj 的值是多少？ 17 | 18 | 19 | 答案： 20 | 21 | ```js 22 | 23 | var obj = { 24 | "2": "c", 25 | "3": "d", 26 | "length": 4, 27 | "push": Array.prototype.push 28 | } 29 | 30 | 31 | ``` -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-12.md: -------------------------------------------------------------------------------- 1 | # 严格模式下的执行结果如何？ 2 | 3 | ```js 4 | var num = 1; 5 | function codequn(){ 6 | 'use strict'; 7 | console.log('codequn: ',this.num++); 8 | } 9 | function codequn2(){ 10 | console.log('codequn2: ',++this.num); 11 | } 12 | (function(){ 13 | 'use strict'; 14 | codequn2(); 15 | })(); 16 | codequn(); 17 | ``` 18 | 19 | **结果：** 20 | > codequn2: 2 21 | > Cannot read property 'num' of undefined -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-34.md: -------------------------------------------------------------------------------- 1 | # typeof undefined == typeof NULL的结果？ 2 | 3 | ```js 4 | console.log(typeof undefined == typeof NULL); 5 | ``` 6 | 7 | ?> `结果是` true 8 | 9 | > 由于NULL将被视为任何其他未定义的变量，因此为true 10 | 11 | ```js 12 | console.log(typeof undefined == typeof null); 13 | ``` 14 | 15 | ?> `结果是` false 16 | 17 | > 解析：tyoeof null 是 object 18 | 19 | **参考资料：** 20 | 21 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/synthesize/com-3.md: -------------------------------------------------------------------------------- 1 | # webpack 中，filename 和 chunkFilename 的区别? 2 | 3 | ### Module 4 | 5 | !> filename 是一个很常见的配置，就是对应于 entry 里面的输入文件，经过webpack 打包后输出文件的文件名 6 | 7 | ### chunkFilename 8 | 9 | !> 未被列在 entry 中，却又需要被打包出来的 chunk 文件的名称。一般来说，这个 chunk 文件指的就是要懒加载的代码。 10 | 11 | **参考资料：** 12 | [webpack概念术语](https://webpack.docschina.org/glossary) 13 | 14 | **题目来源：** 15 | [webpack 中那些最易混淆的 5 个知识点](https://juejin.im/post/5cede821f265da1bbd4b5630) -------------------------------------------------------------------------------- /docs/css/css-link.md: -------------------------------------------------------------------------------- 1 | # CSS 引入的方式有哪些? link 和@import 的区别是? 2 | 3 | **四种：`内联(元素上的style属性)`、`内嵌(style标签)`、`外链(link)`、`导入(@import)`** 4 | 5 | ### link和@import的区别： 6 | 7 | ?> **link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。** 8 | 9 | ?> **link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。** 10 | 11 | ?> **link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。** 12 | 13 | ?> **link支持使用Javascript控制DOM去改变样式；而@import不支持。** 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-31.md: -------------------------------------------------------------------------------- 1 | # 执行以下代码时输出是什么？解释一下为什么？ 2 | 3 | ```js 4 | console.log(1 < 2 < 3); 5 | console.log(3 > 2 > 1); 6 | ``` 7 | 8 | ?> `结果是：` true false 9 | 10 | **对于运算符`>``<`,一般的计算`从左向右`** 11 | 12 | ?> 第一个题：`1 < 2` 等于 `true`, 然后`true < 3`，true == 1 ，因此结果是`true` 13 | 14 | ?> 第二个题：`3 > 2` 等于 `true`, 然后`true > 1`, true == 1 ，因此结果是`false` 15 | 16 | **参考资料：** 17 | 18 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-27.md: -------------------------------------------------------------------------------- 1 | # 数组比大小 2 | 3 | ```js 4 | var a = [1, 2, 3], 5 | b = [1, 2, 3], 6 | c = [1, 2, 4] 7 | a == b 8 | a === b 9 | a > c 10 | a < c 11 | ``` 12 | 13 | ?> `结果是` false false false true 14 | 15 | > `Array` 也是对象，如果两个数组指向同一个对象，对比相等之后返回 `true`，否则返回 `false` 16 | 17 | > 如果对比大小，则会通过`toString`转换成字符串进行比较，`[1, 2, 3]` < `[1, 2, 4]` 18 | 19 | **参考资料：** 20 | 21 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/array/array-2.md: -------------------------------------------------------------------------------- 1 | # 编写一个函数，进行数组去重 2 | 3 | **题目：编写一个函数 unique(arr)，返回一个去除数组内重复的元素的数组。** 4 | 5 | > unique([0, 1, 2, 2, 3, 3, 4, 5]) // => [0, 1, 2, 3, 4, 5] 6 | 7 | > unique([0, 1, '1', '1', 2]) // => [0, 1, '1', 2] 8 | 9 | ### 答案解析： 10 | 11 | ```js 12 | const unique = (arr) => [...new Set(arr)] 13 | ``` 14 | 15 | **set是Es6的数据结构** 16 | 17 | **参考资料：** 18 | 19 | [ECMAScript 6：Set 和 Map 数据结构](http://es6.ruanyifeng.com/#docs/set-map) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-12.md: -------------------------------------------------------------------------------- 1 | # 数组原型是数组 2 | 3 | ```js 4 | Array.isArray( Array.prototype ) 5 | ``` 6 | 7 | ?> `结果是` true 8 | 9 | > **Array.prototype.constructor** 10 | 11 | > 所有的数组实例都继承了这个属性，它的值就是 Array，表明了所有的数组都是由 Array 构造出来的。 12 | 13 | **参考资料：** 14 | 15 | [Array.prototype](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) 16 | 17 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/this/this-4.md: -------------------------------------------------------------------------------- 1 | # 代码块题 2 | 3 | ### 写出打印结果 4 | 5 | ```js 6 | var fullName = "alibaba"; 7 | var obj = { 8 | fullName:"baidu", 9 | prop:{ 10 | fullName:"tengxun", 11 | getFullName: function(){ 12 | return this.fullName; 13 | } 14 | } 15 | } 16 | console.log(obj.prop.getFullName());// tengxun 17 | var test = obj.prop.getFullName; 18 | console.log(test()); 19 | 20 | ``` 21 | 22 | `结果：` 23 | 24 | > tengxun alibaba -------------------------------------------------------------------------------- /demo.js: -------------------------------------------------------------------------------- 1 | // 记录面试题 2 | function LateBloomer(){ 3 | this.petalCount = Math.ceil(Math.random()*2 + 1); 4 | } 5 | LateBloomer.prototype.bloom = function(){ 6 | window.setTimeout(this.declare, 1000); 7 | } 8 | LateBloomer.prototype.declare = function(){ 9 | console.log('I am a beautiful flower with ' + this.petalCount + ' petals'); 10 | } 11 | var flower = new LateBloomer(); 12 | flower.bloom(); 13 | 14 | // I am a beautiful flower with undefined petals -------------------------------------------------------------------------------- /docs/basic-computer/browser/001.md: -------------------------------------------------------------------------------- 1 | # 常见的浏览器内核有哪些? 2 | 3 | |浏览器/RunTime|内核（渲染引擎|JavaScript 引擎| 4 | |----|----|----| 5 | |Chrome|Blink（28~）Webkit（Chrome 27）|V8| 6 | |FireFox|Gecko|SpiderMonkey| 7 | |Safari|Webkit|JavaScriptCore| 8 | |Edge|EdgeHTML|Chakra(for JavaScript)| 9 | |IE|Trident|Chakra(for JScript)| 10 | |PhantomJS|Webkit|JavaScriptCore| 11 | |Node.js|-|V8| 12 | 13 | **参考资料：** 14 | 15 | [题目来源](https://juejin.im/post/5d89798d6fb9a06b102769b1) 16 | -------------------------------------------------------------------------------- /docs/html/html-4.md: -------------------------------------------------------------------------------- 1 | # HTML5中的datalist是什么？ 2 | 3 | > ` `标签定义选项列表 4 | 5 | > 请与 input 元素配合使用该元素，来定义 input 可能的值 6 | 7 | > datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表 8 | 9 | ```html 10 | 11 | 12 | 16 | ``` 17 | 18 | **参考资料：** 19 | 20 | [HTML 5 标签](http://www.w3school.com.cn/html5/html5_datalist.asp) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-42.md: -------------------------------------------------------------------------------- 1 | # 匹配隐式转换 2 | 3 | ```js 4 | if ('http://giftwrapped.com/picture.jpg'.match('.gif')) { 5 | console.log('a gif file') 6 | } else { 7 | console.log('not a gif file') 8 | } 9 | ``` 10 | 11 | ?> `结果是` a gif file 12 | 13 | **参考资料：** 14 | 15 | [MDN: String.prototype.match()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/match) 16 | 17 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/basic/pro-1.md: -------------------------------------------------------------------------------- 1 | # 什么是原型，原型有什么特点? 2 | 3 | ?> `原型`是一个对象，其他对象可以通过它实现属性继承, 只有null除外，它没有自己的原型对象。 4 | 5 | > 原型对象上的所有属性和方法，都能被对应的构造函数创建的实例对象共享（这就是 JavaScript 继承机制的基本设计），也就是说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中 6 | 7 | > 每一个构造函数都有一个prototype（原型）属性，这个属性就是使用构造函数创建出来的实例对象的原型对象 8 | 9 | **参考资料：** 10 | 11 | [三张图搞懂JavaScript的原型对象与原型链](https://www.cnblogs.com/shuiyi/p/5305435.html) 12 | 13 | [题目来源](https://www.nowcoder.com/questionTerminal/dafdf862d4614009a9eab014a157dd83) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-7.md: -------------------------------------------------------------------------------- 1 | # 8、解释一下下面代码的输出? 2 | 3 | ``` 4 | console.log(0.1 + 0.2); 5 | console.log(0.1 + 0.2 == 0.3); 6 | ``` 7 | 8 | > `结果: ` 9 | 10 | > 0.30000000000000004 11 | 12 | > false 13 | 14 | 15 | **javascript的浮点数，高级程序设计有专门讲这个，具体详细可以去查看资料** 16 | 17 | **参考资料：** 18 | 19 | [【0.1 + 0.2 = 0.30000000000000004】该怎样理解？](http://www.cnblogs.com/zichi/p/5034201.html) 20 | 21 | [玉伯的一道课后题题解（关于 IEEE 754 双精度浮点型精度损失）](http://www.cnblogs.com/zichi/p/5043540.html) 22 | 23 | -------------------------------------------------------------------------------- /docs/html/iframe.md: -------------------------------------------------------------------------------- 1 | # iframe有哪些缺点？ 2 | 3 | > - iframe会阻塞主页面的Onload事件(过多会增加服务器的HTTP请求)； 4 | 5 | > - 搜索引擎的检索程序无法解读这种页面，不利于SEO; 6 | 7 | > - 页面样式调试麻烦，出现多个滚动条； 8 | 9 | > - 浏览器的后退按钮失效 10 | 11 | > - 产生多个页面，不易管理 12 | 13 | > - 不容易打印 14 | 15 | > - iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 16 | 17 | **使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题** 18 | 19 | **参考资料** 20 | 21 | [iframe的优缺点及改进方法](http://blog.csdn.net/katara1109/article/details/49073663) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-8.md: -------------------------------------------------------------------------------- 1 | # 9、写一个方法 isInterger(x)，可以用来判断一个变量是否是整数 2 | 3 | ?> Discuss possible ways to write a function isInteger(x) that determines if x is an integer. 4 | 5 | > `ES6` 中自带了 `Number.isInteger()` 方法 6 | 7 | **针对ES5的函数** 8 | 9 | ```js 10 | function isInteger(x) { 11 | return parseInt(x, 10) === x; 12 | } 13 | ``` 14 | 15 | **参考资料：** 16 | 17 | [Number.isInteger()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger) -------------------------------------------------------------------------------- /docs/react/re-10.md: -------------------------------------------------------------------------------- 1 | # 如何告诉 React 它应该编译生产环境版本？ 2 | 3 | ?> 英：How do you tell React to build in Production mode and what will that do? 4 | 5 | **答：** 6 | 7 | > 通常情况下我们会使用 `Webpack` 的 `DefinePlugin` 方法来将 `NODE_ENV` 变量值设置为 `production`。 8 | 9 | > 编译版本中 `React` 会忽略 `propType` 验证以及其他的告警信息，同时还会降低代码库的大小，`React` 使用了 `Uglify` 插件来移除生产环境下不必要的注释等信息。 10 | 11 | **参考资料：** 12 | 13 | [题目来源](https://segmentfault.com/a/1190000008102870) 14 | 15 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build and Release Folders 2 | bin/ 3 | bin-debug/ 4 | bin-release/ 5 | [Oo]bj/ # FlashDevelop obj 6 | [Bb]in/ # FlashDevelop bin 7 | 8 | # Other files and folders 9 | .settings/ 10 | 11 | # Executables 12 | *.swf 13 | *.air 14 | *.ipa 15 | *.apk 16 | 17 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 18 | # should NOT be excluded as they contain compiler settings and other important 19 | # information for Eclipse / Flash Builder. 20 | .history/* -------------------------------------------------------------------------------- /docs/javascript/promise-1.md: -------------------------------------------------------------------------------- 1 | # 代码块（阿里二面） 2 | 3 | ### 请回答打印的结果是多少？ 4 | 5 | ```js 6 | var p1=new Promise(resolve => { 7 | console.log(1) 8 | resolve(2) 9 | }) 10 | var p2=new Promise(resolve => { 11 | console.log(3) 12 | resolve(p1) 13 | }) 14 | p1.then(re => { 15 | console.log(re) 16 | }) 17 | p2.then(re => { 18 | console.log(re) 19 | }) 20 | 21 | ``` 22 | 23 | **参考资料：** 24 | 25 | [题目来源](https://segmentfault.com/q/1010000013721635?utm_source=feed-content) 26 | -------------------------------------------------------------------------------- /docs/algorithm/10.md: -------------------------------------------------------------------------------- 1 | # 岛屿 2 | 3 | > 现在给你一张地图的网格描述，一个由 '1' （陆地）和 '0' （水）组成的的二维网格，每座岛屿只能 4 | 由水平方向或竖直方向上相邻的陆地连接形成，请你统计出该地图中有多少个岛屿？ 5 | 6 | ![image](image/6.png) 7 | 8 | ### 示例 1: 9 | ``` 10 | 输入: 11110 11010 11000 00000 11 | 12 | 输出: 1 13 | ``` 14 | ### 示例 2: 15 | ``` 16 | 输入: 11000 11000 00100 00011 17 | 18 | 输出: 3 19 | ``` 20 | 21 | ### 请按以下函数实现 22 | ```js 23 | /** 24 | * @param {character[][]} 网格数组 25 | * @return {number} 26 | */ 27 | 28 | function numIslands(grid) { 29 | 30 | }; 31 | ``` -------------------------------------------------------------------------------- /docs/synthesize/webpack-hot.md: -------------------------------------------------------------------------------- 1 | # 介绍下webpack热更新原理，是如何做到在不刷新浏览器的前提下更新页面? 2 | 3 | `模块热替换(hot module replacement 或 HMR)`是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新。 4 | 5 | ![Image](image/webpack-hot.jpg) 6 | 7 | [webpack: 模块热替换](https://webpack.docschina.org/guides/hot-module-replacement/) 8 | 9 | [知乎: Webpack HMR 原理解析](https://zhuanlan.zhihu.com/p/30669007) 10 | 11 | **题目来源：** 12 | 13 | [介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/118) -------------------------------------------------------------------------------- /docs/javascript/array/array-4.md: -------------------------------------------------------------------------------- 1 | # 如何判断一个变量是否为数组？ 2 | 3 | ### Object.prototype.toString 4 | 5 | ```js 6 | var list = [1,2,3]; 7 | Object.prototype.toString.call(list); 8 | ``` 9 | 10 | ### Array.isArray() 11 | 12 | > Array.isArray() 用于确定传递的值是否是一个 Array 13 | 14 | ```js 15 | var list = [1,2,3]; 16 | Array.isArray(list); 17 | ``` 18 | 19 | **参考资料：** 20 | 21 | [Array.isArray()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-5.md: -------------------------------------------------------------------------------- 1 | # 神鬼莫测之变量提升 2 | 3 | ```js 4 | var name = 'World!'; 5 | (function () { 6 | if (typeof name === 'undefined') { 7 | var name = 'Jack'; 8 | console.log('Goodbye ' + name); 9 | } else { 10 | console.log('Hello ' + name); 11 | } 12 | })(); 13 | ``` 14 | 15 | ?> `答案：`Goodbye Jack 16 | 17 | 18 | **参考资料：** 19 | 20 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 21 | 22 | [MDN: 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) -------------------------------------------------------------------------------- /docs/javascript/this/this-3.md: -------------------------------------------------------------------------------- 1 | # 代码块题 2 | 3 | ### 写出打印结果 4 | 5 | ```js 6 | function Person(name, age, sex) { 7 | var a = 0;// 私有化变量 8 | this.name = name; 9 | this.age = age; 10 | this.sex = sex; 11 | function sss() { 12 | a ++; 13 | console.log(a); 14 | } 15 | this.say = sss; 16 | } 17 | var oPersopn = new Person(); 18 | oPersopn.say();// 打印结果？ 19 | oPersopn.say();// 打印结果？ 20 | var oPersopn1 = new Person(); 21 | oPersopn1.say();// 打印结果？ 22 | 23 | ``` 24 | 25 | `结果：` 26 | 27 | > 1 2 1 -------------------------------------------------------------------------------- /docs/css/css-hack.md: -------------------------------------------------------------------------------- 1 | # css hack原理及常用hack 2 | 3 | > CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的。所以对浏览器的选择大致可以分为能力选择和怪癖选择(BUG)。能力通常是指浏览器对CSS特性的支持程度，而怪癖是指浏览器特有的一些BUG。 4 | 5 | > 利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。 6 | 7 | - 条件Hack [【资料链接】](http://www.css88.com/book/css/hack/conditions.htm) 8 | 9 | - 属性级Hack [【资料链接】](http://www.css88.com/book/css/hack/properties.htm) 10 | 11 | - 选择符级Hack [【资料链接】](http://www.css88.com/book/css/hack/selectors.htm) 12 | 13 | **参考资料：** 14 | 15 | [CSS Hack](http://www.css88.com/book/css/hack/index.htm) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-13.md: -------------------------------------------------------------------------------- 1 | # 14、假设变量d是一个空的对象(object) 2 | 3 | ```js 4 | var d = {} 5 | ``` 6 | 7 | ### 使用以下代码完成了什么？ 8 | 9 | ```js 10 | ['zebra','horse'].forEach(function(k) { 11 | d[k] = undefined; 12 | }); 13 | 14 | ``` 15 | 16 | > 代码片段所示设置两个对象属性`d`.最理想的情况是，在一个取消关键的JavaScript对象评估未进行任何查询。 17 | 18 | > 但是运行此代码将这些属性标记为对象的“自己的属性”，并且赋值为`undefined` 19 | 20 | > 这是确保对象具有给定属性集的一个有用策略。通过这个对象将返回Object.keys与设置密钥以及阵列（即使它们的值是不确定的）。 21 | 22 | **参考资料：** 23 | 24 | [题目来源](https://www.toptal.com/javascript/interview-questions) 25 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-32.md: -------------------------------------------------------------------------------- 1 | # 如何在数组的开头添加元素？你怎么在结尾加上一个？ 2 | 3 | ### 官方答案： 4 | 5 | ```js 6 | var myArray = ['a', 'b', 'c', 'd']; 7 | myArray.push('end'); 8 | myArray.unshift('start'); 9 | console.log(myArray); // ["start", "a", "b", "c", "d", "end"] 10 | ``` 11 | 12 | ### ES6 13 | ```js 14 | myArray = ['start', ...myArray]; 15 | 16 | myArray = [...myArray, 'end']; 17 | 18 | myArray = ['start', ...myArray, 'end']; 19 | ``` 20 | 21 | 22 | **参考资料：** 23 | 24 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-10.md: -------------------------------------------------------------------------------- 1 | # 并非都是奇偶 2 | 3 | ```js 4 | function isOdd(num) { 5 | return num % 2 == 1; 6 | } 7 | function isEven(num) { 8 | return num % 2 == 0; 9 | } 10 | function isSane(num) { 11 | return isEven(num) || isOdd(num); 12 | } 13 | var values = [7, 4, '13', -9, Infinity]; 14 | values.map(isSane); 15 | ``` 16 | 17 | ?> `结果：` [true, true, true, false, false] 18 | 19 | > 注意：`Infinity % 2 = NaN` `-9 % 2 = -1` 20 | 21 | **参考资料：** 22 | 23 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-21.md: -------------------------------------------------------------------------------- 1 | # 22、执行以下代码时输出是什么？解释一下为什么？ 2 | 3 | ```js 4 | var a={}, 5 | b={key:'b'}, 6 | c={key:'c'}; 7 | 8 | a[b]=123; 9 | a[c]=456; 10 | 11 | console.log(a[b]); 12 | ``` 13 | 14 | ?> `结果：`456 15 | 16 | ### 解析： 17 | 18 | `变量a`在执行赋值操作`a[b]=123`之后： 19 | ```js 20 | { 21 | "[object Object]":123 22 | } 23 | ``` 24 | 25 | 继续赋值操作`a[c]=456;` 26 | 27 | ```js 28 | { 29 | "[object Object]":456 30 | } 31 | ``` 32 | 33 | **参考资料：** 34 | 35 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-18.md: -------------------------------------------------------------------------------- 1 | # 对于arguments 2 | 3 | ```js 4 | function sidEffecting(ary) { 5 | ary[0] = ary[2]; 6 | } 7 | function bar(a,b,c) { 8 | c = 10 9 | sidEffecting(arguments); 10 | return a + b + c; 11 | } 12 | bar(1,1,1); 13 | ``` 14 | 15 | ?> `结果是` 21 16 | 17 | > **在JavaScript中，参数变量和 arguments 是双向绑定的。改变参数变量，arguments 中的值会立即改变；而改变 arguments 中的值，参数变量也会对应改变。** 18 | 19 | **参考资料：** 20 | 21 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 22 | 23 | [参考解析](http://f2ex.cn/do-you-really-know-javascript/) -------------------------------------------------------------------------------- /docs/vue/v-2.md: -------------------------------------------------------------------------------- 1 | # 写React/Vue项目时为什么要在组件中写key，其作用是什么? 2 | 3 | > key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度 4 | 5 | 6 | vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff 函数中。可以先了解一下 diff 算法。 7 | 8 | 在交叉对比的时候，当新节点跟旧节点头尾交叉对比没有结果的时候，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。如果没找到就认为是一个新增节点。而如果没有 key，那么就会采用一种遍历查找的方式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言。map 映射的速度更快。 9 | 10 | **题目来源：** 11 | 12 | [写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1) -------------------------------------------------------------------------------- /docs/html/html-line.md: -------------------------------------------------------------------------------- 1 | # 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 2 | 3 | ### 行内元素 4 | 5 | > a、b、span、img、input、strong、select、label、em、button、textarea 6 | 7 | ### 块级元素 8 | > div、ul、li、dl、dt、dd、p、h1-h6、blockquote 9 | 10 | ### 空元素 11 | > 即系没有内容的HTML元素，例如：br、meta、hr、link、input、img 12 | 13 | **参考资料：** 14 | 15 | [MDN: 行内元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente) 16 | 17 | [MDN: 块级元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements) 18 | 19 | [来源](https://juejin.im/post/5a954add6fb9a06348538c0d) -------------------------------------------------------------------------------- /docs/javascript/array/array-6.md: -------------------------------------------------------------------------------- 1 | # 已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组(腾讯) 2 | 3 | ```js 4 | var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10] 5 | // 扁平化 6 | let flatArr = arr.flat(4) 7 | // 去重 8 | let disArr = Array.from(new Set(flatArr)) 9 | // 排序 10 | let result = disArr.sort(function(a, b) { 11 | return a-b 12 | }) 13 | console.log(result) 14 | // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] 15 | ``` -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-21.md: -------------------------------------------------------------------------------- 1 | # 最小的正值 2 | 3 | ```js 4 | Number.MIN_VALUE > 0 5 | ``` 6 | 7 | ?> `结果是` true 8 | 9 | > `Number.MIN_VALUE` 属性表示在 JavaScript 中所能表示的最小的正值 10 | 11 | > `MIN_VALUE` 属性是 JavaScript 里最接近 0 的正值，而不是最小的负值 12 | 13 | > `MIN_VALUE` 的值约为 `5e-324`。小于 `MIN_VALUE` ("underflow values") 的值将会转换为 `0`。 14 | 15 | **参考资料：** 16 | 17 | [MDN: Number.MIN_VALUE](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE) 18 | 19 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-28.md: -------------------------------------------------------------------------------- 1 | # 原型把戏 2 | 3 | ```js 4 | var a = {}, b = Object.prototype; 5 | [a.prototype === b, Object.getPrototypeOf(a) === b] 6 | ``` 7 | 8 | ?> `结果是` [false,true] 9 | 10 | > `对象a`没有`prototype`属性，因此是undefined 11 | 12 | ?> `Object.getPrototypeOf()` 方法返回指定对象的原型（内部`[[Prototype]]`属性的值） 13 | 14 | **参考资料：** 15 | 16 | [MDN: Object.getPrototypeOf()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf) 17 | 18 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/algorithm/index.md: -------------------------------------------------------------------------------- 1 | # 算法 2 | 3 | * [leetcode题解，记录自己的leetcode解题之路](https://github.com/azl397985856/leetcode) 4 | * [JavaScript 算法与数据结构](https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md) 5 | * [用动画的形式呈现解LeetCode题目的思路](https://github.com/MisterBooo/LeetCodeAnimation) 6 | * [代码可视化算法的交互式在线平台](https://github.com/algorithm-visualizer/algorithm-visualizer) 7 | * [手把手撕LeetCode题目，扒各种算法套路的裤子](https://github.com/labuladong/fucking-algorithm) 8 | * [LeetCode按照怎样的顺序来刷题比较好？](https://www.zhihu.com/question/36738189/answer/908664455) -------------------------------------------------------------------------------- /docs/javascript/basic/settimeout.md: -------------------------------------------------------------------------------- 1 | # setTimeout最小间隔4ms的问题 2 | 3 | ```js 4 | setTimeout(()=>{console.log(5)},5) 5 | setTimeout(()=>{console.log(4)},4) 6 | setTimeout(()=>{console.log(3)},3) 7 | setTimeout(()=>{console.log(2)},2) 8 | setTimeout(()=>{console.log(1)},1) 9 | setTimeout(()=>{console.log(0)},0) 10 | ``` 11 | 12 | ### 不同的浏览器打印结果不一样？ 13 | 14 | - Chrome+Safari(mac) 15 | 16 | > 1 0 2 3 4 5 17 | 18 | - Firefox(mac) 19 | 20 | > 0 1 2 3 4 5 21 | 22 | **参考资料：** 23 | 24 | [问题来源](https://segmentfault.com/q/1010000014975261) -------------------------------------------------------------------------------- /docs/synthesize/com-4.md: -------------------------------------------------------------------------------- 1 | # webpackPrefetch、webpackPreload 和 webpackChunkName 到底是干什么的？ 2 | 3 | ### webpackPrefetch 4 | 5 | !> 浏览器闲置下载文件 6 | 7 | ### webpackPreload 8 | 9 | !> 会在父 chunk 加载时并行下载文件 10 | 11 | ### webpackChunkName 12 | 13 | !> 新 chunk 的名称。从 webpack 2.6.0 开始，[index] and [request] 占位符，分别支持赋予一个递增的数字和实际解析的文件名。 14 | 15 | 16 | **参考资料：** 17 | [webpack magic comments](https://webpack.docschina.org/api/module-methods/#magic-comments) 18 | 19 | **题目来源：** 20 | [webpack 中那些最易混淆的 5 个知识点](https://juejin.im/post/5cede821f265da1bbd4b5630) -------------------------------------------------------------------------------- /docs/node/n-1.md: -------------------------------------------------------------------------------- 1 | # 什么是错误优先的回调函数？ 2 | 3 | ?> 错误优先的回调函数用于传递错误和数据。第一个参数始终应该是一个错误对象， 用于检查程序是否发生了错误。 4 | 5 | ?> 第二个参数作为成功响应的数据， 如果没有异常， error会被设为null 第二个成功的数据就会被返回. 6 | 7 | ```js 8 | fs.readFile(filePath, function(err, data) { 9 | if (err) { 10 | //handle the error 11 | } // use the data object 12 | }); 13 | ``` 14 | 15 | 或 16 | 17 | ```js 18 | fs.readFile('/etc/passwd',function(err,data){ 19 | if(err) throw err; 20 | console.log(data) 21 | }) 22 | ``` 23 | 24 | **参考资料：** 25 | 26 | [题目来源](https://www.imooc.com/article/2949) 27 | -------------------------------------------------------------------------------- /docs/synthesize/com-5.md: -------------------------------------------------------------------------------- 1 | # webpack 中，hash、chunkhash、contenthash 有什么不同？ 2 | 3 | ### hash 4 | 5 | !> 计算与整个项目的构建相关，构建生成的文件hash值都是一样的，所以hash计算是跟整个项目的构建相关，同一次构建过程中生成的hash都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。 6 | 7 | ### chunkhash 8 | 9 | !> 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。 10 | 11 | ### contenthash 12 | 13 | !> 计算与文件内容本身相关，由文件内容产生的hash值，内容不同产生的contenthash值也不一样 14 | 15 | **参考资料：** 16 | [webpack](https://webpack.docschina.org/concepts/) 17 | 18 | **题目来源：** 19 | [webpack 中那些最易混淆的 5 个知识点](https://juejin.im/post/5cede821f265da1bbd4b5630) -------------------------------------------------------------------------------- /docs/react/re-12.md: -------------------------------------------------------------------------------- 1 | # 概述下 React 中的事件处理逻辑 2 | 3 | ?> 英：Describe how events are handled in React. 4 | 5 | **答：** 6 | 7 | > 为了解决跨浏览器兼容性问题，`React` 会将浏览器原生事件（`Browser Native Event`）封装为合成事件（`SyntheticEvent`）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。 8 | 9 | > 另外有意思的是，`React` 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 `React` 在更新 `DOM` 的时候就不需要考虑如何去处理附着在 `DOM` 上的事件监听器，最终达到优化性能的目的。 10 | 11 | **参考资料：** 12 | 13 | [题目来源](https://segmentfault.com/a/1190000008102870) 14 | 15 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-9.md: -------------------------------------------------------------------------------- 1 | # 设计一个策略和方法，实现在https的前端项目里进行http请求 2 | 3 | **有人提到反向代理，也有人说混合内容** 4 | 5 | ### 混合内容 6 | 7 | !> 使用HTTP的内容包含在一个HTTPS页面内，但它不能改变网页的其他部分。例如，攻击者可以用一个不适当的图像或消息替换网页中一个使用HTTP的图像。攻击者也可以通过提供给用户的图像推断出用户的活动状况；某些图像往往只会在一个网站的一个特定页面上。如果攻击者观察到用户以HTTP请求这些图像，他就可以确定用户正在访问哪些网页。 8 | 9 | 更详细的答案可以去题目来源看，或者自查资料 10 | 11 | **参考资料：** 12 | 13 | [混合内容 - 安全 | MDN](https://developer.mozilla.org/zh-CN/docs/Security/MixedContent) 14 | 15 | **题目来源：** 16 | 17 | [设计一个策略和方法，实现在https的前端项目里进行http请求](https://github.com/airuikun/Weekly-FE-Interview/issues/28) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-28.md: -------------------------------------------------------------------------------- 1 | # 29、下面的代码块输出的结果是什么？ 2 | 3 | ```js 4 | var x = 21; 5 | var girl = function () { 6 | console.log(x); 7 | var x = 20; 8 | }; 9 | girl (); 10 | ``` 11 | 12 | ?> `结果是` undefined 13 | 14 | ### 解析： 15 | 16 | 上面代码块改一下就懂了 17 | 18 | ```js 19 | var x = 21;// 外部变量x并且赋值为21 20 | var girl = function () { 21 | var x;// 定义内部变量x 22 | console.log(x);// 此时x为undefined 23 | x = 20;// x赋值20 24 | }; 25 | girl (); 26 | ``` 27 | 28 | 29 | **参考资料：** 30 | 31 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/this/this-5.md: -------------------------------------------------------------------------------- 1 | # 5、代码块题 2 | 3 | ```js 4 | 5 | var name = "This window"; 6 | var object = { 7 | name: "My object", 8 | getFn: function(){ 9 | return function(){ 10 | return this.name; 11 | } 12 | }, 13 | getName:function(){ 14 | var that = this; 15 | return function(){ 16 | console.log(that.name); 17 | } 18 | } 19 | } 20 | console.log(object.getFn()()); 21 | console.log(object.getName()()); 22 | ``` 23 | 24 | **结果：** 25 | 26 | ``` 27 | This window 28 | My object 29 | ``` 30 | 31 | 32 | -------------------------------------------------------------------------------- /docs/basic-computer/browser/253.md: -------------------------------------------------------------------------------- 1 | # 从页面 A 打开一个新页面 B，B 页面关闭（包括意外崩溃），如何通知 A 页面？（腾讯） 2 | 3 | > 注意：B页面关闭有两种情况，正常关闭和意外崩溃关闭 4 | 5 | ### 正常关闭 6 | 7 | - `window.onbeforeunload` 8 | 9 | > 当窗口即将被卸载（关闭）时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消. 10 | 11 | - `window.onunload` 12 | 13 | > 当页面关闭后,会触发unload事件. 14 | 15 | ### 意外崩溃关闭 16 | 17 | > service-worker：采用`心跳检测`来检测页面是否崩溃，通过时间间隔进行检测页面返回 18 | 19 | - [题目来源](https://juejin.im/post/6854899692178948109#comment) 20 | 21 | - [Service Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-13.md: -------------------------------------------------------------------------------- 1 | # 如何修复输出值中的 undefined ？(阿里) 2 | 3 | ```js 4 | function LateBloomer(){ 5 | this.petalCount = Math.ceil(Math.random()*2 + 1); 6 | } 7 | LateBloomer.prototype.bloom = function(){ 8 | window.setTimeout(this.declare, 1000); 9 | } 10 | LateBloomer.prototype.declare = function(){ 11 | console.log('I am a beautiful flower with ' + this.petalCount + ' petals'); 12 | } 13 | var flower = new LateBloomer(); 14 | flower.bloom(); 15 | ``` 16 | > 结果： I am a beautiful flower with undefined petals 17 | 18 | **那么怎么修复输出值中的undefined？** 19 | -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-6.md: -------------------------------------------------------------------------------- 1 | # 对连字符串转换为驼峰命名法 2 | 3 | ### 要求： 4 | 5 | > 比如字符串`get-element-by-id`,转换成`getElementById` 6 | 7 | ```js 8 | function hump(str){ 9 | return str.replace(/-(\w)/g,function($0,$1){ 10 | return $1.toUpperCase(); 11 | }) 12 | } 13 | ``` 14 | 15 | ```js 16 | function hump(str){ 17 | return str.replace(/-(\w)/g,function(x){ 18 | return x.slice(1).toUpperCase(); 19 | }) 20 | } 21 | ``` 22 | 23 | **参考资料：** 24 | 25 | [MDN: 正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions) -------------------------------------------------------------------------------- /docs/react/re-14.md: -------------------------------------------------------------------------------- 1 | # 传入 setState 函数的第二个参数的作用是什么？ 2 | 3 | ?> 英：What is the second argument that can optionally be passed to setState and what is its purpose? 4 | 5 | **答：** 6 | 7 | > 该函数会在`setState`函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成： 8 | 9 | ```js 10 | this.setState( 11 | { username: 'tylermcginnis33' }, 12 | () => console.log('setState has finished and the component has re-rendered.') 13 | ) 14 | ``` 15 | 16 | **参考资料：** 17 | 18 | [题目来源](https://segmentfault.com/a/1190000008102870) 19 | 20 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/basic-computer/browser/007.md: -------------------------------------------------------------------------------- 1 | # 浏览器的渲染过程 2 | 3 | ### 关键渲染路径 4 | 5 | !> 关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给用户能看到的界面这整个过程。 6 | 7 | ### 渲染过程 8 | 9 | - 1、浏览器将获取的HTML文档解析成DOM树。 10 | - 2、处理CSS标记，构成层叠样式表模型CSSOM(`CSS Object Model`)。 11 | - 3、将DOM和CSSOM合并为渲染树(`rendering tree`)，代表一系列将被渲染的对象。 12 | - 4、渲染树的每个元素包含的内容都是计算过的，它被称之为布局`layout`。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。 13 | - 5、将渲染树的各个节点绘制到屏幕上，这一步被称为绘制`painting`。 14 | 15 | ![image](../image/browser/3.jpg) 16 | 17 | **推荐阅读：** 18 | 19 | * [浏览器渲染原理与过程](https://www.jianshu.com/p/e6252dc9be32) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-7.md: -------------------------------------------------------------------------------- 1 | # undefined与null的区别 2 | 3 | ### null 4 | 5 | > Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值 6 | 7 | ### undefined 8 | 9 | > Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined 10 | 11 | ?> `null` 和 `undefined`都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺 12 | 13 | ?> **`null`是一个表示`"无"`的对象，转为数值时为`0`；`undefined`是一个表示`"无"`的原始值，转为数值时为`NaN`** 14 | 15 | 更加详细请读阮一峰大神的`undefined与null的区别` 16 | 17 | **参考资料：** 18 | 19 | [阮一峰：undefined与null的区别](http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null) 20 | -------------------------------------------------------------------------------- /docs/react/re-1.md: -------------------------------------------------------------------------------- 1 | # 调用 setState 之后发生了什么？ 2 | 3 | ?> 英：What happens when you call setState? 4 | 5 | **答：** 6 | 7 | > 在代码中调用`setState`函数之后，`React` 会将传入的参数对象与组件当前的状态合并， 8 | 9 | > 然后触发所谓的调和过程`（Reconciliation）`。经过调和过程，`React` 会以相对高效的方式根据新的状态构建 `React `元素树并且着手重新渲染整个UI界面。 10 | 11 | > 在 `React` 得到元素树之后，`React` 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。 12 | 13 | > 在差异计算算法中，`React` 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。 14 | 15 | **参考资料：** 16 | 17 | [题目来源](https://segmentfault.com/a/1190000008102870) 18 | 19 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/algorithm/8.md: -------------------------------------------------------------------------------- 1 | # 轮回之数组的移动 2 | 3 | 给定一个具有 n 个元素的数组和一个数字 k，将数组中的元素向右移动 k 个位置，其中 k 是非负数，最 4 | 右侧的元素将移动到最左侧补齐空位 5 | 6 | > n <= 1000 7 | 8 | > k <= 100000000 9 | 10 | ### 示例 1: 11 | 12 | ```js 13 | 输入: [1,2,3,4,5,6,7] 和 k = 3 14 | 输出: [5,6,7,1,2,3,4] 15 | 16 | 解释: 17 | 第 1 步: [7,1,2,3,4,5,6] 18 | 第 2 步: [6,7,1,2,3,4,5] 19 | 第 3 步: [5,6,7,1,2,3,4] 20 | ``` 21 | 22 | ### 请按以下函数实现 23 | 24 | ```js 25 | /** 26 | * @param {number[]} nums 移动前 27 | * @param {number} k 28 | * @return {number[]} nums 移动后 29 | */ 30 | function rotate(nums, k) { 31 | 32 | }; 33 | ``` -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-25.md: -------------------------------------------------------------------------------- 1 | # 创建一个函数，给定页面上的DOM元素，将访问元素本身和它的所有后代（不只是其直系子女）。对于所访问的每个元素，函数应该将该元素传递给所提供的回调函数。 2 | 3 | **函数接受两个参数：** 4 | - **DOM** 5 | - **指定的回调函数** 6 | 7 | ### 官方答案（深度优先搜索(Depth-First-Search) ）： 8 | 9 | ```js 10 | function Traverse(p_element,p_callback) { 11 | p_callback(p_element); 12 | var list = p_element.children; 13 | for (var i = 0; i < list.length; i++) { 14 | Traverse(list[i],p_callback); // recursive call 15 | } 16 | } 17 | ``` 18 | 19 | 20 | **参考资料：** 21 | 22 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-39.md: -------------------------------------------------------------------------------- 1 | # min与max共舞 2 | 3 | ```js 4 | var min = Math.min(), max = Math.max() 5 | console.log(min < max); 6 | ``` 7 | 8 | ?> `结果是` false 9 | 10 | ?> `Math.min`描述：如果没有参数，结果为Infinity。 11 | 12 | ?> `Math.max`描述: 如果没有参数，结果为-Infinity。 13 | 14 | **参考资料：** 15 | 16 | [MDN：Math.min](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/min) 17 | 18 | [MDN：Math.max](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/max) 19 | 20 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/regexp/regexp-5.md: -------------------------------------------------------------------------------- 1 | # 判断是否符合 USD 格式 2 | 3 | ### 要求 4 | 5 | > 给定字符串 str，检查其是否符合美元书写格式 6 | 7 | > 1、以 `$` 开始 8 | 9 | > 2、整数部分，从个位起，满 3 个数字用 , 分隔 10 | 11 | > 3、如果为小数，则小数部分长度为 2 12 | 13 | > 4、正确的格式如：$1,023,032.03 或者 $2.03，错误的格式如：$3,432,12.12 或者 $34,344.3 14 | 15 | ```js 16 | function isUSD(str) { 17 | return /^\$\d{1,3}(,\d{3})*(\.\d{2})?$/.test(str); 18 | } 19 | ``` 20 | 21 | **参考资料：** 22 | 23 | [正则表达式](http://www.runoob.com/regexp/regexp-syntax.html) 24 | 25 | [MDN: 正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions) -------------------------------------------------------------------------------- /docs/react/re-16.md: -------------------------------------------------------------------------------- 1 | # setState更新state何时同步何时异步？ 2 | 3 | > React控制的事件处理程序，以及生命周期函数调用`setState`不会同步更新state 。 4 | 5 | > React控制之外的事件中调用`setState`是同步更新的。比如原生js绑定`addEventListener`的事件，`setTimeout/setInterval`等。 6 | 7 | ```js 8 | componentDidMount() { 9 | // js原生绑定 10 | document.getElementById('btn').addEventListener('clcik', () => { 11 | this.setState({ count: this.state.count + 1}) 12 | console.log(this.state.count) 13 | }) 14 | } 15 | 16 | setTimeout(() => { 17 | this.setState({ count: this.state.count + 1}) 18 | console.log(this.state.count) 19 | }, 10) 20 | ``` -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-38.md: -------------------------------------------------------------------------------- 1 | # Date的面具 2 | 3 | ```js 4 | var a = Date(0); 5 | var b = new Date(0); 6 | var c = new Date(); 7 | [a === b, b === c, a === c]; 8 | ``` 9 | 10 | ?> `结果是` [false,false,false] 11 | 12 | > 需要注意的是只能通过调用 Date 构造函数来实例化日期对象：以常规函数调用它（即不加 new 操作符）将会返回一个字符串，而不是一个日期对象。另外，不像其他JavaScript 类型，Date 对象没有字面量格式。 13 | 14 | > **a是字符串，b和c是Date对象，并且b代表的是1970年那个初始化时间，而c代表的是当前时间。** 15 | 16 | **参考资料：** 17 | 18 | [MDN: Date](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date) 19 | 20 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-1.md: -------------------------------------------------------------------------------- 1 | # http 2.0对于http 1.x有哪些优点？ 2 | 3 | ### 多路复用 4 | 5 | > 多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。由于http 1.x的时代中，浏览器向同一域名下发送的http请求数量是受限的，当超出数量限制时，请求会被阻塞，大大降低了用户体验。而HTTP/2 的多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。 6 | 7 | ### 二进制分帧 8 | 9 | > HTTP/2在应用层和传输层之间追加了一个二进制分帧层，最终使得多个数据流共用一个连接，更加高效的使用tcp连接。从而使得服务器的连接压力减轻，降低了内存的消耗，增大了网络的吞吐量。 10 | 11 | ### 首部压缩 12 | 13 | > HTTP/2引入了HPACK算法对头部进行压缩，大大减小了数据发送的字节数。 14 | 15 | 16 | **参考资料：** 17 | 18 | [知乎：HTTP/2.0 相比1.0有哪些重大改进？](https://www.zhihu.com/question/34074946) 19 | [题目来源](https://zhuanlan.zhihu.com/p/32565654) 20 | -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-4.md: -------------------------------------------------------------------------------- 1 | # 头痛的优先级 2 | 3 | ```js 4 | var val = 'smtg'; 5 | console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing'); 6 | ``` 7 | 8 | ?> `结果是` Something 9 | 10 | ### 解析： 11 | 12 | **运算符`+`优先于运算符`?`** 13 | 14 | 因此题目就会变为 15 | ``` 16 | ('Value is ' + (val === 'smtg')) ? 'Something' : 'Nothing' 17 | 等于 18 | true ? 'Something' : 'Nothing' 19 | ``` 20 | **参考资料：** 21 | 22 | [MDN: 表达式和运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BC%98%E5%85%88%E7%BA%A7(Operator_precedence)) 23 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-10.md: -------------------------------------------------------------------------------- 1 | # 11、写一个少于 80 字符的函数，判断一个字符串是不是回文字符串 2 | 3 | ```js 4 | function isPalindrome(str) { 5 | str = str.replace(/\W/g, '').toLowerCase(); 6 | return (str == str.split('').reverse().join('')); 7 | } 8 | ``` 9 | 10 | ### ps测试 11 | 12 | ```js 13 | console.log(isPalindrome("level")); // logs 'true' 14 | console.log(isPalindrome("levels")); // logs 'false' 15 | console.log(isPalindrome("A car, a man, a maraca")); // logs 'true' 16 | ``` 17 | 18 | **参考资料：** 19 | 20 | [题目来源](https://www.toptal.com/javascript/interview-questions) 21 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-33.md: -------------------------------------------------------------------------------- 1 | # 下面有个代码块，根据赋值查看结果 2 | 3 | ```js 4 | var a = [1, 2, 3]; 5 | ``` 6 | 7 | ### 这样会发生崩溃吗？ 8 | 9 | ```js 10 | a[10] = 99; 11 | ``` 12 | ?> 不会崩溃，JavaScript引擎将使数组插槽3到9成为“空槽”。 13 | 14 | ### 这样会输出什么？ 15 | 16 | ```js 17 | console.log(a[6]); 18 | ``` 19 | 20 | ?> `结果是` undefined 21 | 22 | ```js 23 | var b = [undefined]; 24 | b[2] = 1; 25 | console.log(b); // (3) [undefined, empty × 1, 1] 26 | console.log(b.map(e => 7)); // (3) [7, empty × 1, 7] 27 | ``` 28 | 29 | **参考资料：** 30 | 31 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-24.md: -------------------------------------------------------------------------------- 1 | # 小数点魔法 2 | 3 | ```js 4 | 3.toString() 5 | 3..toString() 6 | 3...toString() 7 | ``` 8 | 9 | ?> `结果是` error "3" error 10 | 11 | > 点运算符会被优先识别为数字常量的一部分，然后才是对象属性访问符 12 | 13 | > `3.toString()` 会被JS引擎解析成 `(3.)toString()` `3` 14 | 15 | > `3..toString()` 会被JS引擎解析成 `(3.).toString()` `error` 16 | 17 | > `3...toString()` 会被JS引擎解析成 `(3.)..toString()` `error` 18 | 19 | **参考资料：** 20 | 21 | [MDN: 运算符优先级](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) 22 | 23 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/vue/temp.md: -------------------------------------------------------------------------------- 1 | # vue 如何解析模板？ 2 | 3 | ?> `Vue.js` 使用了基于 HTML 的模板语法，允许开发者声明式地将 `DOM` 绑定至底层 `Vue` 实例的数据。所有 `Vue.js` 的模板都是合法的 `HTML` ，所以能被遵循规范的浏览器和 `HTML` 解析器解析。 4 | 5 | ?> 在底层的实现上，`Vue` 将模板编译成`虚拟 DOM` 渲染函数。结合响应系统，`Vue` 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 6 | 7 | - **模板就是一段字符串，非结构化的数据，没法分析。因此，第一步是将非结构化的模板字符串，转变成结构化的 JS 对象，抽象语法树，即 AST 。其实就是一个 JS 对象，这样就结构化了。** 8 | 9 | - **第二步，将 AST 转换成一个 render 函数，步骤是先转换为一段函数体的字符串，然后再用new Function(...)生成函数。** 10 | 11 | - **第三部，渲染时执行 `render` 函数，返回虚拟 DOM 对象，然后执行虚拟 DOM 的patch方法，渲染成真正的 html 。** 12 | 13 | **参考资料：** 14 | 15 | [VUE官网](https://cn.vuejs.org/) 16 | -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-13.md: -------------------------------------------------------------------------------- 1 | # 强制转换 2 | 3 | ```js 4 | var a = [0]; 5 | if ([0]) { 6 | console.log(a == true); 7 | } else { 8 | console.log("wut"); 9 | } 10 | ``` 11 | 12 | ?> `结果是` false 13 | 14 | ### 解析： 15 | 16 | > `[0]`被强制转换成`Boolean`会被认为是`true`, `==` 相等中，如果有一个操作数是布尔类型，会先把他转成数字，所以比较变成了 `[0] == 1`；同时规范指出如果其他类型和数字比较，会尝试把这个类型转成数字再进行宽松比较，而对象（数组也是对象）会先调用它的 `toString()` 方法，此时 `[0]` 会变成 `"0"`，然后将字符串 `"0"` 转成数字 `0`，而 `0 == 1` 的结果显然是 `false`。 17 | 18 | **参考资料：** 19 | 20 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 21 | 22 | [参考解析](http://f2ex.cn/do-you-really-know-javascript/) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-4.md: -------------------------------------------------------------------------------- 1 | # 在下面的IP地址中属于C类地址的是哪一个 2 | 3 | ?> A.126.0.1.0 4 | 5 | ?> B.191.3.3.3 6 | 7 | ?> C.192.234.111.123 8 | 9 | ?> D.128.34.45.56 10 | 11 | > `答案选择：`**C** 12 | 13 | **解析：** 14 | 15 | > A类网络的IP地址范围为：1.0.0.1－126.255.255.254； 16 | 17 | > B类网络的IP地址范围为：128.1.0.1－191.255.255.254； 18 | 19 | > C类网络的IP地址范围为：192.0.1.1－223.255.255.254 20 | 21 | **参考资料：** 22 | 23 | [题目来源](https://www.nowcoder.com/questionTerminal/cc4062d3ff6d42dc959c99a46641d48a?orderByHotValue=1&mutiTagIds=644&page=1&onlyReference=false) 24 | 25 | [IP地址为什要分类？就是a类,b类,c类?](https://www.zhihu.com/question/31766172) -------------------------------------------------------------------------------- /docs/css/css-1.md: -------------------------------------------------------------------------------- 1 | # 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 2 | 3 | > CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 4 | 5 | > 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 6 | 7 | - `Margin(外边距)` - 清除边框外的区域，外边距是透明的。 8 | - `Border(边框)` - 围绕在内边距和内容外的边框。 9 | - `Padding(内边距)` - 清除内容周围的区域，内边距是透明的。 10 | - `Content(内容)` - 盒子的内容，显示文本和图像。 11 | 12 |
13 | ![image](images/css_articlex.gif) 14 |
15 | 16 | > `标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin` 17 | 18 | > `低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin` 19 | 20 | **参考资料：** 21 | 22 | [CSS盒子模型](http://www.runoob.com/css/css-boxmodel.html) -------------------------------------------------------------------------------- /docs/css/css-height.md: -------------------------------------------------------------------------------- 1 | # 不定宽高的 DIV，垂直水平居中 2 | 3 | ### CSS3 transform 4 | 5 | > 父盒子设置:position:relative 6 | 7 | > Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%; 8 | 9 | ### Flex 10 | > 父盒子设置：display: flex; justify-content: center;align-items: center; 11 | 12 | ### display:table-cell 13 | > 父盒子设置:display:table-cell; text-align:center;vertical-align:middle; 14 | 15 | > Div 设置: display:inline-block;vertical-align:middle; 16 | 17 | **参考资料：** 18 | 19 | [Flex 布局语法教程](http://www.runoob.com/w3cnote/flex-grammar.html) 20 | 21 | [来源](https://juejin.im/post/5a954add6fb9a06348538c0d) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-36.md: -------------------------------------------------------------------------------- 1 | # 面的代码块，会输出什么？为什么？ 2 | 3 | ```js 4 | var b = 1; 5 | function outer(){ 6 | var b = 2; 7 | function inner(){ 8 | b++; 9 | var b = 3; 10 | console.log(b); 11 | } 12 | inner(); 13 | } 14 | outer(); 15 | ``` 16 | 17 | ?> `结果是` 3 18 | 19 | ### 解析题目： 20 | ```js 21 | function inner () { 22 | var b; // b is undefined 23 | b++; // b is NaN 24 | b = 3; // b is 3 25 | console.log(b); // output "3" 26 | } 27 | ``` 28 | 29 | 30 | **参考资料：** 31 | 32 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-6.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | ```js 4 | var x = 5; 5 | a(); 6 | function a() { 7 | console.log(x); 8 | var x = 10; 9 | } 10 | console.log(x); 11 | 12 | var x = 5; 13 | function a(n) { 14 | console.log(x+"ceshi"); 15 | } 16 | a(); 17 | ``` 18 | ```js 19 | funciton f(num){ 20 | console.log(num); 21 | 　funciton num(){ 22 | 　} 23 | } 24 | f(6); 25 | ``` 26 | ```js 27 | var bb = 1; 28 | function aa(bb) { 29 | bb = 2; 30 | alert(bb); 31 | }; 32 | aa(bb); 33 | alert(bb); 34 | ``` 35 | ```js 36 | for(int i=0;i<10;++i){ 37 | i=i+++++i; 38 | printf("%d\n",i); 39 | } 40 | ``` 41 | -------------------------------------------------------------------------------- /docs/synthesize/com-6.md: -------------------------------------------------------------------------------- 1 | # webpack 中，sourse-map的eval、cheap、inline 和 module 各是什么意思？ 2 | 3 | !> sourse-map源码和转换后代码的映射文件 4 | 5 | ![image](image/wsoursemap.jpg) 6 | 7 | ### eval 8 | 9 | !> 打包后的模块都使用 eval() 执行，行映射可能不准；不产生独立的 map 文件 10 | 11 | ### cheap 12 | 13 | !> map 映射只显示行不显示列，忽略源自 loader 的 source map 14 | 15 | ### inline 16 | 17 | !> 映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件 18 | 19 | ### module 20 | 21 | !> 增加对 loader source map 和第三方模块的映射 22 | 23 | **参考资料：** 24 | [webpack](https://webpack.docschina.org) 25 | 26 | **题目来源：** 27 | [webpack 中那些最易混淆的 5 个知识点](https://juejin.im/post/5cede821f265da1bbd4b5630) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-20.md: -------------------------------------------------------------------------------- 1 | # ('b'+'a'+ + 'a'+'a').toLowerCase() === 'banana'？ 2 | 3 | > 类型转换以及操作符优先级 4 | 5 | ![images](../assets/images/1.jpg) 6 | 7 | **`++'a'`的第二个加号是一元操作符** 8 | ``` 9 | 'b' + 'a' + (+'a') + 'a' 10 | ``` 11 | 12 | **`+'a'`的返回值应该是`NaN`** 13 | 14 | 也就是 15 | ``` 16 | 'b' + 'a' + (NaN) + 'a' 17 | ``` 18 | 19 | 所以结果就是 20 | 21 | ``` 22 | baNaNa ---(toLowerCase())------> banana 23 | ``` 24 | 25 | ### 运算符按照优先级的不同从高到低排列 26 | 27 | ![images](../assets/images/2.png) 28 | 29 | **题目来源：** 30 | 31 | [https://juejin.im/post/5d67c078e51d4561de20b61a](https://juejin.im/post/5d67c078e51d4561de20b61a) -------------------------------------------------------------------------------- /docs/react/re-15.md: -------------------------------------------------------------------------------- 1 | # 此代码块有错误吗？ 2 | 3 | ?> 英：What is wrong with this code? 4 | 5 | ```js 6 | this.setState((prevState, props) => { 7 | return { 8 | streak: prevState.streak + props.count 9 | } 10 | }) 11 | ``` 12 | 13 | **答：** 14 | 15 | > 这段代码没有什么错误，只是不经常这样使用。 16 | 17 | > 具体详细参考： 18 | 19 | * [setState文档](https://reactjs.org/docs/react-component.html#setstate) 20 | 21 | * [React中setState同步更新策略](https://zhuanlan.zhihu.com/p/24781259?refer=wxyyxc1992) 22 | 23 | **参考资料：** 24 | 25 | [题目来源](https://segmentfault.com/a/1190000008102870) 26 | 27 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) 28 | -------------------------------------------------------------------------------- /docs/react/re-2.md: -------------------------------------------------------------------------------- 1 | # React 中 Element 与 Component 的区别是？ 2 | 3 | ?> 英：What’s the difference between an Element and a Component in React? 4 | 5 | **答：** 6 | 7 | > 简单而言，`React Element` 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。 8 | 9 | > 典型的 `React Element` 就是利用 `JSX` 构建的声明式代码片然后被转化为`createElement`的调用组合。 10 | 11 | > 而 `React Component` 则是可以接收参数输入并且返回某个 `React Element` 的函数或者类。 12 | 13 | ?> 更多介绍可以参考React [Elements vs React Components](https://tylermcginnis.com/react-elements-vs-react-components/) 14 | 15 | **参考资料：** 16 | 17 | [题目来源](https://segmentfault.com/a/1190000008102870) 18 | 19 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-32.md: -------------------------------------------------------------------------------- 1 | # Function的名字 2 | 3 | ```js 4 | function f() {} 5 | var parent = Object.getPrototypeOf(f); 6 | f.name // ? 7 | parent.name // ? 8 | typeof eval(f.name) // ? 9 | typeof eval(parent.name) // ? 10 | ``` 11 | 12 | ?> `结果是` "f" , "Empty" , "function" , error 13 | 14 | **参考资料：** 15 | 16 | [MDN: Function.name](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name) 17 | 18 | [Object.getPrototypeOf()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf) 19 | 20 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-6.md: -------------------------------------------------------------------------------- 1 | # 描述RARP(Reverse Address Resolution Protocol)协议 2 | 3 | ?> `RARP`是逆地址解析协议(反向地址转换协议)，作用是完成硬件地址到IP地址的映射，主要用于无盘工作站，因为给无盘工作站配置的IP地址不能保存。 4 | 5 | ?> 工作流程：在网络中配置一台`RARP`服务器，里面保存着`IP地址`和`MAC地址`的映射关系，当无盘工作站启动后，就封装一个RARP数据包，里面有其MAC地址，然后广播到网络上去，当服务器收到请求包后，就查找对应的MAC地址的IP地址装入响应报文中发回给请求者。因为需要广播请求报文，因此RARP只能用于具有广播能力的网络。 6 | 7 | 更多详细资料[反向地址转换协议](https://baike.baidu.com/item/%E5%8F%8D%E5%90%91%E5%9C%B0%E5%9D%80%E8%BD%AC%E6%8D%A2%E5%8D%8F%E8%AE%AE/2991811?fr=aladdin&fromid=610685&fromtitle=RARP) 8 | 9 | **参考资料：** 10 | 11 | [题目来源](https://www.nowcoder.com/ta/review-network/review?tpId=33&tqId=21193&query=&asc=true&order=&page=5) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-8.md: -------------------------------------------------------------------------------- 1 | # 警惕IEEE 754标准 2 | 3 | ```js 4 | var two = 0.2 5 | var one = 0.1 6 | var eight = 0.8 7 | var six = 0.6 8 | [two - one == one, eight - six == two] 9 | ``` 10 | 11 | ?> `结果是`[true,false] 12 | 13 | > JavaScript中采用`双精度浮点数格式`，即`IEEE 754标准`。在该格式下，有些数字无法表示出来，比如：`0.1 + 0.2 = 0.30000000000000004` ，这不是JavaScript的锅，所有采用该标准的语言都有这个问题，比如：Java、Python等。 14 | 15 | **参考资料：** 16 | 17 | [Double-precision floating-point format](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) 18 | 19 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 20 | 21 | [参考文档](http://f2ex.cn/do-you-really-know-javascript/) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-5.md: -------------------------------------------------------------------------------- 1 | # 6、两个函数运行结果一样吗？为什么？ 2 | 3 | ```js 4 | // 函数1 5 | function foo1() 6 | { 7 | return { 8 | bar: "hello" 9 | }; 10 | } 11 | 12 | // 函数2 13 | function foo2() 14 | { 15 | return 16 | { 17 | bar: "hello" 18 | }; 19 | } 20 | 21 | console.log(foo1()); 22 | console.log(foo2()); 23 | ``` 24 | 25 | > `结果：` 不会一样 26 | 27 | > Object {bar: "hello"} 28 | 29 | > undefined 30 | 31 | ### 解析： 32 | 33 | **由于 Javascript 的`;`插入机制决定的，如果某行代码，return 关键词后没有任何东西了，将会自动插入一个`;`,因此在`foo2函数中`会是`return;`,后面的则不会继续执行了，因此返回`undefined`** 34 | 35 | **参考资料：** 36 | 37 | [原题来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/basic-computer/other/1.md: -------------------------------------------------------------------------------- 1 | # V8如何执行一段JS代码 2 | 3 | ![image](../image/4.jpg) 4 | 5 | - 1、**预解析**：检查语法错误但不生成AST 6 | - 2、**生成AST、作用域**：经过词法/语法分析，生成抽象语法树AST，AST是便于 V8 理解的结构；在生成 AST 的同时，V8 还会 生成相关的作用域，作用域中存放相关变量； 7 | - 3、**生成字节码**：基线编译器(Ignition)将AST转换成字节码 8 | - 4、**生成机器码**：优化编译器(Turbofan)将字节码转换成优化过的机器码，此外在逐行执行字节码的过程中，如果一段代码经常被执行，那么V8会将这段代码直接转换成机器码保存起来，下一次执行就不必经过字节码，优化了执行速度 9 | 10 | **推荐阅读：** 11 | 12 | * [V8 是怎么跑起来的 —— V8 的 JavaScript 执行管道](https://juejin.im/post/5dc4d823f265da4d4c202d3b) 13 | * [JavaScript 引擎 V8 执行流程概述](https://mp.weixin.qq.com/s/t__Jqzg1rbTlsCHXKMwh6A) 14 | * [V8是如何执行JavaScript代码的](https://blog.csdn.net/wyhstars/article/details/105226117) -------------------------------------------------------------------------------- /docs/javascript/basic/pro-2.md: -------------------------------------------------------------------------------- 1 | # 什么是原型链，原型链有什么特点? 2 | 3 | ?> `原型链`是利用原型让一个引用类型继承另一个引用类型的属性和方法 4 | 5 | **`null` 没有原型，并作为这个原型链中的最后一个环节** 6 | 7 | **几乎所有 JavaScript 中的对象都是位于原型链顶端的Object的实例** 8 | 9 | > 由于`__proto__`是任何对象都有的属性，而js里万物皆对象，所以会形成一条`__proto__`必须最终到头，并且值是`null` 10 | 11 | > 当js引擎查找对象的属性时，先查找对象本身是否存在该属性，如果不存在，会在原型链上查找，但是不会查找自身的`prototype` 12 | 13 | **参考资料：** 14 | 15 | [MDN: 继承与原型链](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 16 | 17 | [三张图搞懂JavaScript的原型对象与原型链](https://www.cnblogs.com/shuiyi/p/5305435.html) 18 | 19 | [题目来源](https://www.nowcoder.com/questionTerminal/dafdf862d4614009a9eab014a157dd83) 20 | -------------------------------------------------------------------------------- /docs/javascript/bb-1.md: -------------------------------------------------------------------------------- 1 | # 代码片段输出什么结果 2 | 3 | ```js 4 | function fn1(){ 5 | for(var i=0;i<4;i++){ 6 | var tc=setTimeout(function(i){ 7 | console.log(i); 8 | clearTimeout(tc) 9 | },10,i); 10 | } 11 | } 12 | function fn2(){ 13 | for(var i=0;i<4;i++){ 14 | var tc=setInterval(function(i,tc){ 15 | console.log(i); 16 | clearInterval(tc) 17 | },10,i,tc); 18 | } 19 | } 20 | fn1(); 21 | fn2(); 22 | 23 | ``` 24 | 25 | > `fn1()`：**结果是 0 1 2** 26 | 27 | > `fn2()`: **结果是 0 1 2 3......Infinite** 28 | 29 | **参考资料：** 30 | 31 | [题目来源](https://zhuanlan.zhihu.com/p/25514220) -------------------------------------------------------------------------------- /docs/html/basic.md: -------------------------------------------------------------------------------- 1 | # HTML和XHTML的区别 ☆ 2 | 3 | **什么是HTML?** 4 | 5 | > Html是用来描述网页的一种语言，是一切网页的基础。 6 | > - HTML 指的是超文本标记语言 (Hyper Text Markup Language) 7 | > - HTML 不是一种编程语言，而是一种标记语言 8 | > - 标记语言是一套标记标签 (markup tag) 9 | > - HTML 使用标记标签来描述网页 10 | 11 | **什么是XHTML?** 12 | 13 | > XHTML 是更严谨更纯净的 HTML 版本。**** 14 | > - XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。 15 | > - XHTML 的目标是取代 HTML。 16 | > - XHTML 与 HTML 4.01 几乎是相同的。 17 | > - XHTML 是更严格更纯净的 HTML 版本。 18 | > - XHTML 是作为一种 XML 应用被重新定义的 HTML。 19 | > - XHTML 是一个 W3C 标准。 20 | 21 | **HTML和XHTML的区别** 22 | 23 | > - XHTML 元素必须被正确地嵌套。 24 | > - XHTML 元素必须被关闭。 25 | > - 标签名必须用小写字母。 26 | > - XHTML 文档必须拥有根元素。 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-24.md: -------------------------------------------------------------------------------- 1 | # 25、执行以下代码时输出是什么？解释一下为什么？ 2 | 3 | ```js 4 | var hero = { 5 | _name: 'John Doe', 6 | getSecretIdentity: function (){ 7 | return this._name; 8 | } 9 | }; 10 | 11 | var stoleSecretIdentity = hero.getSecretIdentity; 12 | 13 | console.log(stoleSecretIdentity()); 14 | console.log(hero.getSecretIdentity()); 15 | ``` 16 | 17 | **结果：** 18 | 19 | ```js 20 | undefined 21 | John Doe 22 | ``` 23 | 24 | **修改一下：** 25 | 26 | > var stoleSecretIdentity = hero.getSecretIdentity.bind(hero); 27 | 28 | ```js 29 | John Doe 30 | John Doe 31 | ``` 32 | 33 | **参考资料：** 34 | 35 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-26.md: -------------------------------------------------------------------------------- 1 | # 27、用JavaScript测试你的知识：以下代码的输出是什么？ 2 | 3 | ```js 4 | var length = 10; 5 | function fn() { 6 | console.log(this.length); 7 | } 8 | 9 | var obj = { 10 | length: 5, 11 | method: function(fn) { 12 | fn(); 13 | arguments[0](); 14 | } 15 | }; 16 | 17 | obj.method(fn, 1); 18 | ``` 19 | 20 | **结果：** 21 | ``` 22 | 10 23 | 2 24 | ``` 25 | 26 | ### 解析： 27 | 28 | ?> `method`方法第一个参数是`fn`函数，`fn()`的this则指向window,因此`this.length` = 10 29 | 30 | ?> 对于`arguments[0]()`,`arguments`是一个`Array`，回调函数`fn()`,在`fn`内部，这个函数的范围变为参数数组，并记录参数`arguments[]`的长度将返回2 31 | 32 | **参考资料：** 33 | 34 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/css/css-2.md: -------------------------------------------------------------------------------- 1 | # CSS中居中的几种方式 2 | 3 | > `- 块级居中(block)：` 4 | margin: 0 auto 5 | 6 | > `- 行级居中（inline,inline-block）`父元素css：text-align: center 7 | 8 | > `- 定位水平垂直居中`：left：50%;top:50%;margin-left:负自身宽度的一半;margin-top:负自身高度的一半; 9 | 10 | > `- 定位水平垂直居中`：top:0;bottom:0;left:0;right:0;margin:auto; 11 | 12 | > `- css3+定位水平垂直居中：left：50%;top:50%;transfrom:(-50%,-50%);` 13 | 14 | > `- 水平垂直居中`：diplay：table-cell;vertical-align: middle; 15 | 16 | > `- 水平垂直居中`：flexBox居中 display: flex;justify-content: center;align-items:center; 17 | 18 | > `- 水平垂直居中`：vertical-align:middle; 19 | 20 | **参考资料：** 21 | 22 | [盘点8种CSS实现垂直居中水平居中的绝对定位居中技术](http://blog.csdn.net/freshlover/article/details/11579669) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-4.md: -------------------------------------------------------------------------------- 1 | # 5、严格模式下进行 Javascript 开发有什么好处？ 2 | 3 | ?> What is the significance, and what are the benefits, of including 'use strict' at the beginning of a JavaScript source file? 4 | 5 | ### 严格模式`use strict` 6 | 7 | > - **消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为** 8 | 9 | > - **消除代码运行的一些不安全之处，保证代码运行的安全** 10 | 11 | > - **提高编译器效率，增加运行速度** 12 | 13 | > - **为未来新版本的Javascript做好铺垫** 14 | 15 | **参考资料：** 16 | 17 | [Javascript 严格模式详解](http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode) 18 | 19 | [MDN: 严格模式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode) 20 | 21 | [原题来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/this/this-1.md: -------------------------------------------------------------------------------- 1 | # 对于this对象的理解 2 | 3 | ?>`谁调用的方法this就是指向谁` 4 | 5 | 首先要理解`调用位置`,调用位置就是函数在代码中被调用的位置（而不是声明的位置）。 6 | 7 | 具体详情，我建议看一下`《你不知道的js》`这本书 8 | 9 | |调用形式|this指向| 10 | |:-----:|:-----:| 11 | |普通函数|window| 12 | |构造函数|实例化后的对象| 13 | |对象的方法|该对象| 14 | |DOM节点|该节点对象| 15 | |call或者apply|传入的第一个参数| 16 | 17 | **参考资料：** 18 | 19 | [MDN: this](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 20 | 21 | [深入理解this对象](https://blog.csdn.net/woshinannan741/article/details/51146889) 22 | 23 | [如何理解 JavaScript 中的 this 关键字？](https://www.zhihu.com/question/19636194) 24 | 25 | [JavaScript中的对象查找](http://www.otakustay.com/object-lookup-in-javascript/) 26 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-11.md: -------------------------------------------------------------------------------- 1 | # 12、写一个按照下面方式调用都能正常工作的 sum 方法 2 | 3 | ```js 4 | console.log(sum(2,3)); // Outputs 5 5 | console.log(sum(2)(3)); // Outputs 5 6 | ``` 7 | 8 | ### 方法1 9 | ```js 10 | function sum(x) { 11 | if (arguments.length == 2) { 12 | return arguments[0] + arguments[1]; 13 | } else { 14 | return function(y) { return x + y; }; 15 | } 16 | } 17 | ``` 18 | 19 | ### 方法2 20 | 21 | ```js 22 | function sum(x, y) { 23 | if (y !== undefined) { 24 | return x + y; 25 | } else { 26 | return function(y) { return x + y; }; 27 | } 28 | } 29 | ``` 30 | 31 | **参考资料：** 32 | 33 | [题目来源](https://www.toptal.com/javascript/interview-questions) 34 | 35 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-18.md: -------------------------------------------------------------------------------- 1 | # 19、下面代码块会输出什么？ 2 | 3 | ```js 4 | for (var i = 0; i < 5; i++) { 5 | setTimeout(function() { 6 | console.log(i); 7 | }, i * 1000 ); 8 | } 9 | ``` 10 | ?> `结果是 5 5 5 5 5` 11 | 12 | ### 问：怎么能让打印出0 1 2 3 4 13 | 14 | ```js 15 | for (var i = 0; i < 5; i++) { 16 | (function(x) { 17 | setTimeout(function() { 18 | console.log(x); 19 | }, x * 1000 ); 20 | })(i); 21 | } 22 | ``` 23 | 24 | ```js 25 | for (let i = 0; i < 5; i++) { 26 | setTimeout(function() { 27 | console.log(i); 28 | }, i * 1000 ); 29 | } 30 | ``` 31 | 32 | 33 | **参考资料：** 34 | 35 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/css/css-boxs.md: -------------------------------------------------------------------------------- 1 | # 介绍一下box-sizing 2 | 3 | > 设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding 4 | 5 | > box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。 6 | 7 | box-sizing属性可以为三个值： 8 | 9 | - `content-box`，默认值，只计算内容的宽度，border和padding不计算入width之内 10 | 11 | > 尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。 12 | 13 | - `border-box`，border和padding计算入宽度之内 14 | 15 | > width = border + padding + 内容的 width， 16 | height = border + padding + 内容的 height 17 | 18 | - `inherit`，指定box-sizing属性的值，应该从父元素继承 19 | 20 | **参考资料：** 21 | 22 | [CSS3 box-sizing 属性](http://www.w3school.com.cn/cssref/pr_box-sizing.asp) 23 | 24 | [MDN box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing) -------------------------------------------------------------------------------- /docs/algorithm/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [算法](algorithm/index.md) 3 | 4 | * [N皇后（高频）](algorithm/14.md) 5 | * [统计出该地图中有多少个岛屿？](algorithm/10.md) 6 | * [给定一个只包含数字的字符串，复原它并返回所有可能的 IP 地址格式](algorithm/11.md) 7 | * [局域网之计算出计算机中的已知的局域网总数](algorithm/9.md) 8 | * [轮回之数组的移动](algorithm/8.md) 9 | * [常见排序算法的时间复杂度,空间复杂度](algorithm/algorithm-1.md) 10 | * [素数: 你将如何验证一个素数？](algorithm/alg-2.md) 11 | * [素数因子: 如何求出一个数的所有素数因子？](algorithm/alg-3.md) 12 | * [用二分查找实现 indexOf 方法，不允许用递归（鹅厂）](algorithm/alg-4.md) 13 | * [「移动零」，给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。](algorithm/alg-5.md) 14 | * [归并、快排、堆排有何区别?](algorithm/7.md) 15 | * [手写冒泡排序](algorithm/12.md) 16 | * [手写快速排序](algorithm/13.md) -------------------------------------------------------------------------------- /docs/algorithm/alg-6.md: -------------------------------------------------------------------------------- 1 | # 验证一个数是否是素数 2 | 3 | ```js 4 | function isPrime(num){ 5 | if (num === 2 || num === 3) { 6 | return true; 7 | }; 8 | if (num % 2 === 0) { 9 | return false; 10 | }; 11 | let divisor = 3,limit = Math.sqrt(num); 12 | while(limit >= divisor){ 13 | if (num % divisor === 0) { 14 | return false; 15 | } 16 | else { 17 | divisor += 2; 18 | } 19 | } 20 | return true; 21 | } 22 | console.log(isPrime(30)); // false 23 | ``` 24 | 25 | **说明：** 26 | > 必须在原数组上操作，不能拷贝额外的数组。 27 | > 尽量减少操作次数。 28 | 29 | 点击来源题目能看到各路答案 30 | 31 | **题目来源：** 32 | 33 | [来源链接](https://mp.weixin.qq.com/s/VjCEqQCyLxlmaxFe1TWjnQ) 34 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-9.md: -------------------------------------------------------------------------------- 1 | # 10、在下面的代码中，数字 1-4 会以什么顺序输出？为什么会这样输出？ 2 | 3 | ```js 4 | (function() { 5 | console.log(1); 6 | setTimeout(function(){console.log(2)}, 1000); 7 | setTimeout(function(){console.log(3)}, 0); 8 | console.log(4); 9 | })(); 10 | ``` 11 | 12 | > `结果：` 1 4 3 2 13 | 14 | **JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序** 15 | 16 | **setTimeout和setInterval是伪线程** 17 | 18 | > 立即执行函数里面的`1 4`会优先执行，setTimeout则是会进入异步队列等待执行，因为有时间的延迟，因此`3`先执行，`2`后执行 19 | 20 | 具体详情看参考资料详解 21 | 22 | **参考资料：** 23 | 24 | [JavaScript 运行机制详解：再谈Event Loop](http://www.ruanyifeng.com/blog/2014/10/event-loop.html) 25 | 26 | [从setTimeout谈JavaScript运行机制](https://www.cnblogs.com/zichi/p/4604053.html) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-7.md: -------------------------------------------------------------------------------- 1 | # 过滤器魔法 2 | 3 | ```js 4 | var ary = [0,1,2]; 5 | ary[10] = 10; 6 | ary.filter(function(x) { return x === undefined;}); 7 | ``` 8 | 9 | ?> `结果是` [] 10 | 11 | ### 解析： 12 | 13 | > **`filter()` 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素** 14 | 15 | > filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。 16 | 17 | **参考资料：** 18 | 19 | [MDN: Array.prototype.filter()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 20 | 21 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 22 | 23 | [参考文档](http://f2ex.cn/do-you-really-know-javascript/) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-request.md: -------------------------------------------------------------------------------- 1 | # HTTP的请求方法 2 | 3 | ?> HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法 4 | 5 | ?> HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法 6 | 7 | `GET` 8 | 9 | > 请求指定的页面信息，并返回实体主体 10 | 11 | `POST` 12 | 13 | > 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改 14 | 15 | `HEAD` 16 | 17 | > 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头 18 | 19 | `OPTIONS` 20 | 21 | > 允许客户端查看服务器的性能 22 | 23 | `PUT` 24 | 25 | > 从客户端向服务器传送的数据取代指定的文档的内容 26 | 27 | `DELETE` 28 | 29 | > 请求服务器删除指定的数据 30 | 31 | `TRACE` 32 | 33 | > 回显服务器收到的请求，主要用于测试或诊断 34 | 35 | `CONNECT` 36 | 37 | > HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器 38 | 39 | **参考资料：** 40 | 41 | [HTTP请求方法](http://www.runoob.com/http/http-methods.html) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-37.md: -------------------------------------------------------------------------------- 1 | # 神鬼莫测的函数长度 2 | 3 | ```js 4 | var a = Function.length, 5 | b = new Function().length 6 | console.log(a === b); 7 | ``` 8 | 9 | ?> `结果是` false 10 | 11 | 对于此题`a`的值是`1`，`b`的值是`0` 12 | 13 | ### Function构造器的属性： 14 | 15 | > Function 构造器本身也是个Function。他的 length 属性值为 `1` 。该属性 Writable: false, Enumerable: false, Configurable: true。 16 | 17 | ### Function原型对象的属性： 18 | 19 | > Function原型对象的 length 属性值为 `0` 。 20 | 21 | 所以，在本例中，a代表的是 Function 构造器的 length 属性，而b代表的是 Function 原型的 length 属性。 22 | 23 | **参考资料：** 24 | 25 | [Function.length](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length) 26 | 27 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/basic-computer/browser/002.md: -------------------------------------------------------------------------------- 1 | # 什么是浏览器同源策略？ 2 | 3 | !> `同源策略（Same origin policy）`是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 4 | 5 | **同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。** 6 | 7 | 浏览器中的大部分内容都是受同源策略限制的，但是以下三个标签可以不受限制： 8 | 9 | - <img src=XXX > 10 | - <link href=XXX > 11 | - <script src=XXX > 12 | 13 | **解决同源策略的方法：** 14 | 15 | - `跨文档消息机制`:可以通过 window.postMessage 的 JavaScript 接口来和不同源的 DOM 进行通信。 16 | - `跨域资源共享（CORS）`:跨域资源在服务端设置允许跨域，就可以进行跨域访问控制，从而使跨域数据传输得以安全进行。 17 | - `内容安全策略（CSP）`:主要以白名单的形式配置可信任的内容来源，在网页中，能够使白名单中的内容正常执行（包含 JS，CSS，Image 等等），而非白名单的内容无法正常执行。 18 | 19 | 20 | **参考资料：** 21 | 22 | [题目来源](https://juejin.im/post/5d89798d6fb9a06b102769b1) 23 | -------------------------------------------------------------------------------- /docs/react/re-5.md: -------------------------------------------------------------------------------- 1 | # React 中 keys 的作用是什么？ 2 | 3 | ?> 英：What are keys in React and why are they important? 4 | 5 | **答：** 6 | 7 | > Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 8 | 9 | ```js 10 | render () { 11 | return ( 12 | 17 | ) 18 | } 19 | ``` 20 | 21 | > 在开发过程中，我们需要保证某个元素的 `key` 在其同级元素中具有唯一性。在 `React Diff` 算法中 `React` 会借助元素的 `Key` 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，`React` 还需要借助 `Key` 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 `Key` 的重要性。 22 | 23 | **参考资料：** 24 | 25 | [题目来源](https://segmentfault.com/a/1190000008102870) 26 | 27 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-6.md: -------------------------------------------------------------------------------- 1 | # 7、NaN 是什么？typeof 的结果是？如果判断一个变量的值是 NaN？ 2 | 3 | ?> What is NaN? What is its type? How can you reliably test if a value is equal to NaN? 4 | 5 | `NaN` 是一个全局对象的属性, `NaN` 是 'not a number' 的缩写, 虽然`不是一个数字`, 但是`typeof`的值是`number` 6 | 7 | ```js 8 | typeof NaN;// number 9 | ``` 10 | 11 | > 等号运算符（== 和 ===） 不能被用来判断一个值是否是 NaN。必须使用 `Number.isNaN()` 或 `isNaN()` 函数 12 | 13 | ```js 14 | NaN === NaN; // false 15 | Number.NaN === NaN; // false 16 | isNaN(NaN); // true 17 | isNaN(Number.NaN); // true 18 | ``` 19 | 20 | **参考资料：** 21 | 22 | [原题来源](https://www.toptal.com/javascript/interview-questions) 23 | 24 | [MDN: NaN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN) -------------------------------------------------------------------------------- /docs/algorithm/9.md: -------------------------------------------------------------------------------- 1 | # 局域网之计算出计算机中的已知的局域网总数 2 | 3 | ![image](image/7.png) 4 | 5 | 现有 N 台计算机，他们各自拥有一个唯一的地址编号 1~N，目前已知其中一些计算机之间可以互相通 6 | 讯；并且，这种通讯具有传递性，例如[1,2]之间可以通讯，[2,3]之间可以通讯，那么意味着[1,3]之间也 7 | 可以通讯；如果一组计算机之间，任意两台均可以通讯，但对不属于这一组的计算机，均不能和组内的 8 | 计算机通讯，则这一组计算机组成了一个局域网； 9 | 现需要统计N台计算机中，共包含多少个局域网？ 10 | 给定一个 N * N 的矩阵 M，表示已知的互联关系。如果M [i] [j] = 1，表示已知第 i 个和 j 个计算机存在 11 | 连接关系，否则为不知道。你必须输出计算机中的已知的局域网总数。 12 | 13 | > N <= 200 14 | 15 | ### 示例 1: 16 | ``` 17 | [[1,1,0], [1,1,0], [0,0,1]] 18 | 19 | 输出 2 20 | ``` 21 | ### 示例 2: 22 | ``` 23 | [[1,1,0], [1,1,1], [0,1,1]] 24 | 25 | 输出 1 26 | ``` 27 | ### 请按以下函数实现 28 | 29 | ```js 30 | /** 31 | * @param {number[][]} M 32 | * @return {number} 33 | */ 34 | function findCircleNum(M) { 35 | 36 | }; 37 | ``` -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-16.md: -------------------------------------------------------------------------------- 1 | # var、let 和 const 区别的实现原理是什么? 2 | 3 | ### var 4 | 5 | - var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined 。 6 | - 内层变量可能覆盖外层变量 7 | - 用来计数的循环变量泄露为全局变量 8 | 9 | ### let 10 | 11 | - 声明的全局变量不会挂在顶层对象下面 12 | - 所声明的变量一定要在声明后使用，否则报错，报错 ReferenceError 13 | - 暂时性死区，只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（ binding ）这个区域，不再受外部的影响，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。 14 | - 不允许重复声明 15 | 16 | ### const 17 | 18 | - 声明的全局变量不会挂在顶层对象下面 19 | - const 声明之后必须马上赋值，否则会报错 20 | - const 简单类型一旦声明就不能再更改，复杂类型(数组、对象等)指针指向的地址不能更改，内部数据可以更改。 21 | - const 一旦声明变量，就必须立即初始化，不能留到以后赋值。 22 | - const 命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。 23 | 24 | 25 | **题目来源：** 26 | 27 | [var、let 和 const 区别的实现原理是什么](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/133) -------------------------------------------------------------------------------- /docs/javascript/js-memoi.md: -------------------------------------------------------------------------------- 1 | # 记忆化斐波那契函数（Memoization） 2 | 3 | **题目：斐波那契数列指的是类似于以下的数列：** 4 | 5 | `1, 1, 2, 3, 5, 8, 13, ....` 6 | 7 | 也就是，第 n 个数由数列的前两个相加而来：f(n) = f(n - 1) + f(n -2) 8 | 9 | 请你完成 fibonacci 函数，接受 n 作为参数，可以获取数列中第 n 个数，例如： 10 | 11 | ```js 12 | fibonacci(1) // => 1 13 | fibonacci(2) // => 1 14 | fibonacci(3) // => 2 15 | ``` 16 | 17 | 测试程序会从按顺序依次获取斐波那契数列中的数，请注意程序不要超时，也不要添加额外的全局变量。 18 | 19 | `题目来源：《JavaScript 语言精髓》` 20 | 21 | ### 题目解析答案： 22 | 23 | ```js 24 | const fibonacci = ((memo = [0, 1]) => { 25 | const fib = (n) => { 26 | let result = memo[n] 27 | if (typeof result !== "number") { 28 | result = fib(n - 1) + fib(n - 2) 29 | memo[n] = result 30 | } 31 | return result 32 | } 33 | return fib 34 | })() 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/react/re-8.md: -------------------------------------------------------------------------------- 1 | # 在生命周期中的哪一步你应该发起 AJAX 请求？ 2 | 3 | ?> 英：In which lifecycle event do you make AJAX requests and why? 4 | 5 | **答：** 6 | 7 | > **我们应当将AJAX 请求放到 `componentDidMount` 函数中执行，主要原因有下：** 8 | 9 | > - `React` 下一代调和算法 `Fiber` 会通过开始或停止渲染的方式优化应用性能，其会影响到 `componentWillMount` 的触发次数。对于 `componentWillMount` 这个生命周期函数的调用次数会变得不确定，`React` 可能会多次频繁调用 `componentWillMount`。如果我们将 `AJAX` 请求放到 `componentWillMount` 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。 10 | 11 | > - 如果我们将 `AJAX` 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了`setState`函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 `componentDidMount` 函数中进行 `AJAX` 请求则能有效避免这个问题。 12 | 13 | **参考资料：** 14 | 15 | [题目来源](https://segmentfault.com/a/1190000008102870) 16 | 17 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/html/html5-2.md: -------------------------------------------------------------------------------- 1 | # Canvas和SVG的区别 2 | 3 | ### Canvas 4 | 5 | > - 通过 JavaScript 来绘制 2D 图形 6 | 7 | > - 逐像素进行渲染的 8 | 9 | > - 一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象 10 | 11 | ### SVG 12 | 13 | > - 使用 XML 描述 2D 图形的语言 14 | 15 | > - 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器 16 | 17 | > - 每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形 18 | 19 | *** 20 | ### 区别 21 | 22 | `Canvas` 23 | - 依赖分辨率 24 | - 不支持事件处理器 25 | - 弱的文本渲染能力 26 | - 能够以 .png 或 .jpg 格式保存结果图像 27 | - 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 28 | 29 | `SVG` 30 | - 不依赖分辨率 31 | - 支持事件处理器 32 | - 最适合带有大型渲染区域的应用程序（比如谷歌地图） 33 | - 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 34 | - 不适合游戏应用 35 | 36 | **参考资料：** 37 | 38 | [HTML 5 Canvas vs. SVG](http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-1.md: -------------------------------------------------------------------------------- 1 | # 2、下面的代码将输出到控制台，为什么？ 2 | 3 | ```js 4 | (function(){ 5 | var a = b = 3; 6 | })(); 7 | 8 | console.log("a defined? " + (typeof a !== 'undefined')); 9 | console.log("b defined? " + (typeof b !== 'undefined')); 10 | ``` 11 | 12 | ?> `答案：`a defined? false / b defined? true 13 | 14 | ### 解析： 15 | 16 | 首先要理解的一句话是在`立即执行函数体`里面的`var a = b = 3;`,对这个进行拆解一下 17 | (`赋值过程从右到左`) 18 | 19 | ```js 20 | b = 3; 21 | var a = b; 22 | ``` 23 | 24 | - 变量`b`是一个全局变量 25 | - 变量`a`在封闭的立即执行函数作用域下的局部变量 26 | 27 | 因此`typeof a` 是`undefined`, `typeof b`是`number` 28 | 29 | **以上是在`非严格模式`下，如果在`严格模式（use strict）`下，声明`var a = b = 3`；将产生一个运行时错误的`ReferenceError: b is not defined`** 30 | 31 | **参考资料：** 32 | 33 | [原题来源](https://www.toptal.com/javascript/interview-questions) 34 | -------------------------------------------------------------------------------- /docs/javascript/codes.md: -------------------------------------------------------------------------------- 1 | ## JS判断字符串是否含有中文 2 | 3 | ```js 4 | if (escape(str).indexOf("%u") > 0) { 5 | //字符串 str 中含有汉字 6 | } 7 | ``` 8 | 9 | ## 检查给定参数是否为数组 10 | 11 | `Array.isArray()` 12 | 13 | ```js 14 | let isArray =(val)=> !!val && Array.isArray(val); 15 | ``` 16 | 17 | ## 检查给定的参数是否为Boolean 18 | 19 | ```js 20 | let isBoolean =(val)=> typeof val === 'boolean'; 21 | ``` 22 | 23 | ## 判断参数是否为数字 24 | 25 | ```js 26 | let isNumber =(str)=> typeof str === 'number'; 27 | ``` 28 | 29 | ## 判断参数是否为字符串 30 | 31 | ```js 32 | let isString =(str)=> typeof str === 'string'; 33 | ``` 34 | 35 | ## 判断参数是否为符号 36 | 37 | ```js 38 | let isSymbol =(str)=> typeof str === 'symbol'; 39 | ``` 40 | 41 | ## 判断是否为函数 42 | 43 | ```js 44 | let isFunction =(str)=> typeof str === 'function'; 45 | ``` 46 | -------------------------------------------------------------------------------- /docs/html/html5-3.md: -------------------------------------------------------------------------------- 1 | # HTML5有哪些新特性？ 2 | 3 | - `语意化标签` article、footer、header、nav、section 4 | 5 | - `新增选择器` document.querySelector、document.querySelectorAll 6 | 7 | - `拖拽释放(Drag and drop) API` 8 | 9 | - `媒体播放`的 video 和 audio 10 | 11 | - 本地存储 `localStorage` 和 `sessionStorage` 12 | 13 | - `离线应用` manifest 14 | 15 | - `桌面通知` Notifications 16 | 17 | - `增强表单控件` calendar、date、time、email、url、search 18 | 19 | - `地理位置` Geolocation 20 | 21 | - `多任务` webworker 22 | 23 | - `全双工通信协议` websocket 24 | 25 | - `历史管理` history 26 | 27 | - `跨域资源共享(CORS`)` Access-Control-Allow-Origin 28 | 29 | - `页面可见性改变事件` visibilitychange 30 | 31 | - `跨窗口通信` PostMessage 32 | 33 | - `Form Data` 对象 34 | 35 | - `绘画 canvas` 36 | 37 | **参考资料：** 38 | 39 | [HTML5新特性浅谈](http://blog.csdn.net/gane_cheng/article/details/52819118) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-11.md: -------------------------------------------------------------------------------- 1 | # fetch发送2次请求的原因 2 | 3 | !> 预检(Preflighted)的跨域请求 4 | 5 | **当HTTP请求出现以下两种情况时，浏览器认为是带预检(Preflighted)的跨域请求：** 6 | 7 | - 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。 8 | - 请求中出现自定义HTTP头部。 9 | 10 | > 带预检(Preflighted)的跨域请求需要浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求，检测服务器端是否支持真实请求进行跨域资源访问，真实请求的信息在OPTIONS请求中通过Access-Control-Request-Method Header和Access-Control-Request-Headers Header描述，此外与简单跨域请求一样，浏览器也会添加Origin Header。 11 | > 服务器端接到预检请求后，根据资源权限配置，在响应头中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header，分别表示允许跨域资源请求的域、请求方法和请求头。此外，服务器端还可以加入Access-Control-Max-Age Header，允许浏览器在指定时间内，无需再发送预检请求进行协商，直接用本次协商结果即可。浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。这个过程对真实请求的调用者来说是透明的。 12 | -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-41.md: -------------------------------------------------------------------------------- 1 | # 熟悉到陌生的Date 2 | 3 | ```js 4 | var a = new Date("2014-03-19"), 5 | b = new Date(2014, 03, 19); 6 | console.log([a.getDay() === b.getDay(), a.getMonth() === b.getMonth()]) 7 | ``` 8 | 9 | ?> `结果是` [false, false] 10 | 11 | **注意：** 12 | 13 | > 当Date作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为13或者分钟数为70），相邻的数值会被调整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1)，它们都表示日期2014-02-01（注意月份是从0开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10)，都表示时间2013-03-01T01:10:00。 14 | 15 | > 当Date作为构造函数调用并传入多个参数时，所定义参数代表的是当地时间。如果需要世界协调时，使用 new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}}) 和相同参数 16 | 17 | **参考资料：** 18 | 19 | [MDN: Date](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date) 20 | 21 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/css/css-wi-he-code.md: -------------------------------------------------------------------------------- 1 | # span标签的width和height分别为多少？ 2 | 3 | ```html 4 |
5 |    6 |     hello 7 |    8 |
9 | ``` 10 | **问题：span标签的width和height分别为多少？** 11 | 12 | - A. width = 0px，height = 0px 13 | - B. width = 400px，height = 200px 14 | - C. width = 100px，height = 50px 15 | - D. width = 0px，height = 200px 16 | 17 | ?> `答案：` D 18 | 19 | **解析：** 20 | 21 | > `span`元素因为`float`之后会变成`行内块级元素`(默认宽度是auto)，因此`height:100%` 也就是父级元素的`200px` 22 | 23 | > `i`元素因为`absolute`之后会脱离文档流, 因而不占用正常的文档流，`span`下面没有其他元素，`width`就是`0`, 这也就是`塌陷现象` 24 | 25 | **参考资料：** 26 | 27 | [题目来源](https://www.nowcoder.com/questionTerminal/8c6c959221d84380804a0c5cd96ba888?toCommentId=1243383) -------------------------------------------------------------------------------- /docs/synthesize/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [综合其它](synthesize/index.md) 3 | 4 | * 综合 5 | * [介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？](synthesize/com-1.md) 6 | * [webpack 中，module，chunk 和 bundle 的区别是什么？](synthesize/com-2.md) 7 | * [webpack 中，filename 和 chunkFilename 的区别?](synthesize/com-3.md) 8 | * [webpackPrefetch、webpackPreload 和 webpackChunkName 到底是干什么的？](synthesize/com-4.md) 9 | * [webpack 中，hash、chunkhash、contenthash 有什么不同？](synthesize/com-5.md) 10 | * [webpack 中，sourse-map的eval、cheap、inline 和 module 各是什么意思？](synthesize/com-6.md) 11 | * [前端需要注意哪些SEO?](synthesize/inv-1.md) 12 | * [hybrid 和 h5 有何区别？](synthesize/hybrid-h5.md) 13 | * [介绍下webpack热更新原理，是如何做到在不刷新浏览器的前提下更新页面?](synthesize/webpack-hot.md) 14 | * [讲一下png8 png16 png32的区别，并简单讲讲png的压缩原理](synthesize/com-7.md) 15 | 16 | -------------------------------------------------------------------------------- /docs/synthesize/inv-1.md: -------------------------------------------------------------------------------- 1 | # 前端需要注意哪些SEO? 2 | 3 | > 由英文Search Engine Optimization缩写而来，中文意思是“搜索引擎的优化” 4 | 5 | **SEO具体是指通过：网站结构调整、网站内容建设、网站代码优化、以及站外优化（网站站外推广、网站品牌建设等），使网站满足搜索引擎的收录排名需求，提高网站在搜索引擎中关键字的排名，从而吸引精准用户进入网站，获得免费流量，产生直接销售或品牌推广。** 6 | 7 | - 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可 8 | 9 | - 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页 10 | 11 | - 重要内容HTML代码放在最前：搜索引擎抓取HTMl顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取 12 | 13 | - 重要内容不要用js输出：爬虫不会执行js获取内容 14 | 15 | - 少用iframe：搜索引擎不会抓取iframe中的内容 16 | 17 | - 非装饰性图片必须加alt 18 | 19 | - 提高网站速度：网站速度是搜索引擎排序的一个重要指标 20 | 21 | **参考资料：** 22 | 23 | [题目来源](https://blog.csdn.net/bf287643910/article/details/53884500) -------------------------------------------------------------------------------- /docs/css/word-wrap.md: -------------------------------------------------------------------------------- 1 | # word-wrap & text-overflow的区别？ 2 | ### word-wrap 3 | 4 | ?> `word-wrap` 属性允许长单词或 URL 地址换行到下一行 5 | 6 | ?> 语法：`word-wrap: normal|break-word`; 7 | 8 | ```css 9 | .oneline { 10 | white-space: nowrap; //强制文本在一行内输出 11 | overflow: hidden; //隐藏溢出部分 12 | text-overflow: ellipsis; //对溢出部分加上... 13 | } 14 | ``` 15 | 16 | ### text-overflow 17 | 18 | ?> `text-overflow` 属性规定当文本溢出包含元素时发生的事情 19 | 20 | ?> 语法：`text-overflow: clip|ellipsis|string`; 21 | 22 | #### 多行隐藏（针对webkit内核） 23 | 24 | ```js 25 | .multiline { 26 | display: -webkit-box !important; 27 | overflow: hidden; 28 | 29 | text-overflow: ellipsis; 30 | word-break: break-all; 31 | 32 | -webkit-box-orient: vertical; 33 | -webkit-line-clamp: 2; 34 | } 35 | ``` 36 | 37 | **参考资料：** 38 | 39 | ·[题目来源](https://segmentfault.com/a/1190000006890725) -------------------------------------------------------------------------------- /docs/algorithm/13.md: -------------------------------------------------------------------------------- 1 | # 手写快速排序 2 | 3 | > 快速排序（Quicksort），又称划分交换排序，简称快排，一种排序算法，最早由东尼·霍尔提出。在平均状况下，排序n个项目要O(n log n)次比较。在最坏状况下则需要O(n^2)次比较，但这种状况并不常见。 4 | 事实上，快速排序O(n log n)通常明显比其他算法更快，因为它的内部循环可以在大部分的架构上很有效率地达成。 5 | 6 | ### 算法步骤： 7 | 8 | - 挑选基准值：从数列中挑出一个元素，称为“基准”（pivot）， 9 | - 分割：重新排序数列，所有比基准值小的元素摆放在基准前面，所有比基准值大的元素摆在基准后面（与基准值相等的数可以到任何一边）。在这个分割结束之后，对基准值的排序就已经完成， 10 | - 递归排序子序列：递归地将小于基准值元素的子序列和大于基准值元素的子序列排序。 11 | 12 | ```js 13 | function quickSort(arr) { 14 | if(arr.length <= 1) return arr //终止条件 15 | const pivot = arr.length / 2 | 0 // 基准点 16 | const pivotValue = arr.splice(pivot, 1)[0] 17 | const leftArr = [] 18 | const rightArr = [] 19 | arr.forEach(val => { 20 | val > pivotValue ? rightArr.push(val) : leftArr.push(val) 21 | }) 22 | return [ ...quickSort(leftArr), pivotValue, ...quickSort(rightArr)] 23 | } 24 | ``` -------------------------------------------------------------------------------- /docs/basic-computer/http/http-8.md: -------------------------------------------------------------------------------- 1 | # http的状态码中，499是什么？如何出现499，如何排查跟解决? 2 | 3 | > 499错误是什么？ 4 | 5 | ``` 6 | ngx_string(ngx_http_error_495_page), /* 495, https certificate error */ 7 | ngx_string(ngx_http_error_496_page), /* 496, https no certificate */ 8 | ngx_string(ngx_http_error_497_page), /* 497, http to https */ 9 | ngx_string(ngx_http_error_404_page), /* 498, canceled */ 10 | ngx_null_string, /* 499, client has closed connection */ 11 | ``` 12 | 13 | - 499对应的是 “client has closed connection”，客户端请求等待链接已经关闭，可能是因为服务器端处理的时间过长，客户端等得“不耐烦”了 14 | 15 | - 还有一种是两次提交post过快就会出现499 16 | 17 | **解决办法：** 18 | 19 | ``` 20 | - 前端将timeout最大等待时间设置大一些 21 | - nginx上配置proxy_ignore_client_abort on; 22 | ``` 23 | 24 | **题目来源：** 25 | 26 | [Github: http的状态码中，499是什么？如何出现499，如何排查跟解决](https://github.com/airuikun/Weekly-FE-Interview/issues/1) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-22.md: -------------------------------------------------------------------------------- 1 | # 23、下面代码块输出结果是多少？ 2 | 3 | ```js 4 | console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10)); 5 | ``` 6 | 7 | ?> `结果：`3628800 8 | 9 | ``` 10 | f(1): returns n, which is 1 11 | f(2): returns 2 * f(1), which is 2 12 | f(3): returns 3 * f(2), which is 6 13 | f(4): returns 4 * f(3), which is 24 14 | f(5): returns 5 * f(4), which is 120 15 | f(6): returns 6 * f(5), which is 720 16 | f(7): returns 7 * f(6), which is 5040 17 | f(8): returns 8 * f(7), which is 40320 18 | f(9): returns 9 * f(8), which is 362880 19 | f(10): returns 10 * f(9), which is 3628800 20 | ``` 21 | 22 | **此题也可以这样写：** 23 | 24 | ```js 25 | console.log((function f(n){return ((n > 1) ? n * arguments.callee(n-1) : n)})(10)); 26 | ``` 27 | 28 | 29 | **参考资料：** 30 | 31 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-18.md: -------------------------------------------------------------------------------- 1 | # for in 和 for of 的区别？ 2 | 3 | #### for in 4 | 5 | > 以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性，语句都会被执行。 6 | 7 | ```js 8 | for (variable in object) {...} 9 | ``` 10 | 11 | **for...in不应该用于迭代一个 Array，其中索引顺序很重要** 12 | 13 | **如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性（也能使用propertyIsEnumerable）。或者，如果你知道不会有任何外部代码干扰，您可以使用检查方法扩展内置原型。** 14 | 15 | #### for of 16 | 17 | > 在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句 18 | 19 | ```js 20 | for (let variable of object) {...} 21 | ``` 22 | 23 | **参考资料：** 24 | 25 | [MDN: for...in](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) 26 | 27 | [MDN: for...of](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-40.md: -------------------------------------------------------------------------------- 1 | # 警惕全局匹配 2 | 3 | ```js 4 | function captureOne(re, str) { 5 | var match = re.exec(str); 6 | return match && match[1]; 7 | } 8 | var numRe = /num=(\d+)/ig, 9 | wordRe = /word=(\w+)/i, 10 | a1 = captureOne(numRe, "num=1"), 11 | a2 = captureOne(wordRe, "word=1"), 12 | a3 = captureOne(numRe, "NUM=2"), 13 | a4 = captureOne(wordRe, "WORD=2"); 14 | console.log([a1 === a2, a3 === a4]); 15 | ``` 16 | 17 | ?> `结果是` [true, false] 18 | 19 | > `exec()` 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 `null`。 20 | 21 | > 如果你只是为了判断是否匹配（true或 false），可以使用 `RegExp.test()` 方法，或者 `String.search()` 方法。 22 | 23 | **参考资料：** 24 | 25 | [MDN: RegExp.prototype.exec()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) 26 | 27 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-8.md: -------------------------------------------------------------------------------- 1 | # 如何获取UA？ 2 | 3 | > 浏览器标识（UA）可以使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件，从而判断用户是使用电脑浏览还是手机浏览，让网页作出自动的适应 4 | 5 | ### window.navigator 6 | 7 | - `navigator.appCodeName`: 返回当前浏览器的内部“代码”名称,该名称可能是不"正确"的. 8 | 9 | - `navigator.appName`: 返回当前浏览器的正式名称,该名称可能是不"正确"的. 10 | 11 | - `navigator.appVersion`: 返回当前浏览器的版本号,该值可能是不"正确"的. 12 | 13 | - `navigator.userAgent`: 返回当前浏览器的user agent字符串 14 | 15 | ```js 16 | function whatBrowser() {   17 |     document.Browser.Name.value = navigator.appName;   18 |     document.Browser.Version.value = navigator.appVersion;   19 |     document.Browser.Code.value = navigator.appCodeName;   20 |     document.Browser.Agent.value = navigator.userAgent;   21 | } 22 | ``` 23 | 24 | **参考资料：** 25 | 26 | [MDN: window.navigator](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/navigator) 27 | -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-15.md: -------------------------------------------------------------------------------- 1 | # 如何使用setTimeout代替setInterval进行间歇调用 2 | 3 | ```js 4 | var executeTimes = 0; 5 | var intervalTime = 500; 6 | var intervalId = null; 7 | 8 | // setInterval调用 9 | intervalId = setInterval(intervalFun,intervalTime); 10 | 11 | function intervalFun(){ 12 | executeTimes++; 13 | console.log("doIntervalFun——"+executeTimes); 14 | if(executeTimes==5){ 15 | clearInterval(intervalId); 16 | } 17 | } 18 | 19 | function timeOutFun(){ 20 | executeTimes++; 21 | console.log("doTimeOutFun——"+executeTimes); 22 | if(executeTimes<5){ 23 | setTimeout(arguments.callee,intervalTime); 24 | } 25 | } 26 | 27 | // 使用setTimeout调用 28 | setTimeout(timeOutFun,intervalTime); 29 | ``` 30 | 更多的解释可以参看题目来源文章 31 | 32 | **题目来源：** 33 | 34 | [使用setTimeout代替setInterval进行间歇调用](https://juejin.im/post/5ceaaaf0e51d45508c2fb7c0) -------------------------------------------------------------------------------- /docs/javascript/array/array-5.md: -------------------------------------------------------------------------------- 1 | # 找出数字数组中最大的元素（使用Math.max函数） 2 | 3 | - ### 直接使用 4 | 5 | ```js 6 | var ans = Math.max(1, 2, 3, 4, 5, 6); 7 | console.log(ans); // 6 8 | ``` 9 | 10 | - ### 使用apply 11 | 12 | ```js 13 | var a = [1, 2, 3, 6, 5, 4, 8]; 14 | var ans = Math.max.apply(null, a); 15 | console.log(ans); // 6 16 | ``` 17 | - ### 使用call+ES6 18 | 19 | ```js 20 | var a = [1, 2, 3, 6, 5, 4, 8]; 21 | var ans = Math.max.call(null, ...a); 22 | console.log(ans); // 6 23 | ``` 24 | 25 | - ### eval+toString 26 | 27 | ```js 28 | var a = [1, 2, 3, 6, 5, 4]; 29 | var ans = eval( 'Math.max(' + a.toString() + ')'); 30 | console.log(ans); // 6 31 | ``` 32 | - ### ES6 33 | 34 | ```js 35 | let a = [1, 2, 3, 6, 5, 4]; 36 | let maxn = Math.max(...a); 37 | console.log(maxn); // 6 38 | ``` 39 | 40 | **参考资料：** 41 | 42 | [题目来源](http://www.cnblogs.com/zichi/p/4362292.html) 43 | -------------------------------------------------------------------------------- /docs/react/re-11.md: -------------------------------------------------------------------------------- 1 | # 为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？ 2 | 3 | ?> 英：Why would you use `React.Children.map(props.children, () => ) instead of props.children.map(() => )` 4 | 5 | **答：** 6 | 7 | > `props.children`并不一定是数组类型，譬如下面这个元素： 8 | 9 | ```js 10 | 11 |

Welcome.

12 | 13 | ``` 14 | 15 | > 如果我们使用`props.children.map`函数来遍历时会受到异常提示，因为在这种情况下`props.children`是对象（`object`）而不是数组（`array`）。 16 | 17 | > `React` 当且仅当超过一个子元素的情况下会将`props.children`设置为数组，就像下面这个代码片： 18 | 19 | ```js 20 | 21 |

Welcome.

22 |

props.children will now be an array

23 | 24 | ``` 25 | 26 | > 这也就是我们优先选择使用`React.Children.map`函数的原因，其已经将`props.children`不同类型的情况考虑在内了。 27 | 28 | **参考资料：** 29 | 30 | [题目来源](https://segmentfault.com/a/1190000008102870) 31 | 32 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/synthesize/com-1.md: -------------------------------------------------------------------------------- 1 | # 介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？ 2 | 3 | !> npm install 4 | 5 | ### npm 模块安装机制： 6 | 7 | - 发出npm install命令 8 | - 查询node_modules目录之中是否已经存在指定模块 9 | 10 | > 若存在，不再重新安装 11 | 12 | > 若不存在 13 | - npm 向 registry 查询模块压缩包的网址 14 | - 下载压缩包，存放在根目录下的.npm目录里 15 | - 解压压缩包到当前项目的node_modules目录 16 | 17 | ### 实现原理 18 | 19 | - 执行工程自身 preinstall 20 | 21 | - 确定首层依赖模块 22 | 23 | - 获取模块 24 | 25 | - 模块扁平化（dedupe） 26 | 27 | - 安装模块 28 | 29 | - 执行工程自身生命周期 30 | 31 | **参考资料：** 32 | 33 | [npm 模块安装机制简介](http://www.ruanyifeng.com/blog/2016/01/npm-install.html) 34 | 35 | [详解npm的模块安装机制](https://www.bbsmax.com/A/qVdemmnEdP/) 36 | 37 | [知乎：npm install的实现原理？](https://www.zhihu.com/question/66629910) 38 | 39 | **题目来源：** 40 | 41 | [介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22) 42 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-27.md: -------------------------------------------------------------------------------- 1 | # 28、下面的代码块，会输出什么？为什么？ 2 | 3 | ```js 4 | (function () { 5 | try { 6 | throw new Error(); 7 | } catch (x) { 8 | var x = 1, y = 2; 9 | console.log(x); 10 | } 11 | console.log(x); 12 | console.log(y); 13 | })(); 14 | ``` 15 | 16 | **结果：** 17 | 18 | ``` 19 | 1 20 | undefined 21 | 2 22 | ``` 23 | 24 | ### 解析： 25 | 26 | 此题代码可以解析为： 27 | 28 | ```js 29 | (function () { 30 | var x, y; // 作用域变量 31 | try { 32 | throw new Error(); 33 | } catch (x) { 34 | // 进行赋值之前，x是Error对象 35 | x = 1; // 内部x变量 36 | y = 2; // 外部作用域变量 37 | console.log(x); 38 | } 39 | console.log(x); 40 | console.log(y); 41 | })(); 42 | ``` 43 | 44 | 45 | **参考资料：** 46 | 47 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-16.md: -------------------------------------------------------------------------------- 1 | # 17、如果数组列表太大，下面的递归代码将导致堆栈溢出。您如何修复并保留递归模式？ 2 | 3 | ```js 4 | var list = readHugeList(); 5 | 6 | var nextListItem = function() { 7 | var item = list.pop(); 8 | 9 | if (item) { 10 | // process the list item... 11 | nextListItem(); 12 | } 13 | }; 14 | ``` 15 | 16 | ### 修复代码 17 | 18 | ```js 19 | var list = readHugeList(); 20 | 21 | var nextListItem = function() { 22 | var item = list.pop(); 23 | 24 | if (item) { 25 | // process the list item... 26 | setTimeout( nextListItem, 0);// 添加定时器 27 | } 28 | }; 29 | ``` 30 | 31 | > 堆栈溢出被消除，因为事件循环处理递归，而不是调用堆栈。nextlistitem运行时，如果`item`不是null，超时功能（nextlistitem）推到事件队列和函数退出，从而使调用堆栈清晰。 32 | 33 | > 当事件队列运行超时事件，下一项是处理和设置计时器再次调用nextlistitem。因此，该方法从开始到结束都没有直接递归调用，因此调用堆栈仍然保持清晰，而不管迭代次数。 34 | 35 | **参考资料：** 36 | 37 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-bas.md: -------------------------------------------------------------------------------- 1 | # OSI，TCP/IP，五层协议的体系结构，以及各层协议 2 | 3 | ### OSI分层 4 | 5 | ?>（7层）：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 6 | 7 | ### TCP/IP分层 8 | 9 | ?>（4层）：网络接口层、 网际层、运输层、 应用层。 10 | 11 | ?> 五层协议 （5层）：物理层、数据链路层、网络层、运输层、 应用层。 12 | 13 | **每一层的协议如下：** 14 | 15 | > 物理层：RJ45、CLOCK、IEEE802.3 （中继器，集线器） 16 | 17 | > 数据链路：PPP、FR、HDLC、VLAN、MAC （网桥，交换机） 18 | 19 | > 网络层：IP、ICMP、ARP、RARP、OSPF、IPX、RIP、IGRP、 （路由器） 20 | 21 | > 传输层：TCP、UDP、SPX 22 | 23 | > 会话层：NFS、SQL、NETBIOS、RPC 24 | 25 | > 表示层：JPEG、MPEG、ASII 26 | 27 | > 应用层：FTP、DNS、Telnet、SMTP、HTTP、WWW、NFS 28 | 29 | **每一层的作用如下：** 30 | 31 | > 物理层：通过媒介传输比特,确定机械及电气规范（比特Bit） 32 | 33 | > 数据链路层：将比特组装成帧和点到点的传递（帧Frame） 34 | 35 | > 网络层：负责数据包从源到宿的传递和网际互连（包PackeT） 36 | 37 | > 传输层：提供端到端的可靠报文传递和错误恢复（段Segment） 38 | 39 | > 会话层：建立、管理和终止会话（会话协议数据单元SPDU） 40 | 41 | > 表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU） 42 | 43 | > 应用层：允许访问OSI环境的手段（应用协议数据单元APDU） -------------------------------------------------------------------------------- /docs/basic-computer/http/http-get-post.md: -------------------------------------------------------------------------------- 1 | # GET和POST区别？ 2 | 3 | - GET - 从指定的资源请求数据。 4 | 5 | - POST - 向指定的资源提交要被处理的数据 6 | 7 | ### 区别 8 | 9 | > GET请求可以被添加到书签中，也可保存在浏览器历史记录中，POST不能 10 | 11 | > GET请求可以被浏览器缓存，POST不能 12 | 13 | > GET请求收到URL长度限制，所以数据长度也受限制，POST不会 14 | 15 | > GET请求只能传输ASCII字符，而POST不受此限制，还可以传输二进制数据 16 | 17 | 18 | ?> GET产生一个TCP数据包；POST产生两个TCP数据包。 19 | 20 | ?> 对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）； 21 | 22 | ?> 而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。 23 | 24 | > 也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。 25 | 26 | 27 | **据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。 28 | 并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。** 29 | 30 | **参考资料：** 31 | 32 | [知乎：get和post区别？](https://www.zhihu.com/question/28586791) 33 | 34 | [题目来源](https://zhuanlan.zhihu.com/p/32565654) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-3.md: -------------------------------------------------------------------------------- 1 | # 对于愤怒的reduce 2 | 3 | ```js 4 | [ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ] 5 | ``` 6 | 7 | ?> an error 8 | 9 | ### 解析： 10 | 11 | ?> `arr.reduce(callback[, initialValue])` 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值 12 | 13 | ?> `Math.pow(base, exponent)` 函数返回基数（`base`）的指数（`exponent`）次幂。 14 | 15 | **对于`[3,2,1].reduce(Math.pow)`** 16 | 17 | ```js 18 | Math.pow(3,2);// 9 19 | Math.pow(9,1);// 9 20 | ``` 21 | 22 | **对于[].reduce(Math.pow)** 23 | 24 | > `Uncaught TypeError: Reduce of empty array with no initial value` 25 | 26 | **参考资料：** 27 | 28 | [MDN: reduce()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) 29 | 30 | [MDN: Math.pow()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/pow) 31 | 32 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 33 | 34 | -------------------------------------------------------------------------------- /docs/javascript/this/this-6.md: -------------------------------------------------------------------------------- 1 | # 经典关于this面试知识点题目 2 | 3 | ```js 4 | var a=10; 5 | var foo={ 6 |   a:20, 7 |   bar:function(){ 8 |       var a=30; 9 |       return this.a; 10 |     } 11 | } 12 | foo.bar() 13 | (foo.bar)() 14 | (foo.bar=foo.bar)() 15 | (foo.bar,foo.bar)() 16 | ``` 17 | 18 | **结果：** 19 | 20 | ```js 21 | 20 22 | 20 23 | 10 24 | 10 25 | ``` 26 | 27 | ### 解析： 28 | 29 | ?> `foo.bar()` 的this指向`foo`,因此是20 30 | 31 | ?> `(foo.bar)()`: `foo.bar`是匿名函数，调用函数`()`,this指向匿名函数，这个匿名函数仅限于foo里面的全局变量使用，this.a就是foo里面的全局变量a，因此等价于`foo.bar()` 32 | 33 | ?> `(foo.bar=foo.bar)()`: 从右向左进行赋值foo.bar被重新赋值一个函数，然后再执行这个匿名函数，但是此时的函数被赋值之后，`this`指向了全局变量`window`,因此是10 34 | 35 | ?> `(foo.bar,foo.bar)()`: 逗号运算符，执行左边的`foo.bar`的函数，此时的this指向`window`,因此是10 36 | 37 | 38 | **参考资料：** 39 | 40 | [逗号运算符](https://www.zhihu.com/question/27620371) 41 | 42 | [浅谈JS中逗号运算符的用法](http://www.jb51.net/article/86349.htm) 43 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-3.md: -------------------------------------------------------------------------------- 1 | # 4、为什么要用立即执行函数表达式（Immediately-Invoked Function Expression）？ 2 | 3 | ?> What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block? 4 | 5 | > IIFE: Immediately Invoked Function Expression，意为立即调用的函数表达式，也就是说，声明函数的同时立即调用这个函数 6 | 7 | 正常来说函数声明和函数调用 8 | 9 | ```js 10 | function foo(){console.log('CODEHTML')} // 声明 11 | foo();// 调用 12 | ``` 13 | 14 | 如果使用IIFE形式的函数调用(`匿名函数表达式`) 15 | 16 | ```js 17 | (function(){ 18 | console.log('CODEHTML'); 19 | })() 20 | ``` 21 | 22 | `IIFE`还有一种用途就是`倒置代码的运行顺序` 23 | 24 | ```js 25 | var a = 2; 26 | (function(def){ 27 | def(window); 28 | })(function def(global){ 29 | var a = 3; 30 | console.log(a); 31 | console.log(global.a); 32 | }) 33 | // 来自《你不知道的js》 34 | ``` 35 | 36 | **参考资料：** 37 | 38 | [原题来源](https://www.toptal.com/javascript/interview-questions) 39 | -------------------------------------------------------------------------------- /docs/algorithm/alg-3.md: -------------------------------------------------------------------------------- 1 | # 素数因子: 如何求出一个数的所有素数因子？ 2 | 3 | > A: 执行一个while循环。开始除以2，如果不能整除，记录这个除数，直到完成。 4 | 5 | ```js 6 | function primeFactors(n){ 7 | var factors = [], 8 | divisor = 2; 9 | while(n>2){ 10 | if(n % divisor == 0){ 11 | factors.push(divisor); 12 | n= n/ divisor; 13 | }else{ 14 | divisor++; 15 | } 16 | } 17 | return factors; 18 | } 19 | 20 | primeFactors(69); // = [3, 23] 21 | ``` 22 | 23 | - **问：运行时间复杂度是多少？ 你能做得更好吗？** 24 | 25 | > **答：`O(n)`。可以将除数从3开始，累加2。因为，如果一个数被任何偶数整除，它将被2整除。因此，你不需要除以偶数。此外，你不会有一个大于其价值一半的因素。如果你想让它变得复杂，那就用第一题的补充概念吧。** 26 | 27 | 28 | **参考资料** 29 | 30 | [素数](https://baike.baidu.com/item/%E8%B4%A8%E6%95%B0/263515?fr=aladdin) 31 | 32 | [JS: Interview Algorithm](http://thatjsdude.com/interview/js1.html) 33 | 34 | [翻译：JS: Interview Algorithm](https://www.liayal.com/article/5ac46c20a6cf4e67bc05c9f4#%E6%96%B9%E6%B3%952) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-15.md: -------------------------------------------------------------------------------- 1 | # 16、下面的代码块会输出什么？为什么？ 2 | 3 | ```js 4 | console.log(1 + "2" + "2"); 5 | console.log(1 + +"2" + "2"); 6 | console.log(1 + -"1" + "2"); 7 | console.log(+"1" + "1" + "2"); 8 | console.log( "A" - "B" + "2"); 9 | console.log( "A" - "B" + 2); 10 | ``` 11 | 12 | **结果：** 13 | 14 | ``` 15 | 122 16 | 32 17 | 02 18 | 112 19 | NaN2 20 | NaN 21 | ``` 22 | 23 | ### 解析： 24 | 25 | ?> 第一个是字符串的拼接，也就是`122` 26 | 27 | ?> 第二个`+"2"`，则会被转换成 `1 + 2 + "2" = "32"` 28 | 29 | ?> 第三个`-"1"`转换成 `1 - 1 + "2" = "02"` 30 | 31 | ?> 第四个`+"1"`会被转换为 `1 + "1" + "2" = "112"` 32 | 33 | ?> 第五个`- "B"`无法转换为数字，因此`"A" - "B"` 等于 `NaN`, 因此结果会变成 `NaN + "2" = "NaN2"` 34 | 35 | ?> 第六个通过上面的解释则会转换成 `NaN + 2`，`NaN`无法转换成数字，因此结果就会变成`NaN` 36 | 37 | **参考资料：** 38 | 39 | [题目来源](https://www.toptal.com/javascript/interview-questions) 40 | 41 | [JavaScript 运算符](http://www.w3school.com.cn/js/js_operators.asp) 42 | -------------------------------------------------------------------------------- /docs/javascript/promise/p-2.md: -------------------------------------------------------------------------------- 1 | # Promise、async、await执行顺序(头条) 2 | 3 | ```js 4 | async function async1() { 5 | console.log("async1 start"); 6 | await async2() 7 | console.log("async1 end"); 8 | }; 9 | 10 | async function async2() { 11 | console.log("async2 start"); 12 | await async3(); 13 | console.log("async2 end"); 14 | }; 15 | 16 | async function async3() { 17 | console.log("async3 start"); 18 | }; 19 | 20 | setTimeout(function () { 21 | console.log('setTimeout0'); 22 | }, 0); 23 | 24 | console.log("start"); 25 | 26 | async1(); 27 | 28 | new Promise(function (resolve) { 29 | console.log("Promise1"); 30 | resolve(); 31 | }).then(function () { 32 | console.log("Promise2"); 33 | }); 34 | 35 | console.log("all end"); 36 | ``` 37 | 38 | **参考资料：** 39 | 40 | [promise、async和await之执行顺序的那点事](https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html) -------------------------------------------------------------------------------- /docs/html/html-qjsx.md: -------------------------------------------------------------------------------- 1 | # HTML全局属性(global attribute)有哪些？ 2 | 3 | > - accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素 4 | - class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素 5 | - contenteditable: 指定元素内容是否可编辑 6 | - contextmenu: 自定义鼠标右键弹出菜单内容 7 | - data-*: 为元素增加自定义属性 8 | - dir: 设置元素文本方向 9 | - draggable: 设置元素是否可拖拽 10 | - dropzone: 设置元素拖放类型： copy, move, link 11 | - hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果 12 | - id: 元素id，文档内唯一 13 | - lang: 元素内容的的语言 14 | - spellcheck: 是否启动拼写和语法检查 15 | - style: 行内css样式 16 | - tabindex: 设置元素可以获得焦点，通过tab可以导航 17 | - title: 元素相关的建议信息 18 | - translate: 元素和子孙节点内容是否需要本地化 19 | 20 | 参考资料： 21 | [MDN: html global attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes) 22 | [W3C HTML global-attributes](https://www.w3.org/wiki/HTML/Attributes/_Global) 23 | [W3Cschool](http://www.w3school.com.cn/tags/html_ref_standardattributes.asp) -------------------------------------------------------------------------------- /docs/javascript/basic/js-1-1.md: -------------------------------------------------------------------------------- 1 | # 创建“内置”方法 2 | 3 | > 给String对象定义一个repeatify方法。该方法接收一个整数参数，作为字符串重复的次数，最后返回重复指定次数的字符串。 4 | 5 | **解析：** 6 | 7 | - 最简单的遍历执行 8 | 9 | ```js 10 | 11 | String.prototype.repeatify = String.prototype.repeatify || function(numbers){ 12 | var str = ""; 13 | for (var i = 0;i console.log("nihao".repeatify(3)); 36 | 结果：nihaonihaonihao 37 | 38 | 39 | **注意：** 40 | 41 | ```js 42 | String.prototype.repeatify = String.prototype.repeatify || function(numbers){} 43 | // 避免重写已经定义了的方法 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-14.md: -------------------------------------------------------------------------------- 1 | # 15、下面的代码块会输出什么？为什么？ 2 | 3 | ```js 4 | var arr1 = "john".split(''); 5 | var arr2 = arr1.reverse(); 6 | var arr3 = "jones".split(''); 7 | arr2.push(arr3); 8 | console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1)); 9 | console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1)); 10 | ``` 11 | 12 | **结果：** 13 | 14 | > array 1: length=5 last=j,o,n,e,s 15 | 16 | > array 2: length=5 last=j,o,n,e,s 17 | 18 | 19 | **参考资料：** 20 | 21 | [题目来源](https://www.toptal.com/javascript/interview-questions) 22 | 23 | [MDN: split](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split) 24 | 25 | [MDN: slice](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 26 | 27 | [MDN: reverse](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) -------------------------------------------------------------------------------- /docs/synthesize/com-2.md: -------------------------------------------------------------------------------- 1 | # webpack 中，module，chunk 和 bundle 的区别是什么？ 2 | 3 | ### Module 4 | 5 | !> 提供比完整程序接触面(surface area)更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。 6 | 7 | 模块解析(Module Resolution): 一个模块可以作为另一个模块的依赖模块，resolver 是一个库( library )用于帮助找到模块的绝对路径... 模块将在 resolve.modules 中指定的所有目录内搜索。 8 | 9 | ### Chunk 10 | 11 | !> Chunk是 webpack 特定的术语被用在内部来管理 building 过程。bundle 由 chunk 组成，其中有几种类型（例如，入口 chunk(entry chunk) 和子 chunk(child chunk)）。通常 chunk 会直接对应所输出的 bundle，但是有一些配置并不会产生一对一的关系。 12 | 13 | ### Bundle 14 | 15 | !> 由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。 16 | 17 | Bundle 分离(Bundle Splitting): 这个流程提供一个优化 build 的方法，允许 webpack 为应用程序生成多个 bundle。最终效果是，当其他某些 bundle 的改动时，彼此独立的另一些 bundle 都可以不受到影响，减少需要重新发布的代码量，因此由客户端重新下载并利用浏览器缓存。 18 | 19 | **参考资料：** 20 | [webpack概念术语](https://webpack.docschina.org/glossary) 21 | 22 | **题目来源：** 23 | [webpack 中那些最易混淆的 5 个知识点](https://juejin.im/post/5cede821f265da1bbd4b5630) -------------------------------------------------------------------------------- /docs/css/css-bfc.md: -------------------------------------------------------------------------------- 1 | # 对BFC相关知识的了解 2 | 3 | > **BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。** 4 | 5 | ### BFC布局规则： 6 | 7 | > 内部的Box会在垂直方向，一个接一个地放置。 8 | 9 | > Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 10 | 11 | > 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 12 | 13 | > BFC的区域不会与float box重叠。 14 | 15 | > BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 16 | 17 | > 计算BFC的高度时，浮动元素也参与计算 18 | 19 | 20 | ### 哪些元素会生成BFC? 21 | 22 | > 根元素 23 | 24 | > float属性不为none 25 | 26 | > position为absolute或fixed 27 | 28 | > display为inline-block, table-cell, table-caption, flex, inline-flex 29 | 30 | > overflow不为visible 31 | 32 | **参考资料：** 33 | 34 | [理解CSS布局和BFC](https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html) 35 | 36 | [BFC 神奇背后的原理](http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html) -------------------------------------------------------------------------------- /docs/html/html-csl.md: -------------------------------------------------------------------------------- 1 | # cookie、sessionSttorage、localStory区别 2 | 3 | > `cookie`、`sessionSttorage`、`localStory`都是在客户端以键值对存储的存储机制，并且只能将值存储为字符串 4 | 5 | | | cookie | localStorage | sessionStorage | 6 | |:--------:|:--------:|:--------:|:--------:| 7 | |由谁初始化|客户端或服务器，服务器可以使用Set-Cookie请求头。|客户端|客户端| 8 | |过期时间|手动设置 |永不过期|当前页面关闭时| 9 | |在当前浏览器会话（browser sessions）中是否保持不变|取决于是否设置了过期时间|是|否| 10 | |是否与域名（domain）相关联|是|否|否| 11 | |是否随着每个 HTTP 请求发送给服务器|是，Cookies 会通过Cookie请求头，自动发送给服务器|否|否| 12 | |容量（每个域名）|4kb|5MB|5MB| 13 | |访问权限|任意窗口|任意窗口|当前页面窗口| 14 | 15 | **题目来源** 16 | 17 | [来源链接](https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Chinese/README.md) 18 | 19 | **参考** 20 | 21 | - [https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) 22 | - [http://tutorial.techaltum.com/local-and-session-storage.html](http://tutorial.techaltum.com/local-and-session-storage.html) -------------------------------------------------------------------------------- /docs/html/html-yyh.md: -------------------------------------------------------------------------------- 1 | # Html的语义化 2 | 3 | >语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。 4 | 5 | - 1、为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。（其实，就是为了不穿CSS外衣，裸奔依然好看）。 6 | 7 | - 2、提高用户体验，比如：title，alt用于解释名词和图片信息。 8 | 9 | - 3、利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。 10 | 11 | - 4、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。 12 | 13 | - 5、便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。 14 | 15 | **Html语义化结构的注意点** 16 | 17 | > h1~h6 ，作为标题使用，并且依据重要性递减，h1 是最高的等级 18 | 19 | > 不要使用纯样式标签，如：b、font、u等，改用css设置 20 | 21 | > 尽可能少的使用没有语义的div和span元素 22 | 23 | > ul、ol、li，ul 无序列表 24 | 25 | > dl、dt、dd，dl 就是“定义列表” 26 | 27 | > 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b，因为没语义），em是斜体（不用i同b） 28 | 29 | > 在对语义要求不明显时，技能使用div也能使用p,那就使用p，以为p默认有上下边距，可以兼容特殊终端 30 | 31 | > table、td、th、caption， (X)HTML中的表格不再是用来布局 32 | 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头标题用th，内容单元格用td； -------------------------------------------------------------------------------- /docs/html/hl-1.md: -------------------------------------------------------------------------------- 1 | # Quirks模式是什么？它和Standards模式有什么区别? 2 | 3 | 从IE6开始，引入了`Standards`模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。 4 | 5 | 在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？ 6 | 7 | 经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是`Quirks`模式（`怪癖模式`，`诡异模式`，`怪异模式`）。 8 | 9 | ### 区别： 10 | 11 | - 总体会有布局、样式解析和脚本执行三个方面的区别 12 | 13 | - 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在`Quirks` 模式下，IE的宽度和高度还包含了padding和border。 14 | 15 | - 设置行内元素的高宽：在`Standards`模式下，给``等行内元素设置`wdith`和`height`都不会生效，而在quirks模式下，则会生效。 16 | 17 | - 设置百分比的高度：在`Standards`模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。 -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-19.md: -------------------------------------------------------------------------------- 1 | # 20、请解释下面代码块的输出结果 2 | 3 | ```js 4 | console.log("0 || 1 = "+(0 || 1)); 5 | console.log("1 || 2 = "+(1 || 2)); 6 | console.log("0 && 1 = "+(0 && 1)); 7 | console.log("1 && 2 = "+(1 && 2)); 8 | ``` 9 | 10 | **结果：** 11 | 12 | ```js 13 | 0 || 1 = 1 14 | 1 || 2 = 1 15 | 0 && 1 = 0 16 | 1 && 2 = 2 17 | ``` 18 | **`逻辑与`和`逻辑或`运算符会返回一个值，并且二者都是短路运算符** 19 | 20 | > **逻辑与返回第一个是 `false` 的操作数 或者 最后一个是 `true` 的操作数** 21 | 22 | > **逻辑或返回第一个是 `true` 的操作数 或者 最后一个是 `false` 的操作数** 23 | 24 | > **如果逻辑与和逻辑或作混合运算，则`逻辑与`的优先级高** 25 | 26 | ?> 常见的 false 值：0, '0', +0, -0, false, '',null,undefined,null,NaN 27 | 28 | **注意`空数组([])`和`空对象({})`** 29 | 30 | ```js 31 | console.log([] == false) //true 32 | console.log({} == false) //false 33 | console.log(Boolean([])) //true 34 | console.log(Boolean({})) //true 35 | 36 | # `在 if 中，[] 和 {} 都为 true` 37 | ``` 38 | 39 | **参考资料：** 40 | 41 | [题目来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/css/css-jjyy.md: -------------------------------------------------------------------------------- 1 | # 渐进增强和优雅降级 2 | 3 | ### 渐进增强 progressive enhancement 4 | 5 | > 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 6 | 7 | ?>`渐进增强观点：` 8 | 渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在 9 | 10 | ### 优雅降级 graceful degradation 11 | 12 | > 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容 13 | 14 | ?>`优雅降级观点：` 15 | 优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。 16 |
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。 17 | 18 | ### 区别 19 | 20 | > - 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 21 | > - 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 22 | > - 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带 23 | 24 | **参考资料：** 25 | 26 | [题目来源和观点](https://www.cnblogs.com/iceflorence/archive/2017/03/27/6625466.html) 27 | 28 | -------------------------------------------------------------------------------- /docs/javascript/basic/25.md: -------------------------------------------------------------------------------- 1 | # 一道被轻视的JS代码题目 2 | 3 | ```js 4 | function Foo() { 5 | getName = function () { console.log(1); }; 6 | return this; 7 | } 8 | Foo.getName = function () { console.log(2);}; 9 | Foo.prototype.getName = function () { console.log(3);}; 10 | var getName = function () { console.log(4);}; 11 | function getName() { console.log(5);} 12 | 13 | //请写出以下输出结果： 14 | Foo.getName(); 15 | getName(); 16 | Foo().getName(); 17 | getName(); 18 | new Foo.getName(); 19 | new Foo().getName(); 20 | new new Foo().getName(); 21 | ``` 22 | 23 | **输出结果：** 24 | 25 | ```js 26 | Foo.getName(); 2 // 访问函数属性 27 | getName(); 4 // 涉及到变量提升、函数表达式、函数声明 28 | Foo().getName(); 1 29 | getName(); 1 30 | // 运算符优先级 31 | new Foo.getName(); 2 // new (Foo.getName)() 32 | new Foo().getName(); 3 // (new Foo()).getName() 33 | new new Foo().getName(); 3 // new ((new Foo()).getName)(); 34 | ``` 35 | 36 | * [题目来源：一道体现JavaScript综合能力的基础面试题，居然没有一人完全答对！](https://zhuanlan.zhihu.com/p/144207080) -------------------------------------------------------------------------------- /docs/html/html-hs.md: -------------------------------------------------------------------------------- 1 | # href和src的区别 2 | 3 | **`href`** 4 | > href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。 5 | 6 | > 目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。 7 | 8 | **`src`** 9 | > source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。 10 | 11 | - ### 请求资源类型不同 12 | 13 | >（1）href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。
14 | >（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片； 15 | 16 | - ### 作用结果不同 17 | 18 | >（1）href 用于在当前文档和引用资源之间确立联系；
19 | >（2）src 用于替换当前内容； 20 | 21 | - ### 浏览器解析方式不同 22 | 23 | >（1）若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
24 | >（2）当浏览器解析到 ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。 25 | 26 | 27 | **参考资料：** 28 | 29 | [W3school: href](http://www.w3school.com.cn/tags/att_a_href.asp) 30 | [前端面试题-url、href、src](https://segmentfault.com/a/1190000013845173) 31 | -------------------------------------------------------------------------------- /docs/css/css-4.md: -------------------------------------------------------------------------------- 1 | # 常见的兼容性问题？ 2 | 3 | - 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;} 4 | 5 | - IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。 6 | 7 | - 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 8 | 9 | ```css 10 | { 11 | background-color:#f1ee18;/*所有识别*/ 12 | .background-color:#00deff\9; /*IE6、7、8识别*/ 13 | +background-color:#a200ff;/*IE6、7识别*/ 14 | _background-color:#1e0bd1;/*IE6识别*/ 15 | } 16 | ``` 17 | 18 | - 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 19 | 20 | - IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。 21 | 22 | - Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。 23 | 24 | - 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {} -------------------------------------------------------------------------------- /docs/css/css-position.md: -------------------------------------------------------------------------------- 1 | # position属性的作用 2 | 3 | ### static 默认 4 | 5 | > 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 6 | 7 | ### relative 8 | 9 | > 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 `table-*-group`, `table-row`, `table-column`, `table-cell`, `table-caption` 元素无效。 10 | 11 | ### absolute 12 | 13 | > 不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 14 | 15 | ### fixed 16 | 17 | > 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 `transform` 属性非 `none` 时，容器由视口改为该祖先。 18 | 19 | ### sticky 20 | 21 | > 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 `table` 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。`position: sticky` 对 table 元素的效果与 `position: relative` 相同。 22 | 23 | **参考资料：** 24 | 25 | [MDN: position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 26 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-17.md: -------------------------------------------------------------------------------- 1 | # 18、什么是闭包（closure）？举例说明 2 | 3 | ### 官方答案： 4 | 5 | ```js 6 | var globalVar = "xyz"; 7 | 8 | (function outerFunc(outerArg) { 9 | var outerVar = 'a'; 10 | 11 | (function innerFunc(innerArg) { 12 | var innerVar = 'b'; 13 | 14 | console.log( 15 | "outerArg = " + outerArg + "\n" + 16 | "innerArg = " + innerArg + "\n" + 17 | "outerVar = " + outerVar + "\n" + 18 | "innerVar = " + innerVar + "\n" + 19 | "globalVar = " + globalVar); 20 | 21 | })(456); 22 | })(123); 23 | 24 | # 答案： 25 | outerArg = 123 26 | innerArg = 456 27 | outerVar = a 28 | innerVar = b 29 | globalVar = xyz 30 | ``` 31 | 32 | 关于闭包这个很多资料会讲这个，可以查看文章了解一下 33 | 34 | 35 | **参考资料：** 36 | 37 | [题目来源](https://www.toptal.com/javascript/interview-questions) 38 | 39 | [学习Javascript闭包（Closure）](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) 40 | 41 | [如何才能通俗易懂的解释javascript里面的‘闭包’？](https://www.zhihu.com/question/34547104) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Font-end-interview 2 | 3 | [![Build Status](https://travis-ci.org/nieyafei/front-end-interview.svg?branch=master)](https://travis-ci.org/nieyafei/front-end-interview) 4 | [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) 5 | 6 | 前端面试interview题目收集，持续更新，勿浅尝辄止 7 | 8 | > 此次更新合并了其他的面试题收集在一个项目，其他项目会删除掉 9 | 10 | - [同步语雀](https://www.yuque.com/codehtml/front-end-interview) 11 | - [在线访问](http://codehtml.cn/front-end-interview/) 12 | 13 | ### clone或者Fork之后clone到本地 14 | 15 | ### 安装环境 16 | > npm i docsify-cli -g 17 | 18 | ### 启动本地查看 19 | > docsify serve docs 20 | 21 | ### 面试题列表 22 | * [计算机基础](./docs/basic-computer/index.md) 23 | * [HTML](./docs/html/index.md) 24 | * [CSS](./docs/html/index.md) 25 | * [Javascript](./docs/javascript/index.md) 26 | * [React](./docs/react/index.md) 27 | * [Vue](./docs/vue/index.md) 28 | * [Node](./docs/node/index.md) 29 | * [算法](./docs/algorithm/index.md) 30 | * [综合其它](./docs/synthesize/index.md) -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-1.md: -------------------------------------------------------------------------------- 1 | # 当parseInt遇到map 2 | 3 | ```js 4 | ["1", "2", "3"].map(parseInt) 5 | ``` 6 | 7 | **输出打印结果** 8 | 9 | > 结果：[1, NaN, NaN] 10 | 11 | ### **解析：** 12 | 13 | - #### map 14 | 15 | ?> callback(currentValue, index, array) 16 | 17 | > `currentValue`: 数组中正在处理的当前元素 18 | 19 | > `index`: 数组中正在处理的当前元素的索引 20 | 21 | > `array`: map 方法被调用的数组 22 | 23 | - #### parseInt 24 | 25 | ?> 语法：**parseInt(string, radix) ** 26 | 27 | > **string解析的字符串，若不是字符串则转换为字符串** 28 | 29 | > **radix是一个介于2-36之间的整数，表示字符串的`基数`,当未指定基数时或者基数为`0`，不同的实现会产生不同的结果，通常将值默认为10** 30 | 31 | ?> 如果被解析参数的第一个字符无法被转化成数值类型，则返回 NaN 32 | 33 | 此题解析之后： 34 | 35 | - `parseInt("1",0)`, 以10进制转换，返回1 36 | 37 | - `parseInt("2",1)`, 基数非法，返回`NaN` 38 | 39 | - `parseInt("3",2)`, 以二进制转换，第一个参数非法，返回`NaN` 40 | 41 | 42 | **参考资料：** 43 | 44 | - [map-MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map) 45 | 46 | - [parseInt-MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt) 47 | 48 | -------------------------------------------------------------------------------- /docs/html/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [HTML](html/index.md) 3 | * HTML 4 | * [HTML和XHTML的区别](html/basic.md) 5 | * [Html的语义化](html/html-yyh.md) 6 | * [Doctype的文档类型](html/html-doctype.md) 7 | * [cookie、sessionSttorage、localStory区别](html/html-csl.md) 8 | * [HTML全局属性(global attribute)有哪些？](html/html-qjsx.md) 9 | * [常见的浏览器内核有哪些？](html/html-nk.md) 10 | * [介绍一下你对浏览器内核的理解？](html/html-nh.md) 11 | * [webSocket如何兼容低浏览器？(阿里)](html/websocket.md) 12 | * [如何实现浏览器内多个标签页之间的通信? (阿里)](html/html-tx.md) 13 | * [iframe有那些缺点？ ](html/iframe.md) 14 | * [href和src的区别?](html/html-hs.md) 15 | * [行内元素、块级元素、空元素都有哪些?](html/html-line.md) 16 | * [Quirks模式是什么？它和Standards模式有什么区别?](html/hl-1.md) 17 | * [HTML5如何监听video的全屏和退出全屏？](html/001.md) 18 | 19 | * HTML5 20 | * [什么是HTML5？](html/html5.md) 21 | * [HTML5 为什么只需要写 ？](html/html5-1.md) 22 | * [Canvas和SVG的区别](html/html5-2.md) 23 | * [HTML5有哪些新特性？](html/html5-3.md) 24 | * [HTML5中的datalist是什么？](html/html-4.md) 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/css/css-clear.md: -------------------------------------------------------------------------------- 1 | # 清除浮动的方法 2 | 3 | - ### 父级div定义 高度 4 | 5 | > 给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。 优点：代码简洁 缺点：高度被固定死了，是适合内容固定不变的模块。`（不推荐使用）` 6 | 7 | - ### 使用空元素 8 | 9 | > `
`
10 | 添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。 优点：浏览器支持好 缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。`（不推荐使用）` 11 | 12 | - ### 父级div浮动起来 13 | 14 | > 可以初步解决当前的浮动问题,但是又会产生新的浮动问题。`（不推荐使用）` 15 | 16 | - ### 父级div定义 display:table 17 | 18 | > 将div属性强制变成表格 优点：不解 缺点：会产生新的未知问题。`（不推荐使用）` 19 | 20 | - ### 父元素设置 overflow：hidden、auto 21 | 22 | > 这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1） 优点：代码简介，不存在结构和语义化问题 缺点：无法显示需要溢出的元素`（亦不太推荐使用）` 23 | 24 | - ### 父级div定义伪类:after 和 zoom 25 | 26 | > **IE8以上和非IE浏览器才支持:after，原理和方法`空元素`有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类） 缺点：代码不是非常简洁`（极力推荐使用）`** 27 | 28 | ``` 29 | .clearfix:after{ 30 | content:'.'; 31 | display:block; 32 | height:0; 33 | clear:both; 34 | visibility: hidden; 35 | } 36 | .clearfix {*zoom:1;} 37 | ``` 38 | 39 | **参考资料：** 40 | 41 | [题目来源和答案](https://juejin.im/post/5a954add6fb9a06348538c0d) 42 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-2.md: -------------------------------------------------------------------------------- 1 | # 3、下面的代码将输出到控制台，为什么？ 2 | 3 | ```js 4 | var myObject = { 5 | foo: "bar", 6 | func: function() { 7 | var self = this; 8 | console.log("outer func: this.foo = " + this.foo); 9 | console.log("outer func: self.foo = " + self.foo); 10 | (function() { 11 | console.log("inner func: this.foo = " + this.foo); 12 | console.log("inner func: self.foo = " + self.foo); 13 | }()); 14 | } 15 | }; 16 | myObject.func(); 17 | ``` 18 | 19 | > `答案：` 20 | 21 | > outer func: this.foo = bar 22 | 23 | > outer func: self.foo = bar 24 | 25 | > inner func: this.foo = undefined 26 | 27 | > inner func: self.foo = bar 28 | 29 | ### 解析 30 | 31 | 在外部函数func中的，`this`指向的对象是`myObject`,因此`self`也指向`myObject` 32 | 33 | 在内部函数中， `this` 不再指向 `myObject`。其结果是，`this.foo` 没有在内部函数中被定义，相反，指向到本地的变量`self` 保持在范围内，并且可以访问。 （在ECMA 5之前，在内部函数中的this 将指向全局的 window 对象；反之，因为作为ECMA 5，内部函数中的功能this 是未定义的。） 34 | 35 | **参考资料：** 36 | 37 | [原题来源](https://www.toptal.com/javascript/interview-questions) 38 | 39 | -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-29.md: -------------------------------------------------------------------------------- 1 | # 30、如何克隆一个Object对象？ 2 | 3 | ?> 此题也就是深拷贝，就像`jQuery`的`extend`方法 4 | 5 | ```js 6 | var obj = { 7 | a: 1, 8 | b: 2, 9 | c: { 10 | d: 3 11 | } 12 | } 13 | 14 | # 浅拷贝 15 | var c1 = $.extend({}, obj); 16 | console.log(c1.a === obj.a); // true 17 | 18 | //深拷贝 19 | var c2 = $.extend(true, {}, obj); 20 | console.log(c2.a === obj.a); //false 21 | ``` 22 | 23 | ### 官方答案 24 | 25 | ```js 26 | var obj = {a: 1 ,b: 2} 27 | var objclone = Object.assign({},obj);// 指向不同的对象到对象 28 | ``` 29 | 30 | ```js 31 | let obj = { 32 | a: 1, 33 | b: 2, 34 | c: { 35 | age: 30 36 | } 37 | }; 38 | 39 | var objclone = Object.assign({},obj); 40 | console.log('objclone: ', objclone); 41 | 42 | obj.c.age = 45; 43 | console.log('After Change - obj: ', obj); // 45 - This also changes 44 | console.log('After Change - objclone: ', objclone); // 45 45 | ``` 46 | 47 | **参考资料：** 48 | 49 | [题目来源](https://www.toptal.com/javascript/interview-questions) 50 | 51 | [MDN: Object.assign()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) -------------------------------------------------------------------------------- /docs/react/re-19.md: -------------------------------------------------------------------------------- 1 | # 类组件和函数组件之间的区别是啥？ 2 | 3 | - 类组件可以使用其他特性，如状态 state 和生命周期钩子。 4 | - 当组件只是接收 props 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。 5 | 6 | ```js 7 | # 函数组件 8 | function Welcome (props) { 9 | return

Welcome {props.name}

10 | } 11 | ReactDOM.render(, document.getElementById('root')); 12 | ``` 13 | 14 | ```js 15 | # 类组件 16 | class Welcome extends React.Component { 17 | render() { 18 | return ( 19 |

Welcome { this.props.name }

20 | ); 21 | } 22 | } 23 | ReactDOM.render(, document.getElementById('root')); 24 | ``` 25 | 26 | - 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。 27 | - 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。 28 | - React是单项数据流，父组件改变了属性，那么子组件视图会更新。 29 | - 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改 30 | - 组件的属性和状态改变都会更新视图。 31 | 32 | #### 区别： 33 | 34 | |区别|函数组件|类组件| 35 | | ----- | ----- | ----- | 36 | |是否有 this|没有|有| 37 | |是否有生命周期|没有|有| 38 | |是否有状态 state|没有|有| 39 | 40 | **** 41 | 42 | **文章推荐：** 43 | 44 | - [Virtual DOM 及内核](https://zh-hans.reactjs.org/docs/faq-internals.html#___gatsby) 45 | 46 | - [探索Virtual DOM的前世今生](https://zhuanlan.zhihu.com/p/35876032) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 nyflxp 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-2.md: -------------------------------------------------------------------------------- 1 | # 关于null 2 | 3 | ```js 4 | [typeof null, null instanceof Object] 5 | ``` 6 | 7 | **输出打印结果：** 8 | 9 | > 结果： ["object", false] 10 | 11 | ### **解析：** 12 | 13 | - ### typeof 14 | 15 | ?> `typeof`操作符返回一个字符串，表示未经计算的操作数的类型 16 | 17 | |类型|结果| 18 | |:------:|:------:| 19 | | `Undefined` | `"undefined"` | 20 | | `Null` | `"object"` | 21 | | `Boolean` | `"boolean"` | 22 | | `Number` | `"number"` | 23 | | `String` | `"string"` | 24 | | `Symbol` | `"symbol"` | 25 | | `函数对象` | `"function"` | 26 | | `任何其他对象` | `"object"` | 27 | 28 | 29 | ```js 30 | typeof null === 'object';// 从最开始的时候javascript就是这样 31 | ``` 32 | JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null的类型标签也成为了 0，typeof null就错误的返回了"object"。这算一个bug,但是被拒绝修复，因为影响的web系统太多 33 | 34 | - ### instanceof 35 | 36 | ?> `instanceof` 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性 37 | 38 | > `null`不是以`Object`原型创建，因此返回`false` 39 | 40 | **参考资料：** 41 | 42 | [MDN：typeof](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) 43 | 44 | [MDN：instanceof](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof) -------------------------------------------------------------------------------- /docs/synthesize/com-7.md: -------------------------------------------------------------------------------- 1 | # 讲一下png8 png16 png32的区别，并简单讲讲png的压缩原理 2 | 3 | ### PNG 4 | 5 | PNG的全称叫便携式网络图型（Portable Network Graphics）是目前最流行的网络传输和展示的图片格式，原因有如下几点： 6 | 7 | - 无损压缩：PNG图片采取了基于LZ77派生算法对文件进行压缩，使得它压缩比率更高，生成的文件体积更小，并且不损失数据。 8 | 9 | - 体积小：它利用特殊的编码方法标记重复出现的数据，使得同样格式的图片，PNG图片文件的体积更小。网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，优先选择PNG格式的图片。 10 | 11 | - 支持透明效果：PNG支持对原图像定义256个透明层次，使得图像的边缘能与任何背景平滑融合，这种功能是GIF和JPEG没有的。 12 | 13 | **PNG图片主要有三个类型，分别为 PNG 8/ PNG 24 / PNG 32。** 14 | 15 | !> PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^8（2的8次方）大小来存储一张图片的颜色种类，2^8等于256，也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。 16 | 17 | !> PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R（红）、G（绿）、B（蓝）。R(0255),G(0255),B(0~255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。 18 | 19 | !> PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R（红）、G（绿）、B（蓝）、A（透明）。R(0255),G(0255),B(0255),A(0255)。比PNG 24多了一个A（透明），也就是说PNG 32能表示跟PNG 24一样多的色彩，并且还支持256种透明的颜色，能表示更加丰富的图片颜色类型。 20 | 21 | **答案参考：** 22 | 23 | [PNG图片压缩原理--屌丝的眼泪](https://github.com/airuikun/blog/issues/1) 24 | 25 | **题目来源：** 26 | 27 | [讲一下png8 png16 png32的区别，并简单讲讲png的压缩原理](https://juejin.im/post/5cd82463518825692330d440#heading-4) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-2.md: -------------------------------------------------------------------------------- 1 | # TCP/IP 和 HTTP 的区别和联系是什么？ 2 | 3 | ### TCP/IP 4 | 5 | ?> TCP在网络OSI的七层模型中的第四层——Transport层，IP在第三层——Network层，ARP在第二层——Data Link层，在第二层上的数据，我们叫Frame，在第三层上的数据叫Packet，第四层的数据叫Segment 6 | 7 | ?> 数据首先会打到TCP的Segment中，然后TCP的Segment会打到IP的Packet中，然后再打到以太网Ethernet的Frame中，传到对端后，各个层解析自己的协议，然后把数据交给更高层的协议处理 8 | 9 | ?> `TPC/IP`协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。 10 | 11 | ### HTTP 12 | 13 | ?> `HTTP`协议即超文本传送协议(Hypertext Transfer Protocol )，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用. 14 | 15 | > HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应，在请求结束后，会主动释放连接。从建立连接到关闭连接的过程称为“一次连接”。 16 | 17 | > 1）在HTTP 1.0中，客户端的每次请求都要求建立一次单独的连接，在处理完本次请求后，就自动释放连接。 18 | 19 | > 2）在HTTP 1.1中则可以在一次连接中处理多个请求，并且多个请求可以重叠进行，不需要等待一个请求结束后再发送下一个请求。 20 | 21 | > 由于HTTP在每次请求结束后都会主动释放连接，因此HTTP连接是一种“短连接”，要保持客户端程序的在线状态，需要不断地向服务器发起连接请求。通常的 做法是即时不需要获得任何数据，客户端也保持每隔一段固定的时间向服务器发送一次“保持连接”的请求，服务器在收到该请求后对客户端进行回复，表明知道客 户端“在线”。若服务器长时间无法收到客户端的请求，则认为客户端“下线”，若客户端长时间无法收到服务器的回复，则认为网络已经断开。 22 | 23 | **解析答案文章：** 24 | 25 | [TCP/IP 和 HTTP 的区别和联系是什么？](https://www.zhihu.com/question/38648948) 26 | 27 | [TCP/IP、Http、Socket的区别?](https://www.zhihu.com/question/39541968) 28 | 29 | [TCP/IP详解](http://www.52im.net/topic-tcpipvol1.html) -------------------------------------------------------------------------------- /docs/basic-computer/browser/003.md: -------------------------------------------------------------------------------- 1 | # 浏览器的主要组成部分是什么？ 2 | 3 | #### 用户界面（User Interface） 4 | 5 | > 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。 6 | 7 | #### 浏览器引擎（Browser Engine） 8 | 9 | > 浏览器引擎是一个可嵌入的组件，其为渲染引擎提供高级接口。
10 | > 浏览器引擎可以加载一个给定的URI，并支持诸如：前进/后退/重新加载等浏览操作。
11 | > 浏览器引擎提供查看浏览会话的各个方面的挂钩，例如：当前页面加载进度、JavaScript alert。
12 | > 浏览器引擎还允许查询/修改渲染引擎设置。 13 | 14 | #### 渲染引擎（Rendering Engine） 15 | 16 | > 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。 17 | 18 | #### 网络（Networking） 19 | 20 | > 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。 21 | 22 | #### 显示后端（Display Backend） 23 | 24 | > 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。 25 | 26 | #### JavaScript解释器（JavaScript Interpreter） 27 | 28 | > 用于解析和执行 JavaScript 代码。 29 | 30 | #### 数据持久层（Data Persistence） 31 | 32 | > 这是`持久层`。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。 33 | 34 | #### XML解析器（XML Parser） 35 | 36 | > XML解析器可以将XML文档解析成文档对象模型（Document Object Model，DOM）树。 XML解析器是浏览器架构中复用最多的子系统之一，几乎所有的浏览器实现都利用现有的XML解析器，而不是从头开始创建自己的XML解析器。 37 | 38 | ![image](../assets/image/browser/1.jpg) 39 | 40 | **参考资料：** 41 | 42 | [题目来源](https://juejin.im/post/5d89798d6fb9a06b102769b1) 43 | -------------------------------------------------------------------------------- /docs/css/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [CSS](css/index.md) 3 | * CSS 4 | * [CSS选择器有哪些？哪些属性可以继承？](css/basic.md) 5 | * [link与@import的区别](css/link-import.md) 6 | * [css hack原理及常用hack](css/css-hack.md) 7 | * [介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？](css/css-1.md) 8 | * [CSS中居中的几种方式?](css/css-2.md) 9 | * [不定宽高的 DIV，垂直水平居中](css/css-height.md) 10 | * [CSS 引入的方式有哪些? link 和@import 的区别是?](css/css-link.md) 11 | * [CSS隐藏元素的几种方式及区别？](css/css-hidden.md) 12 | * [渐进增强和优雅降级](css/css-jjyy.md) 13 | * [清除浮动的方法](css/css-clear.md) 14 | * [对BFC相关知识的了解](css/css-bfc.md) 15 | * [position属性的作用](css/css-position.md) 16 | * [CSS优先级算法如何计算？](css/css-ip.md) 17 | * [span标签的width和height分别为多少？](css/css-wi-he-code.md) 18 | * [display:inline-block 什么时候会显示间隙？](css/css-3.md) 19 | * [常见的兼容性问题？](css/css-4.md) 20 | * [如何解决a标点击后hover事件失效的问题?](css/5.md) 21 | * [div+css布局的优势和弊端](css/6.md) 22 | 23 | * CSS3 24 | * [介绍一下box-sizing](css/css-boxs.md) 25 | * [CSS3新增伪类有那些?](css/css3-1.md) 26 | * [:before 和 ::before 区别? ](css/css3-2.md) 27 | * [word-wrap & text-overflow的区别？](css/word-wrap.md) 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/react/re-20.md: -------------------------------------------------------------------------------- 1 | # 如何避免在React重新绑定实例? 2 | 3 | - 将事件处理程序定义为内联箭头函数 4 | 5 | ```js 6 | class SubmitButton extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | isFormSubmitted: false 11 | }; 12 | } 13 | render() { 14 | return ( 15 | 18 | ) 19 | } 20 | } 21 | 22 | ``` 23 | 24 | - 使用箭头函数来定义方法 25 | 26 | ```js 27 | class SubmitButton extends React.Component { 28 | state = { 29 | isFormSubmitted: false 30 | } 31 | handleSubmit = () => { 32 | this.setState({ 33 | isFormSubmitted: true 34 | }); 35 | } 36 | render() { 37 | return ( 38 | 39 | ) 40 | } 41 | } 42 | 43 | ``` 44 | 45 | - 使用带有 Hooks 的函数组件 46 | 47 | ```js 48 | const SubmitButton = () => { 49 | const [isFormSubmitted, setIsFormSubmitted] = useState(false); 50 | 51 | return ( 52 | 55 | ) 56 | }; 57 | 58 | ``` 59 | 60 | 61 | **题目资料：** 62 | 63 | - [来源](https://juejin.im/post/5dc20a4ff265da4d4e30040b#heading-34) -------------------------------------------------------------------------------- /docs/basic-computer/http/http-3.md: -------------------------------------------------------------------------------- 1 | # TCP三次握手和四次挥手的全过程 2 | 3 | ### 三次握手： 4 | 5 | ?> `第一次握手`：客户端发送syn包(syn=x)到服务器，并进入SYN_SEND状态，等待服务器确认； 6 | 7 | ?> `第二次握手`：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（syn=y），即SYN+ACK包，此时服务器进入SYN_RECV状态； 8 | 9 | ?> `第三次握手`：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。 10 | 11 | > 握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。 12 | 13 | **三次握手的最主要目的是保证连接是双工的，可靠更多的是通过重传机制来保证的。** 14 | 15 | **为了保证服务端能收接受到客户端的信息并能做出正确的应答而进行前两次(第一次和第二次)握手，为了保证客户端能够接收到服务端的信息并能做出正确的应答而进行后两次(第二次和第三次)握手。** 16 | 17 | ### 四次挥手 18 | 19 | > 与建立连接的“三次握手”类似，断开一个TCP连接则需要“四次握手”。 20 | 21 | ?> `第一次挥手`：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。 22 | 23 | ?> `第二次挥手`：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。 24 | 25 | ?> `第三次挥手`：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。 26 | 27 | ?> `第四次挥手`：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。 28 | 29 | **参考资料：** 30 | 31 | [题目来源](https://www.nowcoder.com/ta/review-network/review?tpId=33&tqId=21194&query=&asc=true&order=&page=6) 32 | 33 | [怎样生动描述 TCP 的「三次握手」？](https://www.zhihu.com/question/20879359) -------------------------------------------------------------------------------- /docs/javascript/basic/24.md: -------------------------------------------------------------------------------- 1 | # requestAnimationFrame和setTimeout的区别？ 2 | 3 | > 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 4 | 5 | - **屏幕刷新频率**：屏幕每秒出现图像的次数。普通笔记本为60Hz 6 | 7 | - **动画原理**：计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。 8 | 9 | - **setTimeout**：通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象； 10 | 11 | ``` 12 | 原因是： 13 | 1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚； 14 | 2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。 15 | ``` 16 | - **requestAnimationFrame**：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿 17 | 18 | ``` 19 | 优势： 20 | `CPU节能`：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。 21 | 22 | `函数节流`：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。 23 | ``` 24 | 25 | - **优雅降级**：由于兼容性问题，需要降级对接口进行封装，优先使用高级特性，再根据浏览器不同情况进行回退，直到只能使用settimeout。 26 | 27 | **推荐阅读：** 28 | 29 | * [requestAnimationFrame](https://www.jianshu.com/p/f6d933670617) 30 | * [MDN: window.requestAnimationFrame](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame) -------------------------------------------------------------------------------- /docs/basic-computer/browser/006.md: -------------------------------------------------------------------------------- 1 | # 如何减少回流？ 2 | 3 | ### 什么是回流(重排 reflow)？ 4 | 5 | > 回流（重排 reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow，reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中 6 | 7 | ### 什么是重绘(repaint)？ 8 | 9 | > 重绘(repaint)：当我们对DOM的修改导致的样式变化，但未影响几何属性时，浏览器不需要重新计算元素的几何属性，直接可以为该元素绘制新的样式，跳过了回流环节，这个过程就叫重绘。 10 | 11 | **回流必定会发生重绘，重绘不一定发生回流** 12 | 13 | **答案：** 14 | 15 | - 1、直接改变`className`，如果动态改变样式，则使用`cssText`（减少设置多项内联样式） 16 | 17 | - 2、让要操作的元素进行`“离线处理”`，处理完后一起更新 18 | 19 | 当使用`DocumentFragment`进行缓存操作，引发一次回流和重绘 20 | 21 | 使用`display:none` 技术，只引发两次回流和重绘 22 | 23 | 使用`cloneNode(true or false)`和`replaceChild`技术，引发一次回流和重绘 24 | 25 | 使用`visibility`替换`display: none`，因为前者只会引起重绘，后者会引发回流 26 | 27 | - 3、不要经常访问会引起浏览器`flush`队列的属性，如果你确实要访问，利用缓存 28 | 29 | - 4、让元素脱离动画流，减少`render` 树的规模 30 | 31 | - 5、牺牲平滑度换取速度, 使用resize、scroll时进行防抖和节流处理，这两者会直接导致回流 32 | 33 | - 6、避免使用table布局 34 | 35 | - 7、IE中避免使用javascript表达式 36 | 37 | - 8、对于复杂动画效果,使用绝对定位让其脱离文档流，复杂的动画效果会频繁地触发回流重绘，我们可以将动画元素设置绝对定位从而脱离文档流避免反复回流重绘。 38 | 39 | - 9、避免触发同步布局事件，我们在获取offsetWidth这类属性的值时，可以使用变量将查询结果存起来，避免多次查询，每次对offset/scroll/client等属性进行查询时都会触发回流 40 | 41 | - 10、批量修改元素时，可以先让元素脱离文档流，等修改完毕后，再放入文档流 42 | 43 | ![image](../image/browser/2.jpg) 44 | 45 | * [题目来源](https://juejin.im/post/5e8b261ae51d4546c0382ab4#heading-27) -------------------------------------------------------------------------------- /docs/javascript/basic/23.md: -------------------------------------------------------------------------------- 1 | # setTimeout的执行原理(EventLoop) 2 | 3 | > `setTimeout()`函数：用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数，表示定时器timer的编号timeoutID，可以用来取消该定时器。 4 | 5 | setTimeout调用的时候，JavaScript引擎会启动定时器timer，大约millisec(ms)以后执行code，当定时器时间到，就把该事件放到主事件队列等待处理。 6 | 7 | Javascript是单线程的，任务队列的所有任务分为两种：`同步任务（synchronous）`、`异步任务（asynchronous）` 8 | 9 | ### 同步任务 10 | 11 | > 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。 12 | 13 | - 输出：`console.log()` 14 | - 变量的声明 15 | - 同步函数：如果在函数返回的时候，调用者就能够拿到预期的返回值或者看到预期的效果，那么这个函数就是同步的。 16 | 17 | ### 异步任务 18 | 19 | - setTimeout和setInterval 20 | - DOM事件 21 | - Promise 22 | - process.nextTick 23 | - fs.readFile 24 | - http.get 25 | - 异步函数：如果在函数返回的时候，调用者还不能够得到预期结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。 26 | 27 | > 任务队列又分为macro-task（宏任务）与micro-task（微任务），在ES5标准中，它们被分别称为task与job。 28 | 29 | #### 宏任务 30 | 31 | `I/O`、`setTimeout`、`setInterval`、`setImmdiate`、`requestAnimationFrame` 32 | 33 | #### 微任务 34 | 35 | `process.nextTick`、`Promise`、`Promise.then`、`MutationObserver` 36 | 37 | 宏任务和微任务的执行顺序 38 | 一次事件循环中，先执行宏任务队列里的一个任务，再把微任务队列里的所有任务执行完毕，再去宏任务队列取下一个宏任务执行。 39 | 40 | 注：在当前的微任务没有执行完成时，是不会执行下一个宏任务的。 41 | 42 | > **异步任务要挂起，先执行同步任务，同步任务执行完毕才会响应异步任务。** 43 | 44 | ### 事件循环 Event Loop 45 | 46 | ![image](../images/1.jpg) 47 | 48 | **推荐阅读：** 49 | 50 | * [如何通过setTimeout理解JS运行机制详解](https://www.jb51.net/article/158333.htm) -------------------------------------------------------------------------------- /docs/css/css-hidden.md: -------------------------------------------------------------------------------- 1 | # CSS隐藏元素的几种方式及区别 2 | 3 | ### display:none 4 | 5 | > - 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。 6 | 7 | > - 不会触发其点击事件 8 | 9 | ### visibility:hidden 10 | 11 | > - 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。 12 | 13 | > - 无法触发其点击事件 14 | 15 | > - 适用于那些元素隐藏后不希望页面布局会发生变化的场景 16 | 17 | ### opacity:0 18 | 19 | > - 将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。 20 | 21 | > - 和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。 22 | 23 | > - 可以触发点击事件 24 | 25 | ### position 26 | 27 | > - 将元素移出可视区域，ps: left:-9999px 28 | 29 | ### clip-path 30 | 31 | > - 通过剪裁实现，`此功能某些浏览器尚在开发中` 32 | 33 | ### 设置height，width等盒模型属性为0 34 | 35 | > - 简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧 36 | 37 | > - 如果元素设置了border，padding等属性不为0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为0，很显然，这个元素相当于消失了，即无法触发点击事件 38 | 39 | > - 这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着通过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果 40 | 41 | 42 | **参考资料：** 43 | 44 | [题目和答案来源](https://juejin.im/post/5a954add6fb9a06348538c0d) 45 | 46 | [MDN: clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) -------------------------------------------------------------------------------- /docs/html/html-tx.md: -------------------------------------------------------------------------------- 1 | # 如何实现浏览器内多个标签页之间的通信? (阿里) 2 | 3 | > WebSocket、SharedWorker； 4 | 5 | > 也可以调用localstorge、cookies等本地存储方式； 6 | 7 | > localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件 8 | 9 | > 我们通过监听事件，控制它的值来进行页面信息通信； 10 | 11 | > 注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常； 12 | 13 | ### 下面是一个解答[原文](http://blog.csdn.net/lxcao/article/details/52777066) 14 | 15 | - #### **使用localStorage** 16 | 17 | 使用localStorage.setItem(key,value);添加内容 18 | 19 | 使用storage事件监听添加、修改、删除的动作 20 | 21 | ``` 22 | window.addEventListener("storage",function(event){ 23 | $("#name").val(event.key+”=”+event.newValue); 24 | }); 25 | ``` 26 | 27 | - #### **使用cookie+setInterval** 28 | 29 | `Html` 30 | ``` 31 | 32 | ``` 33 | 34 | `页面1：js` 35 | 36 | ``` 37 | $(function(){ 38 | $("#btnOK").click(function(){ 39 | varname=$("#name").val(); 40 | document.cookie="name="+name; 41 | }); 42 | }); 43 | ``` 44 | 45 | `页面2：js` 46 | 47 | ``` 48 | //获取Cookie天的内容 49 | function getKey(key) { 50 | return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key]; 51 | } 52 | //每隔1秒获取Cookie的内容 53 | setInterval(function(){ 54 | console.log(getKey("name")); 55 | },1000); 56 | ``` -------------------------------------------------------------------------------- /docs/react/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [React](react/index.md) 3 | 4 | * React 5 | * [什么是虚拟DOM？](react/re-18.md) 6 | * [类组件和函数组件之间的区别是啥？](react/re-19.md) 7 | * [constructor(){ this.target = this.func.bind(this); },JSX里onChange={this.target}的写法，为什么要比非bind的func = () => {}的写法效率高 请解释其中的原理](react/re-17.md) 8 | * [setState更新state何时同步何时异步？](react/re-16.md) 9 | * [调用 setState 之后发生了什么？](react/re-1.md) 10 | * [React 中 Element 与 Component 的区别是？](react/re-2.md) 11 | * [什么情况下你会优先选择使用 Class Component 而不是 Functional Component？](react/re-3.md) 12 | * [React 中 refs 的作用是什么？](react/re-4.md) 13 | * [React 中 keys 的作用是什么？](react/re-5.md) 14 | * [如果你创建了类似于下面的Twitter元素，那么它相关的类定义是啥样子的？](react/re-6.md) 15 | * [Controlled Component 与 Uncontrolled Component 之间的区别是什么？](react/re-7.md) 16 | * [在生命周期中的哪一步你应该发起 AJAX 请求？](react/re-8.md) 17 | * [shouldComponentUpdate 的作用是啥以及为何它这么重要？](react/re-9.md) 18 | * [如何告诉 React 它应该编译生产环境版本？](react/re-10.md) 19 | * [为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？](react/re-11.md) 20 | * [概述下 React 中的事件处理逻辑](react/re-12.md) 21 | * [createElement 与 cloneElement 的区别是什么？](react/re-13.md) 22 | * [传入 setState 函数的第二个参数的作用是什么？](react/re-14.md) 23 | * [此代码块有错误吗？](react/re-15.md) 24 | * [如何避免在React重新绑定实例？](react/re-20.md) 25 | * [什么渲染劫持？](react/252.md) 26 | 27 | -------------------------------------------------------------------------------- /docs/react/re-4.md: -------------------------------------------------------------------------------- 1 | # React 中 refs 的作用是什么？ 2 | 3 | ?> 英：What are refs in React and why are they important? 4 | 5 | **答：** 6 | 7 | > `Refs` 是 `React` 提供给我们的安全访问 `DOM` 元素或者某个组件实例的句柄。我们可以为元素添加`ref`属性然后在回调函数中接受该元素在 `DOM` 树中的句柄，该值会作为回调函数的第一个参数返回： 8 | 9 | ```js 10 | class UnControlledForm extends Component { 11 | handleSubmit = () => { 12 | console.log("Input Value: ", this.input.value) 13 | } 14 | render () { 15 | return ( 16 |
17 | this.input = input} /> 20 | 21 |
22 | ) 23 | } 24 | } 25 | ``` 26 | 27 | > 上述代码中的`input`域包含了一个`ref`属性，该属性声明的回调函数会接收`input`对应的 `DOM` 元素，我们将其绑定到`this`指针以便在其他的类函数中使用。另外值得一提的是，`refs` 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值： 28 | 29 | ```js 30 | function CustomForm ({handleSubmit}) { 31 | let inputElement 32 | return ( 33 |
handleSubmit(inputElement.value)}> 34 | inputElement = input} /> 37 | 38 |
39 | ) 40 | } 41 | ``` 42 | 43 | **参考资料：** 44 | 45 | [题目来源](https://segmentfault.com/a/1190000008102870) 46 | 47 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/css/6.md: -------------------------------------------------------------------------------- 1 | # div+css布局的优势和弊端 2 | 3 | ### 优势 4 | 5 | - 1、**符合W3C标准**。这保证您的网站不会因为将来网络应用的升级而被淘汰。 6 | 7 | - 2、**对浏览者和浏览器更具亲和力**。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是什么，您的网站都能很好的兼容。 8 | 9 | - 3、**使页面载入得更快**。页面体积变小，浏览速度变快，由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 10 | 11 | - 4、**保持视觉的一致性**。以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 12 | 13 | - 5、**修改设计时更有效率**。由于使用了DIV+CSS制作方法，使内容和结构分离，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式，在团队开发中更容易分工合作而减少相互关联性。 14 | 15 | - 6、**搜索引擎更加友好**。相对与传统的table,采用DIV+CSS技术的网页，由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加简洁，正文部分更为突出明显，便于被搜索引擎采集收录。 16 | 17 | ### 弊端 18 | 19 | 尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在： 20 | 21 | - 1、**对于CSS的高度依赖使得网页设计变得比较复杂**。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。 22 | 23 | - 2、**CSS文件异常将影响整个网站的正常浏览**。CSS网站制作的设计元素通常放在一个或几个外部文件中，这些文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 24 | 25 | - 3、**对于CSS网站设计的浏览器兼容性问题比较突出**。虽然搜索说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，CSS+DIV还有待于各个浏览器厂商的进一步支持。 26 | 27 | - 4、**CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身**。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。 -------------------------------------------------------------------------------- /docs/assets/reset.css: -------------------------------------------------------------------------------- 1 | @import 'iconfont/iconfont.css'; 2 | /* #42b983 #9B30FF */ 3 | .gt-container .gt-btn{ 4 | background-color: #42b983; 5 | } 6 | .gt-container .gt-header-controls-tip,.gt-container a:hover,.gt-container a,.gt-container .gt-comment-username{ 7 | color: #42b983; 8 | } 9 | .gt-container .gt-svg svg{ 10 | fill: #42b983; 11 | } 12 | .gt-container .gt-link{ 13 | border-bottom: #42b983; 14 | } 15 | .gt-container .gt-popup .gt-action.is--active:before{ 16 | background-color: #42b983; 17 | } 18 | 19 | .sidebar .sidebar-nav li{ 20 | position: relative; 21 | } 22 | .sidebar .sidebar-nav li span{ 23 | display: inline-block; 24 | color: #42b983; 25 | position: absolute; 26 | top:-2px; 27 | left: -24px; 28 | padding: 0; 29 | font-size: 18px; 30 | vertical-align: top; 31 | } 32 | 33 | .sidebar .sidebar-nav li span::before,.iconS::before{ 34 | font-family:"iconfont" !important; 35 | font-size:20px; 36 | font-style:normal; 37 | -webkit-font-smoothing: antialiased; 38 | -moz-osx-font-smoothing: grayscale; 39 | content: "\e612"; 40 | font-weight: normal; 41 | } 42 | 43 | .sidebar .sidebar-nav li span.new{ 44 | left: inherit; 45 | right: 0; 46 | top:0; 47 | } 48 | .sidebar .sidebar-nav li span.new::before{ 49 | content: "\e673"; 50 | font-size: 32px; 51 | } 52 | 53 | .iconS::before{ 54 | display: inline-block; 55 | content: "\e70a"; 56 | font-size: 30px; 57 | color: #42b983; 58 | } 59 | .sidebar ul li a .iconS::before{ 60 | font-size: 14px; 61 | } -------------------------------------------------------------------------------- /docs/javascript/reallyKnow/rk-9.md: -------------------------------------------------------------------------------- 1 | # 字符串陷阱 2 | 3 | ```js 4 | function showCase(value) { 5 | switch(value) { 6 | case 'A': 7 | console.log('Case A'); 8 | break; 9 | case 'B': 10 | console.log('Case B'); 11 | break; 12 | case undefined: 13 | console.log('undefined'); 14 | break; 15 | default: 16 | console.log('Do not know!'); 17 | } 18 | } 19 | showCase(new String('A')); 20 | ``` 21 | 22 | ?> `结果是` Do not know! 23 | 24 | ```js 25 | function showCase2(value) { 26 | switch(value) { 27 | case 'A': 28 | console.log('Case A'); 29 | break; 30 | case 'B': 31 | console.log('Case B'); 32 | break; 33 | case undefined: 34 | console.log('undefined'); 35 | break; 36 | default: 37 | console.log('Do not know!'); 38 | } 39 | } 40 | showCase2(String('A')); 41 | ``` 42 | 43 | ?> `结果是` Case A 44 | 45 | > 在 `switch` 内部使用严格相等 `===` 进行判断，并且 `new String("A")` 返回的是一个对象，而 `String("A")` 则是直接返回字符串 `"A"`。 46 | 47 | **字符串字面量 (通过单引号或双引号定义) 和 直接调用 String 方法(没有通过 new 生成字符串对象实例)的字符串都是基本字符串。JavaScript会自动将基本字符串转换为字符串对象，只有将基本字符串转化为字符串对象之后才可以使用字符串对象的方法。当基本字符串需要调用一个字符串对象才有的方法或者查询值的时候(基本字符串是没有这些方法的)，JavaScript 会自动将基本字符串转化为字符串对象并且调用相应的方法或者执行查询。** 48 | 49 | **参考资料：** 50 | 51 | [基本字符串和字符串对象的区别](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String) 52 | 53 | [资料来源：点击测试](http://javascript-puzzlers.herokuapp.com/) 54 | 55 | [参考文档](http://f2ex.cn/do-you-really-know-javascript/) -------------------------------------------------------------------------------- /docs/basic-computer/browser/005.md: -------------------------------------------------------------------------------- 1 | # window.opener安全问题 2 | 3 | > window.opener 表示打开当前窗体页面的的父窗体是谁 4 | 5 | !>例如，在 A 页面中，通过一个带有 target="_blank" 的 a 标签打开了一个新的页面 B，那么在 B 页面里， window.opener 的值为 A 页面的 window 对象。 6 | 无来源的打开的页面，或者被禁止了 opener 的页面创建/打开，opener 的值为 null 。** 7 | 8 | 打开同源(域名相同)的页面，不会有什么问题。但对于跨域的外部链接来说，存在一个被钓鱼的风险。比如你正在浏览购物网站，从当前网页打开了某个外部链接，在打开的外部页面，可以通过 window.opener.location 改写来源站点的地址。利用这一点，将来源站点改写到钓鱼站点页面上，例如跳转到伪造的高仿购物页面，当再回到购物页面的时候，是很难发现购物网站的地址已经被修改了的，这个时候你的账号就存在被钓鱼的可能了。 9 | 10 | **预防策略（如何禁用 window.opener）：** 11 | 12 | - 设置 rel 属性 13 | 14 | ```html 15 | 新浪微博 16 | ``` 17 | 18 | > `rel=noopener` 规定禁止新页面传递 `rel=noopener`，通过设置了此属性的链接打开的页面，其 `window.opener` 的值为 `null`。 19 | 但该属性在 chrome 49+，Opera 36+ 版本中才得到支持。 20 | 在不支持 `rel=noopener` 属性的浏览器中，可以使用 `rel=noreferrer` 禁用 HTTP 头部的 `Referer` 属性跟踪来源页面，得到的效果一样。 21 | 22 | - widow.open 方式 23 | 24 | **对于使用 widow.open 脚本打开的新页面，由于可以得到新页面的窗体句柄，那么可以改写它的 opener 值。** 25 | 26 | ```js 27 | var newWin = window.open('https://lzw.me'); 28 | newWin.opener = null; 29 | ``` 30 | 31 | ```js 32 | $(documnet).on('click', 'a', function(e) { 33 | var href = $(this).prop('href'), 34 | newWin; 35 | 36 | // 非同源链接 37 | if (/^http(s)/i.test(href) && !href.indexOf(location.hostname)) { 38 | e.preventDefault(); 39 | newWin = window.open(href); 40 | newWin.opener = null; 41 | } 42 | }); 43 | ``` 44 | 45 | **参考资料：** 46 | 47 | * [题目来源](https://juejin.im/post/5dca1b376fb9a04a9f11c82e#heading-10) 48 | * [禁用 window.opener](http://ju.outofmemory.cn/entry/293626) 49 | -------------------------------------------------------------------------------- /docs/synthesize/hybrid-h5.md: -------------------------------------------------------------------------------- 1 | # hybrid 和 h5 有何区别？ 2 | 3 | ?> Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 4 | 5 | > **1、mobile application：Hybrid App就是一个移动应用** 6 | 7 | > **2、both browser-supported language and computer language：同时使用网页语言与程序语言编写** 8 | 9 | > **3、available through application distribution platforms：通过应用商店进行分发** 10 | 11 | > **4、a target device：区分目标平台** 12 | 13 | > **5、install to run：用户需要安装使用** 14 | 15 | ### 区别 16 | 17 | > `hybrid` 是通过file协议加载的本地文件，`h5` 是通过http协议加载的网络文件，前者速度快。 18 | 19 | > `hybrid` 是通过为不同版本打包进行更新，而 `h5` 没有版本的概念，每次都获取服务端的最新版。 20 | 21 | > `hybrid` 更加依赖于客户端的能力，因此会更多的和客户端通讯，而 `h5` 基本用不到和客户端通讯。 22 | 23 | #### hybrid 24 | 25 | **优势：** 26 | 27 | （1）运行速度比较快 28 | 29 | （2）能使用设备的底层功能，如摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等 30 | 31 | （3）在界面设计、功能模块、操作逻辑等层面相较web更易做到App的便捷性和舒适性，功能更加强大 32 | 33 | （4）节省流量 34 | 35 | **劣势：** 36 | 37 | （1）不同的操作系统（如Android和iOS）需要独立的进行开发，使用其各自的开发包、开发工具和控件 38 | 39 | （2）每次有更新，都需要重新打包一次发布到应用平台上，且每次要向各个应用商店进行提交审核。之后用户需要手动进行点击更新安装（安装成本较高） 40 | 41 | （3）开发成本比较高，尤其需要适配各种机型时（如Android应用，需要适配各种Android手机） 42 | 43 | 44 | 45 | #### H5页面 46 | 47 | **优势：** 48 | 49 | （1）由于是运行在浏览器上，所以只需要开发一次便可以在不同的操作系统上显示 50 | 51 | （2）迭代版本时，不需要打包便可以发布（实时更新、快速迭代），与云端实现实时数据交互 52 | 53 | （3）开发成本相对较低，对浏览器的适配较简单，且发布门槛相对较低 54 | 55 | **劣势：** 56 | 57 | （1）每次打开页面，都得重新加载，获取数据... 58 | 59 | （2）过于依赖网络，速度无法保证。特别在弱网环境下，不仅耗费流量而且加载缓慢，就算是WiFi情况下也不容乐观 60 | 61 | （3）只能使用有限的设备底层功能（无法使用摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等功能） 62 | 63 | （4）仍处于发展阶段，部分功能无法在基于现有技术的浏览器基础上实现，且无法全面的显示最完美的用户体验，只能用现有技术去弥去找最佳解决方案 64 | 65 | **参考资料：** 66 | 67 | [Hybrid App中原生页面 VS H5页面](https://www.cnblogs.com/laosong/p/5640498.html) 68 | -------------------------------------------------------------------------------- /docs/basic-computer/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [返回](welcome.md) 2 | * [计算机基础](basic-computer/index.md) 3 | 4 | * 网络基础、HTTP、TCP/IP 5 | * [HTTP状态码及其含义](basic-computer/basic.md) 6 | * [HTTP的请求方法](basic-computer/http/http-request.md) 7 | * [GET和POST区别？](basic-computer/http/http-get-post.md) 8 | * [http 2.0对于http 1.x有哪些优点？](basic-computer/http/http-1.md) 9 | * [TCP/IP协议图](basic-computer/http/tcp-ip-1.md) 10 | * [TCP三次握手和四次挥手的全过程](basic-computer/http/http-3.md) 11 | * [TCP/IP 和 HTTP 的区别和联系是什么？](basic-computer/http/http-2.md) 12 | * [OSI，TCP/IP，五层协议的体系结构，以及各层协议](basic-computer/http/http-bas.md) 13 | * [在下面的IP地址中属于C类地址的是哪一个?](basic-computer/http/http-4.md) 14 | * [了解交换机、路由器、网关的概念，并知道各自的用途](basic-computer/http/http-5.md) 15 | * [描述RARP(Reverse Address Resolution Protocol)协议](basic-computer/http/http-6.md) 16 | * [从输入URL到页面加载发生了什么](basic-computer/http/http-7.md) 17 | * [http的状态码中，499是什么？如何出现499，如何排查跟解决?](basic-computer/http/http-8.md) 18 | * [设计一个策略和方法，实现在https的前端项目里进行http请求](basic-computer/http/http-9.md) 19 | * [TCP和UDP的区别](basic-computer/http/http-10.md) 20 | * [fetch发送2次请求的原因](basic-computer/http/http-11.md) 21 | 22 | * 浏览器有关 23 | * [常见的浏览器内核有哪些?](basic-computer/browser/001.md) 24 | * [什么是浏览器同源策略？](basic-computer/browser/002.md) 25 | * [浏览器的主要组成部分是什么？](basic-computer/browser/003.md) 26 | * [怎么预防文件上传漏洞？](basic-computer/browser/004.md) 27 | * [window.opener安全问题](basic-computer/browser/005.md) 28 | * [如何减少回流?](basic-computer/browser/006.md) 29 | * [浏览器的渲染过程](basic-computer/browser/007.md) 30 | * [从页面 A 打开一个新页面 B，B 页面关闭（包括意外崩溃），如何通知 A 页面？（腾讯）](basic-computer/browser/253.md) 31 | 32 | * 其它 33 | * [V8如何执行一段JS代码](basic-computer/other/1.md) 34 | -------------------------------------------------------------------------------- /docs/javascript/basic.md: -------------------------------------------------------------------------------- 1 | # 1、使用 typeof bar === "object" 来确定 bar 是否是对象的潜在陷阱是什么？如何避免这个陷阱？ 2 | 3 | ### 知识点 4 | 5 | `typeof`是检测给定的变量的数据类型 6 | `"undefined"`--如果这个值未定义 7 | `"boolean"`--如果这个值是布尔值 8 | `"string"`--如果这个值是字符串 9 | `"number"`--如果这个值是数值 10 | `"object"`--如果这个值是对象或者null 11 | `"function"`--如果这个值是函数 12 | 13 | `typeof bar === "object"`用来检测是否为对象的方法，就像`typeof bar === "number"` 14 | 15 | ```js 16 | let bar = {a:1,b:2}; 17 | console.log(typeof bar === "object");// true 18 | ``` 19 | 从知识点我们可以知道，判断object的时候，有可能是null,因特殊值`null`会被认为空的对象引用 20 | ```js 21 | let bar = null; 22 | console.log(typeof bar === "object");// true 23 | ``` 24 | 因此我们需要首先判断是否为空 25 | ```js 26 | let bar = null,a = {id:1},c = {},b; 27 | console.log(bar !== null && typeof bar === "object");// false 28 | console.log(a !== null && typeof a === "object");// true 29 | console.log(c !== null && typeof c === "object");// true 30 | console.log(b !== null && typeof b === "object");// false 31 | ``` 32 | 那么如果`bar`变量是个Array呢？ 33 | ```js 34 | let bar = []; 35 | console.log(bar !== null && typeof bar === "object");// true 36 | 37 | # 因此需要判断一下是否为数组 38 | let bar = []; 39 | console.log(bar !== null && typeof bar === "object" && toString.call(bar)!=="[object Array]");// false 40 | 或 41 | console.log(bar !== null && typeof bar === "object" && !(bar instanceof Array));// false 42 | 或 43 | console.log(bar !== null && typeof bar === "object" && !(Array.isArray(bar)));// false 44 | ``` 45 | > Array.isArray()：ES5新增加的判断是否为数组的方法 46 | instanceof：运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 47 | 48 | **参考资料：** 49 | 50 | [原题来源](https://www.toptal.com/javascript/interview-questions) -------------------------------------------------------------------------------- /docs/react/re-6.md: -------------------------------------------------------------------------------- 1 | # 如果你创建了类似于下面的Twitter元素，那么它相关的类定义是啥样子的？ 2 | 3 | ?> 英：If you created a React element like Twitter below, what would the component definition of Twitter look like? 4 | 5 | ```js 6 | 7 | {(user) => user === null 8 | ? 9 | : } 10 | 11 | ``` 12 | 13 | ```js 14 | import React, { Component, PropTypes } from 'react' 15 | import fetchUser from 'twitter' 16 | // fetchUser take in a username returns a promise 17 | // which will resolve with that username's data. 18 | 19 | class Twitter extends Component { 20 | // finish this 21 | } 22 | ``` 23 | 24 | **答：** 25 | 26 | > 如果你还不熟悉回调渲染模式（`Render Callback Pattern`），这个代码可能看起来有点怪。这种模式中，组件会接收某个函数作为其子组件，然后在渲染函数中以`props.children`进行调用： 27 | 28 | ```js 29 | import React, { Component, PropTypes } from 'react' 30 | import fetchUser from 'twitter' 31 | 32 | class Twitter extends Component { 33 | state = { 34 | user: null, 35 | } 36 | static propTypes = { 37 | username: PropTypes.string.isRequired, 38 | } 39 | componentDidMount () { 40 | fetchUser(this.props.username) 41 | .then((user) => this.setState({user})) 42 | } 43 | render () { 44 | return this.props.children(this.state.user) 45 | } 46 | } 47 | ``` 48 | 49 | > 这种模式的优势在于将父组件与子组件解耦和，父组件可以直接访问子组件的内部状态而不需要再通过`Props`传递，这样父组件能够更为方便地控制子组件展示的UI界面。譬如产品经理让我们将原本展示的Badge替换为Profile，我们可以轻易地修改下回调函数即可： 50 | 51 | ```js 52 | 53 | {(user) => user === null 54 | ? 55 | : } 56 | 57 | ``` 58 | 59 | **参考资料：** 60 | 61 | [题目来源](https://segmentfault.com/a/1190000008102870) 62 | 63 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/javascript/important-1.md: -------------------------------------------------------------------------------- 1 | # setTimeout面试连击 2 | 3 | ## 第一击 4 | 5 | ```js 6 | for (var i = 0; i < 5; i++) { 7 | console.log(i); 8 | } 9 | ``` 10 | 11 | > `答案：` 0 1 2 3 4 12 | 13 | 14 | ## 第二击 15 | 16 | ```js 17 | for (var i = 0; i < 5; i++) { 18 | setTimeout(function() { 19 | console.log(i); 20 | }, 1000 * i); 21 | } 22 | ``` 23 | 24 | > `答案：` 5 5 5 5 5 25 | 26 | ## 第三击 27 | 28 | **怎么修改输出0 1 2 3 4** 29 | 30 | ```js 31 | # 闭包模式 或者Es6的`let` 32 | for (var i = 0; i < 5; i++) { 33 | (function(i) { 34 | setTimeout(function() { 35 | console.log(i); 36 | }, i * 1000); 37 | })(i); 38 | } 39 | ``` 40 | 41 | 42 | ## 第四击 43 | 44 | ```js 45 | for (var i = 0; i < 5; i++) { 46 | (function() { 47 | setTimeout(function() { 48 | console.log(i); 49 | }, i * 1000); 50 | })(i); 51 | } 52 | ``` 53 | 54 | > `答案：` 5 5 5 5 5 55 | 56 | 57 | ## 第五击 58 | 59 | ```js 60 | 61 | for (var i = 0; i < 5; i++) { 62 | setTimeout((function(i) { 63 | console.log(i); 64 | })(i), i * 1000); 65 | } 66 | 67 | ``` 68 | 69 | > `答案：` 0 1 2 3 4 70 | 71 | ## 第六击 72 | 73 | **运行机制** 74 | 75 | ```js 76 | setTimeout(function() { 77 | console.log(1) 78 | }, 0); 79 | new Promise(function executor(resolve) { 80 | console.log(2); 81 | for( var i=0 ; i<10000 ; i++ ) { 82 | i == 9999 && resolve(); 83 | } 84 | console.log(3); 85 | }).then(function() { 86 | console.log(4); 87 | }); 88 | console.log(5); 89 | ``` 90 | 91 | **`setTimeout`属于异步进程任务，会放到任务队列等待执行** 92 | 93 | **`Promise`里面是立即执行函数，因此先输出2和3，`then`则会在当前tick的最后执行，因此会先输出5，再接着输出4，最后输出1** 94 | 95 | > `答案：` 2 3 5 4 1 96 | 97 | **参考资料：** 98 | 99 | [题目来源](https://zhuanlan.zhihu.com/p/25407758) 100 | -------------------------------------------------------------------------------- /docs/basic-computer/http/http-5.md: -------------------------------------------------------------------------------- 1 | # 了解交换机、路由器、网关的概念，并知道各自的用途 2 | 3 | ### 交换机 4 | 5 | > **在计算机网络系统中，交换机是针对共享工作模式的弱点而推出的。交换机拥有一条高带宽的背部总线和内部交换矩阵。交换机的所有的端口都挂接在这条背部总线上，当控制电路收到数据包以后，处理端口会查找内存中的地址对照表以确定`目的MAC`（网卡的硬件地址）的`NIC（网卡）`挂接在哪个端口上，通过内部 交换矩阵迅速将数据包传送到目的端口。目的MAC若不存在，交换机才广播到所有的端口，接收端口回应后交换机会“学习”新的地址，并把它添加入内部地址表中。** 6 | 7 | > **交换机工作于`OSI`参考模型的第二层，即数据链路层。交换机内部的`CPU`会在每个端口成功连接时，通过`ARP`协议学习它的`MAC`地址，保存成一张 `ARP`表。在今后的通讯中，发往该`MAC`地址的数据包将仅送往其对应的端口，而不是所有的端口。因此，交换机可用于划分数据链路层广播，即冲突域；但它不 能划分网络层广播，即广播域。** 8 | 9 | > **交换机被广泛应用于二层网络交换，俗称“`二层交换机`”。** 10 | 11 | > **交换机的种类有：`二层交换机`、`三层交换机`、`四层交换机`、`七层交换机`分别工作在`OSI`七层模型中的第二层、第三层、第四层盒第七层，并因此而得名。** 12 | 13 | ### 路由器 14 | 15 | > **`路由器（Router）`是一种计算机网络设备，提供了路由与转送两种重要机制，可以决定数据包从来源端到目的端所经过 的路由路径（host到host之间的传输路径），这个过程称为路由；将路由器输入端的数据包移送至适当的路由器输出端(在路由器内部进行)，这称为转 送。** 16 | 17 | > **路由工作在OSI模型的第三层——即网络层，例如网际协议。** 18 | 19 | > **路由器的一个作用是连通不同的网络，另一个作用是选择信息传送的线路。 路由器与交换器的差别，路由器是属于OSI第三层的产品，交换器是OSI第二层的产品(这里特指二层交换机)。** 20 | 21 | ### 网关 22 | 23 | > **`网关（Gateway）`，网关顾名思义就是连接两个网络的设备，区别于路由器（由于历史的原因，许多有关TCP/IP 的文献曾经把网络层使用的路由器（Router）称为网关，在今天很多局域网采用都是路由来接入网络，因此现在通常指的网关就是路由器的IP），经常在家 庭中或者小型企业网络中使用，用于连接局域网和Internet。 网关也经常指把一种协议转成另一种协议的设备，比如语音网关。** 24 | 25 | > **在传统`TCP/IP`术语中，网络设备只分成两种，一种为`网关（gateway）`，另一种为`主机（host）`。网关能在网络间转递数据包，但主机不能 转送数据包。在主机（又称终端系统，end system）中，数据包需经过TCP/IP四层协议处理，但是在网关（又称中介系 统，intermediate system）只需要到达网际层（Internet layer），决定路径之后就可以转送。在当时，`网关 （gateway）`与`路由器（router）`还没有区别。** 26 | 27 | > **在现代网络术语中，`网关（gateway）`与`路由器（router）`的定义不同。`网关（gateway）`能在不同协议间移动数据，而`路由器（router）`是在不同网络间移动数据，相当于传统所说的`IP网关`（IP gateway）。** 28 | 29 | > **网关是连接两个网络的设备，对于语音网关来说，他可以连接PSTN网络和以太网，这就相当于VOIP，把不同电话中的模拟信号通过网关而转换成数字信号，而且加入协议再去传输。在到了接收端的时候再通过网关还原成模拟的电话信号，最后才能在电话机上听到。** 30 | 31 | > **对于以太网中的网关只能转发三层以上数据包，这一点和路由是一样的。而不同的是网关中并没有路由表，他只能按照预先设定的不同网段来进行转发。网关最重要的一点就是端口映射，子网内用户在外网看来只是外网的IP地址对应着不同的端口，这样看来就会保护子网内的用户。** 32 | 33 | **参考资料：** 34 | 35 | [题目来源](https://www.nowcoder.com/ta/review-network/review?page=11) 36 | 37 | -------------------------------------------------------------------------------- /docs/welcome.md: -------------------------------------------------------------------------------- 1 |
前端面试题持续更新，欢迎提供不错的面试题，欢迎随时纠错
2 |
3 |
CODEHTML
4 | 5 | * [Daily-Interview-Question: 工作日每天一道大厂前端面试题，一年后再回头，会感谢曾经努力的自己！](https://github.com/Advanced-Frontend/Daily-Interview-Question) 6 | * [反向面试: 技术面试最后反问面试官的话](https://github.com/yifeikong/reverse-interview-zh) 7 | * [前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！](https://github.com/haizlin/fe-interview) 8 | * [15万字面试资料: yck(面试之道作者)](https://github.com/InterviewMap/CS-Interview-Knowledge-Map) 9 | * [Weekly-FE-Interview: 每天周十道前端大厂面试题，帮助大家成长，助力小伙伴进入自己理想的企业](https://github.com/airuikun/Weekly-FE-Interview) 10 | * [JavaScript 进阶问题列表](https://github.com/lydiahallie/javascript-questions/blob/master/zh-CN/README-zh_CN.md) 11 | * [中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)](https://juejin.im/post/5c64d15d6fb9a049d37f9c20) 12 | * [中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂(中)](https://juejin.im/post/5c92f499f265da612647b754) 13 | * [中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂(下)](https://juejin.im/post/5cc26dfef265da037b611738) 14 | * [2018前端面试总结，看完弄懂，工资少说加3K](https://juejin.im/post/5b94d8965188255c5a0cdc02) 15 | * [一个合格(优秀)的前端都应该阅读这些文章](https://juejin.im/post/5d387f696fb9a07eeb13ea60) 16 | * [寒冬求职季之你必须要懂的原生JS(上)](https://juejin.im/post/5cab0c45f265da2513734390) 17 | * [寒冬求职季之你必须要懂的原生JS(中)](https://juejin.im/post/5cbd1e33e51d45789161d053) 18 | * [前端面试考点多？看这些文章就够了（2019年6月更新版）](https://juejin.im/post/5aae076d6fb9a028cc6100a9) 19 | * [寒冬求职之你必须要懂的Web安全](https://juejin.im/post/5cd6ad7a51882568d3670a8e) 20 | * [这儿有20道大厂面试题等你查收](https://juejin.im/post/5d124a12f265da1b9163a28d) 21 | * [「中高级前端面试」JavaScript手写代码无敌秘籍](https://juejin.im/post/5c9c3989e51d454e3a3902b6) 22 | * [30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）](https://juejin.im/post/5d59f2a451882549be53b170) 23 | * [[译] 送你 43 道 JavaScript 面试题](https://juejin.im/post/5d0644976fb9a07ed064b0ca) 24 | * [每天一道面试题，有关前端，后端，devops以及软技能，促进职业成长，敲开大厂之门。](https://github.com/shfshanyue/Daily-Question) 25 | * [持续更新中]() -------------------------------------------------------------------------------- /docs/algorithm/14.md: -------------------------------------------------------------------------------- 1 | # N皇后（高频） 2 | 3 | > n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上，并且使皇后彼此之间不能相互攻击。 4 | 5 | ![image](./image/8.jpg) 6 | 7 | 上图为 8 皇后问题的一种解法。 8 | 9 | 给定一个整数 n，返回所有不同的 n 皇后问题的解决方案。 10 | 11 | 每一种解法包含一个明确的 n 皇后问题的棋子放置方案，该方案中 'Q' 和 '.' 分别代表了皇后和空位。 12 | 13 | 示例 14 | 15 | ``` 16 | 输入: 4 17 | 输出: [ 18 | [".Q..", // 解法 1 19 | "...Q", 20 | "Q...", 21 | "..Q."], 22 | 23 | ["..Q.", // 解法 2 24 | "Q...", 25 | "...Q", 26 | ".Q.."] 27 | ] 28 | 解释: 4 皇后问题存在两个不同的解法。 29 | 30 | ``` 31 | 提示： 32 | 33 | 皇后，是国际象棋中的棋子，意味着国王的妻子。皇后只做一件事，那就是“吃子”。当她遇见可以吃的棋子时，就迅速冲上去吃掉棋子。当然，她横、竖、斜都可走一到七步，可进可退。（引用自 百度百科 - 皇后 ） 34 | 35 | ```js 36 | /** 37 | * @param {number} n 38 | * @return {string[][]} 39 | */ 40 | var solveNQueens = function(n) { 41 | 42 | }; 43 | ``` 44 | 45 | ### 答案： 46 | 47 | ```js 48 | var solveNQueens = function(n) { 49 | let res = [] 50 | dfs(n, [], res) 51 | return res 52 | } 53 | 54 | /** 55 | * 递归计算 N 皇后的解 56 | * @param {number} n 57 | * @param {number[]} tmp 长度为 n 的数组，tmp[i] 代表第 i 行的皇后放置的位置 58 | * @param {string[]} res 59 | */ 60 | function dfs(n, tmp, res) { 61 | // 如果 tmp 长度为 n，代表所有皇后放置完毕 62 | if (tmp.length === n) { 63 | // 把这种解记录下来 64 | res.push( 65 | tmp.map(i => { 66 | let strArr = Array(n).fill('.') 67 | strArr.splice(i, 1, 'Q') 68 | return strArr.join('') 69 | }) 70 | ) 71 | return 72 | } 73 | // 每次有 n 个选择，该次放置在第几列 74 | for (let j = 0; j < n; j++) { 75 | // 如果当前列满足条件 76 | if (isValid(tmp, j)) { 77 | // 记录当前选择 78 | tmp.push(j) 79 | // 继续下一次的递归 80 | dfs(n, tmp, res) 81 | // 撤销当前选择 82 | tmp.pop() 83 | } 84 | } 85 | } 86 | 87 | function isValid(tmp, j) { 88 | let i = tmp.length 89 | for (let x = 0; x < i; x++) { 90 | let y = tmp[x] 91 | if (y === j || x - y === i - j || x + y === i + j) { 92 | return false 93 | } 94 | } 95 | return true 96 | } 97 | ``` 98 | 99 | * [原题地址](https://leetcode-cn.com/problems/n-queens/) -------------------------------------------------------------------------------- /docs/react/re-7.md: -------------------------------------------------------------------------------- 1 | # Controlled Component 与 Uncontrolled Component 之间的区别是什么？ 2 | 3 | ?> 英：What is the difference between a controlled component and an uncontrolled component? 4 | 5 | **答：** 6 | 7 | > `React` 的核心组成之一就是能够维持内部状态的自治组件，不过当我们引入原生的`HTML`表单元素时（`input,select,textarea` 等），我们是否应该将所有的数据托管到 `React` 组件中还是将其仍然保留在 `DOM` 元素中呢？这个问题的答案就是受控组件与非受控组件的定义分割。 8 | 9 | > 受控组件（`Controlled Component`）代指那些交由 `React` 控制并且所有的表单数据统一存放的组件。譬如下面这段代码中username变量值并没有存放到DOM元素中，而是存放在组件状态数据中。任何时候我们需要改变username变量值时，我们应当调用`setState`函数进行修改。 10 | 11 | ```js 12 | class ControlledForm extends Component { 13 | state = { 14 | username: '' 15 | } 16 | updateUsername = (e) => { 17 | this.setState({ 18 | username: e.target.value, 19 | }) 20 | } 21 | handleSubmit = () => {} 22 | render () { 23 | return ( 24 |
25 | 29 | 30 |
31 | ) 32 | } 33 | } 34 | ``` 35 | 36 | > 而非受控组件（`Uncontrolled Component`）则是由`DOM`存放表单数据，并非存放在 `React` 组件中。我们可以使用 `refs` 来操控`DOM`元素： 37 | 38 | ```js 39 | class UnControlledForm extends Component { 40 | handleSubmit = () => { 41 | console.log("Input Value: ", this.input.value) 42 | } 43 | render () { 44 | return ( 45 |
46 | this.input = input} /> 49 | 50 |
51 | ) 52 | } 53 | } 54 | ``` 55 | 56 | > 竟然非受控组件看上去更好实现，我们可以直接从 `DOM` 中抓取数据，而不需要添加额外的代码。不过实际开发中我们并不提倡使用非受控组件，因为实际情况下我们需要更多的考虑表单验证、选择性的开启或者关闭按钮点击、强制输入格式等功能支持，而此时我们将数据托管到 `React` 中有助于我们更好地以声明式的方式完成这些功能。引入 `React` 或者其他 `MVVM` 框架最初的原因就是为了将我们从繁重的直接操作 `DOM` 中解放出来。 57 | 58 | 59 | **参考资料：** 60 | 61 | [题目来源](https://segmentfault.com/a/1190000008102870) 62 | 63 | [翻译文章](https://tylermcginnis.com/react-interview-questions/) -------------------------------------------------------------------------------- /docs/javascript/mustKnow/mk-12.md: -------------------------------------------------------------------------------- 1 | # 13、根据下面的代码片段回答后面的问题 2 | 3 | ```js 4 | for (var i = 0; i < 5; i++) { 5 | var btn = document.createElement('button'); 6 | btn.appendChild(document.createTextNode('Button ' + i)); 7 | btn.addEventListener('click', function(){ console.log(i); }); 8 | document.body.appendChild(btn); 9 | } 10 | 11 | 12 | 13 | 14 | 15 | ``` 16 | 17 | ### 问：点击 Button 4，会在控制台输出什么？ 18 | 19 | > `答案：` 5 点击任何按钮都是5 20 | 21 | ### 问：给出一种符合预期的实现方式 22 | 23 | - **通过闭包传参数** 24 | ```js 25 | for (var i = 0; i < 5; i++) { 26 | var btn = document.createElement('button'); 27 | btn.appendChild(document.createTextNode('Button ' + i)); 28 | btn.addEventListener('click', (function(i) { 29 | return function() { console.log(i); }; 30 | })(i)); 31 | document.body.appendChild(btn); 32 | } 33 | ``` 34 | 35 | - **对`btn.addEventListener`的匿名函数** 36 | ```js 37 | for (var i = 0; i < 5; i++) { 38 | var btn = document.createElement('button'); 39 | btn.appendChild(document.createTextNode('Button ' + i)); 40 | (function (i) { 41 | btn.addEventListener('click', function() { console.log(i); }); 42 | })(i); 43 | document.body.appendChild(btn); 44 | } 45 | ``` 46 | 47 | - **数组对象的原生`forEach`方法** 48 | ```js 49 | ['a', 'b', 'c', 'd', 'e'].forEach(function (value, i) { 50 | var btn = document.createElement('button'); 51 | btn.appendChild(document.createTextNode('Button ' + i)); 52 | btn.addEventListener('click', function() { console.log(i); }); 53 | document.body.appendChild(btn); 54 | }); 55 | ``` 56 | 57 | - **`let i` 代替 `var i`** 58 | ```js 59 | for (let i = 0; i < 5; i++) { 60 | var btn = document.createElement('button'); 61 | btn.appendChild(document.createTextNode('Button ' + i)); 62 | btn.addEventListener('click', function(){ console.log(i); }); 63 | document.body.appendChild(btn); 64 | } 65 | ``` 66 | 67 | **参考资料：** 68 | 69 | [题目来源](https://www.toptal.com/javascript/interview-questions) 70 | -------------------------------------------------------------------------------- /docs/algorithm/alg-2.md: -------------------------------------------------------------------------------- 1 | # 素数: 你将如何验证一个素数？ 2 | 3 | ?> 一个素数只能被它自己和1整除。所以，我将运行一个while循环并加1。看代码示例，如果你无法理解，那这不是你的菜。先回去学习javaScript基础知识然后再回来吧。） 4 | 5 | ?> **`素数（质数）`定义为在大于1的自然数中，除了1和它本身以外不再有其他因数。** 6 | 7 | ## 验证方法1 8 | 9 | ```js 10 | function isPrime(n){ 11 | var divisor = 2; 12 | while (n > divisor){// 必须大于1 13 | if(n % divisor == 0){// 不等于自己且存在被整除，则不是素数 14 | return false; 15 | } 16 | else 17 | divisor++; 18 | } 19 | return true; 20 | } 21 | isPrime(137); // = true 22 | isPrime(237); // = false 23 | ``` 24 | 25 | > **`问`：你能做的更好吗？** 26 | 27 | > **`答`：可以。除数一次增加1个。 在3之后我可以增加2.如果一个数可以被任何偶数整除，它将被2整除。** 28 | 29 | **补充：如果你不需要把除数增加到这个数。你可以更早停止。让我在下面的步骤中解释一下（如果需要可以多读几遍）** 30 | 31 | > **`第一步`: 任何数字都不能被大于它的一半的数字整除。 例如，13将永远不能被7,8,9整除……它甚至可以是偶数的一半。 例如，16将被8整除，但永远不会被9,10,11,12 ……** 32 | 33 | > **结论：一个数字将永远不能被一个大于其一半数值的数字整除。 所以，我们可以少循环`50％`。** 34 | 35 | > **`第二步`: 现在，如果一个数字不能被3整除。（如果它可被3整除，那么它就不是质数）。然后，它不可以被大于其值1/3的任何数整除。例如，35不能被3整除。因此，它永远不会被大于35/3的数整除，永远不能被12, 13, 14整除…如果你取一个像36一样的偶数，它将永远不能被13, 14, 15整除。** 36 | 37 | > **结论： 一个数字可以被其数值的三分之一整除。** 38 | 39 | > **`第三步`: 例如，你有一个数字127。127不能被2整除，因此你最多应该检查63.5。其次，127不能被3整除。因此，您将检查到127/3大约42。它不能被5整除，除数应该小于127/5大约25，而不是7。那么，我们该在哪里停下来？** 40 | 41 | > **结论： 除数将小于`math.sqrt(N)`** 42 | 43 | ## 验证方法2 44 | 45 | ```js 46 | function isPrime(n){ 47 | var divisor = 3, 48 | limit = Math.sqrt(n);// 返回n的平方根 49 | //check simple cases 50 | if (n == 2 || n == 3) 51 | return true; 52 | if (n % 2 == 0)// 大于2的偶数 53 | return false; 54 | while (divisor <= limit) 55 | { 56 | if (n % divisor == 0) 57 | return false; 58 | else 59 | divisor += 2; 60 | } 61 | return true; 62 | } 63 | isPrime(137); // = true 64 | isPrime(237); // = false 65 | ``` 66 | 67 | **参考资料** 68 | 69 | [素数](https://baike.baidu.com/item/%E8%B4%A8%E6%95%B0/263515?fr=aladdin) 70 | 71 | [JS: Interview Algorithm](http://thatjsdude.com/interview/js1.html) 72 | 73 | [翻译：JS: Interview Algorithm](https://www.liayal.com/article/5ac46c20a6cf4e67bc05c9f4#%E6%96%B9%E6%B3%952) 74 | 75 | [MDN: Math.sqrt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt) -------------------------------------------------------------------------------- /docs/html/html-doctype.md: -------------------------------------------------------------------------------- 1 | # Doctype的文档类型 2 | 3 | **Doctype作用? 严格模式与混杂模式如何区分？有何意义？** 4 | > - 声明必须是 HTML 文档的第一行，位于 标签之前. 5 | > - 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 6 | > - 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 7 | > - DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现 8 | > - 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 9 | 10 | 11 | **Doctype文档类型** 12 | 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 13 | 14 | - HTML5 只有一种`` 15 | - HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 16 | - XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 17 | - Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks 18 | - （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。 19 | 20 | **知识点：HTML常用的 DOCTYPE 声明** 21 | ``` 22 | # HTML 5 23 | 24 | 25 | # HTML 4.01 Strict 26 | 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 27 | 28 | 29 | # HTML 4.01 Transitional 30 | 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 31 | 33 | 34 | # HTML 4.01 Frameset 35 | 该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。 36 | 38 | ``` 39 | **知识点：XHTML常用的 DOCTYPE 声明** 40 | ``` 41 | # XHTML 1.0 Strict 42 | 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 43 | 45 | 46 | # XHTML 1.0 Transitional 47 | 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 48 | 50 | 51 | # XHTML 1.0 Frameset 52 | 该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容. 53 | 55 | 56 | # XHTML 1.1 57 | 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。 58 | 59 | ``` -------------------------------------------------------------------------------- /docs/javascript/important/im-2.md: -------------------------------------------------------------------------------- 1 | # 涉及同步、异步、作用域、闭包四连问 2 | 3 | ## 基础代码块 4 | 5 | ```js 6 | for (var i = 0; i < 5; i++) { 7 | setTimeout(function() { 8 | console.log(i); 9 | }, 1000); 10 | } 11 | 12 | console.log(i); 13 | ``` 14 | 15 | ?> `答案是` 5 5 5 5 5 5 16 | 17 | ## 追问：闭包 18 | 19 | ?> **期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码** 20 | 21 | - 闭包 22 | 23 | ```js 24 | for (var i = 0; i < 5; i++) { 25 | (function(j) { // j = i 26 | setTimeout(function() { 27 | console.log(j); 28 | }, 1000); 29 | })(i); 30 | } 31 | 32 | console.log(i); 33 | ``` 34 | - 按值传递 35 | 36 | ```js 37 | var output = function (i) { 38 | setTimeout(function() { 39 | console.log(i); 40 | }, 1000); 41 | }; 42 | 43 | for (var i = 0; i < 5; i++) { 44 | output(i); // 这里传过去的 i 值被复制了 45 | } 46 | 47 | console.log(i); 48 | ``` 49 | 50 | - ES6的let 51 | 52 | ```js 53 | for (let i = 0; i < 5; i++) { 54 | setTimeout(function() { 55 | console.log(new Date, i); 56 | }, 1000); 57 | } 58 | 59 | console.log(new Date, i); 60 | ``` 61 | 62 | ## 追问：ES6 63 | 64 | ?> **如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，该怎么改造代码？** 65 | 66 | ```js 67 | const tasks = []; // 这里存放异步操作的 Promise 68 | const output = (i) => new Promise((resolve) => { 69 | setTimeout(() => { 70 | console.log(new Date, i); 71 | resolve(); 72 | }, 1000 * i); 73 | }); 74 | 75 | // 生成全部的异步操作 76 | for (var i = 0; i < 5; i++) { 77 | tasks.push(output(i)); 78 | } 79 | 80 | // 异步操作完成之后，输出最后的 i 81 | Promise.all(tasks).then(() => { 82 | setTimeout(() => { 83 | console.log(new Date, i); 84 | }, 1000); 85 | }); 86 | ``` 87 | 88 | ## 追问：ES7 89 | 90 | ?> **如何使用 ES7 中的 `async` `await` 特性来让这段代码变的更简洁？你是否能够根据自己目前掌握的知识给出答案？** 91 | 92 | ```js 93 | const sleep = (timeountMS) => new Promise((resolve) => { 94 | setTimeout(resolve, timeountMS); 95 | }); 96 | 97 | (async () => { // 声明即执行的 async 函数表达式 98 | for (var i = 0; i < 5; i++) { 99 | await sleep(1000); 100 | console.log(new Date, i); 101 | } 102 | 103 | await sleep(1000); 104 | console.log(new Date, i); 105 | })(); 106 | ``` 107 | 108 | 109 | **参考资料：** 110 | 111 | [题目来源](https://www.nowcoder.com/discuss/22377) --------------------------------------------------------------------------------