自定义JS模块

离逝的枫

已于 2023-03-28 13:05:13 修改

阅读量425

点赞数

分类专栏： JS 文章标签： javascript 前端

于 2023-03-27 22:52:44 首次发布

本文链接：https://blog.csdn.net/qq_51130780/article/details/129805898

版权

JS 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

一：什么要定义JS模块

在web开发的过程中，我们往往会发现，使用的JS代码会有一定的重复性，例如在表单的填写中一个页面使用了账号密码的验证而另一个页面使用了年龄的验证，虽然这些代码的逻辑可能不一样，但是这些代码都是服务与一点的，验证信息是否正确的，因此我们可以将服务于同一功能的代码抽离到一个公共的JS模块中，当我们需要的时候就直接导入使用即可。

二：自定义JS模块的好处

代码复用：通过将相关的代码封装在一个模块中，可以在多个项目或文件中重复使用，避免了代码的冗余。
可维护性：模块化可以使代码更易于维护和更新，因为可以将代码分解成更小的部分，使得每个部分更容易被理解和修改。
命名空间隔离：自定义JS模块可以通过使用闭包或ES6的模块语法来创建一个私有命名空间，避免了全局命名空间的污染。
提高代码性能：将代码分解成较小的模块可以提高代码的性能，因为只有需要的模块被加载和执行。
提高代码安全性：通过将敏感信息隐藏在模块内部，可以提高代码的安全性，防止信息被非授权的访问。

三：如何实现JS模块的自定义

3.1利用闭包实现

下面是一段简单的模块代码，我们可以将相同的功能的代码抽离到公共模块中，例如我们可以在函数内部定义一些其他的局部变量，然后通过正则表达式来验证上述中所声明的相关功能。并且在使用的时候引入该模块

function moudle(){
  var message = 'hello Word'
  function showMessage(){
    console.log(message);
  }
  function showCapital(){
    console.log(message.toLocaleUpperCase());
  }
  return{
    showMessage:showMessage,
    showCapital:showCapital
  }
}

在JS中引入该文件路径后，进行相关的使用，但是要注意的是，当我们不在使用时，一定要将其释放掉，因为由于闭包的存在。并不会在我们使用结束的时候，自行的将其释放掉，因此我们在结束使用的时候就需要将 f1 = null 来手动释放。但是在实际过程中我们很少使用这种方法，因此毕竟存在着闭包。如果不手动释放，可能会存在着内存泄漏问题

    var f1 = moudle()
    f1.showMessage();
    f1.showCapital();

3.2匿名函数

我们可以利用在全局的window上进行添加如下的方法，这种我们在使用的时候可以直接使用对应的方法名来进行调用，而不需要像上一种方法来先调用这个moudle。

(function (window) {
  var message = 'hello Word'
  window.showMessage = function showMessage() {
    console.log(message);
  }
  window.showCapital = function showCapital() {
    console.log(message.toLocaleUpperCase());
  }
})(window)