webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add file：几道题目

Browse Source
This commit is contained in:
qianguyihao 2018-03-13 23:12:27 +08:00
parent ddb91d1ea1
commit 7ff358182a
13 changed files with 788 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
00-前端工具/02-Atom在前端的使用.md Normal file
View File

@ -0,0 +1,65 @@
## 常用插件
- `Emmet`：快速生成HTML片段，比如输入ul>li*3可以快速生成：
```html
<ul>
<li></li>
<li></li>
<li></li>
</ul>
```
[详细地址](https://atom.io/packages/emmet)，[Emmet教程](https://docs.emmet.io/cheat-sheet/)
- `Snippets`：快速生成 js 代码片段（用来处理代码片段的模板输出），[详细地址](https://atom.io/packages/snippets)
- `Tree View`：文件浏览器，[详细地址](https://atom.io/packages/tree-view)
- `file icons`：文件识别图标，使用这个插件会让你的编辑器显示对应的图标，[详细地址](https://atom.io/packages/file-icons)
- `language-javascript-jsx`：jsx语法高亮 ，[详细地址](https://atom.io/packages/language-javascript-jsx)
- `language-vue`：vue语法高亮，[详细地址](https://atom.io/packages/language-vue)
- `linter-eslint`：eslint插件，[详细地址](https://atom.io/packages/linter-eslint)
- `vue-snippets`：vue代码片段，[详细地址](https://atom.io/packages/vue-snippets)
- `pigments`：颜色显示器，[详细地址](https://atom.io/packages/pigments)
- `linter-eslint`：语法检查
- `Atom-Beautify`：代码格式化
参考链接：<https://github.com/cucygh/JDFinance/blob/master/issue.md>
## 插件无法安装的问题
### 方法一：设置代理
`C:\Users\smyhvae\.atom\.apm`目录下的.apmrc配置文件（没有就新建一个）,然后添加代理信息：
```
strict-ssl=false
https-proxy=http://127.0.0.1:1080/
http-proxy =http://127.0.0.1:1080/
```
这里的 http://127.0.0.1:1080，是我自己的 Shadowsocks 代理，你需要设置成自己的可用代理。
然后再执行：
```
apm install --check
```
应该可以测试成功，祝好运~~
参考链接：
- <https://atom-china.org/t/atom/984>
- <https://zhenyong.github.io/2016/08/03/starting-atom/>

0
00-前端工具/02-推荐链接.md → 00-前端工具/推荐链接.md
View File

2
07-HTML5和CSS3/06-CSS3属性详解：伸缩布局.md → 07-HTML5和CSS3/06-CSS3属性详解：flex布局.md
View File

@ -41,7 +41,7 @@
CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
20180219_2035.png
![](http://img.smyhvae.com/20180219_2035.png)
如上图所示，有几个概念需要了解一下：

30
10-Node.js/01-ES6的介绍和常用语法.md → 10-Node.js/00-01.ES6的介绍和常用语法.md
View File

@ -610,7 +610,6 @@ for…of 的循环可以避免我们开拓内存空间，增加代码运行效
`for ... of`既可以遍历数组，也可以遍历Map对象。
代码举例：
@ -751,23 +750,36 @@ console.log(fn1(1, 2)); //输出结果：3
### this的指向
ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，this指向的是函数被定义时。
所以说，箭头韩注重，一定要注意this的指向。
## 模块化
**模块化的意义**：
比如说，当我需要用到jQuery库时，我会把jQuery.js文件引入到我自己代码的最前面；当我需要用到vue框架时，我会把vue.js文件引入到我自己代码的最前面。
可是，如果有20个这样的文件，就会产生20次http请求。这种做法的性能，肯定是不能接受的。
如果把20个文件直接写在一个文件里，肯定是不方便**维护**的。可如果写成20个文件，这20个文件又不好排序。这就是一个很矛盾的事情，于是，模块化就诞生了。
**模块化历程**：commonJS、AMD规范（RequireJS）、CMD规范（SeaJS）；import & export
**export：**
静态化：必须在顶部，不能使用条件语句，自动采用严格模式。（静态化有利于性能以及代码的稳定性）

4
10-Node.js/11-JavaScript模块化开发.md
View File

@ -51,7 +51,7 @@
浏览器端规范：
- [**AMD**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
- [**AMD规范**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
```
- 异步加载模块；
@ -61,7 +61,7 @@
- define 定义模块：define([`require`,`foo`],function(){return});
```
- **[CMD](https://github.com/amdjs/amdjs-api)**：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
- **[CMD规范](https://github.com/amdjs/amdjs-api)**：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
```

93
11-前端基础/21-面试题整理 by smyhvae.md Normal file
View File

@ -0,0 +1,93 @@
## JavaScript
### 存储相关：请描述以下cookie、localStorage、sessionStorage的区别。
在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。
**1、cookie**：
- 本身用于客户端和服务器端的通信。
- 但是它有本地存储的功能，于是就被“借用”。
我们可以通过`document.cookie`获取和修改cookie，获取到的其实就是一个字符串。
cookie用于存储时的缺点：
- 存储量太小，只有4kb
- 所有http请求都带着，会影响获取资源的效率
- api简单，需要封装才能用。`document.cookie = ...`
## ES6
### for each、for in、for of的区别
- `foreach`用于遍历数组，是数组的一个方法。不支持 return。
- `for ... in`获取的是index索引值。
- `for ... of`获取的是数组里的值。
## GitHub
- [荐]面试题和答案：<https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers>
- 面试题和答案：<https://github.com/qiu-deqing/FE-interview>
有个题是，浏览器输入url，有哪些过程
- [讲到了Cookie和session](https://github.com/WarpPrism/Blog/issues/5)
- 这个也很全：<https://github.com/gnipbao/Front-end-Interview-questions>
- <https://github.com/giscafer/front-end-manual/issues/3>
## 浏览器输入hrl，有哪些过程
- [码农翻身 | 小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？](https://mp.weixin.qq.com/s/3_DZKSP492uq9RfQ3eW4_A)
- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
## 按时间排列
### 2018-03-11
- web前端面试题汇总：<https://www.jianshu.com/p/2f7eb1ad7174>
- 2017前端面试题及答案总结：<https://yeaseonzhang.github.io/2017/09/17/2017%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E5%8F%8A%E7%AD%94%E6%A1%88%E6%80%BB%E7%BB%93/>
### 2018-03-12-今日头条面试题
- [ 今日头条一面笔试面试题！！！！！完整](http://blog.csdn.net/github_35924246/article/details/75675901)

0
11-前端基础/21-网友面经.md → 11-前端基础/22-网友面经.md
View File

46
11-前端基础/22-面试题整理.md
View File

@ -1,46 +0,0 @@
## GitHub
- [荐]面试题和答案：<https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers>
- 面试题和答案：<https://github.com/qiu-deqing/FE-interview>
有个题是，浏览器输入url，有哪些过程
- [讲到了Cookie和session](https://github.com/WarpPrism/Blog/issues/5)
- 这个也很全：<https://github.com/gnipbao/Front-end-Interview-questions>
- <https://github.com/giscafer/front-end-manual/issues/3>
## 浏览器输入hrl，有哪些过程
- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
## 按时间排列
### 2018-03-11
- web前端面试题汇总：<https://www.jianshu.com/p/2f7eb1ad7174>
- 2017前端面试题及答案总结：<https://yeaseonzhang.github.io/2017/09/17/2017%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E5%8F%8A%E7%AD%94%E6%A1%88%E6%80%BB%E7%BB%93/>
### 2018-03-12-今日头条面试题
- [ 今日头条一面笔试面试题！！！！！完整](http://blog.csdn.net/github_35924246/article/details/75675901)

2
11-前端基础/23-面试技巧.md
View File

@ -50,7 +50,7 @@
- map
- 模块化

275
12-前端进阶/01-前端的几道面试题.md Normal file
View File

@ -0,0 +1,275 @@
几道面试题
## 页面布局
**问题**：如何实现一个三栏布局，要求两边固定宽度、中间自适应。
此题可以考察的知识点：
- 圣杯布局
- 双飞翼布局
- flex布局（css3）
## 变量提升
**问题**：说一下你对JavaScript变量提升的理解。
### 定义
在函数体内部，声明变量，会把该变量提升到函数体的最顶端。注意：**只提升变量声明，不赋值**。
**代码1**：
```javascript
fn();
function fn() {
var x = 1;
var y = 2;
}
```
上方代码中：
（1）给fn创建函数上下文，找到fn中**所有**用var声明的变量（即x和y）；
（2）将这些变量初始化为undefined；
（3）将x赋值为1，将y赋值为2。
**代码2**：
```javascript
fn2();
function fn2() {
console.log(2);
}
```
上方代码中：
（1）创建全局上下文，找到所有用function声明的变量，在环境中“创建”这些变量。
（2）将这些变量**初始化**，并**赋值**为 `function(){ console.log(2) }`（并不是undefined）
（3）开始执行代码`fn2();`
**代码3**：（let的出现）
```javascript
{
let x = 1
x = 2
}
```
上方代码中：
（1）找到所有用 let 声明的变量，在环境中「创建」这些变量
（2）开始执行代码（注意现在还没有初始化）
（3）执行 x = 1，将 x 「初始化」为 1（这并不是一次赋值，如果代码是 let x，就将 x 初始化为 undefined）
（4）执行 x = 2，对 x 进行「赋值」
代码4：
```javascript
let x = 'global'
{
console.log(x) // Uncaught ReferenceError: x is not defined
let x = 1
}
```
原因有两个：
- console.log(x) 中的 x 指的是下面的 x，而不是全局的 x
- 执行 log 时 x 还没「初始化」，所以不能使用（也就是所谓的暂时死区）
看到这里，你应该明白了 let 到底有没有提升：
- let 的「创建」过程被提升了，但是初始化没有提升。
- var 的「创建」和「初始化」都被提升了。
- function 的「创建」「初始化」和「赋值」都被提升了。
参考链接：
- [我用了两个月的时间才理解 let](https://zhuanlan.zhihu.com/p/28140450)
## this
问题：下方代码的打印结果是什么？
```javascript
function A() {
this.name = 'smyhvae';
}
A.prototype.test = function () {
setTimeout(function () {
console.log(this.name);
}, 1)
}
var a = new A();
a.test();
```
打印结果是window.name，但实际的结果是空的。
这个神奇的特性，被用来解决跨域数据传递。（网上可以查一下iframe相关）
**总结1**：this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。即：**谁调用**，指向谁。
**举例**：
```javascript
var name = '全局';
function getName() {
var name = '局部';
return this.name;
};
alert(getName());
```
上方代码的打印结果是：`全局`。
分析：`getName()`这个函数其实是window调用的，所以this指向的window，因为外部有name这个变量，所以打印结果为`全局`。
**总结2**：没有明确的当前对象时，this永远指向window。这个在setTimeout里比较常见。
## 链式调用
**问题**：如何实现类似jQuery的链式调用？
答案：一直return `this`就好了。
## Yslow和pageSpeed
Yslow和pageSpeed你知道怎么用吗？你记得其中多少规则？
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```

21
22-Vue框架-商城系统/00-Vue的介绍和环境配置.md → 21-Vue基础/00-Vue的介绍和环境配置.md
View File

@ -2,6 +2,14 @@
- [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)
## MVVM模式
- Model：负责数据存储
- View：负责页面展示
- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
## 前端的各种框架
### Vue、React、AngularJS
@ -58,10 +66,21 @@ Vue框架中，没有控制器。
- [中文官网](https://cn.vuejs.org/)
- GitHub地址：<https://github.com/vuejs/vue>
- [vuejs官方论坛](https://forum.vuejs.org/)
- GitHub地址：<https://github.com/vuejs/vue>
- Vue1.0 在线文档：<http://v1-cn.vuejs.org/guide/>
- Vue2.x 在线文档：<https://cn.vuejs.org/v2/guide/>
- Vue1下载地址：http://v1-cn.vuejs.org/js/vue.js
- Vue2下载地址：https://unpkg.com/vue@2.2.1/dist/vue.js

301
21-Vue基础/01-Vue基础语法.md Normal file
View File

@ -0,0 +1,301 @@
## Vue初体验
新建一个空的项目，引入vue.js文件。写如下代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
{{name}}
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: {//data就是MVVM中的 module
name: 'smyhvae'
}
});
</script>
</html>
```
显示效果：
20180313_0955.png
如果我们在控制台输入`myVue.data+='123'`，页面会**自动更新**name的值。
## Vue的系统指令
### v-on：注册事件
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
<!-- 给button节点绑定按钮的点击事件 -->
{{name}}
<button v-on:click="change">改变name的值</button>
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: { //data就是MVVM中的 module
name: 'smyhvae'
},
methods: {
change: function() { //上面的button按钮的点击事件
this.name += '1';
}
}
});
</script>
</html>
```
上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
### 插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
```html
<span>Message: {{ msg }}</span>
```
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。
`{{}}`对JavaScript 表达式支持，例如：
```javascript
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}
```
但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：
```html
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
```
### v-text
v-text可以将一个变量的值渲染到指定的元素中。例如：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<div id="div1">
<span v-text="name"></span>
</div>
</body>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello smyhvae'
}
});
</script>
</html>
```
结果：
20180313_1645.png
### v-html
`v-text`是纯文本，而`v-html`会被解析成html元素。
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
### v-cloak
`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过`v-cloak`隐藏元素，当加载完毕后，再显示出来。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*网络很慢时，在span上加上 v-cloak和css样式控制以后，浏览器在加载时会先把span隐藏起来。
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
[v-cloak] {
display: block;
}
</style>
</head>
<body>
<div id="div1">
<span v-cloak>{{name}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello1 smyhvae22'
}
});
</script>
</html>
```
### v-bind
`v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。
比如说：
```html
<img v-bind:src="imageSrc">
<div v-bind:style="{ fontSize: size + 'px' }"></div>
```
上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。
上面两行代码可以简写成：
```html
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>
```
**举例：**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="div1">
<!-- value里的值只是简单的字符串 -->
<input type="text" value="name">
<!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
<input type="text" v-bind:value="name">
<!-- 超链接后面的path是 Vue 里面的变量 -->
<a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'smyhvae',
path: `2.html`
}
});
</script>
</html>
```
效果：
20180313_1745.png

6
21-Vue基础/Vue-router路由.md Normal file
View File

@ -0,0 +1,6 @@
## 前言
路由：就是SPA（单页应用）的**路径管理器**。