写点什么

每天学习 10 个实用 Javascript 代码片段(五)

用户头像
devpoint
关注
发布于: 3 小时前
每天学习10个实用Javascript代码片段(五)

每天学习 10 个实用 Javascript 代码片段,加深对 Javascript 语法的理解,积累代码优化经验,第天终于来了,如果觉得内容能够带来点帮助,可以收藏,又或者有用到的需求片段,不妨在留言区留言。

1. 函数链

初次接触函数链是在 jQuery 刚出来的时候,那时觉得链式调用很酷。函数链是 JavaScript 的一个概念,常用于单个对象或者类中的多个函数,自己喜欢在公共方法集中以支持方法的链式调用。下面就是一个简单的片段:


function CusModal() {    const This = this;    this.options = {        theme: "default",        title: "modal",        visible: false,    };    const setOptions = function (key, value) {        This.options[key] = value;    };    this.setTheme = function (theme) {        setOptions("theme", theme);        return this;    };    this.setTitle = function (title) {        setOptions("title", title);        return this;    };    this.show = function () {        setOptions("visible", true);    };    this.close = function () {        setOptions("visible", false);    };    this.getOptions = function () {        return this.options;    };}
const modalHelper = new CusModal();// 设置弹窗主题、设置标题、显示modalHelper.setTheme("dark").setTitle("发布文章窗口").show();
console.log(modalHelper.getOptions()); // { theme: 'dark', title: '发布文章窗口', visible: true }
复制代码


上面的代码片段模拟了一个 Modal 方法类,可以设置主题、标题、显示和关闭。

2. Error handling

try catch 语句常用于处理程序异常,将代码放入 try 块中,如果一切正常,就完全按照 try 块中的逻辑执行,如果发生异常,代码会执行 catch 块,可以在 catch 块中加入异常处理的逻辑,finally 对于 try catch 也非常重要,finally 块是在 try catch 语句执行后执行,即不管是否有异常都会执行finally


const testError = (val) => {    try {        const number = 100 / val;        return number;    } catch (error) {        return error;    } finally {        console.log("finally");    }};console.log(testError(10));  // finally  10console.log(testError(0));  // finally Infinity
复制代码


从上面执行结果可以看出,不管有没有异常都会执行 finally 块中的语句。

3. 数组最大数最小数

这是一种查找数组中最大数或者最小数的方法之一,也可以通过循环来实现这一需求,下面分享一种简单方法:


const findMax = (arrayNumbers) => Math.max(...arrayNumbers);const findMin = (arrayNumbers) => Math.min(...arrayNumbers);const arrNumbers = [10, 13, 1, 48, 6, 216];console.log(findMax(arrNumbers)); // 216console.log(findMin(arrNumbers)); // 1
复制代码

4.查找重复次数最多

查找重复项或者重复次数最多的元素,算是一个常见的需求,下面的片段适合字符串数组和数字数组,如下:


function maxRepeated(array) {    return array        .sort(            (a, b) =>                array.filter((v) => v === a).length -                array.filter((v) => v === b).length        )        .pop();}const arrString = ["china", "beijing", "shenzhen", "shanghai", "shenzhen"];const arrNumbers = [10, 20, 30, 10, 20, 10];console.log(maxRepeated(arrString)); // shenzhenconsole.log(maxRepeated(arrNumbers)); // 10
复制代码

5. 科学计数完整显示

在项目中有遇到 API 返回数字是以科学计数法的方式,在页面上需要显示完整的数字,通常并不清楚科学计数的数字是小数点多少位,因此在精度方面不好固定。下面代码实现了一个小数点后大于 0 的数字三位,如下:


function flatNumber(num) {    const strNumber = num.toFixed(30);    console.log(strNumber);    const arrayNumbers = [...strNumber];    const numberIndex = arrayNumbers.findIndex(        (item) => parseInt(item, 10) > 0    );    const precision = numberIndex >= 0 ? numberIndex + 1 : 0;    return num.toFixed(precision);}
const number = 1.71604938271605e-8;console.log(number.toFixed(30)); // 0.000000017160493827160499945830console.log(flatNumber(number)); // 0.0000000172
复制代码

6. 定时器

定时器,在项目开发过程中结果过,使用定时器需要严格控制定时器的启动与关闭,避免过多定时器没有关闭导致内存泄露,下面代码实现了一个定时器的开启与停止:


class Timer {    constructor(fn, delay) {        this._triggerTimer = null;        this._delay = delay;        this._fn = fn;    }
stop() { if (this._triggerTimer) { clearTimeout(this._triggerTimer); this._triggerTimer = null; } }
begin() { this.stop(); this._triggerTimer = setTimeout(() => { this._fn(); }, this._delay); }}let timerCount = 0;const timerHelper = new Timer(() => { timerCount++; if (timerCount < 5) { console.log(timerCount); timerHelper.begin(); } else { timerHelper.stop(); }}, 2000);timerHelper.begin();
复制代码


上面代码将输出 1 2 3 4 后停止。

7. 将输入复制到剪贴板

function copyToClipboard(inputID) {    navigator.clipboard.writeText(document.querySelector(inputID).value);}
复制代码

8. 检查标签浏览器是否在视图中

根据浏览器标签页是否在视图/焦点中返回 truefalse


const isBrowserTabIsFocus = () => document.hidden;
复制代码

9. 捕获鼠标右击

window.oncontextmenu = () => {    console.log("点击了右键");};
复制代码

10. 返回顶部

返回顶部,在内容比较多的网页上常见,方便用户快速回到页面顶部,实现的代码如下:


const scrollToTop = () => {    const scrollToTop =        document.documentElement.scrollTop || document.body.scrollTop;    if (scrollToTop > 0) {        window.requestAnimationFrame(scrollToTop);        window.scrollTo(0, scrollToTop - scrollToTop / 8);    }};scrollToTop();
复制代码

总结

在项目开发中,有很多代码片段会被重复利用,借此机会为自己做一个收藏。

发布于: 3 小时前阅读数: 2
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
每天学习10个实用Javascript代码片段(五)