update: rename

2021-05-16 19:54:02 +08:00
parent a0dd8f9261
commit d59af98199
9 changed files with 13 additions and 1 deletions
--- a/15-前端工程化/01-前端代码规范.md
+++ b/15-前端工程化/01-前端代码规范.md
@@ -0,0 +1,72 @@
+
+
+## 前端代码规范-推荐资料
+
+### JS规范，重点推荐下面这两个
+
+1、Airbnb JavaScript Style Guide：
+
+- 英文原版：https://github.com/airbnb/javascript
+
+- 中文版：https://github.com/lin-123/javascript
+
+2、clean code JavaScript：
+
+- 英文原版：https://github.com/ryanmcdermott/clean-code-javascript
+
+- 中文版1：https://github.com/alivebao/clean-code-js
+
+- 中文版2：https://github.com/beginor/clean-code-javascript
+
+### eslint规范
+
+1、eslint-config-airbnb：
+
+https://www.npmjs.com/package/eslint-config-airbnb
+
+https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
+
+2、凹凸实验室的eslint规范：
+
+https://www.npmjs.com/package/eslint-config-o2team-wx
+
+备注：o2team-wx 这一套规则是参考了 StandardJS 和 Airbnb 的 JS 规范，然后结合业务中的最佳实践整理输出的。
+
+### 其他相关资料
+
+1、百度前端团队-前端各类规范集合：https://github.com/ecomfe/spec
+
+2、The mother of all demo apps：https://github.com/gothinkster/realworld
+
+3、JavaScript 代码规范：https://github.com/standard/standard/blob/master/docs/README-zhcn.md
+
+### 参考链接
+
+文案、编程、Git 风格规范汇总：https://www.bihell.com/article/130
+
+githubStars：https://blog.teefing.top/posts/2019/05/27/githubstars.html
+
+
+
+
+## 其他链接
+
+- <http://blog.lovebug.cn/details/html/page02.html>
+
+- <https://github.com/ecomfe/spec>
+
+
+- <https://juejin.im/post/5e3d0362e51d4526d87c605d>
+
+- <https://juejin.im/post/592d4a5b0ce463006b43b6da>
+
+
+- <https://juejin.im/post/5b67e49551882508603d1431>
+
+- <https://juejin.im/post/5e1abeede51d453c913c340e>
+
+- <https://juejin.im/post/5d5d5197518825237330552d>
+
+- <http://alloyteam.github.io/CodeGuide/>
+
+
--- a/15-前端工程化/02-前端书籍推荐.md
+++ b/15-前端工程化/02-前端书籍推荐.md
@@ -0,0 +1,8 @@
+
+## JavaScript 书籍
+
+
+### 《》
+
+
+
--- a/15-前端工程化/Vue开发积累.md
+++ b/15-前端工程化/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/15-前端工程化/前端工程化.md
+++ b/15-前端工程化/前端工程化.md
@@ -0,0 +1,25 @@
+### 前端实战开发的各个方面
+
+前端实战开发包括很多方面，比如：
+
+- 跨终端技术体系
+
+- 前端监控体系
+
+- 多终端可视化页面搭建体系
+
+- 前端性能优化体系
+
+- 具体业务的架构设计
+
+- 前端通道建设
+
+- 搭建前端工程化技术体系
+
+- 网站前端基础架构升级
+
+- 研发日PV达千万的超大流量前端项目
+
+- 在 W3ctech、D2、FEDAY等技术大会中发表主题演讲
+
+- 分享前端性能优化方面的经验和见解
--- a/15-前端工程化/前端常见专有名词.md
+++ b/15-前端工程化/前端常见专有名词.md
@@ -0,0 +1,25 @@
+
+
+
+## JS相关
+
+- JS装饰器
+
+
+
+## 性能相关
+
+- 防抖和节流
+
+- 滚动穿透
+
+
+## 样式相关
+
+- 多行文字截断
+
+
+## others
+
+noop() 方法
+
--- a/15-前端工程化/前端的几道题目.md
+++ b/15-前端工程化/前端的几道题目.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>
+
+
+
--- a/15-前端工程化/前端监控技术.md
+++ b/15-前端工程化/前端监控技术.md
@@ -0,0 +1,34 @@
+
+
+## 前言
+
+要监控的内容：
+
+- 业务数据
+
+- 稳定性
+
+- 性能
+
+- 错误
+
+- 用户操作路径
+
+
+怎么监控：
+
+- PV/UV、业务操作上报
+
+- 根据上报寻找异常
+
+- 将页面性能数据上报
+
+- 将页面产生错误上报
+
+- 跟踪用户操作路径
+
+
+
+
+
+
--- a/15-前端工程化/数组的常见操作.md
+++ b/15-前端工程化/数组的常见操作.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>