Package Exports

z-util-page
z-util-page/lib/zutilpage.js
z-util-page/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (z-util-page) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

z-util-page

引入

1. 全局引入

拷贝包目录下dist文件夹内 [ zutilpage.min.js ] 文件到自己的项目里，在HTML里添加如下引用：

<script src="zutilpage.min.js"></script>

这会添加一个全局变量 [ Utils ] 到window对象;

Utils.debounce(function(){
    console.log('身体和心灵，总有一个在路上。');
}, 200);

2. 按需引入

运行以下命令将工具包安装到本地

npm i z-util-page --save

根据需要自行引入

import { debounce, throttle, deepClone } from 'z-util-page';

说明:

1. 函数防抖

import { debounce } from 'z-util-page'
let debounced = debounce(function(){
    console.log('身体和心灵，总有一个在路上。');
    return '身体和心灵，总有一个在路上。';
}, 1000, true);
//then方法为函数执行注册回调；
debounced.then(function(res){
    console.log(res);
});
debounced();

2. 函数节流

import { throttle } from 'z-util-page'
let throttle = throttle(function(){
    console.log('身体和心灵，总有一个在路上。');
    return '身体和心灵，总有一个在路上。';
}, 1000, {
    //leading: 开始是否执行
    //trailing: 结束是否执行
    //不能同时设置为false
    leading: true, 
    trailing: true
});

3. 深拷贝

import { deepClone } from 'z-util-page'
let newValue = deepClone({
    a: '身体和心灵，总有一个在路上。',
    b: {
        c: new Date(),
        d: [1, 3, 4],
        e: Symbol(),
        a: null,
        b: undefined,
        f: {
            a: 1,
            b: true,
            
        }
    },
    c: document.createElement('div'),
    d: new RegExp(/\d+/ig),
    e: new Error('错误'),
    f: function(){
        console.log('身体和心灵，总有一个在路上。');
    }
});

4. 生成UUID 或 GUID

import { UuidFactory } from 'z-util-page'
UuidFactory.uuid();
UuidFactory.guid();

5. Web端文件操作

import { FileHelper } from 'z-util-page';

//文件选择
FileHelper.choose(function(files){
    console.log(files);
},{
    accept: [".doc",".docx","application/msword"],
    capture: "user",
    multiple: true
});

//文件读取
//read方法参数类型："File" | "Blob"
const fileReader = FileHelper.read(file)
    .loadend(function (res) {
        console.log(res);
    })
    .error(function(err){
        console.log(err);
    })
    //start方法参数类型："ArrayBuffer" | "BinaryString" | "DataURL" | "Text"
    .start('Text');

fileReader.stop();//停止读取
fileReader.getStatus();//获取状态
fileReader.getResult();//获取结果

//文件写入数据并下载
FileHelper.write(new Blob([JSON.stringify({a: '身体和心灵，总有一个在路上。'}, null, 2)], {type : 'application/json'}), 'test.json');

6. Http

import { Http } from 'z-util-page';

const http = new Http({
    //超时等待时间(ms)
    timeout: 10000,
    //根域名
    baseUrl: "https://developer.mozilla.org",
    //请求数据格式
    contentType: 'application/json',
    //响应数据格式
    responseType: 'json'
});

http.ajax({
    //API
    url: '/test',
    //请求方法
    method: 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE',
    //响应数据格式
    type: "arraybuffer" | "blob" | "document" | "json" | "text",
    //超时等待时间(ms)
    timeout: 100,
    //请求参数
    data: {
        name: 'jack'
    },
    //请求头
    header: {
        'Content-Type': 'multipart/form-data'
    },
    //文件
    file: {
        'file': new Blob([JSON.stringify({a: '身体和心灵，总有一个在路上。'}, null, 2)], {type : 'application/json'})
    }
}).then((res)=>{
    console.log(res);
});

7. Reactive

import { Reactive } from 'z-util-page';

const a = {
    text: ""
};
//生成响应式对象
const b = Reactive.reactive({
    text: ""
});
//创建副作用函数
Reactive.effect(function () {
    a.text = b.text;
});
//修改响应式对象属性
b.text = "jack";

//副作用函数执行改变了a对象属性值，输出值为'jack'
console.log(a.text);

8. CookieHelper

import { CookieHelper } from 'z-util-page';

// 根据Key获取值
CookieHelper.getItem('TEST');

// 根据Key获取值后从cookie中删除该值
CookieHelper.getItemOnce('TEST');

// 修改或创建cookie键值对
CookieHelper.setItem('TEST', '身体和心灵，总有一个在路上。');

// 根据key删除指定键值对
CookieHelper.removeItem('TEST');

// 判断key是否存在cookie中
CookieHelper.exist('TEST');

// 清空cookie
CookieHelper.clear('TEST');