diff --git a/docs/JavaScript/ajax.md b/docs/JavaScript/ajax.md index 55fa0071..6bd67091 100644 --- a/docs/JavaScript/ajax.md +++ b/docs/JavaScript/ajax.md @@ -34,7 +34,7 @@ - 构建请求所需的数据内容，并通过` XMLHttpRequest` 对象的 `send()` 方法发送给服务器端 -- 通过 `XMLHttpRequest` 对象提供的 `onreadystatechange` 事件监听服务器端你的通信状态 +- 通过 `XMLHttpRequest` 对象提供的 `onreadystatechange` 事件监听服务器端的通信状态 - 接受并处理服务端向客户端响应的数据结果 @@ -68,10 +68,10 @@ xhr.open(method, url, [async][, user][, password]) - `async`：布尔值，表示是否异步执行操作，默认为`true` -- `user`: 可选的用户名用于认证用途；默认为`null +- `user`: 可选的用户名用于认证用途；默认为`null` -- `password`: 可选的密码用于认证用途，默认为`null +- `password`: 可选的密码用于认证用途，默认为`null` diff --git a/docs/JavaScript/bind_call_apply.md b/docs/JavaScript/bind_call_apply.md index cc36c05b..d416810a 100644 --- a/docs/JavaScript/bind_call_apply.md +++ b/docs/JavaScript/bind_call_apply.md @@ -117,7 +117,7 @@ fn(1,2) // this指向window 从上面可以看到，`apply`、`call`、`bind`三者的区别在于： - 三者都可以改变函数的`this`对象指向 -- 三者第一个参数都是`this`要指向的对象，如果如果没有这个参数或参数为`undefined`或`null`，则默认指向全局`window` +- 三者第一个参数都是`this`要指向的对象，如果没有这个参数或参数为`undefined`或`null`，则默认指向全局`window` - 三者都可以传参，但是`apply`是数组，而`call`是参数列表，且`apply`和`call`是一次性传入参数，而`bind`可以分为多次传入 - `bind `是返回绑定this之后的函数，`apply `、`call` 则是立即执行 diff --git a/docs/JavaScript/cache.md b/docs/JavaScript/cache.md index 43f89cec..9c131803 100644 --- a/docs/JavaScript/cache.md +++ b/docs/JavaScript/cache.md @@ -4,7 +4,7 @@ ## 一、方式 -`javaScript`本地缓存的方法我们主要讲述以下四种： +`JavaScript`本地缓存的方法我们主要讲述以下四种： - cookie - sessionStorage @@ -43,7 +43,7 @@ Path=/docs # /docs/Web/ 下的资源会带 Cookie 首部 - 标记为 `Secure `的 `Cookie `只应通过被`HTTPS`协议加密过的请求发送给服务端 -通过上述，我们可以看到`cookie`又开始的作用并不是为了缓存而设计出来，只是借用了`cookie`的特性实现缓存 +通过上述，我们可以看到`cookie`开始的作用并不是为了缓存而设计出来，只是借用了`cookie`的特性实现缓存 关于`cookie`的使用如下： @@ -51,7 +51,7 @@ Path=/docs # /docs/Web/ 下的资源会带 Cookie 首部 document.cookie = '名字=值'; ``` -关于`cookie`的修改，首先要确定`domain`和`path`属性都是相同的才可以，其中有一个不同得时候都会创建出一个新的`cookie` +关于`cookie`的修改，首先要确定`domain`和`path`属性都是相同的才可以，其中有一个不同的时候都会创建出一个新的`cookie` ```js Set-Cookie:name=aa; domain=aa.net; path=/ # 服务端设置 diff --git a/docs/JavaScript/closure.md b/docs/JavaScript/closure.md index 23cc19aa..0636fb6c 100644 --- a/docs/JavaScript/closure.md +++ b/docs/JavaScript/closure.md @@ -68,7 +68,7 @@ document.getElementById('size-16').onclick = size16; function getArea(width, height) { return width * height } -// 如果我们碰到的长方形的宽老是10 +// 如果我们碰到的长方形的宽高是10 const area1 = getArea(10, 20) const area2 = getArea(10, 30) const area3 = getArea(10, 40) @@ -98,7 +98,7 @@ const getTwentyWidthArea = getArea(20) 下面举个例子： ```js -var Counter = (function() { +var makeCounter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; @@ -116,8 +116,8 @@ var Counter = (function() { } })(); -var Counter1 = makeCounter(); -var Counter2 = makeCounter(); +var Counter1 = makeCounter; +var Counter2 = makeCounter; console.log(Counter1.value()); /* logs 0 */ Counter1.increment(); Counter1.increment(); diff --git a/docs/JavaScript/copy.md b/docs/JavaScript/copy.md index 26c35841..7b03369f 100644 --- a/docs/JavaScript/copy.md +++ b/docs/JavaScript/copy.md @@ -61,7 +61,7 @@ var obj = { console.log('fx is a great girl') } } -var newObj = Object.assign({}, fxObj); +var newObj = Object.assign({}, obj); ``` diff --git a/docs/JavaScript/data_type.md b/docs/JavaScript/data_type.md index 4826a322..575c6867 100644 --- a/docs/JavaScript/data_type.md +++ b/docs/JavaScript/data_type.md @@ -261,7 +261,7 @@ console.log(a); // 10值 var obj1 = {} var obj2 = obj1; obj2.name = "Xxx"; -console.log(obj1.name); // xxx +console.log(obj1.name); // Xxx ``` 引用类型数据存放在堆中，每个堆内存对象都有对应的引用地址指向它，引用地址存放在栈中。 diff --git a/docs/JavaScript/event_Model.md b/docs/JavaScript/event_Model.md index 97827e42..05792701 100644 --- a/docs/JavaScript/event_Model.md +++ b/docs/JavaScript/event_Model.md @@ -151,8 +151,8 @@ removeEventListener(eventType, handler, useCapture) ```js var btn = document.getElementById('.btn'); -btn.addEventListener(‘click’, showMessage, false); -btn.removeEventListener(‘click’, showMessage, false); +btn.addEventListener('click', showMessage, false); +btn.removeEventListener('click', showMessage, false); ``` #### 特性 @@ -160,9 +160,9 @@ btn.removeEventListener(‘click’, showMessage, false); - 可以在一个`DOM`元素上绑定多个事件处理器，各自并不会冲突 ```js -btn.addEventListener(‘click’, showMessage1, false); -btn.addEventListener(‘click’, showMessage2, false); -btn.addEventListener(‘click’, showMessage3, false); +btn.addEventListener('click', showMessage1, false); +btn.addEventListener('click', showMessage2, false); +btn.addEventListener('click', showMessage3, false); ``` - 执行时机 @@ -247,6 +247,6 @@ detachEvent(eventType, handler) ```js var btn = document.getElementById('.btn'); -btn.attachEvent(‘onclick’, showMessage); -btn.detachEvent(‘onclick’, showMessage); +btn.attachEvent('onclick', showMessage); +btn.detachEvent('onclick', showMessage); ``` \ No newline at end of file diff --git a/docs/JavaScript/event_loop.md b/docs/JavaScript/event_loop.md index 07a84f99..d2212d55 100644 --- a/docs/JavaScript/event_loop.md +++ b/docs/JavaScript/event_loop.md @@ -218,7 +218,7 @@ console.log('script end') 1. 执行整段代码，遇到 `console.log('script start')` 直接打印结果，输出 `script start` 2. 遇到定时器了，它是宏任务，先放着不执行 -3. 遇到 `async1()`，执行 `async1` 函数，先打印 `async1 start`，下面遇到` await `怎么办？先执行 `async2`，打印 `async2`，然后阻塞下面代码（即加入微任务列表），跳出去执行同步代码 +3. 遇到 `async1()`，执行 `async1` 函数，先打印 `async1 start`，下面遇到` await `怎么办？先执行 `async2`，打印 `async2`，然后阻塞下面代码（即加入微任务列表），跳出去执行同步代码。await 关键字在 async 函数内部确实会阻塞进一步的代码执行，但 await 后面跟随的 async 函数（即 async2()）的执行是立即的，直到 async2() 函数内部的所有同步代码执行完毕并返回一个 Promise（在这个例子中是隐式的，因为 async 函数总是返回 Promise）。然后，await 会等待这个 Promise 解析（resolve）或拒绝（reject），而不是将 async2() 的执行本身放入微任务队列。 4. 跳到 `new Promise` 这里，直接执行，打印 `promise1`，下面遇到 `.then()`，它是微任务，放到微任务列表等待执行 5. 最后一行直接打印 `script end`，现在同步代码执行完了，开始执行微任务，即 `await `下面的代码，打印 `async1 end` 6. 继续执行下一个微任务，即执行 `then` 的回调，打印 `promise2` diff --git a/docs/JavaScript/inherit.md b/docs/JavaScript/inherit.md index 353c1848..bbc56f44 100644 --- a/docs/JavaScript/inherit.md +++ b/docs/JavaScript/inherit.md @@ -62,7 +62,7 @@ class Truck extends Car{ ## 二、实现方式 -下面给出`JavaScripy`常见的继承方式： +下面给出`JavaScript`常见的继承方式： - 原型链继承 @@ -88,15 +88,15 @@ class Truck extends Car{ function Child() { this.type = 'child2'; } - Child1.prototype = new Parent(); + Child.prototype = new Parent(); console.log(new Child()) ``` 上面代码看似没问题，实际存在潜在问题 ```js -var s1 = new Child2(); -var s2 = new Child2(); +var s1 = new Child(); +var s2 = new Child(); s1.play.push(4); console.log(s1.play, s2.play); // [1,2,3,4] ``` @@ -119,13 +119,13 @@ Parent.prototype.getName = function () { } function Child(){ - Parent1.call(this); + Parent.call(this); this.type = 'child' } let child = new Child(); console.log(child); // 没问题 -console.log(child.getName()); // 会报错 +console.log(child.getName()); // 会报错 Uncaught TypeError: child.getName is not a function ``` 可以看到，父类原型对象中一旦存在父类之前自己定义的方法，那么子类将无法继承这些方法 @@ -136,7 +136,7 @@ console.log(child.getName()); // 会报错 ### 组合继承 -前面我们讲到两种继承方式，各有优缺点。组合继承则将前两种方式继承起来 +前面我们讲到两种继承方式，各有优缺点。组合继承则将前两种方式结合起来 ```js function Parent3 () { diff --git a/docs/JavaScript/loss_accuracy.md b/docs/JavaScript/loss_accuracy.md index 25d4b8ac..cca6e7b1 100644 --- a/docs/JavaScript/loss_accuracy.md +++ b/docs/JavaScript/loss_accuracy.md @@ -41,7 +41,7 @@ ![](https://static.vue-js.com/37007090-86f4-11eb-ab90-d9ae814b240d.png) -前面讲到，`javaScript`存储方式是双精度浮点数，其长度为8个字节，即64位比特 +前面讲到，`JavaScript`存储方式是双精度浮点数，其长度为8个字节，即64位比特 64位比特又可分为三个部分： diff --git a/docs/JavaScript/memory_leak.md b/docs/JavaScript/memory_leak.md index 7ddce37b..1693bdc6 100644 --- a/docs/JavaScript/memory_leak.md +++ b/docs/JavaScript/memory_leak.md @@ -47,7 +47,7 @@ Javascript 具有自动垃圾回收机制（GC：Garbage Collecation），也就 `JavaScript`最常用的垃圾收回机制 -当变量进入执行环境是，就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“ +当变量进入执行环境时，就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“ 垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉 diff --git a/docs/JavaScript/security.md b/docs/JavaScript/security.md index 4526d4e0..584710b2 100644 --- a/docs/JavaScript/security.md +++ b/docs/JavaScript/security.md @@ -167,7 +167,7 @@ eval("UNTRUSTED") CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求 -利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目 +利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的 一个典型的CSRF攻击有着如下的流程： diff --git a/docs/JavaScript/string_api.md b/docs/JavaScript/string_api.md index 0f06fb08..f3985107 100644 --- a/docs/JavaScript/string_api.md +++ b/docs/JavaScript/string_api.md @@ -217,6 +217,10 @@ console.log(pos); // 1 接收两个参数，第一个参数为匹配的内容，第二个参数为替换的元素（可用函数） +其中一个、多个或所有匹配的 pattern 被替换为 replacement。pattern 可以是字符串或 RegExp，replacement 可以是字符串或一个在每次匹配时调用的函数。 + +如果 pattern 是字符串，则只会替换第一个匹配项。原始的字符串不会改变。 + ```js let text = "cat, bat, sat, fat"; let result = text.replace("at", "ond"); diff --git a/docs/JavaScript/this.md b/docs/JavaScript/this.md index faa670b1..f57aafc6 100644 --- a/docs/JavaScript/this.md +++ b/docs/JavaScript/this.md @@ -85,7 +85,7 @@ function person() { console.log(person()); //Jenny ``` -上述代码输出`Jenny`，原因是调用函数的对象在游览器中位`window`，因此`this`指向`window`，所以输出`Jenny` +上述代码输出`Jenny`，原因是调用函数的对象在浏览器中为`window`，因此`this`指向`window`，所以输出`Jenny` 注意： @@ -159,7 +159,7 @@ var obj = new test(); obj.x // 1 ``` -上述代码之所以能过输出1，是因为`new`关键字改变了`this`的指向 +上述代码之所以能够输出1，是因为`new`关键字改变了`this`的指向 这里再列举一些特殊情况： @@ -222,7 +222,7 @@ obj.m.apply(obj) // 1 ## 三、箭头函数 -在 ES6 的语法中还提供了箭头函语法，让我们在代码书写时就能确定 `this` 的指向（编译时绑定） +在 ES6 的语法中还提供了箭头函数语法，让我们在代码书写时就能确定 `this` 的指向（编译时绑定） 举个例子： diff --git a/docs/JavaScript/visible.md b/docs/JavaScript/visible.md index 28a4f02a..69473777 100644 --- a/docs/JavaScript/visible.md +++ b/docs/JavaScript/visible.md @@ -163,7 +163,7 @@ const callback = function(entries, observer) { entries.forEach(entry => { entry.time; // 触发的时间 entry.rootBounds; // 根元素的位置矩形，这种情况下为视窗位置 - entry.boundingClientRect; // 被观察者的位置举行 + entry.boundingClientRect; // 被观察者的位置矩形 entry.intersectionRect; // 重叠区域的位置矩形 entry.intersectionRatio; // 重叠区域占被观察者面积的比例（被观察者不是矩形时也按照矩形计算） entry.target; // 被观察者 diff --git a/docs/React/Binding events.md b/docs/React/Binding events.md index a3ad2577..616f6f0c 100644 --- a/docs/React/Binding events.md +++ b/docs/React/Binding events.md @@ -39,7 +39,7 @@ class ShowAlert extends React.Component { ### render方法中使用bind -如果使用一个类组件，在其中给某个组件/元素一个`onClick`属性，它现在并会自定绑定其`this`到当前组件，解决这个问题的方法是在事件函数后使用`.bind(this)`将`this`绑定到当前组件中 +如果使用一个类组件，在其中给某个组件/元素一个`onClick`属性，它现在会自动绑定其`this`到当前组件，解决这个问题的方法是在事件函数后使用`.bind(this)`将`this`绑定到当前组件中 ```jsx class App extends React.Component { diff --git a/docs/React/Building components.md b/docs/React/Building components.md index e8791370..154985b4 100644 --- a/docs/React/Building components.md +++ b/docs/React/Building components.md @@ -73,7 +73,7 @@ function HelloComponent(props) /* context */{ 有状态的组件也就是组件内部存在维护的数据，在类创建的方式中通过`this.state`进行访问 -当调用`this.setState`修改组件的状态时，组价会再次会调用`render()`方法进行重新渲染 +当调用`this.setState`修改组件的状态时，组件会再次会调用`render()`方法进行重新渲染 通过继承`React.Component`创建一个时钟示例如下： diff --git a/docs/React/Fiber.md b/docs/React/Fiber.md index f98e2c96..6c672afd 100644 --- a/docs/React/Fiber.md +++ b/docs/React/Fiber.md @@ -7,7 +7,7 @@ `JavaScript `引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待 -如果 `JavaScript` 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿 +如果 `JavaScript` 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应速度变差，用户可能会感觉到卡顿 而这也正是 `React 15` 的 `Stack Reconciler `所面临的问题，当 `React `在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断 @@ -21,11 +21,11 @@ ## 二、是什么 -React Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现。从Facebook在 React Conf 2017 会议上确认，React Fiber 在React 16 版本发布 +React Fiber 是 Facebook 花费两年多的时间对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现。从Facebook在 React Conf 2017 会议上确认，React Fiber 在React 16 版本发布 在`react`中，主要做了以下的操作： -- 为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务 +- 为每个任务增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新执行，注意是重新执行优先级低的任务 - 增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行 - dom diff树变成了链表，一个dom对应两个fiber（一个链表），对应两个队列，这都是为找到被中断的任务，重新执行 diff --git a/docs/React/High order components.md b/docs/React/High order components.md index e160a43a..86ed25b6 100644 --- a/docs/React/High order components.md +++ b/docs/React/High order components.md @@ -57,7 +57,7 @@ export default (WrappedComponent) => { 这里需要注意的是，高阶组件可以传递所有的`props`，但是不能传递`ref` -如果向一个高阶组件添加`refe`引用，那么`ref` 指向的是最外层容器组件实例的，而不是被包裹的组件，如果需要传递`refs`的话，则使用`React.forwardRef`，如下： +如果向一个高阶组件添加`ref`引用，那么`ref` 指向的是最外层容器组件实例的，而不是被包裹的组件，如果需要传递`refs`的话，则使用`React.forwardRef`，如下： ```jsx function withLogging(WrappedComponent) { diff --git a/docs/React/React Router model.md b/docs/React/React Router model.md index bc5e9772..74167f65 100644 --- a/docs/React/React Router model.md +++ b/docs/React/React Router model.md @@ -76,7 +76,7 @@ export default App; ## HashRouter -`HashRouter`包裹了整应用， +`HashRouter`包裹了整个应用， 通过`window.addEventListener('hashChange',callback)`监听`hash`值的变化，并传递给其嵌套的组件 diff --git a/docs/React/React Router.md b/docs/React/React Router.md index 5078f63e..2b1c0d06 100644 --- a/docs/React/React Router.md +++ b/docs/React/React Router.md @@ -112,7 +112,7 @@ export default function App() { ### Link、NavLink -通常路径的跳转是使用`Link`组件，最终会被渲染成`a`元素，其中属性`to`代替`a`标题的`href`属性 +通常路径的跳转是使用`Link`组件，最终会被渲染成`a`元素，其中属性`to`代替`a`标签的`href`属性 `NavLink`是在`Link`基础之上增加了一些样式属性，例如组件被选中时，发生样式变化，则可以设置`NavLink`的一下属性： diff --git a/docs/React/React refs.md b/docs/React/React refs.md index a9663e2d..91ac616a 100644 --- a/docs/React/React refs.md +++ b/docs/React/React refs.md @@ -16,7 +16,7 @@ - 传入字符串，使用时通过 this.refs.传入的字符串的格式获取对应的元素 - 传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素 -- 传入函数，该函数会在 DOM 被挂载时进行回调，这个函数会传入一个 元素对象，可以自己保存，使用时，直接拿到之前保存的元素对象即可 +- 传入函数，该函数会在 DOM 被挂载时进行回调，这个函数会传入一个元素对象，可以自己保存，使用时，直接拿到之前保存的元素对象即可 - 传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素 diff --git a/docs/React/React.md b/docs/React/React.md index 53b05290..517ac04e 100644 --- a/docs/React/React.md +++ b/docs/React/React.md @@ -10,7 +10,7 @@ React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的 使用虚拟 `DOM` 来有效地操作 `DOM`，遵循从高阶组件到低阶组件的单向数据流 -帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面 +帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面 `react` 类组件使用一个名为 `render()` 的方法或者函数组件`return`，接收输入的数据并返回需要展示的内容 diff --git a/docs/React/Real DOM_Virtual DOM.md b/docs/React/Real DOM_Virtual DOM.md index bdd4308f..6e9cdcb9 100644 --- a/docs/React/Real DOM_Virtual DOM.md +++ b/docs/React/Real DOM_Virtual DOM.md @@ -79,7 +79,7 @@ const vDom = React.createElement( - 简单方便：如果使用手动操作真实 `DOM` 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难 -- 性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能 +- 性能方面：使用 Virtual DOM，能够有效避免真实 DOM 频繁更新，减少多次引起重绘与回流，提高性能 - 跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行 缺点： diff --git a/docs/React/Redux Middleware.md b/docs/React/Redux Middleware.md index 6544bea3..655b9e7a 100644 --- a/docs/React/Redux Middleware.md +++ b/docs/React/Redux Middleware.md @@ -12,7 +12,7 @@ 那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件 -`Redux`中，中间件就是放在就是在`dispatch`过程，在分发`action`进行拦截处理，如下图： +`Redux`中，中间件就是放在`dispatch`过程，在分发`action`进行拦截处理，如下图： ![](https://static.vue-js.com/57edf750-e699-11eb-ab90-d9ae814b240d.png) diff --git a/docs/React/class_function component.md b/docs/React/class_function component.md index 2f28d105..5a211582 100644 --- a/docs/React/class_function component.md +++ b/docs/React/class_function component.md @@ -210,7 +210,7 @@ class ProfilePage extends React.Component { } ``` -两者看起来实现功能是一致的，但是在类组件中，输出`this.props.user`，`Props `在 `React `中是不可变的所以它永远不会改变，但是 `this` 总是可变的，以便您可以在 `render` 和生命周期函数中读取新版本 +两者看起来实现功能是一致的，但是在类组件中，输出`this.props.user`，`Props `在 `React `中是不可变的，所以它永远不会改变，但是 `this` 总是可变的，以便您可以在 `render` 和生命周期函数中读取新版本 因此，如果我们的组件在请求运行时更新。`this.props` 将会改变。`showMessage `方法从“最新”的 `props` 中读取 `user` diff --git a/docs/React/communication.md b/docs/React/communication.md index 36fe7ee4..3440b884 100644 --- a/docs/React/communication.md +++ b/docs/React/communication.md @@ -156,7 +156,7 @@ class Parent extends React.Component { ``` -如果想要获取`Provider`传递的数据，可以通过`Consumer`组件或者或者使用`contextType`属性接收，对应分别如下： +如果想要获取`Provider`传递的数据，可以通过`Consumer`组件或者使用`contextType`属性接收，对应分别如下： ```jsx class MyClass extends React.Component { diff --git a/docs/React/how to use redux.md b/docs/React/how to use redux.md index ecf4dd01..288e8f82 100644 --- a/docs/React/how to use redux.md +++ b/docs/React/how to use redux.md @@ -45,7 +45,7 @@ `connect`方法将`store`上的`getState `和 `dispatch `包装成组件的`props` -导入`conect`如下： +导入`connect`如下： ```js import { connect } from "react-redux"; diff --git a/docs/React/import css.md b/docs/React/import css.md index 3a86a0b1..5cfe6104 100644 --- a/docs/React/import css.md +++ b/docs/React/import css.md @@ -68,7 +68,9 @@ export default Test; 上面可以看到，`css`属性需要转换成驼峰写法 -这种方式优点： +这种方式 + +优点： - 内联样式, 样式之间不会有冲突 - 可以动态获取当前state中的状态 @@ -133,7 +135,7 @@ export default class App extends PureComponent { 将`css`文件作为一个模块引入，这个模块中的所有`css`，只作用于当前组件。不会影响当前组件的后代组件 -这种方式是`webpack`特工的方案，只需要配置`webpack`配置文件中`modules:true`即可 +这种方式是`webpack`特有的方案，只需要配置`webpack`配置文件中`modules:true`即可 ```jsx import React, { PureComponent } from 'react'; @@ -235,8 +237,8 @@ export default Test; 通过上面四种样式的引入，可以看到： -- 在组件内直接使用`css`该方式编写方便，容易能够根据状态修改样式属性，但是大量的演示编写容易导致代码混乱 -- 组件中引入 .css 文件符合我们日常的编写习惯，但是作用域是全局的，样式之间会层叠 +- 在组件内直接使用`css`该方式编写方便，容易能够根据状态修改样式属性，但是大量的样式编写容易导致代码混乱 +- 组件中引入 .css 文件符合我们日常的编写习惯，但是作用域是全局的，样式之间会重叠 - 引入.module.css 文件能够解决局部作用域问题，但是不方便动态修改样式，需要使用内联的方式进行样式的编写 - 通过css in js 这种方法，可以满足大部分场景的应用，可以类似于预处理器一样样式嵌套、定义、修改状态等 diff --git a/docs/React/life cycle.md b/docs/React/life cycle.md index bad7f9c3..8a32efb3 100644 --- a/docs/React/life cycle.md +++ b/docs/React/life cycle.md @@ -131,7 +131,7 @@ componentDidUpdate(prevProps, prevState, snapshot) { ## componentWillUnmount -此方法用于组件卸载前，清理一些注册是监听事件，或者取消订阅的网络请求等 +此方法用于组件卸载前，清理一些注册时的监听事件，或者取消订阅的网络请求等 一旦一个组件实例被卸载，其不会被再次挂载，而只可能是被重新创建 diff --git a/docs/React/redux.md b/docs/React/redux.md index 6cba6e9a..fb1a1c77 100644 --- a/docs/React/redux.md +++ b/docs/React/redux.md @@ -35,7 +35,7 @@ 整个流程就是借书的用户需要先存在，然后需要借书，需要一句话来描述借什么书，图书馆管理员听到后需要查一下记录本，了解图书的位置，最后图书馆管理员会把这本书给到这个借书人 -转换为代码是，`React Components` 需要获取一些数据, 然后它就告知 `Store` 需要获取数据，这就是就是 `Action Creactor` , `Store` 接收到之后去 `Reducer` 查一下， `Reducer` 会告诉 `Store` 应该给这个组件什么数据 +转换为代码是，`React Components` 需要获取一些数据, 然后它就告知 `Store` 需要获取数据，这就是 `Action Creactor` , `Store` 接收到之后去 `Reducer` 查一下， `Reducer` 会告诉 `Store` 应该给这个组件什么数据 @@ -173,7 +173,7 @@ store.dispatch({ - createStore可以帮助创建 store - store.dispatch 帮助派发 action , action 会传递给 store - store.getState 这个方法可以帮助获取 store 里边所有的数据内容 -- store.subscrible 方法订阅 store 的改变，只要 store 发生改变， store.subscrible 这个函数接收的这个回调函数就会被执行 +- store.subscribe 方法订阅 store 的改变，只要 store 发生改变， store.subscribe 这个函数接收的这个回调函数就会被执行 ## 参考文献 diff --git a/docs/React/state_props.md b/docs/React/state_props.md index d7c0438f..3eadb21c 100644 --- a/docs/React/state_props.md +++ b/docs/React/state_props.md @@ -66,7 +66,7 @@ const element = ; 上述 `name` 属性与 `onNameChanged` 方法都能在子组件的 `props` 变量中访问 -在子组件中，`props` 在内部不可变的，如果想要改变它看，只能通过外部组件传入新的 `props` 来重新渲染子组件，否则子组件的 `props` 和展示形式不会改变 +在子组件中，`props` 在内部不可变的，如果想要改变它，只能通过外部组件传入新的 `props` 来重新渲染子组件，否则子组件的 `props` 和展示形式不会改变 ## 三、区别 diff --git a/docs/React/super()_super(props).md b/docs/React/super()_super(props).md index 37651637..38fc55d5 100644 --- a/docs/React/super()_super(props).md +++ b/docs/React/super()_super(props).md @@ -19,7 +19,7 @@ class sup { class sub extends sup { constructor(name, age) { - super(name); // super代表的事父类的构造函数 + super(name); // super代表的是父类的构造函数 this.age = age; } @@ -33,7 +33,7 @@ jack.printName(); //输出 : jack jack.printAge(); //输出 : 20 ``` -在上面的例子中，可以看到通过 `super` 关键字实现调用父类，`super` 代替的是父类的构建函数，使用 `super(name)` 相当于调用 `sup.prototype.constructor.call(this,name)` +在上面的例子中，可以看到通过 `super` 关键字实现调用父类，`super` 代替的是父类的构造函数，使用 `super(name)` 相当于调用 `sup.prototype.constructor.call(this,name)` 如果在子类中不使用 `super`，关键字，则会引发报错，如下： @@ -49,7 +49,7 @@ jack.printAge(); //输出 : 20 class sub extends sup { constructor(name, age) { this.age = age; - super(name); // super代表的事父类的构造函数 + super(name); // super代表的是父类的构造函数 } } ``` diff --git a/docs/css/dp_px_dpr_ppi.md b/docs/css/dp_px_dpr_ppi.md index 2bd1c7d9..c93b8df5 100644 --- a/docs/css/dp_px_dpr_ppi.md +++ b/docs/css/dp_px_dpr_ppi.md @@ -59,7 +59,7 @@ px会受到下面的因素的影响而变化： 设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素 -在`javaScript`中可以通过`window.screen.width/ window.screen.height` 查看 +在`JavaScript`中可以通过`window.screen.width/ window.screen.height` 查看 比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的“分辨率”（非严谨说法）指的就是设备独立像素 diff --git a/docs/css/selector.md b/docs/css/selector.md index 58e31132..7ffc34b2 100644 --- a/docs/css/selector.md +++ b/docs/css/selector.md @@ -167,7 +167,7 @@ font-variant:偏大或偏小的字体 ```css text-indent：文本缩进 -text-align：文本水平对刘 +text-align：文本水平对齐 line-height：行高 word-spacing：增加或减少单词间的空白 letter-spacing：增加或减少字符间的空白 @@ -216,7 +216,7 @@ cursor：箭头可以变成需要的形状 - a 标签的字体颜色不能被继承 -- h1-h6标签字体的大下也是不能被继承的 +- h1-h6标签字体的大小也是不能被继承的 diff --git a/docs/es6/array.md b/docs/es6/array.md index d34cdb2c..2563036c 100644 --- a/docs/es6/array.md +++ b/docs/es6/array.md @@ -64,7 +64,7 @@ const arr3 = ['d', 'e']; const arr1 = ['a', 'b',[1,2]]; const arr2 = ['c']; const arr3 = [...arr1,...arr2] -arr[1][0] = 9999 // 修改arr1里面数组成员值 +arr1[2][0] = 9999 // 修改arr1里面数组成员值 console.log(arr[3]) // 影响到arr3,['a','b',[9999,2],'c'] ``` @@ -281,6 +281,7 @@ for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" +// 1 "b" ``` diff --git a/docs/es6/function.md b/docs/es6/function.md index 08c7fcc7..cb934658 100644 --- a/docs/es6/function.md +++ b/docs/es6/function.md @@ -50,7 +50,7 @@ function foo({x, y = 5} = {}) { foo() // undefined 5 ``` -参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的 +参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没法省略的 ```javascript function f(x = 1, y) { diff --git a/docs/es6/module.md b/docs/es6/module.md index 6770957e..d2546920 100644 --- a/docs/es6/module.md +++ b/docs/es6/module.md @@ -207,7 +207,7 @@ a.foo = 'hello'; // 合法操作 a = {}; // Syntax Error : 'a' is read-only; ``` -不过建议即使能修改，但我们不建议。因为修改之后，我们很难差错 +不过建议即使能修改，但我们不建议。因为修改之后，我们很难排错 `import`后面我们常接着`from`关键字，`from`指定模块文件的位置，可以是相对路径，也可以是绝对路径 diff --git a/docs/es6/object.md b/docs/es6/object.md index 2d2400f0..dee22dd4 100644 --- a/docs/es6/object.md +++ b/docs/es6/object.md @@ -174,7 +174,7 @@ ES6 一共有 5 种方法可以遍历对象的属性。 - Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名 -- Object.getOwnPropertyNames(obj)：回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名 +- Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名 - Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有 Symbol 属性的键名 @@ -184,7 +184,7 @@ ES6 一共有 5 种方法可以遍历对象的属性。 - 首先遍历所有数值键，按照数值升序排列 - 其次遍历所有字符串键，按照加入时间升序排列 -- 最后遍历所有 Symbol 键，按照加入时间升序排 +- 最后遍历所有 Symbol 键，按照加入时间升序排列 ```js Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) diff --git a/docs/http/HTTPS.md b/docs/http/HTTPS.md index 58af2e6e..4b59ffaa 100644 --- a/docs/http/HTTPS.md +++ b/docs/http/HTTPS.md @@ -70,7 +70,7 @@ -上述的方法解决了数据加密，在网络传输过程中，数据有可能被篡改，并且黑客可以伪造身份发布公钥，如果你获取到假的公钥，那么混合加密也并无多大用处，你的数据扔被黑客解决 +上述的方法解决了数据加密，在网络传输过程中，数据有可能被篡改，并且黑客可以伪造身份发布公钥，如果你获取到假的公钥，那么混合加密也并无多大用处，你的数据仍被黑客解决 因此，在上述加密的基础上仍需加上完整性、身份验证的特性，来实现真正的安全，实现这一功能则是摘要算法 diff --git a/docs/http/UDP_TCP.md b/docs/http/UDP_TCP.md index b6244fda..a9bc166c 100644 --- a/docs/http/UDP_TCP.md +++ b/docs/http/UDP_TCP.md @@ -65,7 +65,7 @@ TCP（Transmission Control Protocol），传输控制协议，是一种可靠、 | 拥塞控制 | 慢开始、拥塞避免、快重传、快恢复 | 无 | | 传输效率 | 慢 | 快 | -- TCP 是面向连接的协议，建立连接3次握手、断开连接四次挥手，UDP是面向无连接，数据传输前后不连接连接，发送端只负责将数据发送到网络，接收端从消息队列读取 +- TCP 是面向连接的协议，建立连接3次握手、断开连接四次挥手，UDP是面向无连接，数据传输前后不连接，发送端只负责将数据发送到网络，接收端从消息队列读取 - TCP 提供可靠的服务，传输过程采用流量控制、编号与确认、计时器等手段确保数据无差错，不丢失。UDP 则尽可能传递数据，但不保证传递交付给对方 - TCP 面向字节流，将应用层报文看成一串无结构的字节流，分解为多个TCP报文段传输后，在目的站重新装配。UDP协议面向报文，不拆分应用层报文，只保留报文边界，一次发送一个报文，接收方去除报文首部后，原封不动将报文交给上层应用 diff --git a/docs/vue/axios.md b/docs/vue/axios.md index f39e88b4..ee049b53 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -10,7 +10,7 @@ ### 特性 -- 从浏览器中创建 `XMLHttpRequests` +- 从浏览器中创建 `XMLHttpRequest` - 从 `node.js` 创建 `http`请求 - 支持 `Promise` API - 拦截请求和响应 @@ -135,7 +135,7 @@ axios('http://localhost:3000/data', { 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问 -响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务 +响应拦截器： 这块就是根据 后端 返回来的状态码判定执行不同业务 diff --git a/docs/vue/axiosCode.md b/docs/vue/axiosCode.md index e510397c..84ed052c 100644 --- a/docs/vue/axiosCode.md +++ b/docs/vue/axiosCode.md @@ -228,7 +228,7 @@ class Axios { 执行语句`axios.interceptors.response.use`和`axios.interceptors.request.use`的时候，实现获取`axios`实例上的`interceptors`对象，然后再获取`response`或`request`拦截器，再执行对应的拦截器的`use`方法 -把`Axios`上的方法和属性搬到`request`过去 +把`Axios`上的方法和属性搬到`request`中去 ```js function CreateAxiosFn() { diff --git a/docs/vue/communication.md b/docs/vue/communication.md index cc5740b3..1e5438ca 100644 --- a/docs/vue/communication.md +++ b/docs/vue/communication.md @@ -52,15 +52,15 @@ `Children.vue` ```js -props:{ -    // 字符串形式 - name:String // 接收的类型参数 -    // 对象形式 -    age:{   -        type:Number, // 接收的类型为数值 -        defaule:18,  // 默认值为18 -       require:true // age属性必须传递 -    } +props: { + // 字符串形式 + name: String // 接收的类型参数 + // 对象形式 + age: { + type: Number, // 接收的类型为数值 +        default: 18,  // 默认值为18 + require: true // age属性必须传递 + } } ``` @@ -76,7 +76,7 @@ props:{ - 子组件通过`$emit触发`自定义事件，`$emit`第二个参数为传递的数值 - 父组件绑定监听器获取到子组件传递过来的参数 -`Chilfen.vue` +`Children.vue` ```js this.$emit('add', good) @@ -111,7 +111,7 @@ this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能 `Bus.js` ```js -// 创建一个中央时间总线类 +// 创建一个中央事件总线类 class Bus {   constructor() {     this.callbacks = {};   // 存放事件的名字 @@ -147,7 +147,7 @@ this.$bus.$on('foo', this.handle) ### $parent 或$ root -- 通过共同祖辈`$parent`或者`$root`搭建通信桥连 +- 通过共同祖辈`$parent`或者`$root`搭建通信桥梁 兄弟组件 @@ -217,7 +217,7 @@ inject:['foo'] // 获取到祖先组件传递过来的值 - `state`用来存放共享变量的地方 - `getter`，可以增加一个`getter`派生状态，\(相当于`store`中的计算属性），用来获得共享变量的值 - `mutations`用来存放修改`state`的方法。 -- `actions`也是用来存放修改state的方法，不过`action`是在`mutations`的基础上进行。常用来做一些异步操作 +- `actions`也是用来存放修改state的方法，不过`actions`是在`mutations`的基础上进行。常用来做一些异步操作 ### 小结 diff --git a/docs/vue/cors.md b/docs/vue/cors.md index 87554e4d..625bf0a3 100644 --- a/docs/vue/cors.md +++ b/docs/vue/cors.md @@ -69,7 +69,7 @@ ps: `Access-Control-Allow-Origin` 设置为*其实意义不大，可以说是形 在`vue.config.js`文件，新增以下代码 ```js -amodule.exports = { +module.exports = { devServer: { host: '127.0.0.1', port: 8084, diff --git a/docs/vue/data_object_add_attrs.md b/docs/vue/data_object_add_attrs.md index 8bae2856..91d93018 100644 --- a/docs/vue/data_object_add_attrs.md +++ b/docs/vue/data_object_add_attrs.md @@ -9,7 +9,7 @@ 定义一个`p`标签，通过`v-for`指令进行遍历 -然后给`botton`标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行 +然后给`button`标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行 ```html

diff --git a/docs/vue/filter.md b/docs/vue/filter.md index 6f9311e5..514a9848 100644 --- a/docs/vue/filter.md +++ b/docs/vue/filter.md @@ -93,7 +93,7 @@ new Vue({ ### 小结： -- 部过滤器优先于全局过滤器被调用 +- 局部过滤器优先于全局过滤器被调用 - 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右 @@ -108,7 +108,7 @@ new Vue({ Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() - return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') + return value.replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') }) ``` diff --git a/docs/vue/first_page_time.md b/docs/vue/first_page_time.md index 2ccefba9..e53358a0 100644 --- a/docs/vue/first_page_time.md +++ b/docs/vue/first_page_time.md @@ -49,7 +49,7 @@ performance.getEntriesByName("first-contentful-paint")[0].startTime 常见的几种SPA首屏优化方式 -- 减小入口文件积 +- 减小入口文件体积 - 静态资源本地缓存 - UI框架按需加载 - 图片资源的压缩 @@ -140,7 +140,7 @@ minChunks: 3 拆完包之后，我们再用`gzip`做一下压缩 安装`compression-webpack-plugin` ```js -cnmp i compression-webpack-plugin -D +cnpm i compression-webpack-plugin -D ``` 在`vue.congig.js`中引入并修改`webpack`配置 diff --git a/docs/vue/keepalive.md b/docs/vue/keepalive.md index 7f918a6d..954d56d9 100644 --- a/docs/vue/keepalive.md +++ b/docs/vue/keepalive.md @@ -23,7 +23,7 @@ ``` -使用`includes`和`exclude`： +使用`include`和`exclude`： ```go @@ -51,7 +51,7 @@ ## 二、使用场景 -使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用`keepalive` +使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用`keep-alive` 举个栗子: diff --git a/docs/vue/mixin.md b/docs/vue/mixin.md index 8a508bed..45e9678c 100644 --- a/docs/vue/mixin.md +++ b/docs/vue/mixin.md @@ -165,7 +165,7 @@ export function initMixin (Vue: GlobalAPI) { } ``` -主要是调用`merOptions`方法 +主要是调用`mergeOptions`方法 源码位置：/src/core/util/options.js diff --git a/docs/vue/modifier.md b/docs/vue/modifier.md index 1f639ad3..a397ff59 100644 --- a/docs/vue/modifier.md +++ b/docs/vue/modifier.md @@ -185,11 +185,11 @@ Vue.config.keyCodes.f2 = 113 v-bind修饰符主要是为属性进行操作，用来分别有如下： -- async +- sync - prop - camel -#### async +#### sync 能对`props`进行一个双向绑定 @@ -214,7 +214,7 @@ func2(){ } ``` -使用`async`需要注意以下两点： +使用`sync`需要注意以下两点： - 使用`sync`的时候，子组件传递的事件名格式必须为`update:value`，其中`value`必须与子组件中`props`中声明的名称完全一致 diff --git a/docs/vue/nexttick.md b/docs/vue/nexttick.md index a02dd2c8..d1779059 100644 --- a/docs/vue/nexttick.md +++ b/docs/vue/nexttick.md @@ -51,7 +51,7 @@ console.log(vm.$el.textContent) // 原始值 等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行`DOM`的更新 -#### 为什么要有nexttick +#### 为什么要有nextTick 举个例子 ```js diff --git a/docs/vue/slot.md b/docs/vue/slot.md index a9c76405..c2dd67b5 100644 --- a/docs/vue/slot.md +++ b/docs/vue/slot.md @@ -20,7 +20,7 @@ 2 ``` -`template`不会展示到页面中，需要用先获取它的引用，然后添加到`DOM`中， +`template`不会展示到页面中，需要先获取它的引用，然后添加到`DOM`中， ```js customElements.define('element-details', @@ -49,17 +49,17 @@ customElements.define('element-details', ## 二、使用场景 -通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理 +通过插槽可以让用户拓展组件，去更好地复用组件和对其做定制化处理 如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情 通过`slot`插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用 -比如布局组件、表格列、下拉选、弹框显示内容等 +比如布局组件、表格列、下拉选择框、弹框显示内容等 ## 三、分类 -`slot`可以分来以下三种： +`slot`可以分为以下三种： - 默认插槽 - 具名插槽 @@ -192,7 +192,7 @@ with(this){return _c('div',[_t("default",[_v("我是默认内容")])],2)} }) ``` -`_v`表示穿件普通文本节点，`_t`表示渲染插槽的函数 +`_v`表示创建普通文本节点，`_t`表示渲染插槽的函数 渲染插槽函数`renderSlot`（做了简化） diff --git a/docs/vue/spa.md b/docs/vue/spa.md index 8fbc5841..d8704d1d 100644 --- a/docs/vue/spa.md +++ b/docs/vue/spa.md @@ -40,7 +40,6 @@ SPA（single-page application），翻译过来就是单页应用`SPA`是一种 - 不利于搜索引擎的抓取 - 首次渲染速度相对较慢 -- ## 三、实现一个SPA @@ -89,7 +88,7 @@ miniRouter.push('/page2') // page2 ##### history模式 -`history` 模式核心借用 `HTML5 history api`，`api` 提供了丰富的 `router` 相关属性先了解一个几个相关的api +`history` 模式核心借用 `HTML5 history api`，`api` 提供了丰富的 `router` 相关属性先了解几个相关的api - `history.pushState` 浏览器历史纪录添加记录 - `history.replaceState`修改浏览器历史纪录中当前纪录 diff --git a/docs/vue/ssr.md b/docs/vue/ssr.md index 0919eaa5..6df1fa46 100644 --- a/docs/vue/ssr.md +++ b/docs/vue/ssr.md @@ -44,7 +44,7 @@ > > 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行 -我们从上门解释得到以下结论： +我们从上面解释得到以下结论： - `Vue SSR`是一个在`SPA`上进行改良的服务端渲染 - 通过`Vue SSR`渲染的页面，需要在客户端激活才能实现交互 @@ -56,7 +56,7 @@ SSR主要解决了以下两种问题： -- seo：搜索引擎优先爬取页面`HTML`结构，使用`ssr`时，服务端已经生成了和业务想关联的`HTML`，有利于`seo` +- seo：搜索引擎优先爬取页面`HTML`结构，使用`ssr`时，服务端已经生成了和业务相关联的`HTML`，有利于`seo` - 首屏呈现渲染：用户无需等待页面所有`js`加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端） 但是使用`SSR`同样存在以下的缺点： diff --git a/docs/vue/vnode.md b/docs/vue/vnode.md index fb3c42f4..bdf84542 100644 --- a/docs/vue/vnode.md +++ b/docs/vue/vnode.md @@ -8,7 +8,7 @@ 实际上它只是一层对真实`DOM`的抽象，以`JavaScript` 对象 (`VNode` 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上 -在`Javascript`对象中，虚拟`DOM` 表现为一个 `Object `对象。并且最少包含标签名 (`tag`)、属性 (`attrs`) 和子元素对象 (`children`) 三个属性，不同框架对这三个属性的名命可能会有差别 +在`Javascript`对象中，虚拟`DOM` 表现为一个 `Object `对象。并且最少包含标签名 (`tag`)、属性 (`attrs`) 和子元素对象 (`children`) 三个属性，不同框架对这三个属性的命名可能会有差别 创建虚拟`DOM`就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟`DOM`对象的节点与真实`DOM`的属性一一照应 @@ -95,7 +95,7 @@ export default class VNode { constructor ( tag?: string, data?: VNodeData, - children?: ?Array, + children?: Array, text?: string, elm?: Node, context?: Component, @@ -129,7 +129,7 @@ export default class VNode { this.raw = false /*静态节点标志*/ this.isStatic = false - /*是否作为跟节点插入*/ + /*是否作为根节点插入*/ this.isRootInsert = true /*是否为注释节点*/ this.isComment = false @@ -214,7 +214,7 @@ export function _createElement( } if (normalizationType === ALWAYS_NORMALIZE) { children = normalizeChildren(children) - } else if ( === SIMPLE_NORMALIZE) { + } else if (normalizationType === SIMPLE_NORMALIZE) { children = simpleNormalizeChildren(children) } // 创建VNode @@ -252,7 +252,7 @@ if (normalizationType === ALWAYS_NORMALIZE) { 无论是`simpleNormalizeChildren`还是`normalizeChildren`都是对`children`进行规范（使`children` 变成了一个类型为 `VNode` 的 `Array`），这里就不展开说了 -规范化`children`的源码位置在：src/core/vdom/helpers/normalzie-children.js +规范化`children`的源码位置在：src/core/vdom/helpers/normalize-children.js 在规范化`children`后，就去创建`VNode` diff --git a/docs/vue/vue.md b/docs/vue/vue.md index 03f48d86..b32e28f2 100644 --- a/docs/vue/vue.md +++ b/docs/vue/vue.md @@ -73,7 +73,11 @@ Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源J ### 组件化 -1.什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在`Vue`中每一个`.vue`文件都可以视为一个组件2.组件化的优势 +1.什么是组件化 + +一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在`Vue`中每一个`.vue`文件都可以视为一个组件 + +2.组件化的优势 - 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现 - 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单 diff --git a/docs/vue/vue3_vue2.md b/docs/vue/vue3_vue2.md index 90039a17..44d5660e 100644 --- a/docs/vue/vue3_vue2.md +++ b/docs/vue/vue3_vue2.md @@ -36,7 +36,7 @@ - 更高效的组件初始化 -- `undate`性能提高1.3~2倍 +- `update`性能提高1.3~2倍 - `SSR`速度提高了2~3倍 @@ -254,7 +254,7 @@ export default { - 来自 `mixin` 的 `data` 选项现在可简单地合并 - `attribute` 强制策略已更改 - 一些过渡 `class` 被重命名 -- 组建 watch 选项和实例方法 `$watch`不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。 +- 组件 watch 选项和实例方法 `$watch`不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。 - `