1.5.0 • Published 1 month ago

@haixing_hu/clone v1.5.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 month ago

@haixing_hu/clone

npm package License English Document CircleCI Coverage Status

clone 是一个 JavaScript 库,用于深度克隆 JavaScript 对象。它保持对象及其所有属性的原型, 并支持自定义克隆钩子函数,允许对指定类型执行特殊的克隆算法。

此开源库具有以下特性:

  • 深度克隆:能够深度克隆任意 JavaScript 对象,包括但不限于简单对象、自定义类的实例、 ArrayMapSetDateRegExpErrorPromise 等。
  • 保持原型:克隆的对象保持原有对象的原型。
  • 循环引用检测:能够检测循环引用,并防止无限递归。
  • 支持内置对象的自定义属性:由于 JavaScript 语言的灵活性,对于内置对象,用户可以在该对象 上任意设置自定义属性,例如const str = 'hello'; str.x = 123;,本函数库能够克隆这些自定 义属性。
  • 可设置克隆算法参数:支持自定义克隆算法参数,通过参数定制克隆算法。
  • 可自定义克隆算法:支持自定义克隆算法,通过注册钩子函数定制对特定类型的克隆算法。
  • Vue.js 反应性支持:兼容 Vue.js 的反应性系统,只克隆可枚举属性。

目录

安装

此函数库依赖 typeinfo 函数库,因此需要先安装 typeinfo 函数库。

通过 npm 安装:

npm install @haixing_hu/typeinfo @haixing_hu/clone

或者通过 yarn 安装

yarn add @haixing_hu/typeinfo @haixing_hu/clone

使用方法

class Credential {
  type = '';
  number = '';
}
class Person {
  name = '';
  age = 0;
  credential = new Credential();
}
const obj2 = new Person();
obj2.name = 'Bill Gates';
obj2.age = 30;
obj2.credential.type = 'PASSWORD';
obj2.credential.number = '111111'
const copy2 = clone(obj2);
expect(copy2).toEqual(obj2);
expect(copy2).not.toBe(obj2);
expect(copy2).toBeInstanceOf(Person);
expect(copy2.credential).toBeInstanceOf(Credential);

API 文档

clone(source, options)

深度克隆一个值或对象。

  • source: any - 要克隆的值或对象。
  • options: object - 克隆算法的选项对象。可能的选项包括:
    • includeAccessor: boolean:若为 true,将克隆属性的访问器(即 getter 和 setter)。默认为 false
    • excludeReadonly: boolean:若为 true,将不克隆只读属性。默认为 false
    • includeNonEnumerable: boolean:若为 true,将克隆非枚举属性。默认为 false
    • includeNonConfigurable: boolean:若为 true,将克隆非可配置属性。默认为 false

克隆函数支持对 JavaScript 内置对象的克隆,包括但不限于 primitive 类型、数组、MapSet等。 具体的支持如下:

  • primitive 类型 undefinednullbooleannumberstringsymbolbigint:直接返回原始值;
  • 函数类型:要完整实现对函数的 clone 会带来很多技术上的麻烦,因此本函数对函数类型的值不做克隆,直接返回原始函数;
  • 对象类型:分为 JavaScript 内置对象和用户对象两种情况:
    • 普通非容器型内置对象:会返回一个新的对象,和原始对象完全一致,包括用户增加在原始对象上的自定义属性, 也会一起被深度克隆;
    • 内置容器对象,包括ArrayMapSetInt8ArrayBigUint64Array等:会克隆容器对象 本身,同时深度克隆容器对象中的元素;
    • 弱引用对象,包括:WeakMapWeakSetWeakRef等:不可被克隆,直接返回该对象本身;
    • Buffer对象,包括 ArrayBufferSharedArrayBuffer等:会克隆容器对象本身,同时克隆容器对象中的数据;
    • Promise对象:会克隆一个新的 Promise 对象,包括用户增加在原始对象上的自定义属性;
    • Intl 内置对象的子对象,包括Intl.CollatorIntl.DateTimeFormat等:不可被克隆,直接返回该对象本身;
    • Iterator 对象,包括ArrayIteratorMapIteratorSetIterator等:不可被克隆,直接返回该对象本身;
    • 表示函数参数的 arguments 对象:不可被克隆,直接返回该对象本身;
    • FinalizationRegistry 对象:不可被克隆,直接返回该对象本身;
    • 生成器对象,包括 GeneratorAsyncGenerator:不可被克隆,因此直接返回该对象本身;
    • 全局对象:不可被克隆,直接返回该对象本身;
    • 其他用户自定义对象:深度克隆该对象所有属性,并保持被克隆对象的原型。是否克隆只读属性、不可枚举属性、不可配置属性、 访问器属性等,取决于调用 clone() 函数的第二个克隆算法选项参数。

registerCloneHook(hook)

注册一个自定义对象克隆的钩子函数。

  • hook: function - 钩子函数,其形式应为:
    function cloneHook(info, obj, options) {};
    其中:
    • info: object:待克隆对象的类型信息,由 typeInfo() 函数提供。
    • obj: object:待克隆的对象,保证非空。
    • options: object:克隆算法的选项。

unregisterCloneHook(hook)

注销一个自定义对象克隆的钩子函数。

  • hook: function - 要注销的钩子函数,其形式和参数与 registerCloneHook() 相同。

cloneImpl(source, options, cache)

实现了具体的clone 算法。这是一个内部函数,可用于实现自定义的克隆钩子函数。

  • source: any - 待克隆的对象。
  • options: object - 克隆算法的选项。
  • cache: WeakMap - 用于防止循环引用的对象缓存。

copyProperties(source, target, options, cache)

将源对象的属性复制到目标对象。这是一个内部函数,可用于实现自定义的克隆钩子函数。

  • source: any - 源对象。
  • target: any - 目标对象。
  • options: object - 克隆算法的选项。
  • cache: WeakMap - 用于防止循环引用的对象缓存。

示例

深度克隆对象

下面的代码例子展示了如何深度克隆一个对象,可以是简单对象,也可以是自定义类的实例。

import clone from '@haixing_hu/clone';

const obj1 = { a: 1, b: { c: 2 } };
const copy1 = clone(obj1);
expect(copy1).toEqual(obj1);
expect(copy1).not.toBe(obj1);

class Credential {
  type = '';
  number = '';
}
class Person {
  name = '';
  age = 0;
  credential = new Credential();
}
const obj2 = new Person();
obj2.name = 'Bill Gates';
obj2.age = 30;
obj2.credential.type = 'PASSWORD';
obj2.credential.number = '111111'
const copy2 = clone(obj2);
expect(copy2).toEqual(obj2);
expect(copy2).not.toBe(obj2);
expect(copy2).toBeInstanceOf(Person);
expect(copy2.credential).toBeInstanceOf(Credential);

克隆算法选项

下面的代码例子展示了如何使用自定义的克隆算法选项。具体的选项请参考API 文档

const obj = {
  x: 1,
  y: 2,
  _name: 'obj',
  get z() {
    return this.x + this.y;
  },
  get name() {
    return this._name;
  },
  set name(s) {
    this._name = s;
  },
};
Object.defineProperties(obj, {
  r: {
    value: 'readonly',
    writable: false,
    configurable: true,
    enumerable: true,
  },
});
Object.defineProperties(obj, {
  nc: {
    value: 'non-configurable',
    writable: true,
    configurable: false,
    enumerable: true,
  },
});
Object.defineProperties(obj, {
  ne: {
    value: 'non-enumerable',
    writable: true,
    configurable: true,
    enumerable: false,
  },
});

// clone with default options
const copy1 = clone(obj);
expect(copy1.x).toBe(1);
expect(copy1.y).toBe(2);
expect(copy1.r).toBe('readonly');
expect(copy1.z).toBe(3);
expect(typeof copy1.z).toBe('number');
expect(copy1.name).toBe('obj');
expect(typeof copy1.name).toBe('string');
expect(copy1._name).toBe('obj');
expect(typeof copy1._name).toBe('string');
expect('nc' in copy1).toBe(false);
expect('ne' in copy1).toBe(false);

// clone with customized options
const options = {
  includeAccessor: true,
  excludeReadonly: true,
  includeNonEnumerable: true,
  includeNonConfigurable: false,
};
const copy2 = clone(obj, options);
expect(copy2.x).toBe(1);
expect(copy2.y).toBe(2);
expect('r' in copy2).toBe(false);
expect(copy2.z).toBe(3);
expect(copy2._name).toBe('obj');
expect(copy2.name).toBe('obj');
const zd = Object.getOwnPropertyDescriptor(copy2, 'z');
expect(typeof zd.get).toBe('function');
expect(typeof zd.set).toBe('undefined');
expect('value' in zd).toBe(false);
const nd = Object.getOwnPropertyDescriptor(copy2, 'name');
expect(typeof nd.get).toBe('function');
expect(typeof nd.set).toBe('function');
expect('value' in nd).toBe(false);
copy2.name = 'xxx';
expect(copy2.name).toBe('xxx');
expect(copy2._name).toBe('xxx');
expect('ne' in copy2).toBe(true);
expect(copy2.ne).toBe('non-enumerable');
expect('nc' in copy2).toBe(false);

定制克隆行为

import { registerCloneHook, clone } from '@haixing_hu/clone';

function customCloneHook(info, obj, options) {
  if (info.constructor === MyCustomClass) {
    const result = new MyCustomClass();
    // implements the customized clone algorithm
    return result;
  }
  return null;
}

registerCloneHook(customCloneHook);

const original = {
  name: 'original',
  data: new MyCustomClass(),
};
const cloned = clone(original);

unregisterCloneHook(customCloneHook);

许可证

clone 在 Apache 2.0 许可下分发。有关更多详情,请参阅 LICENSE 文件。

贡献方式

如果您发现任何问题或有改进建议,请随时在GitHub仓库中提出问题或提交拉取请求。

贡献者

1.5.0

1 month ago

1.4.1

5 months ago

1.4.0

5 months ago

1.3.1

5 months ago

1.2.0

5 months ago

1.2.2

5 months ago

1.3.0

5 months ago

1.2.1

5 months ago

1.1.1

5 months ago

1.1.0

5 months ago

1.0.1

5 months ago

1.0.0

5 months ago

0.1.0

5 months ago