amorites / blog Goto Github PK

新时代 css 布局

有一些常用但是一直没记清楚的知识点：

flex:

• flex-basis: 指定了 flex 元素在主轴方向上的初始大小，有意思的取值：
  • auto: 自动尺寸？
  • 0: 从0开始
  • content: 根据 flex 的元素的内容自动调整大小
• align-content: 在单行 flexible box 不起作用
• justify-items/justify-self 在flex项目是用不上的。(在 grid 里使用)

css Intrinsic Sizing keywords：fill, max-content, min-content, fit-content

css 的 polyfill 应该怎么写呢？

猜想：解析出 sytle 代码，获取其中 css variables 的部分；

入口：
cssvar()

The ponyfill will:
Get the , <style>, and @import CSS
getCssData
Parse the CSS and convert it to an abstract syntax tree

Transform CSS custom properties to static values
Transforms relative url() paths to absolute URLs
Convert the AST back to CSS
Append legacy-compatible CSS to the DOM

关键代码：

            getCssData({
               ...
                onSuccess(cssText, node, url) {...} 
            )}

通过 getCssData 文档得知 onSuccess的三个参数分别是：

cssText: A string of CSS text from node and url
node: The source node object reference
url: The source URL string ( href, @import url, or page url for <style> data)

项目的依赖全都写成了 devDependencies，get-css-data不应该是 dependencies 吗？
使用了@webcomponents/webcomponentsjs辅助测试：

原文

singleton

之前写过一个工具基类应该可以用

const singleton = Symbol('singleton');

class Singleton {
    static getInstance() {
        if (!this[singleton]) {
            this[singleton] = new this(...arguments);
        }

        return this[singleton];
    }

    constructor(props) {
        let Class = new.target;

        if (!Class[singleton]) {
            Class[singleton] = this;
        }

        return Class[singleton];
    }
}

Angular service 会以单例为主。

Observer pattern

the where

RxJS

Facade pattern

目的是隐藏复杂度，让依赖解耦。

所以可以理解成：我们有一个api 复杂的工具，然后基于这个工具封装一层我们自己的语法。

这里作者给的例子是：

当你需要一个状态管理工具的时候，用自己的工具封装它，用得不爽就换掉底层的实现……

（有点像 abstract）