Skip to content

Latest commit

 

History

History
71 lines (58 loc) · 5.3 KB

24.精读现在JavaScript概览.md

File metadata and controls

71 lines (58 loc) · 5.3 KB
Raw

024.精读《现代 JavaScript 概览》.md

现在 JS 概念，JS 库或应用的使用方式

  • 纯函数和副作用

    1. 副作用是改变了其作用域外的状态(useEffect)
    2. 纯函数，函数返回值由参数决定同样参数返回值固定

  • stateful && Stateless(有状态和无状态)

    1. 无状态有点像纯函数，不管理自己的数据或者状态，Stateful 指函数自己有自己的运行状态，可以修改自己的状态，(React fn(state) --> UI View 层框架应用)

  • 可变对象和不可变对象(mutable && immutable)

    1. 可变对象：值在创建之后扔能被改变， 不可变对象：值在被创建之后不能改变
    2. Object.freeze(obj) 使对象不可改变，这只是一个浅层冻结对象，如果其中一个属性是对象的话，这个属性是可以被修改的，不可变对象库(npm deep-freeze immutableJS)

  • 高阶函数

    1. 函数作为 JS 的一等公民，可以跟普通数据类型一样被存储被作为值传参，高阶函数就是传参值可以为函数形式传入

  • 函数式编程 FP(funcitonal programming) 概念

    1. 关键函数实现纯函数，无副作用
    2. 数据不可变
    3. 函数无状态
    4. 声明式代码需要管理副作用和执行命令式编程

  • Hot and Cold Observables

    1. Observable 和数组类似，只是会存储在堆内存中，Observable 的每一个函数异步加入进去，可以订阅这些Observable
    2. Hot Observable 容易被执行，即便没有订阅，比如一些操作界面的按钮点击事件，鼠标移动，窗口大小改变，Cold Observable 需要我们手动去订阅，并且在订阅时候去执行

  • 响应式编程 RP(Reactive Programming)

    1. 可以看做异步事件流编程，声明式，触发响应条件后才去做操作。

  • 函数式响应型编程 FRP(funcitonal Reactive Programming)特点

    1. 函数或类型有明确定义
    2. 操作的是连续变化值

  • 作用域和闭包

    1. 闭包， 函数内生命的函数可以引用外部函数的局部变量，形成闭包

  • 单向数据流和双向数据流

    1. SPA 兴起，需要理解数据流概念，React 是单向数据流的典范，使用 Model 作为更新来源，控制 View 渲染，在 View 层用事件代理的形式通知 Model 更新，然后反应到 View 层变化，数据永远沿着一个方向流动，UI 永远不会更新 Model，通过事件或者 setState 方法控制更新
    2. 双向数据流两个方向流动的 JS，可以更新 Model 数据，View 层也可以更新 Model 数据，ng1.x 版本是双向数据流的典型实现
    3. 单向数据流优点： 清晰架构，数据流动更清晰易管理，对于单向数据流描述 VIew 自动更新数据的便捷和清晰的数据流

  • JS 框架变化检测： 脏检查， getter/setter， 虚拟 DOM(snab DOM)

    1. ng1.x 脏检查， View 涉及的 Model 进行深度比较，优点: 简单可预测，不涉及 API 和对象的变更，大量比较带来了效率的降低
    2. Ember/backnone 使用 getters/setters 变化侦测，涉及数据修改触发变更的 getter/setter，React/Vue 使用虚拟 DOM 侦测，使用 setState 通知变更。

  • Web components 组件

    1. Web 组件时 Web 平台可复用的基础组件，Web Components 定义规范实现可复用组件，实现推动较慢(自定义元素，HTML Template, shadow DOM, HTML imports)

  • Smart && Dumb 组件

    1. Smart 组件，容器组件，组件内处理业务逻辑，通常也管理 Dumb 组件和响应 Dumb 组件的事件
    2. Dumb 组件，展示组件，写成纯函数，依赖外部数据和方法，通常用于展示数据

  • JIT 编译(Just in time)即时编译，Chrome 在热代码编译的时候，通过 Turbo fan 将使用次数多的代码直接编译成机器码，加快代码执行速度

  • AOT 编译(Ahead of time) 提前编译: 编写的代码在运行之前，被翻译成机器码的过程，AOT 给tree shaking带来可能，使用 AOT 预编译优点

    1. 更少的异步请求，模板和样式内联 JS 内
    2. 更小体积(按需加载？)
    3. 更早检查到模板错误
    4. 更好安全性

  • Tree shaking

    1. 意思: 打包 JS 模块时，对代码静态分析，排除不用的代码机制
    2. 建立在 ES6 的 import 和 export 上，支持导入特定内容(按需引入加载)

addon

  • 依赖注入 DI(dependent injection)
    1. 通过控制反转 IOC(inverse of control)，父级不需要关注子类实现，将子类可能用到的实例初始化好，子类决定引入依赖，好处之一维持单例模式， 在数据流中很重要， 如果 store 不是单例的，数据流很容易乱，希望传给子类使用，又要维持单例，这是一个很好的解决方案
  • Symbol Reflect Proxy
    1. Symbol 符号，作为唯一标识符不会被重复等同，个人理解有点像枚举 enum
    2. Proxy 实现对于对象的一层拦截，提供代理对象操作的机制，Reflect 是内置的对象，提供可拦截的 JS 操作方法，方法和代理处理程序方法相同
  • Server rendering
    1. 后端渲染概念一定程度帮助 HTML 认识自身不足，同时可以像三大框架对 webCOmponents 发起冲击一样，未来可以用上 ES 标准提供的功能，但是永远是业务驱动技术的进步

summary

伴随框架热度理解现代 JS 概念很重要~~ 借此了解更多的现代框架理念，十分重要的知识补充