You Don't Know the Hack tech in the frontend development

You Don't Know the Hack tech in the frontend development

你所不知道的前端黑科技

css in js animation

https://www.ifchange.com/

live demo

See the Pen css in js 黑科技 by xgqfrms
(@xgqfrms) on CodePen.

js hover/over event

https://www.ifchange.com/about#done

onmouseover

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

// 单行写一个评级组件
let rate = 1;
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
// "★☆☆☆☆"

JavaScript 错误处理

// JavaScript Error & StackOverflow

const log = console.log;

try {
  // throw new Error(`ts`);// ts
  const err = {
    type: "ts",
    message: "ts error",
  };
  // throw new Error(err);
  throw new Error(JSON.stringify(err));
} catch (e) {
  log(e, typeof e, e.message)
  // Error: {"type":"ts","message":"ts error"}
  // "object" "{"type":"ts","message":"ts error"}"
  const obj = JSON.parse(e.message)
  log(obj)
  const {
    type,
    message,
  } = obj;
  window.parent.location.href = `https://stackoverflow.com/search?q=[${type}]+${message}`;
}

// JavaScript Error & StackOverflow

const log = console.log;

try {
  const err = {
    type: "ts",
    message: "ts error",
  };
  throw new Error(JSON.stringify(err));
} catch (e) {
 //  log(e, typeof e, e.message)
  const {
    type,
    message,
  } = JSON.parse(e.message);
  window.parent.location.href = `https://stackoverflow.com/search?q=[${type}]+${message}`;
}

CSS 黑科技

UI 结构检测，加 1px 边框

// UI 结构检测，加 1px 边框

[].forEach.call($$("*"), function(a){
   a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

// OR
Array.prototype.forEach.call(document.querySelectorAll('*'),  dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`);

void 0 === undefined
// true

Array(6).fill(8)

//  (6) [8, 8, 8, 8, 8, 8]

// 金融数字格式化
// 1234567890 --> 1,234,567,890

// 正则实现

const test1 = '1234567890'
const format = test.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

console.log(format);
// 1,234,567,890

// 非正则实现

 function formatCash(str) {
       return str.split('').reverse().reduce((prev, next, index) => {
            return ((index % 3) ? next : (next + ',')) + prev
       })
}

console.log(formatCash('1234567890'));
// 1,234,567,890

refs

https://juejin.im/entry/5998f8396fb9a0247c6ec9cd

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---