Numerous Philanthropic Misanthropes
    Have ideas to improve npm?Join in the discussion! »

    any-utils
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.4 • Public • Published

    any-utils

    纯 JS utils 库,适用前端任何场景

    Installment

    npm install any-utils --save

    Documentation

    1. get

    访问嵌套对象,避免代码中出现类似 a && a.b ? a.b.c : null 的代码

    Usage

      import { get } from 'any-utils';
     
      const data = [{
        id: 101,
        email: 'jack@dev.com',
        personalInfo: {
          name: 'Jack',
          address: {
            line1: 'westwish st',
            line2: 'washmasher',
            city: [],
            state: 'WX'
          }
        }
      }];
     
      // 获取 data[0].personalInfo.address.line1
      get(data, [0, 'personalInfo', 'address', 'line1']); // westwish st
     
      // 获取 data[0].personalInfo.address.line2 不存在的属性 wx
      get(data, [0, 'personalInfo', 'address', 'line2', 'wx']); // undefined
     
      // 取不到的情况先默认返回 undefined,也可以设置
      get(data, [0, 'personalInfo', 'address', 'line2', 'wx'], '我是默认值'); // 我是默认值

    2. isEmpty

    判断是不是空对象或者空数组

    Usage

    import { isEmpty } from 'any-utils';
     
    // 判断空数组
    isEmpty([]); // true
     
    // 判断空对象
    isEmpty({}); // true
     
    // 判断非空对象
    isEmpty({ a:1 }); // false
     
    // 判断非空数组
    isEmpty([1]); // false
     
    // 判断非数组或对象
    isEmpty(1); // false

    3. query 类

    和 url 相关的方法

    parseQuery

    将类似 key1=18127873881&key2=2 格式的数据解析为 { key1: '18127873881', key2: 2 }

    Usage

    import { parseQuery, getQueryString } from 'any-utils';
     
    // 解析 key1=18127873881&key2=2
    parseQuery('key1=18127873881&key2=2') // { key1: '18127873881', key2: '2' }
     
    // 解析空字符串
    parseQuery('') // {}
     
    // 获取 url 上面参数
    // Location.href = https://www.baidu.com/s?ie=UTF-8
    getQueryString('ie') // UTF-8
     
    // 将 url 上面参数转换成对象
    // Location.href = https://www.baidu.com/s?ie=UTF-8&name=allen
    queryToObject() // { ie: 'UTF-8', name: 'allen'}

    4. 判断数据类型

    判断数据类型

    Usage

    import { getTypeof, isString, isBoolean, isObject, isArray, isFunction, isDate, isJSON } from '../src/typeof';
     
    // 判断是否为数组
    getTypeof([1, 2])); // array
    isArray([1, 2]); // true
    isArray({}); // false
     
    // 判断是否为字符串
    getTypeof('我是字符串'); // string
    isString('我是字符串'); // true
    isString(false); // false
     
    // 判断是否为对象
    getTypeof({a: 2}); // object
    isObject({a: 2}); // true
    isObject(false); // false
     
    // 判断 null 的类型
    getTypeof(null); // null
     
    // 判断是否为 boolean
    getTypeof(false); // boolean
    isBoolean(false); // true
    isBoolean({a: 2}); // false
     
    // 判断 number 类型
    getTypeof(1); // number
     
    // 判断 function
    getTypeof(() => {}); // function
    isFunction(() => {}); // true
    isFunction(false); // false
     
    // 判断 date
    const date = new Date();
    getTypeof(date); // date
    isDate(date); // true
    isDate(false); // false
     
    // 判断是否是 JSON 字符串
    isJSON('123'); // flase
    isJSON('{}'); // true
    isJSON('[1, 2, 3]'); // true
    isJSON('{"a":1,"b":2}'); // true
    isJSON(1); // false

    5. dom 类方法

    dom 类方法

    Usage

    <div class="demo" id="demo" data-index="1"></div>
    import { isHTMLElement, hasClass, addClass, getDataByAttribute, bindEvent } from '../src/typeof';
     
    const dom = document.getElementById('demo');
     
    // 判断是否为 dom
    isHTMLElement(dom, ); // true
     
    // 判断元素是不是有某个 className
    hasClass(dom, 'demo'); // true
     
    // 给某个元素添加 className
    addClass(dom, 'newClass'); // <div class="demo" id="demo newClass"></div>
     
    // 在 Attribute 属性里面取 data- 开头的属性
    getDataByAttribute(dom, 'index'); // 1
     
    // 通用事件绑定函数 bindEvent(elem, type, selector, fn)
    // 普通绑定
    let dom = document.getElementById('custom-bg');
    bindEvent(dom, 'click', function(event) {
      console.log('我是普通绑定')
    })
     
    // 代理绑定
    bindEvent(dom, 'click', '.selector', function(event) {
      console.log('我只是绑定了 dom 下面 class 名称为 selector 的元素')
    })

    6. deepClone

    深拷贝数组或对象

    Usage

      import { deepClone } from 'any-utils';
     
      const source = {
        age: 20,
        name: 'allen',
        address: {
          city: 'shanxi',
        },
        arr: [1, 'a', ['c', 2, {a: 2}]],
      };
     
      const deepCloneObj = deepClone(source);
      deepCloneObj.address.city = '南京';
     
      const input = source.address.city;
      const expectation = 'shanxi';
     
      input === expectation // true

    7. createCache

    缓存数据

    Usage

      import { createCache } from 'any-utils';
     
      // 创建一个缓存容器
      const c = createCache();
     
      // 设置缓存数据
      c.set('name', 'allen');
     
      // 获取缓存数据
      c.get('name');

    8. debounce

    防抖

    Usage

      import { debounce } from 'any-utils';
     
      // 事件处理函数,回掉函数支持传参
      function handle(...values) {
        console.log('-- do something --', values);
      }
     
      // 延时 1000ms
      debounce(handle, 1000, this);

    9. throttle

    节流

    Usage

      import { throttle } from 'any-utils';
     
      // 事件处理函数,回掉函数支持传参
      function handle(...values) {
        console.log('-- do something --', values);
      }
     
      // 延时 1000ms
      throttle(handle, 1000, this);

    10. safeJSONParse

    解析 JSON 字符串

    Usage

      import { safeJSONParse } from 'any-utils';
     
      // 解析 JSON 格式字符串
      const objStr = '{"a":1,"b":2}';
      safeJSONParse(objStr); // { a: 1, b: 2}
     
      // 解析数组字符串
      const arrStr = '[1, 2, "Jack"]';
      safeJSONParse(arrStr); // [1, 2, "Jack"]
     
      // 解析非 JSON 数据格式字符串
      const str = 'abc';
     
      // 解析失败默认返回 {}
      safeJSONParse(str); // {}
     
      // 也可以自定义返回值
      safeJSONParse(str, '我是默认值'); // 我是默认值

    11. includes

    判断字符串或数组的包含关系,兼容不支持 includes 的场景

    Usage

      import { includes } from 'any-utils';
     
      includes([1, 2, 3], 1) // true
      includes(['2', '1', '3'], '1') // true
      includes('我是字符串', '字符串') // true
      includes('我是字符串', '其他') // false

    12. fetchEnv

    根据 url 是否包含 dev、test、pre、prod 判断是否为 dev、test、pre、prod 环境

    Usage

      import { fetchEnv } from 'any-utils';
     
      fetchEnv('https://www.imooc.dev.com/') // dev
      fetchEnv('https://www.imooc.test.com/') // test
      fetchEnv('https://www.imooc.pre.com/') // pre
      fetchEnv('https://www.imooc.prod.com/') // prod
     
      // 支持直接读 window.location.href
      fetchEnv() // 相当于 fetchEnv(window.location.href)

    13. 判断当前系统类型

    根据 navigator.userAgent 判断当前系统类型

    Usage

      import { isIos, isChrome } from 'any-utils';
     
      isIos() // 返回一个 boolean 值,是否为 isIos 系统
      isChrome() // 返回一个 boolean 值,是否为谷歌浏览器

    14. isEqual

    判断两个对象是否相等

    Usage

    import { isEqual } from 'any-utils';
     
    isEqual({ a: 1, b: {a: 1}}, {a: 1, b: {a: 1}}) // true
    isEqual({ a: 1}, {a: 1, b: {a: 1}}) // false

    15. flat

    数组拍平

    Usage

    import { flat } from 'any-utils';
     
    flat([1, 2, 3, [1, 2, [1, 2]]]) // [1,2,3,1,2,1,2]

    16. unique

    数组去重

    Usage

    import { unique } from 'any-utils';
     
    unique([1, 2, 3, 3, 3, 3]) // [1,2,3]

    Development

    Build with TypeScript and tested by jest.

    Checklist:

    • 每个对外公开的函数必须经过单测
    • 每个对外公开的函数必须在 README 添加文档

    Publish

    1. npm version patch(向后兼容的 bug fix)/ minor (新需求且向后兼容) / major(不兼容)/ prerelease --preid=alpha(测试版本)
    2. npm publish
    3. git push && git push --tags

    commit 规范

    格式::

    type 说明

    1. feat(feature,新功能,能够让用户觉察到的变化)
    2. fix(bug fix,修复 bug)
    3. docs(documentation,有关文档的更新,注释的更新)
    4. style(code formatting, missing semi colons, … 代码样式调整,对逻辑无影响,比如为符合 eslint 要求修改代码格式)
    5. refactor(重构,不影响或添加功能,比如文件、变量重命名、代码抽象为函数,消除魔法数字)
    6. test(when adding missing tests 写测试)
    7. chore(maintain 维护代码,比如构建脚本 webpack gulp、测试工具更新)
    8. perf (性能提升)
    9. ci(ci 脚本有关变更)
    10. temp(temp: 不计入 CHANGELOG。比如测试下真机上 transparent title 启动参数是否设置成功)

    Install

    npm i any-utils

    DownloadsWeekly Downloads

    27

    Version

    1.9.4

    License

    ISC

    Unpacked Size

    28.1 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar