refactor: 目录结构调整

2020-04-19 18:24:43 +08:00
parent 8e979bff7d
commit 6fbb5659e4
106 changed files with 27 additions and 18 deletions
--- a/14-前端进阶/01-前端常见专有名词.md
+++ b/14-前端进阶/01-前端常见专有名词.md
@@ -0,0 +1,20 @@
+
+
+
+## JS相关
+
+- JS装饰器
+
+
+
+## 性能相关
+
+- 防抖和节流
+
+- 滚动穿透
+
+
+## 样式相关
+
+- 多行文字截断
+
--- a/14-前端进阶/02-数组的常见操作.md
+++ b/14-前端进阶/02-数组的常见操作.md
@@ -0,0 +1,37 @@
+
+## 前言
+
+数组在实战开发中，使用得相当频繁。前端同学通过接口拿到json数据后，往往需要把数据进行各种形式的变换和展示。这个时候，数组的常见操作，就发挥了很大的作用。
+
+如果你对数组的基础知识不太熟悉，建议回去看看`03-JavaScript`的基础知识。
+
+掌握了基础知识之后，我们再来看看，实战开发中，数组都有哪些常见操作。
+
+## 数组的常见操作
+
+### 从对象数组中，将属性的值提取为数组
+
+一般人可能会想着通过 for 循环进行遍历，但这种做法不够简洁。
+
+最佳答案：
+
+```javascript
+      const arr1 = [
+        { skuId: "123", name: "商品1" },
+        { skuId: "456", name: "商品2" },
+        { skuId: "789", name: "商品3" }
+      ];
+
+      const skuIdArr = arr1.map(item => item.skuId); // 将数组 arr1 中的 skuId字段提取为一个新的数组
+      console.log(JSON.stringify(skuIdArr));
+```
+
+
+打印结果：
+
+```json
+	["123","456","789"]
+```
+
+
+- 参考链接：<https://codeday.me/bug/20170426/12102.html>
--- a/14-前端进阶/04-前端监控技术.md
+++ b/14-前端进阶/04-前端监控技术.md
@@ -0,0 +1,34 @@
+
+
+## 前言
+
+要监控的内容：
+
+- 业务数据
+
+- 稳定性
+
+- 性能
+
+- 错误
+
+- 用户操作路径
+
+
+怎么监控：
+
+- PV/UV、业务操作上报
+
+- 根据上报寻找异常
+
+- 将页面性能数据上报
+
+- 将页面产生错误上报
+
+- 跟踪用户操作路径
+
+
+
+
+
+
--- a/14-前端进阶/09-lazyload&防抖动和节流阀.md
+++ b/14-前端进阶/09-lazyload&防抖动和节流阀.md
@@ -0,0 +1,39 @@
+
+
+
+## lazyload
+
+用的最多的场景是：
+
+- 图片lazyload
+
+- 组件lazyload
+
+现在一般都单独做css的lazyload或者js的lazyload，因为这种方式，其实还是要加载图片和组件。
+
+
+
+### 图片lazyload
+
+图片一般是页面最大的资源，所以**非首屏**延迟加载很重要（让首屏尽快显示）。
+
+
+
+
+
+
+
+
+
+
+
+## 防抖动（Debouncing）和节流阀（Throtting）
+
+
+
+
+参考链接：
+
+- [实例解析防抖动（Debouncing）和节流阀（Throttling）](http://www.css88.com/archives/7010)
+
+
--- a/14-前端进阶/Vue开发积累.md
+++ b/14-前端进阶/Vue开发积累.md
@@ -0,0 +1,31 @@
+
+## Vue 开发积累
+
+
+### 001：scoped 关键字的作用
+
+在 `xx.vue` 组件中，我们可能会遇到带 `scoped` 关键字的样式。比如：
+
+```html
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
+```
+
+
+上方的`scoped`表示的是**作用域化**，样式只对当前子组件生效。
+
--- a/14-前端进阶/前端的几道题目.md
+++ b/14-前端进阶/前端的几道题目.md
@@ -0,0 +1,241 @@
+
+
+几道面试题
+
+## 页面布局
+
+### 如何实现一个三栏布局，要求两边固定宽度、中间自适应。
+
+此题可以考察的知识点：
+
+- 圣杯布局
+
+- 双飞翼布局
+
+- flex布局（css3）
+
+
+### 让元素垂直居中
+
+**方式一：**如果宽高已知，可以利用绝对定位。
+
+**方式二：**用 translate 位移来做。（在宽高未知的情况下，也可以这样做）
+
+```css
+    div {
+        background-color: red;
+        position: absolute;       绝对定位的盒子
+        top: 50%;               首先，让上边线居中
+        transform: translateY(-50%);    然后，利用translate，往上走自己宽度的一半【推荐写法】
+    }
+```
+
+
+**方式三：**flex 布局
+
+```css
+    parentElement{
+        display: flex;/*Flex布局*/
+        display: -webkit-flex; /* Safari */
+        align-items: center;/*设置子元素在侧轴方向上的布局*/
+    }
+```
+
+
+参考链接：
+
+- <https://www.zhihu.com/question/20543196>
+
+- [水平垂直居中方案与flexbox布局](https://www.cnblogs.com/coco1s/p/4444383.html)
+
+
+
+
+## 变量提升
+
+
+**问题**：说一下你对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里比较常见。
+
+
+
+### apply、call、bind的区别
+
+
+
+
+
+## 链式调用
+
+**问题**：如何实现类似jQuery的链式调用？
+
+答案：一直return `this`就好了。
+
+
+## Yslow和pageSpeed
+
+
+Yslow和pageSpeed你知道怎么用吗？你记得其中多少规则？
+
+
+
+## DNS的查询时间
+
+**问题：**前端怎样拿到DNS的查询时间？
+
+### H5中的方法：performance.timing
+
+window.performance这个api可以用来做前端性能监控。其中，timing这个方法。。
+
+
+参考链接：
+
+- <https://github.com/fredshare/blog/issues/5>
+
+
+