sl1673495 commented 4 years ago

Redux 官网对于 middlewares 的讲解，为什么要用多层的高阶函数，以及怎么设计一些使用的middleware。

多层高阶函数的目的是让用户可以拿到最终处理过后完全版的 dispatch，并且也能拿到上一个中间件返回的 dispatch。

对于 redux-thunk 中间件来说，当用户传入的 action 是 function 时，则把最终态的 dispatch 控制反转交给用户。否则直接调用 next，相当于什么也不做把 action 透传下去。

https://www.redux.org.cn/docs/advanced/Middleware.html

范式化的章节也很有意思，一个新的概念

https://www.redux.org.cn/docs/recipes/reducers/NormalizingStateShape.html

范式化所用的数据整合库 normalizr

sl1673495 commented 4 years ago

什么是光栅化

光栅化是将一个图元转变为一个二维图像的过程。二维图像上每个点都包含了颜色、深度和纹理数据。将该点和相关信息叫做一个片元（fragment）。

光栅化的目的，是找出一个几何单元（比如三角形）所覆盖的像素。

光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程，如下图：

光栅化会根据三角形顶点的位置，来确定需要多少个像素点才能构成这个三角形，以及每个像素点都应该得到哪些信息，比如uv坐标该是什么…等。这是通过对顶点数据进行插值来完成的。

sl1673495 commented 4 years ago

vue scope css 是怎么实现的

https://juejin.im/post/5d8627355188253f3a70c22c

一个 .vue 单文件组件会被编译成这种格式。

    // code returned from the main loader for 'source.vue'

    // import the <template> block
    import render from 'source.vue?vue&type=template'
    // import the <script> block
    import script from 'source.vue?vue&type=script'
    export * from 'source.vue?vue&type=script'
    // import <style> blocks
    import 'source.vue?vue&type=style&index=1'

    script.render = render
    export default script

VueLoaderPlugin 会在 webpack 配置里根据 resourceQuery 加入不同的文件处理规则，这些 import 语句后面的 resourceQuery 会匹配后交给不同的loader去处理。

如果文件需要做 css scope 隔离的话，会根据文件内容生成一个 hash 值，然后在 template 的处理过程中，为对应的 html 标签加上 [data-v-scopeId] 的属性。

在处理 css 的过程中，通过 postcss 的 plugin 机制，为每个选择器（除了 deep 类型）增加 [data-v-scopeId] 属性选择器。

这样就实现了 css scope 隔离。

sl1673495 / daily-plan

2020-04-18日计划：Redux、vue-css-scope #12

什么是光栅化

vue scope css 是怎么实现的