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

栏目: JavaScript · 发布时间: 4年前

内容简介:对非数字的内容,返回默认想展示的内容defaultVal || 0,否则返回原值对undefined/null/''(空字符串),返回默认想展示的内容defaultVal || '--',否则返回原值对undefined/null/''(空字符串)返回false,其他返回true
  • github : github.com/Javison666/…
  • 引用库,后续 $fn 直接当作全局进行使用
    import $fn from 'jj-browser-fn'
    复制代码
  • js工具函数(浏览器环境)

    • 默认处理非数值的内容为0
    • 默认处理空字符串为'--'
    • 将编码由utf8转为utf16
    • 将编码由utf16转为utf8
    • 对字符串进行base64编码
    • 对字符串进行base64解码
    • 将html字符实体转译成html字符
    • 将html字符转译成html字符实体

字符处理

默认处理非数值的内容为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()
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

腾讯之道

腾讯之道

艾永亮、刘官华、梁璐 / 机械工业出版社 / 2016-7-19 / 59

放眼整个中国乃至全球,腾讯都是一家成功的互联网企业,它代表中国企业在世界互联网版图中竖起了一面高高的旗帜。腾讯为何能取得如此大的成就,它的成功方法和商业逻辑是什么?你是不是和无数中国企业和商界人士一样,都想向腾讯取取经,但是又不得其门而入? 腾讯一直以低调、务实著称,所 以腾讯及其内部员工都极少对外界分享他们的经验;加之腾讯的商业模式多元、业务繁多且交叉、体量又极其庞大,使得从外部来系统研究......一起来看看 《腾讯之道》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具