Global

Methods

cloneDeep(value) → {Array|Object}

克隆对象或数组
Parameters:
Name Type Description
value Array | Object 源数据
Source:
Returns:
- 返回新的数据
Type
Array | Object
Example
import { cloneDeep } from 'digi'

const obj = { a: 123 }
const newObj = cloneDeep(obj)

console.log(obj === newObj)
// => false
console.log(obj.a === newObj.a)
// => true

createData(data, watch) → {Object}

创建可监听对象
Parameters:
Name Type Description
data Object 源对象
watch Object watch = { path1: fun1, ..., pathN: funN };
path = 源对象路径;
fun = (newVal, [oldVal]) => {};
Source:
Returns:
- 返回可监听对象
Type
Object
Example
import digi, { createData } from 'digi'
import refs, { allotId } from 'digi-refs'

digi.plugins([refs])

// 创建监听数据
const data = createData({ a: 123 }, { watch: {
  a: (newVal, oldVal) => {
    console.log(`watch a => newVal: ${ newVal }, oldVal: ${ oldVal }`)
  }
}})

// 分配标记id
const textRefId = allotId()

// 添加元素
digi({ ref: textRefId, text: data.$tp('a') })

console.log(refs[textRefId].outerHTML)
// => <div>123</div>

data.a = 321
// => watch a => newVal: 321, oldVal: 123

console.log(refs[textRefId].outerHTML)
// => <div>321</div>

createElement(data) → {Object}

创建元素
Parameters:
Name Type Description
data String | Object | Undefined data = tagName || { ...元素属性 };
扩展元素属性：{ child: 子元素, text: 文本节点 };
child = data 或 [data1, ..., dataN];
子元素的属性名为 'child' 或 'child' + 数字 { child: 子元素, child0: 子元素, child1: 子元素, ... };
文本节点的属性名为 'text' 或 'text' + 数字 { text: '内容', text0: '内容', text1: '内容', ... };
Source:
Returns:
- 返回元素
Type
Object
Example
import { createElement } from 'digi'

let el = createElement()
console.log(el.outerHTML)
// => '<div></div>'

el = createElement('a')
console.log(el.outerHTML)
// => '<a></a>'

el = createElement({ tagName: 'a' })
console.log(el.outerHTML)
// => '<a></a>'

// 子元素1
el = createElement({ child: 'a' })
console.log(el.outerHTML)
// => '<div><a></a></div>'

// 子元素2
el = createElement({ child: { tagName: 'a' } })
console.log(el.outerHTML)
// => '<div><a></a></div>'

// 子元素3
el = createElement({ child: [{ tagName: 'a' }, 'p'] })
console.log(el.outerHTML)
// => '<div><a></a><p></p></div>'

// 文本节点
el = createElement({ text: '123', text2: 'aa' })
console.log(el.outerHTML)
// => '<div>123aa</div>'

createTextNode(text) → {Object}

创建文本节点
Parameters:
Name Type Description
text String 节点的文本
Source:
Returns:
- 返回文本节点
Type
Object
Example
import { createTextNode, createData } from 'digi'

const data = createData({ a: 123 })
const textNode = createTextNode(data.$tp('a'))

// 没有添加到页面的元素不更新
console.log(textNode.nodeValue)
// => {{1.a}}

// 添加到页面，自动更新
document.body.appendChild(textNode)
console.log(textNode.nodeValue)
// => 123

// 可自动更新
data.a = 321
console.log(textNode.nodeValue)
// => 321

digi(data, element)

把data转成元素添加为element的子元素
Parameters:
Name Type Description
data Array | Object | String data = tagName || { ...element } || [..., tagName, ..., { ...element }, ...];
扩展元素属性：{ child: 子元素, text: 文本节点 }，
child = [data1, ..., dataN] 或 data
子元素的属性名为 'child' 或 'child' + 数字 { child: 子元素, child0: 子元素, child1: 子元素, ... };
文本节点的属性名为 'text' 或 'text' + 数字 { text: '内容', text0: '内容', text1: '内容', ... }
参数详情查看createElement
element Object | Undefined 元素，默认为#digi元素或document.body，把data转成元素添加为其子元素
Source:
Example
import digi, { createData } from 'digi'

// 创建监听数据
const data = createData({ a: 123 })

// 添加元素
digi({ text: data.$tp('a') })

console.log(document.body.lastChild.outerHTML)
// => <div>123</div>

data.a = 321
// => watch a => newVal: 321, oldVal: 123

console.log(document.body.lastChild.outerHTML)
// => <div>321</div>

forEach(data, callBack)

遍历对象或数组，每遍历一个值调用callBack(value, key|index)，callBack 返回 false 可提前结束遍历。
Parameters:
Name Type Description
data Array | Object 要遍历的对象或数组
callBack function 每遍历一个值调用的函数
Source:
Example
import { forEach } from 'digi'

var obj = { a: 1, b: 2 }
forEach(obj, (value, key) => console.log(value, key))
// => a, 1
// => b, 2

forEach(obj, (value, key) => {
  console.log(value, key)
  return false   // 提前结束遍历
})
// => a, 1

isArray(value) → {Boolean}

检查值是否为数组类型
Parameters:
Name Type Description
value Any 要检查的值
Source:
Returns:
- 是数组返回true, 否则返回false
Type
Boolean
Example
import { isArray } from 'digi'

isArray([])
// => true

isEmpty(value)

检查数组或对象是否为空
Parameters:
Name Type Description
value any 要检查的值
Source:
Example
import { isEmpty } from 'digi'

console.log(isEmpty({}))
// => true
console.log(isEmpty([]))
// => true
console.log(isEmpty('123'))
// => true

isFunction(value) → {Boolean}

检查值是否为函数类型
Parameters:
Name Type Description
value Any 要检查的值
Source:
Returns:
- 是函数返回true, 否则返回false
Type
Boolean
Example
import { isFunction } from 'digi'

isFunction(isFunction)
// => true

isNull(value) → {Boolean}

检查值是否为null
Parameters:
Name Type Description
value Any 要检查的值
Source:
Returns:
- 是null返回true, 否则返回false
Type
Boolean
Example
import { isNull } from 'digi'

isNull(null)
// => true

isNull('null')
// => false

isNumber(value) → {Boolean}

检查值是否为数字类型
Parameters:
Name Type Description
value Any 要检查的值
Source:
Returns:
- 是数字返回true, 否则返回false
Type
Boolean
Example
import { isNumber } from 'digi'

isNumber(1)
// => true

isNumber(NaN)
// => true

isNumber('1')
// => false

isObject(value) → {Boolean}

检查值是否为对象类型
Parameters:
Name Type Description
value Any 要检查的值
Source:
Returns:
- 是对象返回true, 否则返回false
Type
Boolean
Example
import { isObject } from 'digi'

isObject({})
// => true
isObject([])
// => false

isString(value) → {Boolean}

检查值是否为字符串类型
Parameters:
Name Type Description
value Any 要检查的值
Source:
Tutorials:
  • Tutorial: isString
Returns:
- 是字符串返回true, 否则返回false
Type
Boolean
Example
import { isString } from 'digi'

isString('1')
// => true
isString(1)
// => false

isTofObject(value) → {Boolean}

typeof值是否为object
Parameters:
Name Type Description
value Any 要typeof的值
Source:
Returns:
- 是object返回true, 否则返回false
Type
Boolean
Example
import { isTofObject } from 'digi'

isTofObject({})
// => true
isTofObject([])
// => true

isUndefined(value) → {Boolean}

检查值是否为undefined
Parameters:
Name Type Description
value Any 要检查的值
Source:
Returns:
- 是undefined返回true, 否则返回false
Type
Boolean
Example
import { isUndefined } from 'digi'

isUndefined(undefined)
// => true

isUndefined('undefined')
// => false

pathJoin(paths) → {String}

接连路径
Parameters:
Name Type Description
paths Array 多个路径
Source:
Returns:
- 返回连接成的新路径; 数组和对象的路径都用“.”分隔: 1、paths.join('.')，2、中括号替换为点，3、多点替换为一个点，4、去掉前后点
Type
String
Example
import { pathJoin } from 'digi'

console.log(pathJoin(a, '[1].b'))
// => a.1.b

pathSplit(paths) → {Array}

将路径转成数组
Parameters:
Name Type Description
paths String 字符串路径
Source:
Returns:
- 数组路径
Type
Array
Example
import { pathSplit } from 'digi'

console.log(pathSplit('a[1]'))
// => ['a', '1']

pick(object, paths) → {Object}

选择对象中的一些属性组成新的对象
Parameters:
Name Type Description
object Object 源对象
paths String | Array 要选择的属性路径
Source:
Returns:
- 返回新的对象
Type
Object
Example
import { pick } from 'digi'

var obj = { a: 1, b: 2, c: 3 }
pick(obj, 'a')
// => { a: 1}

pick(obj, ['a', 'b'])
// => { a: 1, b: 3 }

plugins(plugins)

添加插件
Parameters:
Name Type Description
plugins Array 值 = [plugin1, ..., pluginN];
plugin = { property: '元素属性名', handler: (元素, 元素属性值) => {} };
或 plugin = [{ property: '元素属性名', handler: (元素, 元素属性值) => {} }, options]; options = {...}
handler在创建元素时抓捕到对应属性被触发, 并plugin.options = Object.assign(plugin.options, options)
Source:
Example
import digi, { plugins } from 'digi'
import refs, { allotId } from 'digi-refs'
console.log(refs)
// {property: "ref", handler: ƒ, allotId: ƒ}

// 添加插件: plugins([refs]) 或 digi.plugins([refs])
plugins([refs])

// 分配标记id
const textRefId = allotId()

// 添加元素
digi({ ref: textRefId, text: 'hello world' })

console.log(refs[textRefId].outerHTML)
// => <div>hello world</div>

set(data, paths, value)

设置对象或数组属性值
Parameters:
Name Type Description
data Object | Array 将要被改变属性的数据源
paths String | Array 属性路径
value Any 属性值
Source:
Example
import { set } from 'digi'

const obj = {}
set(obj, 'a.b.c', 123)
console.log(obj)
// => { a: { b: { c: 123 } } }

set(obj, ['a', 'b', 'c'], 321)
console.log(obj)
// => { a: { b: { c: 321 } } }