JavaScript 中的模块化


JavaScript 中的模块化

最早的基于立即执行函数,闭包的模块化

const MountClickModule = function(){
  let num = 0;
  const handleClick = ()=>{
    console.log(++num);
  }

  return {
    countClick:()=>{
      document.addEventListener('click',handleClick)
    }
  }
}();

MountClickModule.countClick();

(function(module{
module.say = ()=>{
  console.log(num)  //undefined
  //do something
}
})(MountClickModule);

MountClickModule.say();

这种闭包的坏处:

  • 扩展模块间无法访问私有变量。
  • 强依赖模块导入的顺序,项目变大后不好维护。

AMD 和 CommonJS 模块化JavaScript 应用

AMD 和 CommonJS 是两个互相竞争的标准,均可定义 JavaScript 模块。除了语法和原理的区别之外,主要区别是 AMD 的设计理念是明确基于浏览器,而 CommonJS 的设计是面向通用 JavaScript 环境

使用 AMD 定义模块依赖

AMD 异步模块定义规范制定了定义模块的规则,这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

目前,AMD 最流行的实现是 RequireJS

  define("alpha", ["require""exports""beta"], function (require, exports, beta{
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });

AMD 提供名为 aplha 的函数,它接收一下参数:

  • 第一个参数,id,是个字符串。它指的是定义中模块的名字,这个参数是可选的。如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。
  • 第二个参数,dependencies,是个定义中模块所依赖模块的数组。
  • 第三个参数是初始化模块的工厂函数,该函数接收dependencies作为参数 AMD异步获取依赖,以避免阻塞,如果依赖来自服务器,那么这个过程将花费一些时间,知道依赖全部加载完成后,调用模块的工厂函数,并传入所有的依赖。

可以看出,AMD 有一下几项有点:

  • 异步加载模块,避免阻塞。
  • 自动处理依赖,我们无需考虑模块的引入顺序。
  • 在同一个文件中可以定义多个模块。

CMD

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出,在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:

define(function (require, exports, module{
  const foo = require('./foo')
  a.doSomething()
  // ...
  const bar = require('./bar'// 依赖可以就近书写
  b.doSomething()
  // do something else
})

CommonJS

AMD 的设计明确基于浏览器,而 CommonJS 的设计是面向通用 JavaScript 环境。CommonJS 目前在 Nodejs 社区中具有最多的用户。CommonJS 使用基于文件的模块,所以每个文件中都只能定义一个模块,CommonJs 提供变量 module,该变量具有属性 exports,通过 exports 很容易扩展属性。最后,module.exports 作为模块的公共接口。

const beta = require('beta');
function alpha(){
    return beta.verb();
    //Or:
    return require("beta").verb();
}

module.exports = alpha;

CommonJS 要求一个文件就是一个模块,文件中的代码就是模块的一部分,所以不需要使用立即执行函数来包装变量,在模块中定义的变量都是安全的再模块中,不会泄露到全局作用域。只有通过 module.exports 对象暴露的对象或函数才可以在函数外部访问 CommonJS 具有以下特点:

  • 基于文件系统。
  • 引入模块时文件同步加载,可以访问模块的公共接口。
  • 模块加载相对更快 这是 CommonJS 在服务端更流行的原因。

ES6 模块的导入导出

ES6 模块结合了CommonJS 和 AMD 的有点,具体如下:

  • 与 CommonJS 类似,ES6模块语法相对简单,并且基于文件(每一个文件就是一个模块)
  • 与 AMD 类似,ES6 模块支持异步加载模块。

既 ES6 结合了两种模块化的有点,基于文件系统,既支持异步也支持同步,因为浏览器并没有实现 ES6 的模块化 API 所以具体是异步还是同步取决于loader api

ES6 模块的主要思想是必须显示的使用标志符导出模块,才能从外部访问模块。其他标志符,甚至在最顶级作用域中定义的标识符,只能在模块中使用。 ES6 引入两个关键字:

  • export —- 从模块外部指定标识符。
  • import —- 导入模块标识符。

从index.js模块中导出:

  const hello = 'hello';
  export const name = 'yunfly'

  export function sayHi(){
    return `${hello} ${name}!`
  }

也可以在模块最后一起导出:

  // foo.js
  const hello = 'hello';
  export const name = 'yunfly'

  export function sayHi(){
    return `${hello} ${name}!`
  }

  export { name, sayHi }

  // export { name as firstName, sayHi }
  

  // bar.js

  // 使用 as 设置导如别名
  import { name as firstName, sayHi } from 'foo'

  console.log(name)
  sayHi()

  //bar2.js
  // 导出全部标识符:
  import * as sayModule from 'foo';

  console.log(sayModule.name)
  sayModule.sayHi()

默认导出 export default 被认为是有害的

// foo.js
class Foo {}

export default Foo


// bar.js
import Foo from './foo';

这存在一些可维护性的问题:

  • 如果你在 foo.ts 里重构 Foo,在 bar.ts 文件中,它将不会被重新命名;
  • 如果你最终需要从 foo.ts 文件中导出更多有用的信息(在你的很多文件中都存在这种情景),那么你必须兼顾导入语法。
  • 在 ts 中默认导出的可发现性非常差,你不能智能的辨别一个模块它是否有默认导出。

文章参考:《JavaScript忍者秘籍》

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

» JavaScript 中的模块化

发表评论

免登录下载网,提供全网最优质的资源集合!