n3taway / notebook Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 811 KB

📃 一些笔记。

Home Page: https://n3taway-notebook.vercel.app

HTML 0.13% JavaScript 99.78% CSS 0.09%

notebook's People

Contributors

Watchers

notebook's Issues

Fiber reconciler react16 Fiber调度

https://zh-hans.reactjs.org/docs/codebase-overview.html

Stack reconciler react 15之前的堆栈调度

https://zh-hans.reactjs.org/docs/codebase-overview.html

react JavaScript 函数→返回函数

function createElement(context) {
    const { render } = context;
    return function (props) {
        return render(props);
    };
}

function domRender(component, container) {
    container.innerHTML = component;
}


const ProfileLink = createElement({
    render: function (context) {
        const { props } = context;
        return `<div>ProfileLink：${props.username}</div>`;
    }
});


const ProfilePic = createElement({
    render: function (context) {
        const { props } = context;
        return `<div>ProfilePic：${props.username}</div>`;
    }
});

const Avatar = createElement({
    render: function (context) {
        const { props } = context;
        return `
        <div>
            <h1>Avatar</h1>
            ${ProfileLink({ props: { username: props.username } })}
            ${ProfilePic({ props: { username: props.username } })}
        </div>
      `;
    }
})

domRender(Avatar({ props: { username: 'demo-' } }), document.querySelector('#app'));

function CreateElement(context) {
    const { render } = context;
    return function (props) {
        return render.apply(props);
    };
}

function domRender(component, container) {
    container.innerHTML = component;
}


const ProfileLink = CreateElement({
    render: function () {
        return `<div>ProfileLink：${this.props.username}</div>`;
    }
});


const ProfilePic = CreateElement({
    render: function () {
        return `<div>ProfilePic：${this.props.username}</div>`;
    }
});

const Avatar = new CreateElement({
    render: function () {
        return `
        <div>
            <h1>Avatar</h1>
            ${ProfileLink({ props: { username: this.props.username } })}
            ${ProfilePic({ props: { username: this.props.username } })}
        </div>
        `;
    }
})


domRender(Avatar({ props: { username: 'demo1' } }), document.querySelector('#app'));

jest 常用断言

ECMAScript 常用断言

expect(1+1).toBe(2); 判断两个值是否相等，toBe不能判断对象，需要判断对象要使用toEqual
expect({bar: 'bar'}).toEqual({bar: 'bar'}); 会递归检查对象的每个字段 deep equal
expect(1).not.toBe(2); 判断不等
expect(u).toBeNull() ; 判断是否为null
expect(f).toBeTruthy(); 判断结果我true
expect(o).toBeFalsy(); 判断结果为false
expect(value).toBeCloseTo(0.3); 浮点数判断相等
expect({}).toHaveProperty('hi'); 判断包含属性
expect(3).toBeGreaterThan(1); 判断是否大于
expect(3).toBeGreaterThanOrEqual(1); 判断大于等于
expect(3).toBeLessThan(1); 判断是否小于
expect(3).toBeLessThanOrEqual(1); 判断是否小于等于
expect(Promise.resolve('a')).resolves.toBe('a'); 判断异步成功结果
expect(Promise.reject('a')).rejects.toBe('a'); 判断异步失败结果
expect(['a','b']).toContain('a'); 判断包含在数组中 - 字符串
expect(['jqk']).not.toContain('j'); 判断不包含在数组中
expect([{bar:'bar'}]).toContainEqual({bar:'bar'});判断不包含在数组中 - 对象
expect('CCTV').toMatch(/^CC/); 正则是否匹配
expect({foo:'foo',bar:'bar'}).toMatchObject({bar:'bar'}); 对象是否匹配

React Redux 丐中丐版

const store = {
    data: { name: 'jsx' },
    getData() {
        return this.data;
    }
};

function connect(_mapToPropsFn) {
    const dataFromStore = store.getData();
    const selectData = _mapToPropsFn(dataFromStore);
    return function (_component) {
        return _component(selectData)
    };
};

function divComponent(props) {
    return `<div>${JSON.stringify(props)}</div>`
}

const component = connect((store) => {
    return { ...store, age: 12 };
})(divComponent);

console.log('component: ', component); // component: <div>{"name":"jsx","age":12}</div>

// document.body.innerHTML = component;

Chrome DevTools | Show Coverage

使用覆盖选项卡查找未使用的 JavaScript 和 CSS

CSS grid 常用属性和布局

The State of CSS 2020: Trend Report (2020 CSS趋势报告)中越来越多的 CSS 新特性被开发者熟悉并使用，其中grid布局有74%的开发者在使用，这也说明主流浏览器已经很好的支持了这个特性。在日常编码中使用Flexbox布局比较多，grid布局用的比较少，整理一下grid常用属性和布局模式便于日后查询。

基本概念

容器和项目

项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

单元格

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

tips

在预编译语言中计算符号需要做特殊处理。

容器属性

grid 基础属性。

<div class="layout">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<style>
  .layout {
    width: 300px;
    height: 300px;
    display: grid;
    /* n行布局 */
    /* grid-template-rows: 10px 10px ... (n)px */
    /* n列布局 */
    /* grid-template-columns: 10px 10px ... (n)px; */

    /* n行 * n列 布局 */
    /* grid-template-rows: 10px 10px ... (n)px */
    /* grid-template-columns: 10px 10px ... (n)px; */


    /* 两份 平均分配。 */
    /* grid-template-columns: 1fr 1fr; */

    /* 三份 后者是前者的两倍。 */
    /* grid-template-columns: 1fr 2fr; */

    /* 一列大小 = (100% - 100px) / 3 */
    grid-template-columns: 1fr 2fr 100px;

    /* 两边固定 中间自适应。 */
    /* grid-template-columns: 100px auto 100px; */

    /* 12列平均分配。 */
    /* grid-template-columns: repeat(12, 1fr); */

    /* 行间隙 */
    /* row-gap: 10px; */

    /* 列间隙 */
    /* column-gap: 10px; */

    /* 行列属性复合间隙 */
    /* gap: 10px 10px; */

    /* 行列间隙相同 */
    /* gap: 10px; */
  }
  .layout div {
    background-color: rgba(0, 0, 0, 0.192);
    border: 1px solid rgba(0, 0, 0, 0.192);
  }
</style>

演示 https://css-grid-practice.vercel.app/1container.html
2. grid-template-areas + grid-area 指定区域布局。
tips：指定区域布局后，项目元素的顺序是不用考虑的。

    <div class="layout">
        <!-- 顺序无关 -->
        <div class="footer">Footer</div>
        <div class="sidebar">Sidebar</div>
        <div class="content">Content</div>
        <div class="header">Header</div>
    </div>
    <style>
        .layout {
            width: 300px;
            height: 300px;
            display: grid;
            /* 三行四列 */
            grid-template-areas:
                "hd hd   hd   hd"
                "sd main main main"
                "ft ft   ft   ft";
        }

        .layout div {
            border: 1px solid gray;
        }

        .header {
            grid-area: hd;
        }

        .sidebar {
            grid-area: sd;
        }

        .content {
            grid-area: main;
        }

        .footer {
            grid-area: ft;
        }
    </style>

演示 https://css-grid-practice.vercel.app/2container.html
3. grid-auto-flow 修改行列顺序
tips：grid内的项目默认是 先行后列 的顺序。grid-auto-flow: column为先列后行排序。

    <div class="layout">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <style>
        .layout {
            display: grid;
            width: 300px;
            grid-template-rows: repeat(2, 50%);
            grid-template-columns: repeat(2, 50%);
            /* default */
            /* grid-auto-flow: row; */

            /* 列 从上往下 */
            grid-auto-flow: column;
        }

        .layout div {
            border: 1px solid gray;
            height: 100px;
        }
    </style>

演示 https://css-grid-practice.vercel.app/3container.html
4. **justify-items ** align-items 指定每个网格内容的位置。（上.中.下）start | end | center ，和特殊的拉伸stretch。

tips: 这两个属性作用在容器上，仅对顶级项目生效。复合属性place-items：align-items justify-items; 只有一个值的情况下后面的值与第一个值一样。place-items：start; === place-items：start start;

    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
    </div>
    <style>
        .wrapper {
            display: grid;
            grid-template-rows: repeat(2, 100px);
            grid-template-columns: repeat(3, 100px);
            /* 垂直方向顶部对齐。 */
            align-items: start;
            /* 水平方向居右对齐。  */
            justify-items: end;
            background-color: rgba(0, 0, 0, 0.200);
            width: 300px;
        }

        .wrapper div {
            border: 1px solid gray;
        }

        .item1 {
            background-color: rgb(127, 255, 238);
        }

        .item2 {
            background-color: rgb(169, 211, 197);
        }

        .item3 {
            background-color: rgb(152, 168, 113);
        }

        .item4 {
            background-color: rgb(168, 140, 113);
        }

        .item5 {
            background-color: rgb(209, 241, 194);
        }

        .item6 {
            background-color: rgb(168, 113, 150);
        }
    </style>

    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
    </div>
    <style>
        .wrapper {
            display: grid;
            /* 网格没有具体的宽高。 */
            grid-template-rows: repeat(2, 40px);
            grid-template-columns: repeat(3, 40px);

            /* 默认 拉伸占据整个网格容器。 */
            /* justify-content: stretch; */
            /* align-content: stretch; */

            justify-content: space-between;
            align-content: space-between;

            width: 300px;
            height: 200px;
            border: 1px solid gray;

        }

        .wrapper div {
            border: 1px solid gray;
        }

        .item1 {
            background-color: rgb(127, 255, 238);
        }

        .item2 {
            background-color: rgb(169, 211, 197);
        }

        .item3 {
            background-color: rgb(152, 168, 113);
        }

        .item4 {
            background-color: rgb(168, 140, 113);
        }

        .item5 {
            background-color: rgb(209, 241, 194);
        }

        .item6 {
            background-color: rgb(168, 113, 150);
        }
    </style>

演示 https://css-grid-practice.vercel.app/5container.html
6. grid-auto-columns grid-auto-rows 这两个属性用于定义超出网格外项目的宽高。

    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
    </div>
    <style>
        .wrapper {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(3, 1fr);
            width: 300px;
            height: 400px;
            border: 1px solid gray;

            /* 更改行或列的排序 默认为行 下面一行可以不声明 */
            /* grid-auto-flow: row;  */
            /* 超出的行每行40px。 */
            grid-auto-columns: 40px; 

            /* 更改行或列的排序。列方向排序 */
            /* grid-auto-flow: column;  */
            /* 超出的行每行40px。 */
            /* grid-auto-rows: 40px;  */
        }

        .wrapper div {
            border: 1px solid gray;
        }

        .item1 {
            background-color: rgb(127, 255, 238);
        }

        .item2 {
            background-color: rgb(169, 211, 197);
        }

        .item3 {
            background-color: rgb(152, 168, 113);
        }

        .item4 {
            background-color: rgb(168, 140, 113);
        }

        .item5 {
            background-color: rgb(209, 241, 194);
        }

        .item6 {
            background-color: rgb(168, 113, 150);
        }

        .item7 {
            background-color: rgb(163, 168, 113);
        }

        .item8 {
            background-color: rgb(113, 143, 168);
        }
    </style>

演示 https://css-grid-practice.vercel.app/6container.html

项目属性

grid-column-start 、grid-column-end 、grid-row-start 、grid-row-end 网格自定义跨行跨列。

tips：由于**grid-auto-flow默认先行后列，所有从item5的跨行开始，再进行item1的跨列处理。跨行或跨列后会产生缝隙可以用dense**紧密排列。

    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
    </div>
    <style>
        .wrapper {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(3, 1fr);
            width: 300px;
            border: 1px solid gray;
            /*  grid-auto-flow: row; */
            /*  grid-auto-flow: column; */
            /*  grid-auto-flow: row dense; 跨行后紧密 */
            /*  grid-auto-flow: column dense; 跨列后紧密 */
        }

        .wrapper div {
            border: 1px solid gray;
            height: 100px;
        }

        .item1 {
            grid-column-start: 1;
            grid-column-end: 3;
            /*  同时跨行跨列。 */
            /* grid-row-start: 3;  当前项目行从第3条行网格线开始 */
            /* grid-column-end: 1;  当前项目列在第1条列网格线结束 */
            /*  同时跨行跨列。 */
            /* grid-row-start: 2;  当前项目行从第2条行网格线开始 */
            /* grid-column-end: 1;  当前项目列在第1条列网格线结束 */
            background-color: rgb(127, 255, 238);
        }

        .item2 {
            background-color: rgb(169, 211, 197);
        }

        .item3 {
            background-color: rgb(152, 168, 113);
        }

        .item4 {
            background-color: rgb(168, 140, 113);
        }

        .item5 {
            background-color: rgb(209, 241, 194);
        }

        .item6 {
            background-color: rgb(168, 113, 150);
        }
    </style>

演示 https://css-grid-practice.vercel.app/1item.html
2. grid-column grid-row 跨行跨列的简写，在预编译语言中计算符号需要做特殊处理。

    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
    </div>
    <style>
        .wrapper {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(3, 1fr);
            width: 300px;
            border: 1px solid gray;
            /*  grid-auto-flow: row; */
            /*  grid-auto-flow: column; */
            /*  grid-auto-flow: row dense; 跨行后紧密 */
            /*  grid-auto-flow: column dense; 跨列后紧密 */
        }

        .wrapper div {
            border: 1px solid gray;
            height: 100px;
        }

        .item1 {
            grid-column: 1 / 3;
            background-color: rgb(127, 255, 238);

            /* less编译需要特殊处理 */
            /* grid-column: ~"1 / 3"; */
            /* grid-column: 1 e("/") 3; */
        }

        .item2 {
            background-color: rgb(169, 211, 197);
        }

        .item3 {
            background-color: rgb(152, 168, 113);
        }

        .item4 {
            background-color: rgb(168, 140, 113);
        }

        .item5 {
            background-color: rgb(209, 241, 194);
        }

        .item6 {
            background-color: rgb(168, 113, 150);
        }
    </style>

演示 https://css-grid-practice.vercel.app/2item.html
3. **justify-self align-self ** 项目内水平、垂直方向的对齐方式，复合属性place-self。

    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
    </div>
    <style>
        .wrapper {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(3, 1fr);
            width: 300px;
            height: 300px;
            border: 1px solid gray;
        }

        .wrapper div {
            border: 1px solid gray;
        }

        .item1 {
            /* 内容水平居右 */
            justify-self: end;
            background-color: rgb(127, 255, 238);
        }

        .item2 {
            /* 内容垂直顶部 */
            align-self: start;
            background-color: rgb(169, 211, 197);
        }

        .item3 {
            /* 内容垂直居中 */
            align-self: center;
            background-color: rgb(152, 168, 113);
        }

        .item4 {
            background-color: rgb(168, 140, 113);
        }

        .item5 {
            background-color: rgb(209, 241, 194);
        }

        .item6 {
            background-color: rgb(168, 113, 150);
        }
    </style>

演示 https://css-grid-practice.vercel.app/3item.html

常用布局

容器宽度固定/不固定，每行确定个数并平均分配。

    <div class="layout">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <!-- <div>.</div> -->
        <!-- <div>.</div> -->
        <!-- <div>.</div> -->
    </div>
    <style>
        .layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, 33.33%);
        }

        .layout div {
            height: 300px;
            border: 1px solid gray;
        }
    </style>

演示 https://css-grid-practice.vercel.app/1layout.html
2. 容器宽度不固定，每列固定宽度自动换行，达到每一行/列，容纳尽可能多的单元格。

    <div class="layout">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <!-- <div>.</div> -->
        <!-- <div>.</div> -->
        <!-- <div>.</div> -->
    </div>
    <style>
        .layout {
            display: grid;
            grid-template-columns: repeat(auto-fit, 300px);
        }

        .layout div {
            height: 300px;
            border: 1px solid gray;
        }
    </style>

演示 https://css-grid-practice.vercel.app/2layout.html
3. 上中下结构，内容是侧边的倍数。

    <div class="wrapper">
        <div class="header">Header</div>
        <div class="sidebarLeft">Sidebar</div>
        <div class="content">Content</div>
        <div class="sidebarRight">Sidebar</div>
        <div class="footer">Footer</div>
    </div>
    <style>
        .wrapper {
            display: grid;
            grid-template-areas:
                "hd hd   hd   hd"
                "sdl main main sdr"
                "ft ft   ft   ft";
            width: 300px;
            height: 400px;
        }

        .wrapper div {
            border: 1px solid gray;
        }

        .header {
            grid-area: hd;
        }

        .sidebarLeft {
            grid-area: sdl;
        }

        .sidebarRight {
            grid-area: sdr;
        }

        .content {
            grid-area: main;
        }

        .footer {
            grid-area: ft;
        }
    </style>

演示 https://css-grid-practice.vercel.app/3layout.html
4. 两列表单，特殊列占整行。

    <div class="wrapper">
        <div class="fieldWrap">
            <div class="label">label</div>
            <div>text</div>
        </div>
        <div class="fieldWrap">
            <div class="label">label</div>
            <div>text</div>
        </div>
        <div class="fieldWrap">
            <div class="label">label</div>
            <div>text</div>
        </div>
        <div class="fieldWrap">
            <div class="label">label</div>
            <div>text</div>
        </div>
        <div class="fieldWrap">
            <div class="label">label</div>
            <div>text</div>
        </div>
        <div class="rowCol2">
            <div>text</div>
        </div>
        <div class="fieldWrap">
            <div class="label">label</div>
            <div>text</div>
        </div>
        <div class="row">
            <div>text</div>
        </div>
    </div>
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fit, 50%);
            width: 300px;
        }
        .wrapper div{
            border: 1px solid gray;
        }

        .fieldWrap {
            display: grid;
            grid-template-columns: 50px auto;
            min-height: 40px;
            margin-bottom: 5px;
        }

        .rowCol2 {
            display: grid;
            grid-column: 1 / 3;
            grid-template-columns: 50px auto;
            min-height: 40px;
            margin-bottom: 5px;
        }

        .row {
            display: grid;
            grid-column: 1 / 3;
            min-height: 40px;
            margin-bottom: 5px;
        }
    </style>

演示 https://css-grid-practice.vercel.app/4layout.html

demo

用grid布局轻松完成矢量马赛克文字。
补充贴图

参考链接

CSS Grid 网格布局教程 by ruanyifeng
Problems with compile grid-column less less个别属性需特别处理

react hooks 多实例错误

todo

react为什么会分开为组件包和渲染器包

就目前pc端的react文件组织结构是这样的。

首先react分为两大部分，由react和react-dom构成。

react 我们常用的api都是这个包导出的，既定义组件的api。

react-dom 是元素渲染器，这部分负责渲染，react大部分的实现都在渲染器中。当然在移动端还有react-native这样的渲染器。

react这样组合的好处，大多数情况下react组件中是不插入渲染器的内容。

想想日常编码在渲染器中插入使用react api生成的组件树即可，如下。

PC端 ReactDom.render(<组件树/>,document.getElementById('root'));

移动端AppRegistry.registerComponent('MyApp', () => <组件树/>);

组件树都是用react api生成的。

渲染器则是react提供的各平台渲染器。

既然react大部分实现都在渲染器中比如setState(),那react是如何与渲染器交互的呢? => 把渲染器的api挂在组件实例的特定属性上。

// ref https://overreacted.io/how-does-setstate-know-what-to-do/
// ===========渲染器=======
// Inside React DOM
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMUpdater;

// Inside React DOM Server
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMServerUpdater;

// Inside React Native
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactNativeUpdater;

// ========react组件api=============
// A bit simplified
setState(partialState, callback) {
  // Use the `updater` field to talk back to the renderer!
  this.updater.enqueueSetState(this, partialState, callback);
}

类组件是这样实现的那hooks又是怎么样实现的呢？

当调用hooks时会把这些hooks转发给调度器，各个渲染器在渲染组件之前设置调度器。

type ReactDomDispatchType = {
    useState:any;
    useEffect:any;
}

type ReactType = {
    _ReactDispatch: null | ReactDomDispatchType;
    useState:any;
    useEffect:any;
}

const React:ReactType = {
    // 渲染前由渲染器设置调度器
    _ReactDispatch: null,
    useState(initState: any){
        return React._ReactDispatch!.useState(initState);
    },
    useEffect(initState: any){
        return React._ReactDispatch!.useState(initState);
    }
};

const ReactDomDispatch:ReactDomDispatchType = {
     useState(initState: any){
         console.log('useState',initState)
    },
    useEffect(initState: any){
        console.log('useEffect',initState)
    }
}
// 渲染器在渲染组件之前设置分配器
React._ReactDispatch = ReactDomDispatch;
result = YourComponent(props);

React.useState(123); // hooks处理由渲染器执行。

hooks没有this对象，方法和属性以对象结构管理。react使用依赖注入模式，将react-dom的实现注入到api中。

构建自己的渲染器

构建自己的渲染器？dan博客
build your own

js 利用位运算进行权限管控

位运算与 &
每个比特位都为 1 结果为 1，否则为0
01010
00011
->00010
位运算或 |
比特位有1 结果为 1，否则为0
01010
00011
->01011
位运算异或 ^
比特位仅有1 结果为 1，否则为0
01010
00011
->01001

const add = /*               */ 0b00000000001;
const update = /*            */ 0b00000000010;
const query = /*             */ 0b00000000100;
const del = /*               */ 0b00000001000;


// 用 或运算 将多个单一权限组合为一个复合权限。
let p_add_query = add | query;

// 用 与运算 判断是否包含某个权限
console.log(p_add_query & add); // 1
console.log(p_add_query & query); // 4
console.log(p_add_query & del); // 0
console.log(p_add_query & update); // 0

// 给复合权限添加权限
// p_add_query = p_add_query | permissions.get('del');
p_add_query |= del;


console.log(p_add_query & add); // 1
console.log(p_add_query & query); // 4
console.log(p_add_query & del); // 8
console.log(p_add_query & update); // 0


const p_add_del = add | del;
const p_query_update = query | update;
const p_add_query_del = add | query | del;
// 将两个复合权限组合为一个复合权限
const p_add_del_update_query = p_add_del | p_query_update;

console.log(p_add_del & p_query_update); // 0
console.log(p_add_del & p_add_query_del); // 9
console.log(p_add_del_update_query & p_add_query_del); // 13

// 删除某个权限
const add_del = p_add_del_update_query ^ p_query_update;
console.log('add_del: ', add_del); // 9

refs
React源码阅读之：复合类型方案设计
 MDN 按位操作符

npm 依赖管理理解

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.