javascript代码模块化解决方案

我们用模块化的思想进行网页的编写是为了更好的管理我们的项目,模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能。

一、服务器和桌面环境中的Javascript代码模块化:CommonJS Modules/2.0 规范,特点是同步加载。

  CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中。CommonJS规范是为了解决JavaScript的作用域问题而定义的模块形式,可以使每个模块在它自身的命名空间中执行。该规范的主要内容是:模块必须通过 module.exports导出对外的变量或接口,通过require()来导入其他模块的输出到当前模块。CommonJS是同步加载模块,Node是服务端语言,遵循的是CommonJS规范,同步加载模块,例如:
  require("module");
  require("../file.js");
  exports.doStuff = function() {};
  module.exports = someValue;

优点:

  1.服务器端便于重用
  2.NPM中已经将近20w个模块包
  3.简单并容易使用

缺点:
  1.同步的模块方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
  2.不能非阻塞的并行加载多个模块

二、浏览器环境中的Javascript代码模块化:AMD和CMD规范,特点是异步加载。

1.AMD: define + require
  对应的实现是 require.js (模块加载器),特点是依赖前置,推崇复用接口,不符合通用的模块思维方式,是一种妥协的实现。

2.CMD: exports + require
  对应的实现是 sea.js (模块加载器),特点是依赖就近(相当于按需加载),推崇单用接口。

3.ES6: export + import

  由于ES6本身是原生语言支持实现的模块化,但是现代浏览器大多都还未支持,因此必须使用相应的编译工具转换成ES5的AMD,CMD模块,再借助于systemjs/requirejs等模块加载器才能使用。其中ES6的编译一般是用babel,他的作用是可以使用ES6及更高版本,无需等待浏览器支持。

4.webpack

  webpack 是一个预编译模块打包的方案,由于是预编译的,不需要在浏览器中加载解释器。在本地直接写JS,不管是AMD/CMD/ES6风格的模块化,它都能认识,并且编译成浏览器认识的JS。

猜你喜欢

转载自www.cnblogs.com/heroljy/p/9051165.html
今日推荐