add 11.12 daily reading

LiangW94 · Nov 12, 2018 · b03721a · b03721a
1 parent 512b5b0
commit b03721a
Showing 1 changed file with 122 additions and 4 deletions.
diff --git a/daily reading/2018.11.md b/daily reading/2018.11.md
@@ -2,13 +2,90 @@
 
 
 
+#### 11月12号
+
+* [ES6 系列之 defineProperty 与 proxy](https://juejin.im/post/5be4f7cfe51d453339084530)
+
+* [一些使 JavaScript 更加简洁的小技巧](https://juejin.im/entry/5bd8e8b75188254a267ef788)
+
+* [理解JavaScript中的柯里化](https://juejin.im/post/5be5b5a65188250fa835897e)
+
+
+
 #### 11月9号
 
-* [HTML5 History 模式](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)
-* [理解 Javascript 执行上下文和执行栈](https://juejin.im/post/5bdfd3e151882516c6432c32)
-* [JavaScript万物产生顺序](https://juejin.im/post/5bda64735188257f711e3596)
+* #### 11月9号
+
+  * [HTML5 History 模式](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)
+
+    * `vue-router` 默认使用hash 模式来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。
+
+    * 用路由的 **history 模式**替换hash模式，利用 `history.pushState` API 来完成 URL 跳转而无须重新加载页面。
+
+      ```js
+      const router = new VueRouter({
+        mode: 'history',
+        routes: [...]
+      })
+      ```
+
+    * 后台需要对路由进行配置
+
+  * [理解 Javascript 执行上下文和执行栈](https://juejin.im/post/5bdfd3e151882516c6432c32)（优）
+
+    * 执行上下文总共有三种类型：**全局执行上下文**、**函数执行上下文**（只有在函数被调用的时候才会被创建）、**Eval 函数执行上下文**
+
+    * LIFO原则，引擎首次读取脚本时，会创建一个全局执行上下文并将其推入当前的执行栈。每当发生一个函数调用，引擎都会为该函数创建一个新的执行上下文并将其推到当前执行栈的顶端。函数运行完成后，其对应的执行上下文将会从执行栈中弹出，上下文控制权将移到当前执行栈的下一个执行上下文。
+
+    * 执行上下文分两个阶段创建：**1）创建阶段；** **2）执行阶段**
+
+    * 创建阶段发生三件事：**1）确定 this** 的值，也被称为 **This Binding**。**2）LexicalEnvironment（词法环境）** 组件被创建。**3）VariableEnvironment（变量环境）** 组件被创建。
+
+    * **环境记录** 还包含了一个 `arguments` 对象，该对象包含了索引和传递给函数的参数之间的映射以及传递给函数的参数的**长度（数量）**。
+
+      ```JS
+      function foo(a, b) {  
+        var c = a + b;  
+      }  
+      foo(2, 3);
+      
+      // arguments 对象  
+      Arguments: {0: 2, 1: 3, length: 2},
+      ```
+
+    * 在创建阶段，函数声明存储在环境中，而变量会被设置为 `undefined`（在 `var` 的情况下）或保持未初始化（在 `let` 和 `const` 的情况下）。所以这就是为什么可以在声明之前访问 `var` 定义的变量（尽管是 `undefined` ），但如果在声明之前访问 `let` 和 `const` 定义的变量就会提示引用错误的原因。这就是所谓的变量提升。
+
+    * 如果 Javascript 引擎在源代码中声明的实际位置找不到 `let` 变量的值，那么将为其分配 `undefined` 值。
+
+
+
+  * [JavaScript万物产生顺序](https://juejin.im/post/5bda64735188257f711e3596)（优）
+
+    * 对于 `Object` 来说，它是一个 `Function`的实例，因为 `Object instanceof Function // true`；对于 `Function` 来说，它是 `Object` 的实例，因为 `Function instanceof Object // true`，所以到底是先有 `Object` 还是先有 `Function`呢？
 
+    * 一种理解：`Object`基于 `null` 为模板（`__proto__ `），所以`Object.prototype.__proto__ === null`
 
+    * `new Object` 创建一个对象，基于`Object.prototype`为模板，所以`new Object({}).__proto__ === Object.prototype`
+
+      ```js
+      // Object
+      new Object().__proto__ === Object.prototype;
+      Object.__proto__ === Function.prototype;
+      Object.prototype.__proto__ === nulll;
+      
+      // Function
+      Function.prototype === Function.__proto__;
+      Function.prototype.__proto__ === Object.prototype;
+      
+      // Foo
+      new Foo().__proto__ === Foo.prototype;
+      Foo.prototype.__proto__ === Object.prototype;
+      Foo.__proto__ === Function.prototype
+      ```
+
+      ![image](https://camo.githubusercontent.com/71cab2efcf6fb8401a2f0ef49443dd94bffc1373/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f332f31332f313632316538613962636230383732643f773d34383826683d35393026663d706e6726733d313531373232)
+
+
 
 #### 11月8号
 
@@ -179,12 +256,53 @@
 
 #### 11月5号
 
-* [使用Promises](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)
+* [使用Promises](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)（优）
+
+  * Promise 本质上是一个绑定了回调的对象，而不是将回调传进函数内部。
+
+  * 在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用
+
+  * 通过 .then 形式添加的回调函数，甚至都在异步操作完成之后才被添加的函数，都会被调用
+
+  * 如果想要在回调中获取上个 Promise 中的结果，上个 Promise 中必须要返回结果
+
+  * 在一个`.catch`操作之后可以继续使用链式`.then`操作
+
+  * 通常递归调用一个由异步函数组成的数组时相当于一个 Promise 链式：`Promise.resolve().then(func1).then(func2)`
+
+  * 传递到then中的函数被置入了一个微任务队列，而不是立即执行，这意味着它是在JavaScript事件队列的所有运行时结束了，事件队列被清空之后才开始执行
+
+  * 嵌套的 catch 仅捕捉在其之前同时还必须是其作用域的 failureres，而捕捉不到在其链式以外或者其嵌套域以外的 error。
+
+  * 一个好的经验法则是总是返回或终止 Promise 链，并且一旦你得到一个新的 Promise，返回它。
+
+
 
 * [基于webpack实现react组件的按需加载](https://fengmiaosen.github.io/2017/01/08/webpack-react-lazy-load/)
 
+  * 实现静态资源的按需加载，最大程度的减小首页加载模块体积和首屏加载时间，其提供的Code Splitting（代码分割）特性正是实现模块按需加载的关键方式。
+
+  * 将某些第三方基础框架模块（例如：moment、loadash）或者多个页面的公用模块（js、css）拆分出来独立打包加载，通常这些模块改动频率很低，将其与业务功能模块拆分出来并行加载，一方面可以最大限度的利用浏览器缓存，另一方面也可以大大降低多页面系统的代码冗余度。
+
+  * `CommonsChunkPlugin`将`公共基础库模块`单独打包到一个文件中
+
+  * 经常使用webpack的`css-loader`来将css样式导入到js模块中，再使用`style-loader`将css样式以`<style>`标签的形式插入到页面当中，缺点是无法单独加载并缓存css样式文件，页面展现必须依赖于包含css样式的js模块，从而造成页面闪烁的不佳体验。
+
+  * 将js模块当中import的css模块提取出来，需要用到`extract-text-webpack-plugin`
+
+  * 使用React动态路由来按需加载react组件
+
 * [大前端的技术原理和变迁史](https://juejin.im/post/5b5adc9b6fb9a04f9244555d)
 
+  * Web1.0 到 Web2.0过渡的标志，就是Ajax的出现（2005年）。
+
+  * **AJAX** 即 **Asynchronous JavaScript and XML**（异步的 JavaScript 与 XML 技术）
+
+  * SPA 即单页面，就是页面整体不刷新，不同的页面只改变局部的内容的一种实现方式。
+
+  * 一个完整的URI有以下几部分组成：`scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]`，以上规则中，只有 `#` 后面的 `fragment` 发生改变时，页面不会重新请求，其它参数变化，均会引起页面的重新请求，而在Js中恰恰还有事件 `window.onhashchange` 能监听到 `fragment` 的变化，于是就利用这个原理来达到一个修改局部内容的操作。`#fragment` 部分就是对应到Js中的 `location.hash` 的值。
+
+  * 一个符合前端工程化要求的方案应该包含以下要素：开发规范、模块化开发、组件化开发、组件仓库、性能优化、部署、开发流程、开发工具 
 
 
 #### 11月2号