JS技巧

1. 字符串
   1. 格式化金钱
   2. 生成随机ID
   3. 生成随机HEX色值
   4. 生成星级评分
   5. 操作URL查询参数
2. 数值
   1. 取整：代替正数的Math.floor()，代替负数的Math.ceil()
   2. 补零
   3. 转数值：只对null、""、false、数值字符串有效
   4. 时间戳
   5. 精确小数
   6. 判断奇偶
   7. 取最小最大值
3. 函数
   1. 一次性函数：适用于运行一些只需执行一次的初始化代码
   2. 惰性载入函数：函数内判断分支较多较复杂时可大大节约资源开销
   3. 优雅处理Async/Await参数
4. DOM
   1. 显示全部DOM边框：调试页面元素边界时使用
   2. 自适应页面：页面基于一张设计图但需做多款机型自适应，元素尺寸使用rem进行设置
   3. 阻止冒泡
   4. 阻止默认行为

字符串

格式化金钱

const thousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = thousandNum(19941112);
// money => "19,941,112"

生成随机ID

const randomId = len => Math.random().toString(36).substr(3, len);
const id = randomId(10);
// id => "jg7zpgiqva"

生成随机HEX色值

const randomColor = () => "##" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
const color = randomColor();
// color => "##f03665"

生成星级评分

const startScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = startScore(3);
// start => "★★★"

操作URL查询参数

// https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
const params = new URLSearchParams(location.search.replace(/\?/ig, "")); 
// location.search = "?name=yajun&sex=female"
params.has("yajun"); // true
params.get("sex"); // "female"

数值

取整：代替正数的Math.floor()，代替负数的Math.ceil()

const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1

补零

const fillZero = (num, len) => num.toString().padStart(len, "0");
const num = fillZero(169, 5);
// num => "00169"

转数值：只对null、""、false、数值字符串有效

const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169

时间戳

const timestamp = +new Date("2019-03-31");
// timestamp => 1553990400000

精确小数

const roundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = roundNum(1.69, 1);
// num => 1.7

判断奇偶

const num = 0;
const odd = !!(num & 1);
// odd => false

取最小最大值

const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2

函数

一次性函数：适用于运行一些只需执行一次的初始化代码

function Func() {
    console.log("x");
    Func = function() {
        console.log("y");
    }
}

惰性载入函数：函数内判断分支较多较复杂时可大大节约资源开销

function Func() {
    if (a === b) {
        console.log("x");
    } else {
        console.log("y");
    }
}
// 换成
function Func() {
    if (a === b) {
        Func = function() {
            console.log("x");
        }
    } else {
        Func = function() {
            console.log("y");
        }
    }
    return Func();
}

优雅处理Async/Await参数

function AsyncTo(promise) {
    return promise.then(data => [null, data]).catch(err => [err]);
}
const [err, res] = await AsyncTo(Func());

DOM

显示全部DOM边框：调试页面元素边界时使用

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

自适应页面：页面基于一张设计图但需做多款机型自适应，元素尺寸使用rem进行设置

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}

阻止冒泡

function stopBubble(e) { 
    //如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation(); 
    else 
        //否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true; 
}

阻止默认行为

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
        
    return false; 
}