vear

一款集DOM、AJAX、localSotrage、防抖节流、二维码等API为一体的基础开发工具

Usage no npm install needed!

<script type="module">
  import vear from 'https://cdn.skypack.dev/vear';
</script>

README

Vear

一款超简单的多功能基础API开发工具，包含有：

DOM API（类似JQuery），AJAX，localStorage、cookie、防抖、节流、querystring，深拷贝，二维码

等操作

添加

// npm
npm i vear -s
// yarn
yarn add vear

DOM API

导入 & 使用

import $ from 'vear'
let v = $('C3选择器')

<script src='./dist/vear.js'>
<script>
  let v = $('C3选择器') //$符还可以是_,V
</script>

node操作


// 属性
v.index             //元素下标或元素下标集合
// 方法
v.eq([index])         //传入下标选中对应元素，返回VearDOM，不传参数等同于index
v.first()             //选中第一个元素，返回VearDOM
v.last()              //选中最后一个元素，返回VearDOM
v.even()              //选中偶数个元素，返回VearDOM
v.odd()               //选中奇数个元素，返回VearDOM
v.children([select])  //选中所有子并为select条件的元素，返回VearDOM
v.find(select)        //选中所有后代并为select条件的元素，返回VearDOM
v.parent()            //选中父元素，返回VearDOM
v.parents()           //选中祖先元素，返回VearDOM
v.prev()              //选中上一元素，返回VearDOM
v.next()              //选中下一元素，返回VearDOM
v.prevAll(select)     //选中所有弟弟并为select条件元素，返回VearDOM
v.nextAll(select)     //选中所有哥哥并为select条件元素，返回VearDOM
v.siblings(select)    //选中除了自己所有同级并为select条件元素，返回VearDOM
v.remove()            //移除当前元素
v.file()              //file文件
v.files()             //file文件集合

value操作

v.html(val)             //传入val设置DOM节点的innerHTML为val，返回VearDOM，不传val返回DOM的innerHTML或集合
v.text(val)             //传入val设置DOM节点的innerText为val，返回VearDOM，不传val返回DOM的innerText或集合
v.val(val)              //传入val设置DOM节点的value为val，返回VearDOM，不传val返回DOM的value或集合
v.addHTML([operate],val)//在元素的'beforestart','afterstart','beforeend','afterend'插入val，默认为'beforeend'
v.reset()               //表单重置
v.checked()             //选中所有已选中的选择框，返回value数组

props操作

v.prop(ope)         //传入prop属性，返回属性值，传入prop属性和属性值，设置属性，传入对象，设置多个属性
v.css(ope)          //传入style属性，返回属性值，传入style属性和属性值，设置属性，传入对象，设置多个属性
v.hasClass(cls)     //是否有类名
v.addClass(cls)     //添加一个类名
v.removeClass(cls)  //删除一个类名
v.toogleClass(cls)  //切换个类名

event操作

v.on(ope)       //第一个参数为事件名，第二个参数为触发的回调，或者传入一个对象添加多个事件
v.click(fn)     //调用click事件
//......

C3动画

//timing 运动时间
//easing 运动形式
//fn     执行完成回调函数
v.show([timing],[easing],[fn])                   //出现
v.hide([timing],[easing],[fn])                   //隐藏
v.toggle([timing],[easing],[fn])                 //切换
v.slideDown([timing],[easing],[fn])              //滑下
v.slideUp([timing],[easing],[fn])                //滑起
v.slideToggle([timing],[easing],[fn])            //切换
v.fadeIn([timing],[easing],[fn])                 //淡入
v.fadeOut([timing],[easing],[fn])                //淡出
v.fadeToggle([timing],[easing],[fn])             //切换
v.animate(changeObj,[timing],[easing],[fn])      //动画 第一个参数为运动后的状态

AJAX

导入 & 使用

模块化

import { ajax } from 'vear'
/*
  配置
*/
ajax.baseURL                        // 基准URL
ajax.withCredentials                // 允许携带cookie
ajax.timeout                        // 超时设置
ajax.dataFormat                     // 是否格式化data
ajax.request = config => config     // 请求拦截器
ajax.response = config => config    // 响应拦截器
/*
  使用
*/
//config模式
ajax({                        
    url     //请求路径
    method  //get、post请求
    headers //请求头
    params  //get参数
    data    //get或post参数
    id      //标识，用于中断请求
    timeout //超时
    dataFormat //是否格式化data
}).then()  
//get请求
ajax.get(url,params).then()   
//post请求
ajax.post(url,data).then()  
//中断请求
ajax.abort(id)

script

<script src='./dist/vear.js'>
<script>
  /*
    配置
  */
  $.baseURL            // 基准URL
  $.withCredentials    // 允许携带cookie
  $.timeout            // 超时设置
  $.dataFormat         // 是否格式化data
  $.request = config => config  // 请求拦截器
  $.response = config => config // 响应拦截器
  /*
    使用
  */
  //config模式
  $.ajax({                        
      url     //请求路径
      method  //get、post请求
      headers //请求头
      params  //get参数
      data    //get或post参数
      id      //标识，用于中断请求
      timeout //超时
      dataFormat //是否格式化data
  }).then()  
  //get请求
  $.get(url,params).then()   
  //post请求
  $.post(url,data).then()  
  //中断请求
  $.abort(id)  
</script>

防抖 节流

导入

模块化

import { debounce, throttle } from 'vear'

script

<script src='./dist/vear.js'>
<script>
let { debounce, throttle } = $
</script>

使用

node.onsomething = debounce(触发函数,延时)  // 防抖
node.onsomething = throttle(触发函数,延时)  // 节流

localStorage

导入

模块化

import { getStorage,setStorage,removeStorage } from 'vear'

script

<script src='./dist/vear.js'>
<script>
let { getStorage,setStorage,removeStorage } from $
</script>

使用

getStorage([obj],attr)      //获取localStorage中的值或对象的某个属性
setStorage([obj],attr,val)  //设置存储在localStorage中的值或对象的某个属性
removeStorage([obj],attr)   //删除存储在localStorage中的值或对象的某个属性

cookie

导入

模块化

import { cookie, getCookie, setCookie, removeCookie } from 'vear'

script

<script src='./dist/vear.js'>
<script>
let { cookie, getCookie, setCookie, removeCookie } from $
</script>

使用

cookie(key,val,time)    //只传key获取cookie，传入val为空字符串移除cookie，反之设置cookie
getCookie(key)          // 获取cookie
setCookie(key,val,time) // 设置cookie
remvoeCookie(key)       // 删除cookie

deepClone

导入

模块化

import { deepClone } from 'vear'

script

<script src='./dist/vear.js'>
<script>
let { deepClone } from $
</script>

使用

deepClone(object,[deep])    //深拷贝，传入拷贝的对象和拷贝的深度，深度1相当于Object.assign，-1为无限递归(默认)

querystring

导入

模块化

import { querystring } from 'vear'

script

<script src='./dist/vear.js'>
<script>
let { querystring } from $
</script>

使用

querystring(search/query)   //将search，query转换成data对象

QRCode 生成二维码

导入

模块化

import { QRCode } from 'vear'

script

<script src='./dist/vear.js'>
<script>
let { QRCode } from $
let { L,M,Q,H } = QRCode
</script>

使用

// 简单用法
QRCode(el元素/'CSS选择器','文本')
// 对象参数
QRCode(el元素/'css选择器',{
  text:'文本',
  width:宽度,
  height:高度,
  color:'颜色',
  backgroundColor:'背景颜色',
  level:L/M/Q/H //误差校正等级
})

Bug反馈、功能建议邮箱：76239010@qq.com ~(～￣▽￣)～