diff --git a/03-JavaScript（二）/06-作用域和闭包.md b/03-JavaScript（二）/06-作用域和闭包.md index 7797237..ab3f879 100644 --- a/03-JavaScript（二）/06-作用域和闭包.md +++ b/03-JavaScript（二）/06-作用域和闭包.md @@ -551,7 +551,7 @@ PS：还有一个条件是**外部函数被调用，内部函数被声明**。 a++ console.log(a) } - return fn2 + return fn2; } var f = fn1(); //执行外部函数fn1，返回的是内部函数fn2 diff --git a/19-基础/00-基础.md b/19-基础/00-基础.md new file mode 100644 index 0000000..df805fc --- /dev/null +++ b/19-基础/00-基础.md @@ -0,0 +1,6 @@ + + + +## 20180323 + + diff --git a/19-基础/01-HTML和CSS相关.md b/19-基础/01-HTML和CSS相关.md new file mode 100644 index 0000000..2d19088 --- /dev/null +++ b/19-基础/01-HTML和CSS相关.md @@ -0,0 +1,329 @@ + + + + + +## HTML 相关 + + +### 你是如何理解 HTML 语义化的？ + + +**语义化**：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 + + +**举例**：段落用 p，边栏用 aside，主要内容用 main 标签。 + + +**好处：** + +- 便于开发者阅读和维护 + +- 有利于SEO：让浏览器的爬虫和辅助技术更好的解析， + + +**语义化标签介绍**： + +在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是`div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。 + +20180322_1120.jpg + + + +参考链接： + +- [初探 · HTML5语义化](https://zhuanlan.zhihu.com/p/32570423) + + +### meta viewport 是做什么用的，怎么写？ + + + +```html + +``` + +控制页面在移动端不要缩小显示。 + + +### canvas 元素是干什么的？ + +看 MDN 的 [canvas 入门手册](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)。 + + + + +## 说一下CSS盒模型 + +可以参考本人的另外一篇文章：[CSS盒模型及BFC](https://github.com/smyhvae/Web/blob/master/18/02-CSS%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%8F%8ABFC.md) + + + +### css reset 和 Normalize.css 有什么区别 + +> 此题考英文。 + +二者都是用来**统一**浏览器的默认样式： + +- reset：重置。相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。（一刀切） + +- `Normalize.css` ：标准化。相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。（去伪存真） + +参考链接： + +- [Normalize.css 与传统的 CSS Reset 有哪些区别？](https://p.baidu.com/question/ab496162636234613761335c00) + +- [CSS3初始化代码Normalize.css中文版](http://www.bbsxiaomi.com/html_css/html5_css3/177.html) + +- [谈谈一些有趣的 CSS 话题](https://github.com/chokcoco/iCSS) + +- [前端面试之CSS总结(上)](https://segmentfault.com/a/1190000006890725) + + +## 如何居中（必考） + + +### 水平居中 + +1、**行内元素：**（文字、图片等水平居中） + +给父亲设置： + + +``` + text-align: center; + +``` + +另外，**让文字的行高 等于 盒子的高度**，可以让单行文本垂直居中。 + + +2、**块级元素：**（让标准流中的盒子水平居中） + +给父亲设置： + +``` + //方式一 + margin: auto; + + 方式二 + margin: 0 auto; +``` + +上面的代码， `margin: auto`相当于`margin: auto auto auto auto`。`margin: 0 auto`相当于`margin: 0 auto 0 auto`，四个值分别对应上右下左。 + +- 垂直方向：根据规范，margin-top: auto 和 margin-bottom: auto，其计算值为0。 + +- 水平方向：水平方向的 auto，其计算值取决于可用空间（**剩余空间**）。 + +参考链接： + +### 垂直居中/水平居中（元素的高度已知） + +方法：绝对定位 + margin-top + +如果盒子是绝对定位的，此时已经脱标了，`margin:auto`无效。如果还想让其居中（位于父亲的正中间），可以这样做： + +```html + + + + + Title + + + + + +
+
+ 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字 +
+
+ + + +``` + +如上方代码所示，我们先让这个高度为100px的盒子，上边线居中，然后向上移动宽度的一半(50px)，就达到了垂直居中的效果。水平居中的原理类似。 + +效果： + +20180322_1843.png + +### 垂直居中/水平居中（元素的高度未知） + +**方法1：**模拟表格法 + +将父元素设置为display:table，然后将子元素也（就是要垂直居中显示的元素）设置为display:table-cell，然后加上vertical-align:middle来实现。 + +html代码： + +```html + + + + + Title + + + + + +
+
+
+

测试垂直居中效果测试垂直居中效果测试垂直居中效果测试垂直居中效果

+
+
+
+ + + + +``` + + + + +效果： + +20180322_1833.png + +**方式二：**绝对定位 + `margin:auto` + +```css +.element { + position: absolute; + left: 0; top: 0; right: 0; bottom: 0; + margin: auto; /* 有了这个就自动居中了 */ +} +``` + + +代码两个关键点： + +- 上下左右均0位置定位； + +- margin: auto + + + + + +**方式三：**用绝对定位 + translate 位移来做 + +```css + div { + background-color: red; + position: absolute; 绝对定位的盒子 + top: 50%; 首先，让上边线居中 + transform: translateY(-50%); 然后，利用translate，往上走自己宽度的一半【推荐写法】 + } +``` + + +**方式四：**flex 布局 + +```css + .parent{ + display: flex;/*Flex布局*/ + display: -webkit-flex; /* Safari */ + align-items: center;/*设置子元素在侧轴方向上的布局*/ + } +``` + + +参考链接： + +- [七种方式实现垂直居中](https://jscode.me/t/topic/1936) + +- [margin:auto实现绝对定位元素的水平垂直居中](http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/) + + +## 选择器的优先级如何确定 + +- 选择器越具体，优先级越高。 #xxx 大于 .yyy + +- 同样优先级，写在后面的覆盖前面的。 + +- color: red !important; 优先级最高。 + + +## BFC 是什么 + + +overflow:hidden ：取消父子 margin 合并。 （另一种推荐做法：`padding-top: 0.1px;`） + + +## 如何清除浮动 + +（1）overflow: hidden + +（2）.clearfix 清除浮动写在爸爸身上 + +```css + .clearfix::after { + content: ''; + display: block; + clear: both; + } + + /* 兼容 IE */ + .clearfix { + zoom: 1; + } +``` + + + +## 参考链接 + +- [互联网公司招聘启事的正确阅读方式](https://zhuanlan.zhihu.com/p/33998813) + + diff --git a/19-基础/01-常见.md b/19-基础/01-常见.md deleted file mode 100644 index 0435c2c..0000000 --- a/19-基础/01-常见.md +++ /dev/null @@ -1,74 +0,0 @@ - - -## HTML - - -### 你是如何理解 HTML 语义化的？ - - -**语义化**：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 - - -**举例**：段落用 p，边栏用 aside，主要内容用 main 标签。 - - -**好处：** - -- 便于开发者阅读和维护 - -- 有利于SEO：让浏览器的爬虫和辅助技术更好的解析， - - -**语义化标签介绍**： - -在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是`div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。 - -20180322_1120.jpg - - - -参考链接： - -- [初探 · HTML5语义化](https://zhuanlan.zhihu.com/p/32570423) - - -### meta viewport 是做什么用的，怎么写？ - - - -```html - -``` - -控制页面在移动端不要缩小显示。 - - -### canvas 元素是干什么的？ - -看 MDN 的 [canvas 入门手册](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)。 - - - -## CSS - -### 说一下盒模型 - -可以参考本人的另外一篇文章：[]() - - - - - - - - - - - - - -## 参考链接 - -- [互联网公司招聘启事的正确阅读方式](https://zhuanlan.zhihu.com/p/33998813) - - diff --git a/19-基础/02-JS相关.md b/19-基础/02-JS相关.md new file mode 100644 index 0000000..dbf8f9d --- /dev/null +++ b/19-基础/02-JS相关.md @@ -0,0 +1,361 @@ + + +## JS 有哪些数据类型 + +- 基本数据类型：string number bool undefined null + +- 引用数据类型：object、symbol。 + +另外，object 包括：数组、函数、正则、日期等对象。NaN属于number类型。 + +注意，数据类型里，没有数组。因为数组属于object（一旦说数组、函数、正则、日期、NaN是数据类型，直接0分）。 + + + +## Promise 怎么使用 + +then： + +```javascript + $.ajax(...).then(成功函数, 失败函数) +``` + + + +链式 then： + +```javascript + $.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2) +``` + + +如何自己生成 Promise 对象： + +```javascript + function xxx(){ + return new Promise(function(resolve, reject){ + setTimeout(()=>{ + resolve() 或者 reject() + },3000) + }) + } + xxx().then(...) +``` + + +## ajax手写 + + + + +```javascript + let xhr = new XMLHttpRequest(); + xhr.open('POST', '/xxxx'); + xhr.onreadystatechange = function(){ + if(xhr.readyState === 4 && xhr.status === 200){ + console.log(xhr.responseText) + } + } + xhr.send('a=1&b=2'); + +``` + + +## 闭包是什么 + + + + + + +```javascript + function fn1() { + var a = 2 + + function fn2() { + a++ + console.log(a) + } + return fn2; + } + + var f = fn1(); //执行外部函数fn1，返回的是内部函数fn2 + f() // 3 //执行fn2 + f() // 4 //再次执行fn2 + console.log(a); // 会报错：a is not defined + +``` + + +参考链接： + +- [JS 中的闭包是什么？](https://zhuanlan.zhihu.com/p/22486908) + + +## 这段代码里的 this 是什么？ + +1、fn() 里面的 this 就是 window + +2、fn() 是 strict mode，this 就是 undefined + +3、a.b.c.fn() 里面的 this 就是 a.b.c + +4、new F() 里面的 this 就是新生成的实例 + +5、() => console.log(this) ，这个this指的是外面的 this。 + +参考链接： + +- [this 的值到底是什么？](https://zhuanlan.zhihu.com/p/23804247) + +## 什么是立即执行函数？作用是？ + + +立即执行函数： + +（1）声明一个匿名函数，（2）马上调用这个匿名函数。如下： + +```javascript + (function(a, b) { + var name; //声明一个局部变量 + console.log("a = " + a); + console.log("b = " + b); + })(123, 456); +``` + + +**作用：**创建一个独立的作用域，防止污染全局变量。 + +因为我们只能通过函数的形式声明一个局部变量。当有了ES6之后，我们可以通过let来定义一个局部变量： + + +```javascript + { + let name + } +``` + +上面这段代码，就相当于立即执行函数。有了let，立即执行函数就毫无意义。 + + +参考链接： + +## ES6 新特性 + + +## async/await 语法了解吗？目的是什么？ + +目的：把异步代码写成同步代码的形式。 + + +我们知道，promise是这样写的： + + +```javascript + let promise = new Promise((resolve, reject) => { + //进来之后，状态为pending + console.log('111'); //这一行代码是同步的 + //开始执行异步操作（这里开始，写异步的代码，比如ajax请求 or 开启定时器） + if (异步的ajax请求成功) { + console.log('333'); + resolve();//如果请求成功了，请写resolve()，此时，promise的状态会被自动修改为fullfilled + } else { + reject();//如果请求失败了，请写reject()，此时，promise的状态会被自动修改为rejected + } + }) + console.log('222'); + + //调用promise的then() + promise.then(() => { + //如果promise的状态为fullfilled，则执行这里的代码 + console.log('成功了'); + } + , () => { + //如果promise的状态为rejected，则执行这里的代码 + console.log('失败了'); + + } + ) +``` + +有了await之后，可以直接替换掉then。如下： + + +```javascript + function returnPromise(){ + return new Promise( function(resolve, reject){ + setTimeout(()=>{ + resolve('success') + },3000) + }) + } + + returnPromise().then((result)=>{ + result === 'success' + }) + + var result = await returnPromise() + result === 'success' + +``` + +## 如何实现深拷贝 + +### 方式一：JSON 来深拷贝 + +```javascript + var a = {...}; + var b = JSON.parse(JSON.stringify(a)); //先将对象转成json字符串，然后再转成对象 +``` + +缺点：JSON 不支持函数、引用、undefined、RegExp、Date…… + + +### 方式二：递归拷贝 + + +```javascript + function clone(object){ + var object2 + if(! (object instanceof Object) ){ + return object + }else if(object instanceof Array){ + object2 = [] + }else if(object instanceof Function){ + object2 = eval(object.toString()) + }else if(object instanceof Object){ + object2 = {} + } + 你也可以把 Array Function Object 都当做 Object 来看待，参考 https://juejin.im/post/587dab348d6d810058d87a0a + for(let key in object){ + object2[key] = clone(object[key]) + } + return object2 + } + +``` + +## 如何实现数组去重 + +### 方式1：计数排序的逻辑（只能针对正整数） + + + + +```javascript + var a = [4,2,5,6,3,4,5] + var hashTab = {} + for(let i=0; i + + +## 如何实现继承 + +- 构造函数 + +- 原型链 + +- extends + + + + +```javascript + + +``` + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + + + +```javascript + + +``` + + + diff --git a/19-基础/03-http.md b/19-基础/03-http.md new file mode 100644 index 0000000..a07f541 --- /dev/null +++ b/19-基础/03-http.md @@ -0,0 +1,65 @@ + + +## HTTP 状态码知道哪些？ + +301 和 302 的区别： + +- 301 永久重定向，浏览器会记住（有缓存） + +- 302 临时重定向（无缓存） + + +## HTTP 缓存怎么做？ + +强缓存： + +- **`Expires`**或**`Cache-Control`** + +协商缓存： + +- 第一对：`Last-Modified`、`If-Modified-Since` + +- 第二对：`ETag`、`If-None-Match` + + +## Cookie 是什么？Session 是什么？ + +### Cookie + +- HTTP响应通过 Set-Cookie 设置 Cookie + +- 浏览器访问指定域名是必须带上 Cookie 作为 Request Header + +- Cookie 一般用来记录用户信息 + +### Session + +- Session 是服务器端的内存（数据） + +- session 一般通过在 Cookie 里记录 SessionID 实现 + +- SessionID 一般是随机数 + + +## LocalStorage 和 Cookie 的区别是什么？ + +- Cookie 会随请求被发到服务器上，而 LocalStorage 不会 + +- Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右 + +## GET 和 POST 的区别是什么？ + +GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 + + +需要注意的是，web 中的 get/post 只是 http 中的 get/post 的子集。http 中的 get 与 post 只是单纯的名字上的区别，get 请求的数据也可以放在 request body 中，只是浏览器没有实现它，但是 get 并不只是在 web 中使用 + + +参考链接： + +- + +- + + + diff --git a/19-基础/02-this相关.md b/19-基础/this相关.md similarity index 100% rename from 19-基础/02-this相关.md rename to 19-基础/this相关.md diff --git a/19-基础/函数.md b/19-基础/函数.md new file mode 100644 index 0000000..726378d --- /dev/null +++ b/19-基础/函数.md @@ -0,0 +1,16 @@ + + +``` + var arr = [1, 2, 3]; + + fun(arr); + console.log(arr); + + function fun(a) { + a = []; + + } +``` + +上方代码的打印结果是：[1,2,3] + diff --git a/19-基础/02-变量提升.md b/19-基础/变量提升.md similarity index 100% rename from 19-基础/02-变量提升.md rename to 19-基础/变量提升.md diff --git a/19-基础/异步.md b/19-基础/异步.md index 666cf55..5d924e2 100644 --- a/19-基础/异步.md +++ b/19-基础/异步.md @@ -20,3 +20,16 @@ +### 20180321面试题 + +```javascript + var arr = [1, 2, 3]; + for (var i = 0; i < arr.length; i++) { + setTimeout(function () { + console.log(i); + }, 0); + } +``` + +打印结果：3，3，3 +