zoukankan      html  css  js  c++  java
  • immutable-treeUtils树的理解

    1、

    function TreeUtils(rootPath, idKey, childNodesKey, none) {
        this.rootPath = rootPath || Seq();
        this.idKey = idKey || 'id';
        this.childNodesKey = childNodesKey || 'childNodes';
        this.none = typeof none !== 'undefined' ? none : NONE;
    }

    创建一个树,参数分别是一个数据类型为seq()的根路径,id,childNodesKey(数据中的一个子数据集)

    2、获取所有state数据中的child

    TreeUtils.prototype.nodes = function(state, path) {
        let childNodesKey = this.childNodesKey;
        let result = List();
        let stack = List.of(path || this.rootPath);
        while (stack.size > 0) {
            var keyPath = stack.first();
            result = result.push(keyPath);
    
            stack = stack.shift();
    
            let item = state.getIn(keyPath);
            let childNodes = item.get(childNodesKey);
            if (childNodes && childNodes.size > 0) {
                item.get(childNodesKey)
                    .keySeq()
                    .forEach(function(i) {
                        stack = stack.push(keyPath.concat(childNodesKey, i));
                    });
            }
        }
    
        return result;
    };

    3、根据id获取child

    /**
     * @id TreeUtils-byId
     * @lookup byId
     *
     * #### *method* byId()
     *
     * Returns the key path to the node with id === `id`.
     *
     * ###### Signature:
     * ```js
     * id(
     * state: Immutable.Iterable,
     * id: string
     * ): Immutable.Seq<string|number>
     * ```
     *
     * ###### Arguments:
     * * `id` - A unique identifier
     *
     * ###### Returns:
     * The key path to the node with id === `id`.
     */
    TreeUtils.prototype.byId = function(state, id) {
        let idKey = this.idKey;
        return this.find(state, function(item) {
            return item.get(idKey) === id;
        });
    };

    4、find查找,会调用treeUtils.nodes获取所有的child,从child中获取符合条件的child

    /**
     * @id TreeUtils-find
     * @lookup find
     *
     * #### *method* find()
     *
     * Returns the key path to the first node for which `compatator` returns `true`. Uses >nodes internally and as >nodes is an **unordered** List, you should probably use this to find unique occurences of data.
     * ```js
     * treeUtils.find(state, node => node.get('name') === 'Me in Paris');
     * // Seq ["childNodes", 0, "childNodes", 0]
     * ```
     *
     * ###### Signature:
     * ```js
     * find(
     * state: Immutable.Iterable,
     * comparator: (
     * node: Immutable.Iterable,
     * keyPath: Immutable.Seq<string|number>
     * ): boolean,
     * path?: Immutable.Seq<string|number>
     * ): Immutable.Seq<string|number>
     * ```
     *
     * ###### Arguments:
     * * `comparator` - A function that gets passed a `node` and its `keyPath` and should return whether it fits the criteria or not.
     * * `path?` - An optional key path to the (sub)state you want to analyse: Default: The `TreeUtils` object's `rootPath`.
     *
     * ###### Returns:
     * The key path to the first node for which `comparator` returned `true`.
     */
    TreeUtils.prototype.find = function(state, comparator, path) {
        return this.nodes(state, path).find(
            function(keyPath) {
                return comparator(state.getIn(keyPath), keyPath) === true;
            },
            this,
            this.none
        );
    };
  • 相关阅读:
    音视频入门-06-代码画图时间
    音视频入门-05-RGB-TO-BMP使用开源库
    音视频入门-04-BMP图像四字节对齐的问题
    音视频入门-03-RGB转成BMP图片
    控制input文本框只能输入正整数(H5)
    微信小程序自定义导航栏配置(顶部栏搜索框)
    React-日历组件(原生JS代码)
    package.json文件详解
    解决HTML5IOS拍照上传图片逆时针旋转90度问题(React)
    项目细节
  • 原文地址:https://www.cnblogs.com/shuhaonb/p/9663198.html
Copyright © 2011-2022 走看看