常用的JS组件

发表于 · 归类于技术 · 阅读完需 17 分钟 · 报告错误

本文档所需的js文件均可到cdnjs库中查找，以下是cdnjs的镜像库

一、JQuery

$(function () {
    // 点击事件
    $('button[name=submit]').on('click',function(){
        ...
    });
});

$.ajax({
    type : "post",
    url : CONTEXT_PATH + '/cusviews/pipe/showPipeList',
    data : {},
    success : function(data){
        debugger;
        var result = jQuery.parseJSON(data);
        renderNation(result);
    }
});

二、Bootstrap

基本

三、LayUI

layui文档

四、Echarts

Echarts

function renderNation(_data){
    var option = {...};
    myChart.setOption(option);
}

五、iconfont

图标

六、wangEditor

富文本编辑器

七、viewerjs

展示图片

八、docsify.js

九、sweetalert2

官方文档地址：https://sweetalert2.github.io/

弹窗组件

十、marked

十一、exceljs

十二、mockjs

使用Mock.js生成数据代码

var modata = Mock.mock({
    "tableData|2000":[{
        "name":"@cname","date":"@date","address":"@city(true)"
    }]
});

生成的数据如下

{
    "tableData":[
        {
            "name":"江磊",
            "date":"2014-01-17",
            "address":"湖北省 孝感市"
        },
        ...
        {
            "name":"郑涛",
            "date":"1986-02-24",
            "address":"云南省 普洱市"
        }
    ]
}

十三、crypto-js

AES

AES加密方法主要有ECB和CBC两种方式， CBC需要秘钥key和偏移量iv，ECB只需要秘钥key

function getAesStringByCBC(data,key,iv){//加密
    var key  = CryptoJS.enc.Utf8.parse(key);
    var iv   = CryptoJS.enc.Utf8.parse(iv);
    var encrypted =CryptoJS.AES.encrypt(data,key,
        {
            iv:iv,
            mode:CryptoJS.mode.CBC,
            padding:CryptoJS.pad.Pkcs7
        });
    return encrypted.toString();    //返回的是base64格式的密文
}

var key = CryptoJS.enc.Utf8.parse("1234567812345678");
var plaintText = 'github.com';
var encryptedData = CryptoJS.AES.encrypt(plaintText, key, {
    mode: CryptoJS.mode.ECB,  
    padding: CryptoJS.pad.Pkcs7
});

MD5加密

CryptoJS.MD5(text).toString().toUpperCase();

SHA256加密

CryptoJS.SHA256(text).toString().toUpperCase();

base64转换

CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(inputstring)); //编码
CryptoJS.enc.Utf8.stringify(CryptoJS.enc.Base64.parse("MTIz"));      //解码

十四、dayjs日期工具

<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/plugin/duration.min.js"></script>

dayjs().format('YYYYMMDDHHmmss'); //生成20220924193656的格式
dayjs().format('YYYY-MM-DD HH:mm:ss'); //生成2022-09-24 19:36:56的格式
dayjs.unix(value).format("YYYY-MM-DD"); //秒级时间戳转成日期格式
dayjs.unix(value).format("YYYY-MM-DD HH:mm:ss"); //秒级时间戳转成日期时间格式
dayjs(datetime).unix(); //日期格式转为秒级时间戳

// 倒计时
dayjs.extend(window.dayjs_plugin_duration);
function daojishi(endTime){
    var diffTime = dayjs.duration(endTime * 1000 - dayjs());
    var year     = diffTime.years();  //年
    var month    = diffTime.months(); //月
    var day      = diffTime.days();   //天
    var hours    = diffTime.hours();  //小时
    var minutes  = diffTime.minutes(); //分
    var seconds  = diffTime.seconds(); //秒
    return `${year}年${month}月${day}天${hours}小时${minutes}分${seconds}秒`;
}
setInterval(function(){
    document.getElementById("daoji").innerHTML = daojishi(dayjs("2025-02-02").unix());
    // console.log(daojishi(dayjs("2025-02-02").unix()));
},1000);

https://dayjs.fenxianglu.cn/

十五、复制到粘贴板clipboardjs

<script src="/clipboard.js/2.0.11/clipboard.min.js"></script>
<div id="foo">copy-me</div>
<button class="btn" data-clipboard-target="#foo">
    【1】点我复制#foo的内容
</button>
<button class="btn" data-clipboard-text="copy-me">
    【2】点我复制data-clipboard-text属性的内容
</button>
<div class="clipboardobj">【3】我要被复制了</div>
<script>
    new ClipboardJS('.btn');
    new ClipboardJS('.clipboardobj',{
        text: function(trigger) {
            return trigger.innerText; //复制本身dom对象里面的文本
        }
    });
</script>

data-clipboard-target是复制一个dom对象的内容，data-clipboard-text直接复制文本

十六、获取URL参数

<script src="http://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>

console.log(window.Qs.stringify({"a":"b","b":"c"})); //a=b&b=c
console.log(window.Qs.parse("y=u&t=io")); //{"y":"u","t":"io"}
// 访问地址为/list/index.html?page=1&name=bob
console.log(window.Qs.parse(window.location.href.split("?")[1])); //{"page":1,"name":"bob"}

<script src="https://cdn.bootcdn.net/ajax/libs/urljs/2.7.0/url.min.js"></script>

var page = Url.queryString("page"); //获取index?page=3得到3
var obj  = Url.parseQuery(); //获取index?page=3&name=bob得到{"page":3,"name":"bob"}
var url  = Url.stringify({page:3,name:"bob"});//得到page=3&name=bob
const url = new URL('https://www.xuexi.com:8089/path?name=value#hashx');
console.log(url.href);     //https://www.xuexi.com:8089/path?name=value#hashx
console.log(url.origin);   //https://www.xuexi.com:8089
console.log(url.protocol); //https:
console.log(url.host);     //www.xuexi.com:8089
console.log(url.hostname); //www.xuexi.com
console.log(url.port);     //8089
console.log(url.pathname); // /path
console.log(url.search);   //?name=value
console.log(url.hash);     //#hashx

十七、强大的数据处理工具lodash.js

lodash.js提供强大的数据统计功能

var users = [
  {'user':'fred0',  'age':48,'province':'guizhou'},
  {'user':'barney1','age':34,'province':'chongqing'},
  {'user':'fred2',  'age':40,'province':'guizhou'},
];

users = _.orderBy(users, ['age','user'], ['asc', 'desc']);

// [
//     {"user":"barney1","age":34,"province":"chongqing"},
//     {"user":"fred2","age":40,"province":"guizhou"},
//     {"user":"fred0","age":48,"province":"guizhou"}
// ]

var userkey = _.keyBy(users,'user');
// {
//     "barney1":{"user":"barney1","age":34,"province":"chongqing"},
//     "fred2":{"user":"fred2","age":40,"province":"guizhou"},
//     "fred0":{"user":"fred0","age":48,"province":"guizhou"}
// }
console.log(userkey['fred2']['age']); //查找用户的年龄，省去了遍历数组查找

var usergroup = _.groupBy(users, 'province');
// {
//     "chongqing":[
//         {"user":"barney1","age":34,"province":"chongqing"}
//     ],
//     "guizhou":[
//         {"user":"fred2","age":40,"province":"guizhou"},
//         {"user":"fred0","age":48,"province":"guizhou"}
//     ]
// }

还有一些其他函数：countBy、forEach、sumBy、chunk等

lodash.js官网

☰