库
常用函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/***** 工具库 *****/ var getID = function (str) { return document.getElementById(str); }; var getClass = function (str, num = 0) { return document.getElementsByClassName(str)[num]; } var firstUpper = function (str) { return str.slice(0, 1).toUpperCase() + str.slice(1); }; var removeDOM = function (dom) { var parentNode = dom.parentNode; if (parentNode) { parentNode.removeChild(dom); } }; var getStyle = function (ele, style) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[style]; } else { return ele.currentStyle[style]; } }; var installEvent = function (obj) { // 发布-订阅模式/观察者模式 obj.eventList = []; obj.listen = function (key, fn) { if (!this.eventList[key]) { this.eventList[key] = []; } this.eventList[key].push(fn); }; obj.trigger = function () { var key = Array.prototype.shift.call(arguments); var fns = this.eventList[key]; if (!fns || fns.length === 0) { return false; } for (var i = 0, fn; fn = fns[i++];) { fn.apply(this, arguments); } }; obj.remove = function (key, fn) { var fns = this.eventList[key]; if (!fns) { return false; } if (!fn) { fns && (fns.length = 0); } else { for (var i = fns.length - 1; i >= 0; i--) { var _fn = fns[l]; if (_fn === fn) { fns.splice(i, 1); } } } } }; var randomNum = function (min, max) { return Math.floor(min + Math.random() * (max - min)); } Function.prototype.before = function (beforeFn) { var _self = this; return function () { beforeFn.apply(this, arguments); return _self.apply(this, arguments); } } Function.prototype.after = function (afterFn) { var _self = this; return function () { var ret = _self.apply(this, arguments); afterFn.apply(this, arguments); return ret; } } export { getID, getClass, firstUpper, removeDOM, getStyle, installEvent, randomNum }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var getOffset = function (el) { var scrollTop = el.getBoundingClientRect().top + document.body.scrollTop + document.documentElement.scrollTop; var scrollLeft = el.getBoundingClientRect().left + document.body.scrollLeft + document.documentElement.scrollLeft; return { top: scrollTop, left: scrollLeft }; };
Fade 特效
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// Fade in var fadeIn = function (el) { el.style.opacity = 0 var last = +new Date() var tick = function () { el.style.opacity = +el.style.opacity + (new Date() - last) / 400 last = +new Date() if (+el.style.opacity < 1) { requestAnimationFrame(tick)) } } tick() } // Fade out var fadeOut = function (el) { el.style.opacity = 1 var last = +new Date() var tick = function () { el.style.opacity = +el.style.opacity - (new Date() - last) / 400 last = +new Date() if (+el.style.opacity > 0) { requestAnimationFrame(tick) } } tick() }
获取节点在该父节点下的坐标
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var index = function (el) { if (!el) { return -1; } var i = 0; while ((el = el.previousElementSibling)) { i++; } return i; };
清空子节点
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var empty = function (el) { while (el.firstChild) { el.removeChild(el.firstChild); } };
reduce 数据去重
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
const data = [{ name: "Kris", age: "24" }, { name: "Andy", age: "25" }, { name: "Kitty", age: "25" }, { name: "Andy", age: "25" }, { name: "Kitty", age: "25" }, { name: "Andy", age: "25" }, { name: "Kitty", age: "25" } ]; const dataReducer = (prev, cur, idx) => { let obj = {}; const { name } = cur; obj[name] = cur; return { ...prev, ...obj }; }; const reducedData = data.reduce(dataReducer, {}); let newData = Object.values(reducedData);
批量生成对象元素
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
const createList = (item, idx) => { let obj = {}; obj[`a${idx}`] = "data"; return obj; }; const listReducer = (acc, cur) => (!acc ? { ...cur } : { ...cur, ...acc }); const obj = Array.from(new Array(20), createList).reduce(listReducer);
常用组合
自建类及其使用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//define export default class Background { constructor() { this.x = 0 } draw() { imgDraw(this.x); }; } //use import Background from './Background'; export default class Controller { constructor(){ this.background = new Background(); } }
其他
Put the favorites in the favorites and empty the favorites.