江苏龙网

  1. 主页 > 生活百科 > >

内含95个工具函数 前端大佬都在使用的JavaScript工具函数宝典

JavaScript工具函数


内含95个工具函数 前端大佬都在使用的JavaScript工具函数宝典

文章插图
 
01 为元素添加on方法Element.prototype.on = Element.prototype.addEventListener;NodeList.prototype.on = function (event, fn) {、[]['forEach'].call(this, function (el) {el.on(event, fn);});return this;};02 为元素添加trigger方法Element.prototype.trigger = function(type, data) {var event = document.createEvent("htmlEvents");event.initEvent(type, true, true);event.data = https://www.isolves.com/it/cxkf/yy/js/2020-08-05/data || {};event.eventName = type;event.target = this;this.dispatchEvent(event);return this;};NodeList.prototype.trigger = function(event) {[]["forEach"].call(this, function(el) {el["trigger"](event);});return this;};03 转义html标签function HtmlEncode(text) {return text.replace(/&/g, "&").replace(/"/g, '"').replace(/</g, "<").replace(/>/g, ">");}04 HTML标签转义// HTML 标签转义// @param {Array.<DOMString>} templateData 字符串类型的tokens// @param {...} ..vals 表达式占位符的运算结果tokens//function SaferHTML(templateData) {var s = templateData[0];for (var i = 1; i < arguments.length; i++) {var arg = String(arguments[i]);// Escape special characters in the substitution.s += arg.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");// Don't escape special characters in the template.s += templateData[i];}return s;}// 调用var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;05 跨浏览器绑定事件function addEventSamp(obj, evt, fn) {if (!oTarget) {return;}if (obj.addEventListener) {obj.addEventListener(evt, fn, false);} else if (obj.attachEvent) {obj.attachEvent("on" + evt, fn);} else {oTarget["on" + sEvtType] = fn;}}06 加入收藏夹function addFavorite(sURL, sTitle) {try {window.external.addFavorite(sURL, sTitle);} catch (e) {try {window.sidebar.addPanel(sTitle, sURL, "");} catch (e) {alert("加入收藏失败，请使用Ctrl+D进行添加");}}}07 提取页面代码中所有网址var aa = document.documentElement.outerHTML.match(/(url(|src=https://www.isolves.com/it/cxkf/yy/js/2020-08-05/|href=)["']*([^"'()<>[] ]+)["')]*|(http://[w-.]+[^"'()<>[] ]+)/gi).join("rn").replace(/^(src=|href=|url()["']*|["'>) ]*$/gim, "");alert(aa);08 动态加载脚本文件function Appendscript(src, text, reload, charset) {var id = hash(src + text);if (!reload && in_array(id, evalscripts)) return;if (reload && $(id)) {$(id).parentNode.removeChild($(id));}evalscripts.push(id);var scriptNode = document.createElement("script");scriptNode.type = "text/JAVAscript";scriptNode.id = id;scriptNode.charset = charset? charset: BROWSER.firefox? document.characterSet: document.charset;try {if (src) {scriptNode.src = https://www.isolves.com/it/cxkf/yy/js/2020-08-05/src;scriptNode.onloadDone = false;scriptNode.onload = function() {scriptNode.onloadDone = true;JSLOADED[src] = 1;};scriptNode.onreadystatechange = function() {if ((scriptNode.readyState == "loaded" ||scriptNode.readyState == "complete") &&!scriptNode.onloadDone) {scriptNode.onloadDone = true;JSLOADED[src] = 1;}};} else if (text) {scriptNode.text = text;}document.getElementsByTagName("head")[0].appendChild(scriptNode);} catch (e) {}}09 返回顶部的通用方法function backTop(btnId) {var btn = document.getElementById(btnId);var d = document.documentElement;var b = document.body;window.onscroll = set;btn.style.display = "none";btn.onclick = function() {btn.style.display = "none";window.onscroll = null;this.timer = setInterval(function() {d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);if (d.scrollTop + b.scrollTop == 0)clearInterval(btn.timer, (window.onscroll = set));}, 10);};function set() {btn.style.display = d.scrollTop + b.scrollTop > 100 ? "block" : "none";}}backTop("goTop");10 实现base64解码function base64_decode(data) {var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";var o1,o2,o3,h1,h2,h3,h4,bits,i = 0,ac = 0,dec = "",tmp_arr = [];if (!data) {return data;}data += "";do {h1 = b64.indexOf(data.charAt(i++));h2 = b64.indexOf(data.charAt(i++));h3 = b64.indexOf(data.charAt(i++));h4 = b64.indexOf(data.charAt(i++));bits = (h1 << 18) | (h2 << 12) | (h3 << 6) | h4;o1 = (bits >> 16) & 0xff;o2 = (bits >> 8) & 0xff;o3 = bits & 0xff;if (h3 == 64) {tmp_arr[ac++] = String.fromCharCode(o1);} else if (h4 == 64) {tmp_arr[ac++] = String.fromCharCode(o1, o2);} else {tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);}} while (i < data.length);dec = tmp_arr.join("");dec = utf8_decode(dec);return dec;}


推荐阅读


上一篇：怀孕喝浓茶有什么坏处,有什么禁忌

下一篇：喝薄荷水的好处与坏处,喝胖大海的禁忌与作用