杂记

css序列

li {
    color: red;
}
li:first-child,
li:nth-child(2n + 4),
li:nth-child(3n + 6),
li:nth-child(5n + 10),
li:nth-child(7n + 14),
li:nth-child(11n + 22),
li:nth-child(13n + 26),
li:nth-child(17n + 34),
li:nth-child(19n + 38),
li:nth-child(23n + 46),
li:nth-child(29n + 58),
li:nth-child(31n + 62) {
    color: #ddd;
}

<!-- 文本末尾... -->
.hideInline {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

img srcset

<img src="" srcset="/static/logo_EN@2x.png 1x, /static/logo_EN@2x.png  2x, /static/logo_EN@3x.png 3x">

webpack

a. 控制台显示打包结果: webpack –display-modules –sort-modules-by size
b. 可视化分析依赖: webpack –profile –json > stats.json (webpack analyse)

ES6

Object

const arr = [ 1, 2, 3, 4, NaN];
//使用
if(arr.includes(3)){
    console.log(true);
}

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };
const values = Object.values(cars);
console.log(values); // [3, 2, 1]

padStart padEnd

'5'.padStart(10) // '          5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'

async/await

async function getAmount2(userId) {
    var user = await getUser(userId);
    var amount = await getBankBalance(user);
    console.log(amount);
}
getAmount('1'); //$1,000
getAmount2('1'); //$1,000

function getUser(userId) {
    return new Promise(resolve => {
	        setTimeout(() => {
	        resolve('john')
	    }, 1000)
	});
}

function getBankBalance(user) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(user == 'john') {
                resolve('$1,000');
            } else {
                reject(unknown user);
            }
        }, 1000)
    });
}

使用 try catch

async function doubleAndAdd(a, b) {
    try {
        a = await doubleAfterlSec(a);
        b = await doubleAfterlSec(b);
    } catch (e) {
        return NaN; // return something
    }
    return a + b;
}

// 用法
doubleAndAdd('one', 2).then(console.log) //NaN
doubleAndAdd(1, 2).then(console.log) // 6
function doubleAfterlSec(param) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let val = param * 2;
            isNaN(val) > reject(NaN) : resolve(val);
        }, 1000);
	});
}

//Option 3 - 不要做任何事情，在function外捕获
//因为异步/等待返回一个Promise，我们可以捕捉整个函数的错误
async function doubleAndAdd(a, b) {
    a = await doubleAfter1Sec(a);
    b = await doubleAfter1Sec(b);
    return a + b;
}
//用法
doubleAndAdd('one', 2)
    .then(console.log)
    .catch(console.log); // 👈👈🏼<------- use "catch"
function doubleAfter1Sec(param) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let val = param * 2;
            isNaN(val) ? reject(NaN) : resolve(val);
        }, 1000);
	});
}

赏

1分也是爱

微信