qcdom-es

#qcdom-es 此库提供了常用的dom操作方法，通过构建工具 你可以轻松地进行 tree-shaking 优化

// 所有方法导入示例
import {
  $, $s, $addClass, $removeClass,
  $hasClass, $toggleClass, $setStyle, $getStyle, 
  $getType, $render, $onEvent, $request, 
  $get, $post, $each, $offEvent, 
  $attr
} from 'qcdom-es'

$

接受css选择器字符串 返回单个dom对象

$s

接受css选择器字符串 返回nodeList

$hasClass

判断是否有dom对象的类，返回布尔值

• [dom] dom对象,或者dom对象数组或者nodeList
• [className] 类字符串

$removeClass

移除dom对象的类

• [dom] dom对象,或者dom对象数组或者nodeList
• [className] 类字符串

$toggleClass

移除/增加dom对象的类

• [dom] dom对象,或者dom对象数组或者nodeList
• [className] 类字符串

$setStyle

设置dom元素的样式值

• [dom] dom对象,或者dom对象数组或者nodeList
• [conf] 样式对象，如{background: 'red'}，会被添加到dom的style属性上

$getStyle

获取dom元素的样式值

• [dom] dom对象,或者dom对象数组或者nodeList，当不是单个dom对象时只会获取第一个
• [styleName] 样式名称，如$getStyle($('p'), 'width') 表示获取页面第一个p标签的长度

$render

提供高效率的dom渲染能力你可以传一个js对象或者一组js对象或者就是dom对象本身，
当传入的是一个数组是该函数会使用文档随便从而优化效率

• [dom] | [object] | [Array] 只有唯一参数可以是dom，对象或者数组，使用如下

const listItems = ['苹果', '香蕉', '草莓'].map(
  v => ({ tag: 'li', text: v })
)

const list = $render({
  tag: 'ul',
  className: 'list-box',
  prop: {
    'data-word': 'hello world'
  },
  style: {
    background: 'red'
  },
  children: listItems
})

document.body.appendChild(list)

<ul class="list-box" data-word="hello world" style="background: red">
  <li>苹果</li>
  <li>香蕉</li>
  <li>草莓</li>
</ul>

$onEvent

给dom绑定事件

• [dom] dom元素或者一组dom元素
• [eventType] 事件类型
• [handle] 一个事件处理函数

$request

发起请求

• [configs] 请求的参数配置

// 常用的配置如下
// 支持get和post两种类型 在下一个标题中有封装的get和post
$request({
  url: '',
  type: 'post',
  success (res) {},
  data: {}
})

$get

发起get请求

• [url] 请求地址
• [data] 请求数据json格式
• [success] 成功请求的回调函数

$get('url', {name:'aaa',age:24}, res => {
  // do sth with res
})

$post

发起post请求

• [url] 请求地址
• [data] 请求数据json格式
• [success] 成功请求的回调函数

$post('url', {name:'aaa',age:24}, res => {
  // do sth with res
})

$each

迭代循环数组或者对象或者数字，可以用return false跳出循环， 如果全部迭代完成该函数会返回true，如果被中断则会返回false

• [arr] 数组或者是类数组或者是对象
• [callback] 回调函数，回调函数里面的参数根据第一个参数类型的不同返回不同的参数，有如下三种情况

// 1 一个数组
$each([1, 2, 3], (val, index, arr) => {
  console.log(val, index, arr)
})
// 1 0 [1,2,3]
// 2 1 [1,2,3]
// 3 2 [1,2,3]


// 2 一个对象
$each({a:1,b:2,c:3}, (val, key, obj) => {
  console.log(val, key, obj)
})
// 1 'a' {a:1,b:2,c:3}
// 2 'b' {a:1,b:2,c:3}
// 3 'c' {a:1,b:2,c:3}

// 3 一个数字 > 0的否则无效
$each(3, (v, n)) => {
  console.log(v, n)
})
// 1 3
// 2 3
// 3 3

$offEvent

解除事件

• [dom] dom元素或者一组dom元素
• [eventType] 事件类型
• [handler] 事件处理函数, 传入函数的变量名

$attr

给dom元素添加属性

• [dom] dom元素或者一组dom元素
• [conf] 属性配置

$attr($('div'), {
  key: 'value'
})

$getType

获取任意值的值类型

$getType(1)

// 'Number'