Weekly 不发出来都没有动力更新， 都变成 Monthly 了???。 每个链接下都是自己的拙见，望各位大佬多多指教。博客链接

2017/12/24 - 2018/1/19

• ★ ★ Redux 坏的一面

  • Learning curve： thunk, selectors, reducers, actions, middlewares, mapStateToProps, mapDispatchToProps 各种概念相对较多， 全部学习和理解起来需要花费一定时间
  • Flow complexITy： 还是概念上的问题吧
  • Boilerplate： 需要写大量的模板代码是毋庸置疑的
  • 作者就开发模式上做了较多说明

• ★ ★ ★ ★ 谷歌出品： 图片优化

  • PRogressive JPEGs， 这个就很有意思了

    • 这种图片格式的使用，以及创建可以关注下。
  • SVG Optimization
  • 内容太多，慢慢看。

• Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems.

  • 

  • FaceBook 出的新语言，Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaML ecoSystems.
  • 看来对于类型检查，各方都真的很关注啊

• CORS 设置中前后端的角色(即请求和响应的不同设置) 每个字段的代表的意义

  • 客户端
  • 服务端

• HTTP 内容协商

  • 在 HTTP 协议中，内容协商是这样一种机制，通过为同一 URI 指向的资源提供不同的展现形式，可以使用户代理选择与用户需求相适应的最佳匹配（例如，文档使用的自然语言，图片的格式，或者内容编码形式）。
  • HTTP 基本忘完，惭愧。

• ★ CSS IN JS 的优缺点

  • 反正 CSS 方案这一块也是比较坑的，等待新阶段的坑被填，然后就知道结果了。

• URL 接口

  • The URL interface represents an object providing static methods used for creating object URLs。
  • URL.createObjectURL()

• ★ ★ ★ COMPILING TO JAVASCRIPT

  • 将其他语言编译到 JS
  • C/C++ 目前已经比较成熟了
  • 有哪些语言可以编译到 JS
  • arm.js 是 JS 的严格子集，当然器运行需要引擎的支持
  • 编译器可以将 C / C++ 代码编译成 JS 代码，但不是普通的 JS，而是一种叫做 asm.js 的 JavaScript 变体。编译器项目 Emscripten。

  • WebAssembly 的技术，也能将 C / C++ 转成 JS 引擎可以运行的代码。那么它与 asm.js 有何区别呢？

    • 回答是，两者的功能基本一致，就是转出来的代码不一样：asm.js 是文本，WebAsSEMbly 是二进制字节码，因此运行速度更快、体积更小
  • 所以说 浏览器 这个宿主环境将会是多么重要

• 40 行构建正则表达式引擎

  • 粗看了文章，标题起的有点大。

• AST 的利用

  • 算是概述了下 AST 能做的一些事吧

• The TC39 对 ECMAScript features 的处理过程

  • Stage 0: strawman： A free-form way of submitting ideas for evolving ECMAScript.
  • Stage 1: proposal： A formal proposal for the feature.
  • Stage 2: draft： A First version of what will be in the specification. At this point, an eventual inclusion of the feature in the standard is likely.
  • Stage 3: candidate： The proposal is mostly finished and now needs feedback From implementations and users to progress further.
  • Stage 4: finished： The proposal is ready to be included in the standard.
  • babel Stage 2 preset 参考

• AI 生成前端静态页面

  • 只跑了下演示的例子，真得搞不懂啊。
  • 不过 https://www.floydhub.com/ 这个平台还不错， 算是新一代云厂商了，不过是 GPU 的，23333
• ★★开 源书籍： 深入 React

• ★★ 语法层面深入子类

  • 通过此文可以了解到： 对于面向对象编程的继承这一块，语法上是怎么一步步优化的。
  • 为什么叫语法糖，毕竟用起来确实舒服很多, 很甜的嘛。
  • 在 OOP 原则上，与继承 inheritance 还有个相对的是： Composition over inheritance

• Chrome 64 更新

  • 最近 TC39 各种提议一堆堆进入讨论阶段，HTML5.2 发布，浏览器更新也非常快，新东西太多，都已经追不上了。
• 一元操作符

// 这个还是有意思的：
// An object can only be converted if it has a key valueOf and it's function returns any of the above types.
+{
  valueOf: function(){
    return '0xFF'
  }
}
//returns 255

• ★ JS things I never knew existed

  • 这里作者讲的还都是挺有意思的点。
  • Label Statements
  -tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" loop1: // labeling "loop1" for (let i = 0; i < 3; i++) { // "loop1" loop2: // labeling "loop2" for (let j = 0; j < 3; j++) { // "loop2" if (i === 1) { continue loop1; // continues upper "loop1" // break loop1; // breaks out of upper "loop1" } console.log(`i = ${i}, j = ${j}`); } } " title="" data-original-title="复制">

      loop1: // labeling "loop1" 
      for (let i = 0; i < 3; i++) { // "loop1"
          loop2: // labeling "loop2"
          for (let j = 0; j < 3; j++) { // "loop2"
              if (i === 1) {
                  continue loop1; // continues upper "loop1"
                  // break loop1; // breaks out of upper "loop1"
              }
          console.LOG(`i = ${i}, j = ${j}`);
          }
      }
      

  • Comma operator

  y = false, true; // returns true in console
  console.log(y); // false (left-most)
  
  z = (false, true); // returns true in console
  console.log(z); // true (right-most)

  • Pipeline Operator： 管道操作符最近在 TC39 的提议中，不知是否会加入特性中，全看大佬们的啊。

    • tc39 工作组处理进度与详细语法参考

    const square = (n) => n * n;
    const increment = (n) => n + 1;
    
    // without pipeline operator
    square(increment(square(2))); // 25
    
    // with pipeline operator
    2 |> square |> increment |> square; // 25
    

• HTML5.2 New Dialog Element

  • 话说还是增加了些东西的，都还没有看。2333333
  • 原生模态层算是解决了一个大问题的。MDN 参考

  <dialog open>
      Native dialog box!
  </dialog>