@deppon/deppon-utils

Frontend utility functions

npm

Version: 2.5.95

Version published: 3 weeks ago

Maintainers: 1

Created: 10 months ago

Source

`@deppon/deppon-utils`

前端工具函数库，适用于 Vue 项目。

功能

提供丰富的工具函数，包括：

DOM 操作

removeClass - 移除 DOM 类名
removeDom - 移除 DOM 元素
insertAfter - 在元素后插入
findParentDom - 查找父元素

浏览器相关

browser - 浏览器检测
setTitle - 设置页面标题
windowScrollTop - 获取/设置滚动位置
scrollTo - 滚动到指定位置
scrollToElement - 滚动到指定元素
noScroll - 禁止滚动
resolveIOSScroll - 解决 iOS 滚动问题

工具函数

debounce - 防抖
throttle - 节流
random - 随机数生成
isPhone - 手机号验证
isArray - 数组判断
isObject - 对象判断
isString - 字符串判断
removeSpace - 移除空格
lengthOfStr - 字符串长度计算
splitArray - 数组分割

URL 处理

parseUrlParams - 解析 URL 参数
objectToParams - 对象转 URL 参数
replcaeUrlParam - 替换 URL 参数
replcaeUrlParams - 替换多个 URL 参数
localUrl - 本地 URL 处理

iframe 路由跳转

isViewTabSupported - 检查是否支持 viewTab（是否在 iframe 环境中）
getParentParams - 从父级 iframe 获取参数
appendUrlParam - 在 URL 后追加参数
closeParentTab - 关闭父级标签页
viewTab - 在 iframe 环境中打开新标签页
navigate - 智能路由跳转（优先使用 viewTab，否则使用普通跳转）
isUap - 判断系统是否在 UAP 环境内

getCookie - 获取 Cookie
setCookieDomain - 设置 document.domain 以支持 cookie 跨域
copyStr - 复制字符串
copyToClipboard - 复制到剪贴板
preloadImage - 预加载图片
Time - 时间处理
queryCode - 查询代码
login - 登录
loginCheck - 登录检查
authorize - 授权
checkName - 名称检查
open - 打开链接
openApp - 打开 App
xDomain - 跨域处理
flexible - 移动端适配
limitVersion - 版本限制
observerDom - DOM 观察器
md5 - MD5 加密
getRestTimeStr - 获取剩余时间字符串

使用示例

iframe 路由跳转

import {
    viewTab,
    navigate,
    getParentParams,
    isViewTabSupported,
    appendUrlParam,
    closeParentTab,
} from '@deppon/deppon-utils';

// 检查是否支持 viewTab
if (isViewTabSupported()) {
    // 从父级获取参数
    const params = getParentParams();
    console.log('父级参数:', params);

    // 打开新标签页
    viewTab('产品折扣新增', '/product/discount/add', 'iframe', params, {
        uumsFunction: {
            functionCode: 'CMC_FUNCTION_00002',
            sourceSystem: 'CMC',
        },
        appendIsUap: true, // 默认会在 URL 后追加 isUap=true
    });

    // 或者使用智能跳转（自动降级）
    navigate('产品折扣新增', '/product/discount/add', 'iframe', params, {
        uumsFunction: {
            functionCode: 'CMC_FUNCTION_00002',
            sourceSystem: 'CMC',
        },
    });
}

// 在 URL 后追加参数
const urlWithParam = appendUrlParam('/product/list', 'isUap=true');

// 关闭父级标签页
closeParentTab('/product/list', 'IFRAME');

实际项目中的使用方式

// 替换原有的 top.viewTab 调用
import { viewTab, getParentParams, appendUrlParam, closeParentTab } from '@deppon/deppon-utils';

// 原有代码：
// top.viewTab && top.viewTab("CMC-产品折扣新增", url, "iframe", params, {
//     uumsFunction: {
//         functionCode: "CMC_FUNCTION_00002",
//         sourceSystem: "CMC",
//     },
// });

// 新代码：
const params = getParentParams();
viewTab('CMC-产品折扣新增', url, 'iframe', params, {
    uumsFunction: {
        functionCode: 'CMC_FUNCTION_00002',
        sourceSystem: 'CMC',
    },
});

// 如果需要先关闭标签页再打开
const tabUrl = appendUrlParam(url, 'isUap=true');
closeParentTab(tabUrl, 'IFRAME');
viewTab('CMC-产品折扣新增', url, 'iframe', params, {
    uumsFunction: {
        functionCode: 'CMC_FUNCTION_00002',
        sourceSystem: 'CMC',
    },
});

UAP 环境判断

import { isUap } from '@deppon/deppon-utils';

// 判断是否在 UAP 环境中
if (isUap()) {
    // UAP 环境下的逻辑
    console.log('当前在 UAP 环境中');
    // 隐藏头部、侧边栏等
    // 使用 UAP 特定的样式
} else {
    // 非 UAP 环境下的逻辑
    console.log('当前不在 UAP 环境中');
    // 显示完整的页面布局
}

// 在 Vue 组件中使用
export default {
    data() {
        return {
            isUapEnv: isUap(),
        };
    },
    mounted() {
        if (this.isUapEnv) {
            // UAP 环境初始化逻辑
        }
    },
};

UAP 环境判断逻辑：

检查 URL 参数中是否有 isUap=true（支持 query 和 hash 模式）
检查是否在 iframe 环境中且父级支持 viewTab 或 Ext

使用场景：

根据环境显示/隐藏页面元素（如头部、侧边栏）
应用不同的样式（如 UAP 环境下调整布局）
执行不同的初始化逻辑

import { setCookieDomain } from '@deppon/deppon-utils';

// 在应用初始化时调用，自动设置 document.domain 以支持 cookie 跨域
setCookieDomain();

// 在 Vue 应用中使用
import { createApp } from 'vue';
import { setCookieDomain } from '@deppon/deppon-utils';

const app = createApp(App);
setCookieDomain(); // 在应用创建时调用
app.mount('#app');