首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 提取公共方法

在JavaScript中提取公共方法是提高代码复用性和可维护性的重要手段。以下是对这一概念的详细解释:

基础概念

公共方法指的是在多个地方被重复使用的函数或逻辑片段。通过将这些重复的代码提取到一个单独的函数中,可以实现代码的复用,减少冗余,并使得代码更加清晰易懂。

优势

  1. 提高代码复用性:避免在不同地方编写相同的代码,减少出错的可能性。
  2. 增强可维护性:修改公共方法时,只需在一个地方进行更改,所有调用该方法的地方都会自动更新。
  3. 提升代码可读性:将复杂的逻辑封装到函数中,使主代码更加简洁明了。
  4. 便于测试:独立的函数更容易进行单元测试,确保其功能的正确性。

类型

  1. 纯函数:不依赖外部状态,输出仅由输入决定,如数学计算函数。
  2. 工具函数:提供通用功能的函数,如日期格式化、字符串处理等。
  3. 业务逻辑函数:封装特定业务逻辑的函数,如用户认证、数据处理等。

应用场景

  • 表单验证:将验证逻辑提取为公共方法,适用于多个表单。
  • 数据处理:对数据进行清洗、转换的操作可以封装成公共方法。
  • UI组件:在多个组件中复用的渲染逻辑或样式处理。
  • API请求:封装通用的HTTP请求方法,简化数据获取过程。

示例代码

假设在多个地方需要对数组进行过滤和映射操作,可以将其提取为一个公共方法。

原始代码(重复部分):

代码语言:txt
复制
const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  // 更多用户...
];

// 处理活跃用户
const activeUsers = users.filter(user => user.active).map(user => user.name);
console.log(activeUsers); // ['Alice']

// 另一处同样需求
const admins = [
  { id: 101, name: 'Admin1', active: true },
  { id: 102, name: 'Admin2', active: false },
  // 更多管理员...
];

const activeAdmins = admins.filter(admin => admin.active).map(admin => admin.name);
console.log(activeAdmins); // ['Admin1']

提取公共方法后:

代码语言:txt
复制
/**
 * 过滤并映射数组中的活跃项
 * @param {Array} array - 要处理的数组
 * @param {String} key - 判断活跃的键
 * @param {String} mapKey - 映射返回的键
 * @returns {Array} - 处理后的新数组
 */
function getActiveItems(array, key = 'active', mapKey = 'name') {
  return array.filter(item => item[key]).map(item => item[mapKey]);
}

const activeUsers = getActiveItems(users);
console.log(activeUsers); // ['Alice']

const activeAdmins = getActiveItems(admins);
console.log(activeAdmins); // ['Admin1']

遇到的问题及解决方法

问题1:公共方法的参数设计不合理,导致复用性受限。

解决方法:确保公共方法接受足够的参数,使其能够适应不同的使用场景。可以使用默认参数或可选参数来增加灵活性。

问题2:过度提取导致方法过于复杂,难以维护。

解决方法:遵循单一职责原则,每个公共方法只负责一个功能。如果方法变得复杂,可以考虑进一步拆分。

问题3:命名不明确,难以理解方法的用途。

解决方法:采用有意义的命名,清晰表达方法的功能。例如,getActiveUsersprocessArray更具描述性。

总结

提取公共方法是优化JavaScript代码的有效策略。通过合理设计和应用公共方法,可以显著提升代码质量、可维护性和开发效率。在实际开发中,应根据具体需求灵活运用这一技术,以达到最佳效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • ArcGIS根据相邻关系提取相邻面&提取面公共线

    如何把有相邻面的面全部给提出来 提取公共边 面转线 提取相邻边界公共线,注意勾选识别和存储面邻域信息 生成的线要素属性表中LEFT_FID 和 RIGHT_FID字段均不为-1即是该相邻面的公共线...按属性选择LEFT_FID为-1的字段,然后切换选择,导出要素即可获得公共边 公共边如图所示 原理(参考arcgis帮助) 1.在面几何中,外边界始终以顺时针方向存储。...3.如果两个面共用一部分边界,则将生成一条输出线表示该公共线段。该线的方向可以是任意的;LEFT_FID 和 RIGHT_FID 将相应地设置为左侧或右侧面要素 ID。...可以看出如果两个面之间如果存在公共边界,则输出的属性字段为该线左侧或右侧面要素 ID。...而要素ID不能为复数,故LEFT_FID 和 RIGHT_FID均为正数的字段即为公共边 提取相邻面 使用公共边选择建筑面图层即可提取出有相邻面的面 而提取不相邻的面只需要切换选择即可

    1.6K10

    三:多页面解决方案--提取公共代码

    这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。...代码目录结构如下图所示: 最终,成功提取公共代码,如下图所示: 这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。...值得注意的是,针对第三方库(例如lodash)通过设置priority来让其先被打包提取,最后再提取剩余代码。...所以,上述配置中公共代码的提取顺序其实是: ... ... vendor: { name: "vendor", test: /[\\/]node_modules[\\/]/, chunks:...可以看到,我们成功提取了公共代码,如下图所示: 最后,打包的结果在dist/文件夹下面,我们要在index.html中引用打包好的js文件,index.html代码如下: <html lang="en

    71431

    js提取字符串中数字的几种方法

    利用js脚本从一串字符串中提取数字有多种方法,下面大熊博客就来简单的介绍几种常用到的。 js提取字符串中数字的方法 1、利用  parseFloat() 方法提取字符串中的数字。...parseFloat() 方法提取字符串中的数字,有很多的限制。它只能提取开头为数字的字符串中的数字,如果字符串的开头第一个字符为非数字,则会提取失败。.../ 123.4 console.log(parseFloat('daxion.cn1234')); // NaN console.log(parseFloat('m123.5')); //NaN 2、JS...使用正则提取字符串中的数字 例1: 可以利用正则的方法将字符串中非数字的字符给去掉,留下的就是数字啦。...但要注意的是,如果是要想提取数字中有非整数的部份(带有小数点的数),则无法提取小数点。

    12.9K41

    RSviewSE软件调用公共画面方法

    1、参数调用 参数文件调用是在RSviewSE软件比较容易理解的一种方法,其主要作用就是让所有相同的设备使用同一个弹出框画面,只替换弹出画面内的不同变量,如公共画面内的操作对象如按钮、数字显示、字符串显示等控件的相应事件或属性内关联一个公共的变量...在参数文件内,我们需要将公共画面内使用到的#+数字格式的变量替换为实际的变量,比如我创建的一个控制7号水源井水泵的参数文件,里面按照实际的变量7号水源井的#1和#2对应的实际变量。...参数文件创建完毕后,我们在实际调用时,就需要调用这个参数文件,我们可以在按钮的事件内写,也可以在某个控件的点击事件里面写,如下图,我需要对7号水井进行操作,就需要在7号水井的图标上配置点击事件,事件触发时弹出公共操作画面并将画面内关联的变量全都替换为...在项目运行起来后就可以实现很多个设备调用公共画面的功能。 2、全局对象 全局对象(Global Objects),主要用于创建一些图标,让组态人员在需要组态很多相同设备图标时可以方便一些。

    46730

    Twitter是如何部署公共JS组件的?

    Twitter有一个对外开放的JS组件,widgets.js,其他站长可以把这个js嵌入到自己的网页中,就可以有Twitter的一些功能(类似新浪微博开放的JS组件) 为了让站长简单方便的集成,所有功能都在这一个...js文件中,引用时也不需要版本号 widgets.js 的访问量巨大,每秒30万次 所以,这个js的更新部署是个比较麻烦的任务,如何安全的部署新版,出现问题时把影响范围尽量降低?...CDN IP1 的请求会从源1获取 widgets.js,IP2 的请求会从源2获取 3....Origin 源 是上传 widgets.js 的地方,CDN 会从 Origin 获取最新的 widgets.js Origin 1 上是旧版,Origin 2 上是新版,流量被逐渐转移到 Origin...2,当部署完全成功后,widgets.js 会被拷贝到 Origin 1,然后把所有流量都转到 Origin 1 部署过程中发现问题的话,立即把所有流量转到 Origin 1,实现快速回退 widgets.js

    1.4K80

    js提取主域及获取当前时区

    本文链接:https://ligang.blog.csdn.net/article/details/44243909 最近,在做项目时用到了两个比较好的js插件,在这里推荐给大家: 提取主域:tldjs.js...获取当前时区:jstz-1.0.4.min.js 一、提取主域 tldjs.js可以轻松判断主域的存在、提取主域、提取子域等 判断主域是否存在: tld.tldExists('google.com...return '' tld.getSubdomain('moar.foo.google.co.uk'); // returns 'moar.foo' 让用户填写URL时,我们经常允许填写IP,此时提取主域需注意...profileName = profileName; // 如果是IP,完成保留IP }else{ profileName = tldjs.getDomain(profileName); // 否则,提取主域...} 二、获取当前时区 jstz.min.js可以获取当前时区(时区ID) 示例: var timezone = jstz.determine(); timezone.name(); //

    4.2K41
    领券