yu-front v1.7.3

yu-front

仅用于web前端，在webpack中引入本模块，即可使用下面dom对象的扩展函数，IE10及以上

安装

npm install yu-front --save

引入

import { 
	calendar,
	queueAnimate,
	css,
	ajax, 
	upload,
	cookie, 
	tick,
	clearTick
} from 'yu-front';

获取指定月份的月历

//calendar(year,month);
//1、返回格式的月历
let monthly = calendar(2019,8);
console.log(monthly)
//打印结果：
[
	["日", "一", "二", "三", "四", "五", "六"],
	["", "", "", "", 1, 2, 3],
	[4, 5, 6, 7, 8, 9, 10],
	[11, 12, 13, 14, 15, 16, 17],
	[18, 19, 20, 21, 22, 23, 24],
	[25, 26, 27, 28, 29, 30, 31]
]


//2、返回日期和星期x对齐的月历
let monthly = calendar(2020,2,true);
console.log(monthly)
//打印结果：
{
	date:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
	week:[6, 0, 1, 2, 3, 4, 5, 6, 0, 1, 2, 3, 4, 5, 6, 0, 1, 2, 3, 4, 5, 6, 0, 1, 2, 3, 4, 5, 6]
}
//week数组中的6代表星期六，0代表星期日，1代表星期一

队列动画：queueAnimate(元素,队列动画数组,config);

let div = document.querySelector('div');
let queue = [{ width:'200px' },{ width:'300px',height:'50px' }];
let config = { duration:300,delay:0,timing:'ease' };

//队列动画
queueAnimate(div,queue,config).then(record=>{
	//动画完成
	console.log(record) //record记录该div的css样式
})

//非队列动画
queueAnimate(div,{ width:'100px',height:'100px' },300).then(record=>{
	//动画完成
	console.log(record) //record记录该div的css样式
})

获取或设置dom元素的css属性（已含兼容性处理）

let div = document.querySelector('div');
//获取dom元素当前样式
let str = css(div,"width");  

//设置dom元素的样式
css(div,{ width:"100px",height:"50px" });  

ajax(options)：向服务器发送请求，返回Promise

let options = {
	method:'get'|'post'|'put'|'delete',  //请求方法
	url:'xxx/api',   			//请求地址
	data:{ id:1,user:'ming' }|'id=1&user=ming', //请求参数
	header:{ '请求头字段':'字段值' },  //请求头
	type:''|'json'|'blob'|'arraybuffer'|'document', //响应的数据类型
}

ajax(options).then( result=>{
    let { headers,data } = result;
    //headers是响应头
    //data是响应数据
} );

ajax上传文件：upload(input元素,'服务器url',上传进度回调函数).then(上传成功回调函数)

let input = document.getElementById('input_id');

input.oninput = function(event){
	upload(event.currentTarget,'/服务器地址',(e)=>{
		console.log(e);
	}).then(res=>{});		//上传成功回调
}

//如果上传文件时，也需要发送参数数据
input.oninput = function(event){
	upload(event.currentTarget,{ url:'/服务器地址',data:{ id:2,username:'小明' } },(e)=>{
		console.log(e);
	}).then(res=>{});		//上传成功回调
}

cookie：document.cookie增删改查

/* cookie.set(key,value,expires) */
cookie.set('abc','123',3600);   //增或改cookie，该cookie的有效时间是3600秒以内

/* cookie.get(key) */
cookie.get('abc');     //获取指定cookie
cookie.get();          //获取所有cookie

/* cookie.delete(key) */
cookie.delete('abc');  //删除指定的cookie

/* cookie.clear() */
cookie.clear();        //清空cookie(删除所有cookie)

tick(calback)、clearTick(timer)：window.requestAnimationFrame和window.cancelAnimationFrame的简写

let num = 0;
function fn(){
    conosle.log(num++);
    if(num<100) tick(fn);
}
fn();