Skip to content

AMD加载器分析与实现 #17

@creeperyang

Description

@creeperyang

什么是AMD(不是做显卡的:joy:)?如果不熟的话,require.js总应该比较熟。

AMD是_Asynchronous Module Definition_的缩写,字面上即异步模块定义。require.js是模块加载器,实现了AMD的规范。

本文想说的就是怎么实现一个类似require.js的加载器。但在这之前,我们应该了解下JS模块化的历史。

https://github.com/Huxpro/js-module-7day

这个Slides讲的比我好的多,所以想了解前端模块化的前世今生的可以去看看。这里简单总结下:

为什么需要模块化?

  1. Web Pages正在变成 Web App,应用越大那么代码也越复杂;
  2. 模块化利于解耦,降低复杂性和提高可维护性;
  3. 应用部署可以优化代码,减少http请求(避免多模块文件造成的多请求)。

前端模块历史?

  1. 无模块,全局作用域冲突;
  2. namespace封装,减少暴露给全局作用域的变量,本质是对象,不安全;
  3. IIFE;
  4. 添加依赖的IIFE,即模块化,也是现代模块化的基础;

但模块化还需要解决加载问题:

  1. 原始的script tag,有难以维护,依赖模糊,请求过多的问题;
  2. script loader,如Lab.js,基于文件的依赖管理;
  3. module loader,YUI;
  4. CommonJS,node提供的模块化和加载方案,由于是同步/阻塞加载,所以只适合服务器/本地;
  5. AMD/CMD,异步加载;
  6. Browserify/Webpack,去掉define包裹,在打包时解决模块化;
  7. ES6带来语言原生的模块化方案。

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions