资讯专栏INFORMATION COLUMN

用于业务的精炼js工具函数(浏览器环境)

Forest10 / 955人阅读

摘要:工具函数浏览器环境引用库,后续直接当作全局进行使用工具函数浏览器环境字符处理默认处理非数值的内容为默认处理空字符串为判断是否有值给添加参数将编码由转为将编码由转为对字符串进行编码对字符串进行解码数字处理显示两位小数的金额千

js工具函数(浏览器环境)

github : github.com/Javison666/…

引用库,后续 $fn 直接当作全局进行使用

import $fn from "jj-browser-fn"

js工具函数(浏览器环境)

字符处理

默认处理非数值的内容为0

默认处理空字符串为"--"

判断是否有值

给URL添加参数

将编码由utf8转为utf16

将编码由utf16转为utf8

对字符串进行base64编码

对字符串进行base64解码

数字处理

显示两位小数的金额

千位符显示数字

时间处理

自定义格式

距离当前时间差处理

cookie操作

链接操作

ajax请求

设备信息

获取系统版本

html字符与实体转换

将html字符实体转译成html字符

将html字符转译成html字符实体

LocalStorage操作

dom操作

自定义扩展 $fn

字符处理 默认处理非数值的内容为0

对非数字的内容,返回默认想展示的内容defaultVal || 0,否则返回原值

$fn.n(null) //返回0
$fn.n(1) //返回1
$fn.n("1") //返回"1"
$fn.n("1a") //返回0
$fn.n("1a",null) //返回null
默认处理空字符串为"--"

对undefined/null/""(空字符串),返回默认想展示的内容defaultVal || "--",否则返回原值

$fn.s(null) //返回"--"
判断是否有值

对undefined/null/""(空字符串)返回false,其他返回true

$fn.hasValue(null) //返回false
给URL添加参数
$fn.urlAddParams(url,{
    user:"admin"
})
将编码由utf8转为utf16
$fn.utf8to16(str) 
将编码由utf16转为utf8
$fn.utf16to8(str) 
对字符串进行base64编码
$fn.encodeBase64(str) 
对字符串进行base64解码
$fn.decodeBase64(str) 
数字处理 显示两位小数的金额
$fn.showMoney(34) //返回0.34
$fn.showMoney(1234) //返回12.34
千位符显示数字
$fn.showThousandMoney(1234) //返回1,234.00
时间处理 自定义格式

YMDhms直接替换对应时间单位,格式可自由替换

没有参数直接返回Y-M-D h:m:s(如2018-01-01 12:21:45)

有参数则直接替换

$fn.showDate() //返回当前时间2018-01-01 12:21:45
$fn.showDate("Y-M-D h:m:s",new Date("2018-01-01 12:21:45")) //返回2018-01-01 12:21:45
$fn.showDate("Y-M",new Date("2018-01-01 12:21:45")) //返回2018-01
距离当前时间差处理

获取参数时间戳距离当前的时差,超过1秒显示秒,超过1分显示分,超过1时显示时,超过1天显示天,超过1年显示*年

$fn.diffToNow(new Date()) //返回0秒
cookie操作
$fn.setCookie(cname, cvalue, exdays)
$fn.getCookie(cname, cvalue, exdays)
$fn.clearCookie(cname, cvalue, exdays)
链接操作
//跳转链接
$fn.toHref(href)    
//打开新的标签页
$fn.toOpen(href)
//解析url为可操作的的对象
$fn.parseUrl(href)
//上报url,只通过图片形式上传
$fn.reportUrl(url,{
    id:123
})
ajax请求

均返回promise对象,供.then()或async/await调用

// post请求,application/x-www-form-urlencoded;
$fn.httpGet({
    url:"/api/test",
    data:{
        username:"admin"
    }
})
// post请求,application/x-www-form-urlencoded;
$fn.httpPost({
    url:"/api/test",
    data:{
        username:"admin"
    }
})
// post请求,application/json;charset=UTF-8;
$fn.httpPost({
    url:"/api/test",
    json:{
        username:"admin"
    }
})
// 自定义;
$fn.httpPost({
    url:"/api/test",
    data:{
        username:"admin"
    },
    headers:{
        "Content-Type":"test"
    }
})
// 初始化时,自定义所有请求拦截
$fn.setRequestTestFn((data)=>{
    if(data.code==40000){
        //对所有请求的数据做处理
    }
})
设备信息
$fn.getDeviceType()
/** 返回设备环境的判断对象
{
    isMoble: /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()), //判断是否为移动端
    isAppleMobile: /iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent
        .toLowerCase()), //是否为苹果移动端
    isAndroidMobile: /android/i.test(navigator.userAgent.toLowerCase()), //是否为安卓移动端
    isUc: /ucweb/.test(UserAgent), // UC浏览器
    isChrome: /chrome/.test(UserAgent.substr(-33, 6)), // Chrome浏览器
    isFirefox: /firefox/.test(UserAgent), // 火狐浏览器
    isOpera: /opera/.test(UserAgent), // Opera浏览器
    isSafire: /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire浏览器
    is360: /360se/.test(UserAgent), // 360浏览器
    isBaidu: /bidubrowser/.test(UserAgent), // 百度浏览器
    isSougou: /metasr/.test(UserAgent), // 搜狗浏览器
    isIE6: /msie 6.0/.test(UserAgent), // IE6
    isIE7: /msie 7.0/.test(UserAgent), // IE7
    isIE8: /msie 8.0/.test(UserAgent), // IE8
    isIE9: /msie 9.0/.test(UserAgent), // IE9
    isIE10: /msie 10.0/.test(UserAgent), // IE10
    isIE11: /msie 11.0/.test(UserAgent), // IE11
    isLB: /lbbrowser/.test(UserAgent), // 猎豹浏览器
    isWX: /micromessenger/.test(UserAgent), // 微信内置浏览器
    isQQ: /qqbrowser/.test(UserAgent), // QQ浏览器
    isIpad: /ipad/.test(UserAgent), // ipad
    isIphone: /iphone os/.test(UserAgent), // iphone
    isAndroid: /android/.test(UserAgent), //安卓
    isWindowsCe: /windows ce/.test(UserAgent),
    isWindowsMobile: /windows mobile/.test(UserAgent),
    isWin2K: /windows nt 5.0/.test(UserAgent),
    isXP: /windows nt 5.1/.test(UserAgent),
    isVista: /windows nt 6.0/.test(UserAgent),
    isWin7: /windows nt 6.1/.test(UserAgent),
    isWin8: /windows nt 6.2/.test(UserAgent),
    isWin81: /windows nt 6.3/.test(UserAgent),
    isWin10: /windows nt 10.0/.test(UserAgent),
    isTouchScreen: ("ontouchstart" in window) || window.DocumentTouch &&
        document instanceof DocumentTouch,
    isChromeOnAndroid
}
*/
$fn.getExplorerInfo()
/** 返回浏览器版本信息
{
    type:"IE",/Firefox/Chrome/Opera/Safari
    version:""
}
*/
获取系统版本
// 返回 Mac/Unix/Linux/Win2000/WinXP/Win2003/WinVista/Win7/Win10/other
$fn.detectOS()
html字符与实体转换 将html字符实体转译成html字符
$fn.decodeHtmlEntities(str)
将html字符转译成html字符实体
$fn.encodeHtmlEntities(str)
LocalStorage操作
//设置值
$fn.setStorage(key,value)
//获取值
$fn.getStorage(key)
//删除值
$fn.removeStorage(key)
//清空
$fn.clearStorage()
dom操作
// 添加监听事件,event 不含"on"
$fn.addListen(dom,event,fn)
// 去除监听事件
$fn.removeEvent(dom,event,fn)
// 删除dom
$fn.removeDom(dom)
// 添加动画效果的class,动画结束后,该class会被删除
$fn.addAnimateClass(dom,className)
// 添加摇晃的class->"shake"
$fn.shake(dom)
// 是否含有class,返回Boolean
$fn.hasClass(dom,className)
// 删除className
$fn.removeClass(dom,className)
// 切换className
$fn.toggleClass(dom,className)
自定义扩展 $fn
import Fn from "jj-browser-fn/main.js"
class ProjFn {
    constructor() {

    }
}
ProjFn.prototype.__proto__ = Fn.prototype
export default new ProjFn()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/6746.html

相关文章

  • HelloType:JS运行时数据类型检查工具

    摘要:进入主页使用文档是一个设计简单的运行时的数据类型检查工具,它可以帮助你的程序在使用某个组变量前,对变量的数据类型进行检查,防止在使用变量进行运算时由于数据类型不同导致报错。 showImg(https://segmentfault.com/img/bVbfW41?w=1380&h=500); 进入GitHub主页使用文档 HelloType是一个api设计简单的js运行时的数据类型检查...

    Heier 评论0 收藏0
  • ❤️数据科学-Pandas、Numpy、Matplotlib秘籍之精炼总结

    前言: 先感受一下数据科学的魅力,上图是在Smart Dubai 2017 GITEX科技周展台上推出Smart Decision-Making Platform(智能决策平台),于10月8日至12日在迪拜世界贸易中心举行。游客可以通过一个沉浸式的空间将数据可视化,让他们了解迪拜的未来。让参观者可以在现场查阅观看全市数据,这意味着迪拜将成为了世界上第一个与公众分享实时实时数据的城市,同时还可以预...

    Zhuxy 评论0 收藏0
  • Javascript 打包工具

    摘要:所以,打包工具就出现了,它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具,,,,以发布时间为顺序。它定位是模块打包器,而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。 本文当时写在本地,发现换电脑很不是方便,在这里记录下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以锦上添花,不使用也没关系...

    Sleepy 评论0 收藏0

发表评论

0条评论

Forest10

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<