php归并js文件技巧_Js经由进程deepMerge实现默认设备和自定义设备的合并

文章目录 [+]

1 实现目标

（图片来自网络侵删）

通过 defaultConfig 工具默认配置值，可以确保在没有进行用户配置的情形下，系统按照默认配置运行，使运用能够“开箱即用”，提升用户体验；当用户须要知足各种不同须要时，可以通过 userConfig 工具进行用户功能配置，知足灵巧运用的须要。

2 关于 deepMerge

2.1 deepMerge 库干系先容

Js通过deepMerge实现默认配置和自定义配置的合并-01.jpg

deepMerge 库可以通过 npm 安装，安装包的链接为：https://www.npmjs.com/package/deepmerge，github 仓库地址为：https://github.com/TehShrike/deepmerge。

2.2 deepMerge 的引入

可以在 Shell 里运行下面的命令安装：

npm install deepmerge

安装完成后可通过下面的 js 代码引入：

const merge = require('deepmerge')

2.3 deepMerge 基本用法

merge(x, y, [options])

深度合并两个工具 x 和 y ，返回一个新的合并后的工具，元向来自 x 和 y ， x 和 y 都不会发生改变。
把稳：上面的 options 是可选项，默认情形下（即没有输入 options 时），两个工具的数组会连接起来。

下面的代码测试 deepMerge 库默认配置下的效果：

const merge = require('deepmerge')// 下面定义数组覆盖选项，当要实现数组覆盖的时候，可以在 merge 时利用该选项const overwriteMerge = (destinationArray, sourceArray, options) => sourceArraylet x = { a: { a1: 'A1', a2: 'A2' }, b: { b1: ['B1'] }}let y = { a: { a1: 'A1-new', a3: 'created' }, b: { b1: ['B2'] }}let z1 = merge(x, y)console.log('下面采取默认选项的 merge 结果：')console.log(z1)let z2 = merge(x, y, { arrayMerge: overwriteMerge })console.log('下面采取数组覆盖选项的 merge 结果：')console.log(z2)

得到工具 z 的结果打印如下：

//下面采取默认选项的 merge 结果：{ a: { a1: 'A1-new', a2: 'A2', a3: 'created' }, b: { b1: ['B1', 'B2'] }}//下面采取数组覆盖选项的 merge 结果：{ a: { a1: 'A1-new', a2: 'A2', a3: 'created' }, b: { b1: ['B2'] }}

结果解析1）值类型会被覆盖值类型为：字符串（string）、数值（number）、布尔值（boolean）、null、undefined，当 x，y 工具中有相同的key 对应的数据类型为值类型时，值会被覆盖，如：x.a.a1 = 'A1'y.a.a1 = 'A1-new'merge的结果便是 'A1-new' 会覆盖 'A1'，z.a.a1 = 'A1-new'2）“左侧”内容会保留如某键在 x （左侧）中存在，在 y（右侧）中不存在，则 x 的内容会被保留，如：x.a.a2 = 'A2', y.a.a2不存在，以是：z.a.a2 = 'A2'（ x.a.a2 被保留在 z.a.a2 中）3）默认配置下引用类型：工具（Object）、数组（Array）默认会合并如工具属性：x.a.a3 不存在，y.a.a3 = 'created'，y.a.a3的内容就被合并到 z 中，z.a.a3 = 'created'如数组元素：x.b.b1 = [ 'B1' ]，y.b.b1 = [ 'B2' ]，此两项内容被合并到 z 中，z.b.b1 = [ 'B1', 'B2' ]4）配置数组属性覆盖当配置数组属性覆盖时，在 merge 后的工具 z 里，z.b.b1 的值取 y.b.b1 的值，即z.b.b1= [ 'B2' ]

3 运用测试

创建 test-merge.js 文件，编写代码如下

const merge = require('deepmerge')

下面定义数组覆盖选项，当要实现数组覆盖的时候，可以在merge时利用该选项

const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray

3.1 defaultConfig 的工具定义

在 test-merge.js 文件里定义 defaultConfig 工具：

const defaultConfig={ title: '仿照考试', students: 50, subjects: 2, subjectList: [ '语文', '数学' ]}

3.2 userConfig 的工具定义

在 test-merge.js 文件里定义 userConfig 工具：

const userConfig={ title: 'xx年度会考', students: 60, subjectList: [ '地理', '生物' ]}

3.3 deepMerge 合并天生 finalConfig 工具