Еще раз разберитесь в различиях между модулями AMD, CMD, CommonJS и ES6.

внешний интерфейс

предисловие

Вспоминая предыдущее интервью, первый раунд интервьюеров спросил меня, в чем разница между AMD и CMD, и я только ответил, что AMD выполняет предварительную загрузку, а CMD — загрузку по запросу. Во втором раунде интервьюер спросил меня, в чем разница между CommonJS и модулем ES6, эммм..., я грубо ответил, что новый лучше старого~~, хотя интервьюер ничего не сказал, но, очевидно, ответ не да Это полезно для интервью и для накопления ваших собственных навыков.

Поэтому необходимо провести прочесывание, чтобы яснее понять их характеристики и отличия.

AMD

AMD начинала как черновик спецификации CommonJS, полное название которой — определение асинхронного модуля, представляющее собой механизм асинхронной загрузки модулей. Позже автор черновика реализовал спецификацию AMD с помощью RequireJS, поэтому, вообще говоря, AMD также ссылается на RequireJS.

Базовое использование RequireJS

пройти черезdefineчтобы определить модуль, используйтеrequireОпределенные модули могут быть импортированы.

//a.js
//define可以传入三个参数，分别是字符串-模块名、数组-依赖模块、函数-回调函数
define(function(){
    return 1;
})

// b.js
//数组中声明需要加载的模块，可以是模块名、js文件路径
require(['a'], function(a){
    console.log(a);// 1
});

Особенности RequireJS

Для зависимых модулей AMD уважаетЗависит от фронта, выполняется заранее. То есть вdefineМодуль зависимости (массив), переданный в методе, будет загружен и выполнен в начале.

CMD

CMD — это спецификация для определения модуля, созданная SeaJS в процессе продвижения. В загрузчике модулей на стороне веб-браузера SeaJS и RequireJS вызываются вместе. Автором SeaJS является Ю Бо из Alibaba.

Базовое использование SeaJS

//a.js
/*
* define 接受 factory 参数，factory 可以是一个函数，也可以是一个对象或字符串，
* factory 为对象、字符串时，表示模块的接口就是该对象、字符串。
* define 也可以接受两个以上参数。字符串 id 表示模块标识，数组 deps 是模块依赖.
*/
define(function(require, exports, module) {
  var $ = require('jquery');

  exports.setColor = function() {
    $('body').css('color','#333');
  };
});

//b.js
//数组中声明需要加载的模块，可以是模块名、js文件路径
seajs.use(['a'], function(a) {
  $('#el').click(a.setColor);
});

Особенности SeaJS

Для зависимых модулей CMD учитываетЗависимость рядом, отложенное выполнение. То есть только доrequireКогда зависимые модули выполняются.

CommonJS

Спецификация CommonJS предложена группой CommonJS, чтобы компенсировать отсутствие механизма модульности на серверной стороне JavaScript.NodeJS и webpack реализованы на основе этой спецификации.

Базовое использование CommonJS

//a.js
module.exports = function () {
  console.log("hello world")
}

//b.js
var a = require('./a');

a();//"hello world"

//或者

//a2.js
exports.num = 1;
exports.obj = {xx: 2};

//b2.js
var a2 = require('./a2');

console.log(a2);//{ num: 1, obj: { xx: 2 } }

Возможности CommonJS

  • Весь код выполняется в области модуля и не загрязняет глобальную область;
  • Модуль загружается синхронно, то есть только после завершения загрузки могут быть выполнены следующие операции;
  • Модуль будет закэширован после первого выполнения, и при повторной загрузке модуля будет возвращен только кешированный результат.Если вы хотите выполнить его снова, вы можете очистить кеш;
  • Вывод CommonJS — это копия значения (т. е.requireВозвращаемое значение является копией выходного значения, и изменения внутри модуля не повлияют на это значение).

ES6 Module

Модуль ES6 — это модульная система, указанная в ES6.По сравнению с упомянутыми выше спецификациями, модуль ES6 имеет больше преимуществ и, как ожидается, станет распространенным модульным решением для браузеров и серверов.

Основное использование модуля ES6

//a.js
var name = 'lin';
var age = 13;
var job = 'ninja';

export { name, age, job};

//b.js
import { name, age, job} from './a.js';

console.log(name, age, job);// lin 13 ninja

//或者

//a2.js
export default function () {
  console.log('default ');
}

//b2.js
import customName from './a2.js';
customName(); // 'default'

Особенности модуля ES6 (по сравнению с CommonJS)

  • Модуль CommonJS загружается во время выполнения, а модуль ES6 является выходным интерфейсом во время компиляции;
  • CommonJS загружает весь модуль, загружает все интерфейсы, а модуль ES6 может загружать один из интерфейсов отдельно;
  • Вывод CommonJS — это копия значения, а вывод модуля ES6 — это ссылка на значение, и внутреннее изменение модуля вывода повлияет на изменение ссылки;
  • CommonJS thisУказывает на текущий модуль, модуль ES6.thisнаправлениеundefined;

В настоящее время браузер не очень совместим с модулем ES6. Мы обычно используем его в WebPack.export/import, который будет переведен в собственный механизм загрузки модулей webpack.

написать на обороте

Здесь несколько основных спецификаций модульности в JavaScript перечислены в относительно широком виде, в надежде получить общее представление о модульности JavaScript без подробного анализа деталей, а заинтересованные партнеры по внешнему интерфейсу могут изучить их отдельно.


Категории