GoodLuck-Util

# browser

浏览器类

# base

# browserVersion

在线运行API

判断浏览器环境

  • 类型：function
  • 返回值：{[string]: boolean}
    key 平台
    mobile 移动终端
    webApp web PWA
    ios iOS系统
    android Android系统
    iPad iPad
    iPhone iPhone
    gecko 火狐内核
    presto Opera内核
    webkit Webkit内核
    trident IE内核
    uc UC浏览器
    safari Safari浏览器
    qqBrowser 手机QQ浏览器
    qq QQ APP
    weChat 微信APP
    aliPay 支付宝APP
  • 示例：
    点击查看代码示例

     

    import { browserVersion } from "@goodluck/util";
const browser = browserVersion();

# browserBottomVisible

获取浏览器页面的底部是否可见。可以用于判断当前页面内容高度是否大于浏览器可视区域高度。

  • 类型：function
  • 返回值：boolean
  • 示例：
    点击查看代码示例

     

    import { browserBottomVisible } from "@goodluck/util";
const status = browserBottomVisible();

# browserElementIsVisibleInViewport

判断元素当前是否在浏览器可视区域内

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    el HTMLElement 否 - 需要判断的元素
    partiallyVisible boolean 是 false 是否只需要部分可见
  • 返回值：boolean
  • 示例：
    点击查看代码示例



     


    import { browserElementIsVisibleInViewport } from "@goodluck/util";
const $bar = document.querySelector(".bar");
if($bar) {
    const status = browserElementIsVisibleInViewport($bar, true);
}

# browserElementIsVisibleInScope

判断元素是否在某个元素可视区域内

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    el HTMLElement 否 - 需要判断的元素
    scopeEl HTMLElement 否 - 区域元素
    partiallyVisible boolean 是 false 是否只需要部分可见
  • 返回值：boolean
  • 示例：
    点击查看代码示例




     


    import { browserElementIsVisibleInScope } from "@goodluck/util";
const $bar = document.querySelector(".bar");
const $slide = document.querySelector(".slide");
if($bar && $slide) {
    const status = browserElementIsVisibleInScope($bar, $slide, true);
}

# browserScrollMove

页面平滑滚动。可以是元素内的滚动，也可以是页面滚动

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    el HTMLElement、Window 否 - 滚动所在的元素
    from number 否 - 滚动起始位置
    to number 否 - 滚动结束位置
    direction "vertical"、"horizontal" 是 "vertical" 滚动起始方向
    duration number 是 1000 滚动动画持续时长，毫秒
  • 返回值：void
  • 示例：
    点击查看代码示例

     
     

     

    import { browserScrollMove } from "@goodluck/util";
browserScrollMove(window, window.scrollY, 0); // 返回顶部
browserScrollMove(window, 100, 1000, "horizontal"); // 页面横向位置滚动
const $list = document.querySelector(".list");
browserScrollMove($list, $list.scrollTop, $list.scrollTop + 500); // 元素内部位置滚动

# browserElementComputedStyle

获取元素计算后的样式值

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    element HTMLElement 否 - 元素
    attr string 否 - 样式名
  • 返回值：string、number、undefined
  • 示例：
    点击查看代码示例

     
     

    import { browserElementComputedStyle } from "@goodluck/util";
browserElementComputedStyle(document.body, "width"); // 获取body的宽度
browserElementComputedStyle(document.querySelector(".list"), "background-color"); // 获取.list元素的背景色

# clipboardWrite

复制文本到剪贴板

提示

如果针对高级浏览器版本（chrome66及以上），建议使用 Async Clipboard API (opens new window)

兼容性

在有些浏览器中，特别是移动端浏览器，需要在点击事件中调用本方法才有效，即用户自主与网页交互操作时才可复制到剪贴板。

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    str string 否 - 需要复制的文本
  • 返回值：void
  • 示例：
    点击查看代码示例

     

    import { clipboardWrite } from "@goodluck/util";
clipboardWrite("复制这段文字到剪贴板");

# browserFullScreen

控制浏览器页面是否全屏显示

兼容性

运行后返回 false 表示执行失败，可能是浏览器不支持。

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    enable boolean 否 - true-全屏、false-退出全屏
    el HTMLElement 是 document.documentElement 指定元素
  • 返回值：Promise<boolean>
  • 示例：
    点击查看代码示例

     
     

    import { browserFullScreen } from "@goodluck/util";
browserFullScreen(true); // 全屏显示
browserFullScreen(false); // 退出全屏

# browserLoadFileAsync

异步加载js、css文件

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    url string 否 - 文件网络地址
    id string 是 - 为加载的元素标签加上一个id
    callback function 是 - 文件加载完成后的回调函数
  • 返回值：void
  • 示例：
    点击查看代码示例

     
     

     

    import { browserLoadFileAsync } from "@goodluck/util";
browserLoadFileAsync("https://xxx.com/xxx.css"); // 额外加载一个css样式文件
browserLoadFileAsync("https://xxx.com/xxx.js", "sdk", () => {
    // 加载一个sdk，并且在此初始化
});

# browserConsolePrintf

输出浏览器控制台调试信息，格式美化的调试信息。

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    options string、number、ConsolePrintfOptions 是 - 输出文本、数字或按参数传入可自定义调试标题和文字颜色
    consolePrintfAble function 是 console.log 控制台打印方法
    # ConsolePrintfOptions
    参数名 类型 是否可选 默认值 说明
    title string 是 "debug" 标题
    text string 是 "" 内容
    color string 是 "#26a2ff" 主色
  • 返回值：void
  • 示例：
    点击查看代码示例

     
     
     
     
     
     
     

    import { browserConsolePrintf } from "@goodluck/util";
browserConsolePrintf("输出调试信息");
browserConsolePrintf("以console.error输出调试信息", console.error);
browserConsolePrintf({
    title: "自定义标题",
    text: "内容",
    color: "#35ce2f"
});

# browserQueryString

获取url中的查询参数（QueryString）

提示

这个方法是为了在特殊情况或特殊环境下使用，正常情况下建议使用 URLSearchParams (opens new window)

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    key string 否 - 查询键名
  • 返回值：string
  • 示例：
    点击查看代码示例

     

    import { browserQueryString } from "@goodluck/util";
browserQueryString("id");

# EventListener

元素事件监听器

  • 类型：class
  • 参数：
参数名 类型 是否可选 默认值 说明
element HTMLElement 否 - 需要监听的元素
eventName string 否 - 需要监听的事件名
callback Function 否 - 结束回调

  • 公有方法、属性：

    # EventListener.destroy

    销毁并移除监听

    • 类型：function
    • 返回值：void
    • 示例：
      点击查看代码示例




       

      import { EventListener } from "@goodluck/util";
const listener = new EventListener(document.querySelector(".box"), "transitionend", () => {
    console.log("触发了过渡结束");
});
listener.destroy(); // 移除监听

# media

# mediaSpeak

语音合成，将文本内容转为语音，然后播放

兼容性

这是一个实验中的功能，所以不同浏览器的兼容和完成度都不同，有些浏览器不能播放中文。

  • 类型：function
  • 参数：
    参数名 类型 是否可选 默认值 说明
    message string 否 - 文本内容
  • 返回值：void
  • 示例：
    点击查看代码示例

     

    import { mediaSpeak } from "@goodluck/util";
mediaSpeak("使用语音播放这段内容");

# storage

# StorageJSON

Storage (opens new window) 的扩展封装，支持 JSON 带格式及类型的写入和读取

  • 类型：class

  • 参数：

    参数名 类型 是否可选 默认值 说明
    sessionStorage Storage 是 window.sessionStorage 底层会话存储API
    localStorage Storage 是 window.localStorage 底层持久存储API

  • 公有方法、属性：

    # StorageJSON.write

    写入数据

    • 类型：function
    • 参数：
      参数名 类型 是否可选 默认值 说明
      key string 否 - 存储键名
      value any 否 - 存储值
      isLocalStorage boolean 是 false 是否持久存储
    • 返回值：any
    • 示例：
      点击查看代码示例


       

      import { StorageJSON } from "@goodluck/util";
const storageJSON = new StorageJSON();
storageJSON.write("count", 10);

    # StorageJSON.read

    读取数据

    • 类型：function
    • 参数：
      参数名 类型 是否可选 默认值 说明
      key string 否 - 存储时的键名
      isLocalStorage boolean 是 false 是否从持久存储中读取
    • 返回值：any
    • 示例：
      点击查看代码示例


       

      import { StorageJSON } from "@goodluck/util";
const storageJSON = new StorageJSON();
storageJSON.read("count");

    # StorageJSON.remove

    删除数据

    • 类型：function
    • 参数：
      参数名 类型 是否可选 默认值 说明
      key string 否 - 存储时的键名
      isLocalStorage boolean 是 false 是否从持久存储中删除
    • 返回值：void
    • 示例：
      点击查看代码示例


       

      import { StorageJSON } from "@goodluck/util";
const storageJSON = new StorageJSON();
storageJSON.remove("count");

common →