前端开发如何包装可重用的 JavaScript 代码

4年前更新

09460

在日常工作中，你可能写过很多 JavaScript 代码，有些基础性的功能，甚至那些需要重复使用的业务功能，总不愿意重复再写上一遍。

如果是通过复制的方式来达到重用目的话，暂不说复制来复制去容易出错，一旦使用该功能的业务达到上十个之多时，任何一个重用的基础功能出现 BUG，都要在各个业务同步修复，费时费力，最后把自己搞的精疲力尽，从此厌恶写代码，甚至对生活失去信心，哈哈。

那如何提高这种 JS 代码的重用性呢？（这句话等同于如何提升开发效率）

那就是学会包装那部分可重用的代码，接下来我谈一下自己的看法，及我平时是怎么做的。

一. 如果你是正常的流式开发

如果你的代码是一个大文件，找机会把可以重用的功能提取到自包含的对象中，放入到一个单独的库中。

若发现已经有了在所有项目开发中重复使用的一组函数，考虑将它们打包，以通过一个对象直接量来重用。

下面举一个简单的例子：

下面这段代码，包含三个可以在各个业务中高度复用的功能。

function getElem(indetifier) {
  return document.getElementById(indertifier)
}

function stripslashes(str) {
  return str.replace(/\\/g, '')
}

function removeAngleBrachets(str) {
  return str.replace(/</g, '<').replace(/>/g, '>')
}

我们可以将它转换成一个对象的自面量的形式来重用。如下所示：

var jscbObject = {
  //返回元素
  getElem: function(indetifier) {
    return document.getElementById(indertifier)
  },
  stripslashes: function(str) {
    return str.replace(/\\/g, '')
  },
  removeAngleBrachets: function(str) {
    return str.replace(/</g, '<').replace(/>/g, '>')
  }
}

上面我们取了全局空间中的 3 个函数，并且将它们转换为一个对象上的三个方法，这不仅减少了全局空间中的杂乱，而且有助于防止与其它库中类似的函数名称相冲突。

二. 如果你是组件化开发项目

近年来，组件化的方式开发项目成为业界主流。那么组件化开发时，我们是如何包装可重用代码的了。

1. 写成组件

同一个在项目里，一般都会有一些需要重用的基础功能模块和基础业务 UI 组件，可以将这些分别独立写在一个文件里，供其它各个业务模块进行调用。特别是在多人合作的团队中，这样能极大的提高开发效率。尤其是使用 ES6 语法之后，公共组件的组装也变得更加灵活和简单。

2. 封装成安装包

正如文章开头所说的，在不同的业务中如何更高效的共享这些公用基础模块，我们一般都是将其封装成一个 npm 安装包。发到 npm 库中，（当然，T 公司有自己的私有库，类似于 NPM）项目使用的时候直接在项目所在的目录中运行 npm install XXX –save 就可以。维护起来是不是更多加方便了。