在 HTML 里写模块化的 JS 代码

有时候，我们会写一些单文件的 HTML（不使用框架）。通过对 JS 的模块化，可以让代码更加容易维护

代码里可能有很多个方法，其中的几个是服务于同一个功能，我们可以把它们集合到一块（放到同一个对象下面）管理

var myFeature = {
  init: function() {
    // xxx
  }
}

// 这样一来，读起来就非常清晰，一看代码就知道是在执行某一功能的某一个方法，
// 而不是一下子暴露大量的细节
myFeature.init()

上面的代码有一个问题，就是可以在 myFeature 这个对象之外去更改对象里的方法

为了便于维护，我们希望 myFeature 的里的方法（很明确地）就是在 myFeature 内部定义的，也就是说我们想实现它的属性的私有性

var myFeature = (function() {

  // 私有的方法，只能在 myFeature 内部使用
  var privateFunction = function() {
    // xxx
  }

  var init = function() {
    privateFunction()
    // xxx
  }

  // 暴露给外界的 API
  return {
    init: init
  }
})()

myFeature.init()

// 对于以上的代码，myFeature 就是一个模块
// 模块的内部有其相应的 方法、变量，但只有那些对外公开的方法和变量才能被模块之外使用
// 这样一来，相关联的功能得到了聚合，不用再写流水账一样的代码

我们用一个自执行的函数实现了 myFeature 属性的私有化，在 myFeature 的外面是无法直接操作 privateFunction 的，只能操作 myFeature 返回的公开的 API（也就是 init 方法）。

总结

其实就是通过自执行函数将一部分功能相近的方法聚合到一起，在需要的时候，通过对外暴露的公开 API 去调用。

通过这样的模式，我们可以在简单的 HTML 里实现模块化的 JS 代码编写

体验小程序「简易记账」

关注公众号「特想学英语」

在 HTML 里写模块化的 JS 代码

在 HTML 里写模块化的 JS 代码

总结

为您推荐