JavaScript封装常见的函数来提高工作效率

高端章鱼哥
103 阅读6分钟

在JavaScript开发中，通过封装常用函数可以显著提升工作效率和代码的可维护性。以下将详细解析几种常见函数的封装方法，并提供相应的解释与优化建议，帮助您在项目中高效复用代码。🚀✨

常见函数封装示例 🛠️

1. 获取元素的函数 getElement

function getElement(selector) {
    return document.querySelector(selector);
}

详细解释

  • 功能：简化获取单个DOM元素的操作。
  • 参数：selector —— CSS选择器字符串，用于定位目标元素。
  • 返回值：匹配选择器的第一个元素，如果不存在则返回null。

优化建议

  • 增加错误处理，确保选择器有效。

  • 支持获取多个元素。

    function getElement(selector, all = false) { return all ? document.querySelectorAll(selector) : document.querySelector(selector); }

2. Ajax请求函数 ajaxRequest

function ajaxRequest(url, method, data, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    };
    xhr.send(data);
}

详细解释

  • 功能：封装异步HTTP请求，简化Ajax调用。

  • 参数：

    • url —— 请求的目标URL。
    • method —— HTTP方法，如GET、POST。
    • data —— 发送的数据，通常为字符串或FormData对象。
    • callback —— 请求成功后的回调函数。

  • 流程：

    1. 创建XMLHttpRequest对象。
    2. 初始化请求，设置方法和URL。
    3. 监听readystatechange事件，判断请求状态。
    4. 发送请求数据。

优化建议

  • 增加错误处理，处理非200状态码。

  • 支持Promise，提升异步操作的可读性。

    function ajaxRequest(url, method = 'GET', data = null) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(xhr.responseText); } else { reject(Error: ${xhr.status}); } } }; xhr.onerror = function() { reject('Network Error'); }; xhr.send(data); }); }

3. 本地存储操作函数 storage

var storage = {
    set: function(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    get: function(key) {
        var value = localStorage.getItem(key);
        return value ? JSON.parse(value) : null;
    },
    remove: function(key) {
        localStorage.removeItem(key);
    }
};

详细解释

  • 功能：封装localStorage的基本操作，简化数据存取。

  • 方法：

    • set(key, value) —— 存储数据，将对象序列化为JSON字符串。
    • get(key) —— 获取数据，解析JSON字符串回对象。
    • remove(key) —— 移除指定键的数据。

优化建议

  • 增加错误处理，防止JSON解析失败。

  • 支持会话存储（sessionStorage）。

    var storage = { set: function(key, value, session = false) { const storageType = session ? sessionStorage : localStorage; storageType.setItem(key, JSON.stringify(value)); }, get: function(key, session = false) { const storageType = session ? sessionStorage : localStorage; const value = storageType.getItem(key); try { return value ? JSON.parse(value) : null; } catch (e) { console.error('解析存储数据失败', e); return null; } }, remove: function(key, session = false) { const storageType = session ? sessionStorage : localStorage; storageType.removeItem(key); } };

4. 日期格式化函数 formatDate

function formatDate(date, format) {
    var options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
    };
    return date.toLocaleString(undefined, options);
}

详细解释

  • 功能：格式化日期对象为可读字符串。

  • 参数：

    • date —— Date对象。
    • format —— 指定的格式（当前未使用）。

  • 返回值：格式化后的日期字符串。

优化建议

  • 支持多种格式，通过format参数自定义输出。

  • 使用国际化选项提升灵活性。

    function formatDate(date, format = 'default') { const optionsMap = { default: { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' }, short: { year: '2-digit', month: 'numeric', day: 'numeric' }, time: { hour: '2-digit', minute: '2-digit', second: '2-digit' } }; const options = optionsMap[format] || optionsMap['default']; return date.toLocaleString(undefined, options); }

5. 定时器函数 delay

function delay(func, time) {
    return setTimeout(func, time);
}

详细解释

  • 功能：封装setTimeout，简化定时执行函数的操作。

  • 参数：

    • func —— 要执行的函数。
    • time —— 延迟时间，单位为毫秒。

  • 返回值：定时器的ID，可用于取消定时器。

优化建议

  • 支持Promise，提升异步操作的可读性。

  • 增加取消定时器的方法。

    function delay(time) { return new Promise(resolve => setTimeout(resolve, time)); }

功能对比表 📊

功能

原始方法

封装后方法

优化点

获取元素

document.querySelector

getElement(selector, all)

支持获取多个元素，增加灵活性

Ajax请求

XMLHttpRequest

ajaxRequest(url, method, data)

增加Promise支持，完善错误处理

本地存储操作

localStorage.setItem 等

storage.set(key, value, session)

增加会话存储支持，完善错误处理

日期格式化

Date.prototype.toLocaleString

formatDate(date, format)

支持多种格式，自定义灵活性

定时器

setTimeout

delay(time)

使用Promise简化异步操作

工作流程图 🔄

最佳实践建议 💡

  1. 代码复用：通过封装常用函数，减少重复代码，提高开发效率。
  2. 模块化设计：将相关功能封装在模块中，增强代码的可维护性和可扩展性。
  3. 错误处理：在封装函数中添加完善的错误处理机制，提升代码的健壮性。
  4. 文档注释：为封装函数添加详细的注释，方便团队协作与后续维护。
  5. 测试覆盖：编写单元测试，确保封装函数的正确性和稳定性。

常见问题及解决方案 ❓

问题

原因

解决方案

获取元素失败

选择器错误或元素不存在

检查选择器是否正确，确保DOM元素已加载

Ajax请求未响应

URL错误或网络问题

验证URL有效性，检查网络连接

本地存储数据解析失败

存储的数据非JSON格式

确保存储的数据为JSON字符串，或调整解析逻辑

日期格式化不符合预期

格式选项设置不当

调整formatDate函数的格式选项，参考toLocaleString文档

定时器无法取消

未保存定时器ID或取消逻辑缺失

保存setTimeout的返回值，并使用clearTimeout取消定时器

总结 📝

通过封装常见的JavaScript函数，不仅可以提高代码的复用性，还能够提升开发效率和代码的可维护性。关键步骤包括：

  1. 识别常用功能：确定项目中频繁使用的操作，如DOM操作、Ajax请求、存储管理等。
  2. 编写封装函数：将这些操作封装为独立的函数或模块，简化调用过程。
  3. 优化与扩展：根据实际需求，增加功能选项和错误处理，提升函数的健壮性。
  4. 集成与测试：在项目中集成封装函数，并进行充分的测试，确保其稳定性。

通过遵循上述方法，您可以构建一个高效、模块化的代码库，显著提升开发效率和项目质量。💪🔧

作为程序员，持续学习和充电非常重要，作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。低代码

也是一个值得我们深入探索的领域，让我们拭目以待，它将给前端世界带来怎样的变革，推荐一个低代码工具。

应用地址：www.jnpfsoft.com
开发语言：Java/.net

这是一个基于Flowable引擎(支持java、.NET)，已支持MySQL、SqlServer、Oracle、PostgreSQL、DM（达梦）、 KingbaseES（人大金仓）6个数据库，支持私有化部署，前后端封装了上千个常用类，方便扩展，框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用。

至少包含表单建模、流程设计、报表可视化、代码生成器、系统管理、前端 UI 等组件，这种情况下我们避免了重复造轮子，已内置大量的成熟组件，选择合适的组件进行集成或二次开发复杂功能，即可自主开发一个属于自己的应用系统。

avatar
文章
阅读
粉丝