Обязательный элемент для фронтенд-инженеров: модульность фронтенда

JavaScript

понимание модульности

  • Что такое модуль?
    • Инкапсулировать сложную программу в несколько блоков (файлов) по определенным правилам (спецификациям) и объединять их вместе;
    • Внутренние данные/реализация блока являются закрытыми, только некоторые интерфейсы (методы) выставлены наружу для связи с другими внешними модулями;
  • Состав модуля
    • данные ---> внутренние свойства;
    • Поведение манипулирования данными ---> внутренние функции;
  • Под модуляризацией понимается процесс разделения системы на несколько модулей сверху вниз при решении сложной задачи.
  • Модульное кодирование: при кодировании модули кодируются один за другим, и весь проект является модульным проектом;

немодульная задача

  • Проблема загрузки страницы несколькими js:
<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript" src="module2.js"></script>
<script type="text/javascript" src="module3.js"></script>
<script type="text/javascript" src="module4.js"></script>
  • Возникла проблема:
    • сложно поддерживать;
    • Зависит от неоднозначности;
    • слишком много запросов;
  • Таким образом, эти проблемы могут быть решены современным модульным кодированием и сборкой проектов;

Преимущества модульности

  • Лучшее разделение: избегайте размещения нескольких тегов script на странице и просто загружайте один обязательный общий модуль, что хорошо для разделения HTML и JavaScript;
  • Лучшая организация кода: это способствует лучшему сопровождению кода в дальнейшем;
  • Загрузка по запросу: улучшите производительность использования, скорость загрузки и загрузите необходимые модули по запросу.
  • Избегайте конфликтов имен: сам JavaScript не имеет пространства имен, и часто возникают конфликты имен.Модульность может сделать любую форму именования в модуле более не конфликтующей с другими модулями.
  • Улучшенная обработка зависимостей: чтобы использовать модульность, вам нужно только объявить зависимости внутри модуля. Вы можете напрямую изменять модуль при его добавлении или удалении. Вам не нужно заботиться о том, от каких других модулей зависит модуль при вызове.

История модульного развития

оригинальное письмо

  • просто объединяйте различные функции вместе, даже в виде модуля;
function fun1(){
&emsp;&emsp;//...
}
function fun2(){
&emsp;&emsp;//...
}
//上面的函数fun1，fun2组成了一个模块，使用的时候直接调用某个函数就行了。
  • недостаток:
    • "Загрязненные" глобальные переменные, нет гарантии, что не будет конфликтов имен переменных с другими модулями;
    • Прямых отношений между членами модуля не наблюдается.

Обозначение объекта

  • Чтобы решить проблему загрязнения глобальных переменных, модуль можно записать как объект, и все элементы модуля будут помещены в этот объект.
&emsp;var module1 = new Object({
	count : 0,
	fun1 : function (){
&emsp;&emsp;&emsp;&emsp;&emsp;//...
&emsp;&emsp;  },
&emsp;&emsp;fun2 : function (){
&emsp;&emsp;&emsp;&emsp;&emsp;//...
&emsp;&emsp;&emsp;}
&emsp;});
&emsp;//这个里面的fun1和fun2都封装在一个赌侠宁里，可以通过对象.方法的形式进行调用；
&emsp;module1.fun1();
  • преимущество:
    • Уменьшено количество переменных на глобале;
  • недостаток:
    • Суть — это объект, и этот объект будет выставлять все члены модуля, а внутреннее состояние можно переписать извне.

Функция немедленного выполнения (режим IIFE)

  • Избегайте раскрытия закрытых членов, поэтому используйте функции немедленного выполнения (функции самонастройки, IIFE);
  • Функция: данные являются частными, и снаружи могут работать только открытые методы.
var module1 = (function(){
	var count = 0;
	var fun1 = function(){
		//...
	}
	var fun2 = function(){
		//...
	}
	//将想要暴露的内容放置到一个对象中，通过return返回到全局作用域。
	return{
		fun1:fun1,
		fun2:fun2
	}
})()
//这样的话只能在全局作用域中读到fun1和fun2，但是读不到变量count，也修改不了了。
//问题：当前这个模块依赖另一个模块怎么办？

Расширение IIFE (введение зависимостей)

  • Если модуль большой и его необходимо разделить на несколько частей, или модуль должен наследовать другой модуль, необходимо использовать «расширенный режим»;
  • Улучшение режима IIFE: введение зависимостей;
  • Это краеугольный камень реализации современных модулей;
var module1 = (function (mod){
&emsp;&emsp;mod.fun3 = function () {
&emsp;&emsp;&emsp;//...
	};
	return mod;
})(module1);
//为module1模块添加了一个新方法fun3()，然后返回新的module1模块。

//引入jquery到项目中；
var Module = (function($){
    var _$body = $("body");     // we can use jQuery now!
    var foo = function(){
    console.log(_$body);    // 特权方法
    }
  // Revelation Pattern
	  return {
	      foo: foo
	  }
})(jQuery)
Module.foo();

js модульность должна решить эти проблемы:

  • 1. Как безопасно обернуть код модуля? (без загрязнения кода вне модуля)
  • 2. Как однозначно идентифицировать модуль?
  • 3. Как элегантно выставить API модуля? (Невозможно добавить глобальные переменные)
  • 4. Как удобно использовать зависимые модули?

Модульная спецификация

  • Узел: серверная часть
  • Browserify: на стороне браузера

CommonJS: серверная часть

  • Обзор

    • Приложения Node состоят из модулей, использующих спецификацию модулей CommonJS.
    • Спецификация CommonJS предусматривает, что внутри каждого модуля переменная модуля представляет текущий модуль. Эта переменная является объектом, чьим свойством exports (т.е. module.exports) является внешний интерфейс. Загрузка модуля фактически загружает свойство module.exports модуля.

  • Функции

    • Весь код выполняется в области модуля и не загрязняет глобальную область.
    • Модуль можно загружать несколько раз, но он будет запущен только один раз при первой загрузке, а затем текущий результат будет кэширован, а при последующей загрузке кэшированный результат будет прочитан напрямую. Чтобы модуль снова заработал, необходимо очистить кеш.
    • Порядок загрузки модулей, порядок их появления в коде.

  • Основной синтаксис:

    • Определите открытый модуль: экспорт
    exports.xxx = value
// 通过module.exports指定暴露的对象value
module.exports = value
    • модуль импорта: требуется
    var module = require('模块相对路径')

  • Когда происходит импорт модуля?

    • Узел: среда выполнения, представленная динамически и синхронно;
    • Просмотр: скомпилируйте/переведите/упакуйте модуль перед запуском (зависимые модули были включены), запустите упакованный js и не нужно импортировать зависимые модули с удаленного компьютера во время выполнения;

Спецификация общего модуля CommonJS (синхронно)

  • Node внутренне предоставляет конструктор модуля. Все модули являются экземплярами Module.
  • Внутри каждого модуля есть объект модуля, представляющий текущий модуль.
  • Атрибут module.exports представляет внешний интерфейс вывода текущего модуля.Когда другие файлы загружают модуль, они фактически считывают переменную module.exports.
  • Node предоставляет переменную экспорта для каждого модуля, указывающую на module.exports.
  • Если внешний интерфейс модуля представляет собой одно значение, его нельзя вывести с помощью экспорта, а можно вывести только с помощью module.exports.
  • Спецификация Modules/1.0 включает:
    1. Правила идентификации модулей (условия написания)
    2. Определите глобальную функцию require, импортируйте другие модули, передав идентификатор модуля, а результатом выполнения будет API, предоставляемый модулем;
    3. Если модуль, введенный функцией require, также содержит зависимости, то загружаем эти зависимости по очереди;
    4. Если импорт модуля завершился неудачно, функция require должна сообщить об исключении;
    5. Модуль предоставляет API через экспорт переменной, а назначение экспорта может предоставить только один объект.exports = {Obj}, открытый API должен использоваться как свойство этого объекта. Суть экспорта заключается в объекте, который вводит module.exports. Вы не можете указать переменную exports напрямую на значение, потому что это обрывает связь между exports и module.exports.
    6. Если выставляется не переменная exports, а module.exports. Переменная модуля представляет собой текущий модуль.Эта переменная представляет собой объект, свойство экспорта (т.е. module.exports) которого является внешним интерфейсом. Загрузка модуля фактически загружает свойство module.exports модуля.exports=module.exports={Obj}
учебник по commonJS в узле
  • 1. Установите node.js;
  • 2. Создайте структуру проекта
//结构如下
|-modules
	|-module1.js//待引入模块1
	|-module2.js//待引入模块2
	|-module3.js//待引入模块3
|-app.js//主模块
|-package.json
	{
	  "name": "commonjsnode",
	  "version": "1.0.0"
	}

  • 3. Скачать сторонние модули: например экспресс

    npm i express --save

  • 4. Модульное кодирование

// module1 
// 使用module.exports = value向外暴露一个对象
module.exports = {
	name: 'this is module1',
    foo(){
        console.log('module1 foo()');
    }
}
// module2 
// 使用module.exports = value向外暴露一个函数 
module.exports = function () {
    console.log('module2()');
}
// module3 
// 使用exports.xxx = value向外暴露一个对象
 exports.foo = function () {
     console.log('module3 foo()');
 };
 exports.bar = function () {
     console.log('module3 bar()');
 };
 exports.name = 'this is module3'

//app.js文件
var uniq = require('uniq');
//引用模块
let module1 = require('./modules/module1');
let module2 = require('./modules/module2');
let module3 = require('./modules/module3');
//使用模块
module1.foo();
module2();
module3.foo();
module3.bar();
module3.name;
  • 5. Запустите app.js через узел
    • Команда: node.app.js
    • Инструменты: Щелкните правой кнопкой мыши --> Выполнить
учебник по commonJS в браузере
  • С браузером
  • шаг
    1. Создать структуру проекта
    |-js
	 |-dist //打包生成文件的目录
	 |-src //源码所在的目录
		   |-module1.js
		   |-module2.js
		   |-module3.js
		   |-app.js //应用主源文件
|-index.html //浏览器上的页面
|-package.json
	{
	   "name": "browserify-test",
	   "version": "1.0.0"
	}

    1. скачать браузер

      • Глобально: npm install browserify -g
      • Локально: npm install browserify --save-dev

    2. Определите код модуля: чтобы запустить файл index.html в браузере, вам необходимо упаковать и скомпилировать файл app.js с помощью browserify.Если вы напрямую импортируете app.js в index.html, будет сообщено об ошибке.

    3. Упаковка и обработка js: запускаем в корневом каталогеbrowserify js/src/app.js -o js/dist/bundle.js

    4. Импорт использования страницы:

    <script type="text/javascript" src="js/dist/bundle.js"></script>

AMD: на стороне браузера

  • Спецификация CommonJS загружает модули синхронно, то есть только после завершения загрузки можно выполнять последующие операции.
  • Спецификация AMD представляет собой модуль асинхронной загрузки, который позволяет указать функцию обратного вызова, включить асинхронную загрузку зависимых модулей и загрузку заранее;
  • Поскольку Node.js в основном используется для серверного программирования, файлы модулей, как правило, уже существуют на локальном жестком диске, поэтому загрузка происходит быстрее, а метод асинхронной загрузки не рассматривается, поэтому спецификация CommonJS более применима.
  • Если это среда браузера, для загрузки модулей со стороны сервера в это время должен использоваться асинхронный режим, поэтому сторона браузера обычно принимает спецификацию AMD.

грамматика

Основной синтаксис спецификации AMD
  • Определите открытый модуль:define([依赖模块名], function(){return 模块对象})
  • модуль импорта:require(['模块1', '模块2', '模块3'], function(m1, m2){//使用模块对象})
Модуль вывода, совместимый со спецификацией CommonJS
define(function (require, exports, module) { 
    var reqModule = require("./someModule");
    requModule.test();
    exports.asplode = function () {
        //someing
    }
});

AMD: Спецификация определения асинхронного модуля (предварительная загрузка)

  • Характеристики AMD:GitHub.com/АМД ЕСТЬ/АМД ЕСТЬ…

  • AMD — это аббревиатура от «Определение асинхронного модуля», что означает «Определение асинхронного модуля».

  • Он загружает модуль асинхронно, и загрузка модуля не влияет на выполнение следующего за ним оператора. Все операторы, которые зависят от этого модуля, определяются в функции обратного вызова, которая не будет выполняться до тех пор, пока загрузка не будет завершена.

  • AMD также использует оператор require() для загрузки модулей, но, в отличие от CommonJS, требует два аргумента:

    require([module], callback);
    • Первый параметр [module] — это массив, элементами которого являются загружаемые модули;
    • Второй параметр callback — это функция обратного вызова после успешной загрузки.

  • В настоящее время существуют две основные библиотеки Javascript, реализующие спецификацию AMD: RequireJS и curl.js.

RequireJS

  • преимущество
    • Реализована асинхронная загрузка файлов js, чтобы веб-страницы не зависали;
    • Управляйте зависимостями между модулями, чтобы упростить написание кода и обслуживание.
руководство по использованию require.js
  1. Загрузите require.js и импортируйте
  1. Создать структуру проекта
|-js
  |-libs
    |-require.js // 引入的require.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html

  1. Определите код модуля require.js

    • Модули загружаются с помощью require.js с использованием спецификаций AMD. То есть модули должны быть написаны так, как указано AMD.
    • В частности, модуль должен быть определен с помощью специальной функции define();
      • Если модуль не зависит от других модулей, его можно определить непосредственно в функции define().
    define(['myLib'], function(myLib){
&emsp; function foo(){
&emsp;&emsp;&emsp;&emsp;myLib.doSomething();
&emsp;&emsp;}
&emsp;&emsp;// 暴露模块
&emsp;&emsp;return {foo : foo};
});
//当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

     - 如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性；

 ```
 // dataService.js
 define(function () {
   let msg = 'this is dataService'
   function getMsg() {
 	return msg.toUpperCase()
   }
   return {getMsg}
 })
 
 // alerter.js
 define(['dataService', 'jquery'], function (dataService, $) {
   let name = 'Tom2'
   function showMsg() {
     $('body').css('background', 'gray')
     alert(dataService.getMsg() + ', ' + name)
   }
   return {showMsg}
 })
 ```

  2. Основное (входное) приложение js: main.js

    • Используя метод require.config(), мы можем настроить поведение загрузки модуля. require.config() прописывается в заголовке основного модуля main.js, параметр является объектом, а свойство paths этого объекта указывает путь загрузки каждого модуля.
     (function () {
    //配置
    require.config({
      //基本路径
      baseUrl: "js/",
      //模块标识名与模块路径映射
      paths: {
        "alerter": "modules/alerter",//此处不能写成alerter.js,会报错
        "dataService": "modules/dataService",
      }
    })
    
    //引入使用模块
    require( ['alerter'], function(alerter) {
      alerter.showMsg()
    })
  })()

  3. Страницы используют модули:

<script data-main="js/main" src="js/libs/require.js"></script>
определить модуль
  • require.config() принимает объект конфигурации, который в дополнение к атрибуту paths, упомянутому ранее, также имеет атрибут shim, который специально используется для настройки несовместимых модулей.
  • В частности, каждый модуль определяет:
    • 1. Значение экспорта (имя выходной переменной) указывает имя модуля, когда он вызывается извне;
    • 2. Массив deps с указанием зависимостей модуля.
  • Поддерживаемые элементы конфигурации:
    • baseUrl : корневой путь поиска для всех модулей.
      • При загрузке чистых файлов .js (строки зависимостей начинаются с / или заканчиваются на .js или содержат протоколы) baseUrl не используется.
      • Если baseUrl не задан явно, по умолчанию используется HTML-код, в который загружается require.js. Если используется атрибут data-main, путь становится baseUrl.
      • BaseUrl может находиться в домене, отличном от страницы require.js, а загрузка скрипта RequireJS является междоменной. Единственное ограничение заключается в том, что при использовании плагинов text! для загрузки текстового контента эти пути должны находиться в том же домене, что и страница, по крайней мере, во время разработки. Оптимизатор будет встраивать ресурсы text!plugin, поэтому после использования оптимизатора вы сможете использовать те ресурсы, которые ссылаются на ресурсы text!plugin в разных доменах.
    • пути: имена модулей сопоставления путей, которые не помещаются непосредственно в baseUrl.
      • При настройке пути начальная позиция определяется по отношению к baseUrl, если параметр пути не начинается с «/» или не содержит протокол URL-адреса (например, http:).
      • Пути, используемые для имен модулей, не должны иметь суффикс .js, так как путь может сопоставляться с каталогом. Механизм разрешения пути автоматически добавит суффикс .js при сопоставлении имен модулей с путями. Он также добавляет соответствующий суффикс при использовании require.toUrl() в таких сценариях, как текстовые шаблоны.
      • При работе в браузере можно указать резервные пути для реализации таких механизмов, как загрузка сначала из CDN и загрузка из локального местоположения, если CDN не загружается;
    • shim: Зависимость и конфигурация экспорта для сценариев типа «внедрение глобальной переменной браузера», которые не используют define() для объявления зависимостей и настройки модулей.
Используйте сторонний фреймворк на основе require.js (jquery)
  • Импортируйте файлы библиотеки jquery в проект:js/libs/jquery-1.10.1.js
  • Настройте путь jquery в main.js
paths: {
   'jquery': 'libs/jquery-1.10.1'
}
  • Использование jquery в файле alerter.js
define(['dataService', 'jquery'], function (dataService, \$) {
     var name = 'xfzhang'
     function showMsg() {
         $('body').css({background : 'red'})
         alert(name + ' '+dataService.getMsg())
     }
     return {showMsg}
 })
Использование стороннего фреймворка, не основанного на require.js (angular)
  • Импортируйте angular.js в проект:js/libs/angular.js
    • Популярные библиотеки (например, jQuery) соответствуют спецификации AMD, многие другие — нет. Прежде чем такие модули будут загружены с помощью require(), некоторые их характеристики должны быть определены с помощью метода require.config().
// main.js中配置
(function () {
 //配置
 require.config({
   //基本路径
   baseUrl: "js/",
   //模块标识名与模块路径映射
   paths: {
     //第三方库作为模块
     'jquery' : './libs/jquery-1.10.1',
     'angular' : './libs/angular',
     //自定义模块
     "alerter": "./modules/alerter",
     "dataService": "./modules/dataService"
   },
   /*
    配置不兼容AMD的模块
    exports : 指定与相对应的模块名对应的模块对象
    */
   shim: {
     'angular' : {
       exports : 'angular'
     }
   }
 })
 //引入使用模块
 require( ['alerter', 'angular'], function(alerter, angular) {
     alerter.showMsg()
     console.log(angular);
 })
})()

CMD: сторона браузера

  • Спецификация CMD:GitHub.com/морской JS/морской JS…
  • Спецификация CMD специально используется на стороне браузера.Загрузка модулей происходит асинхронно, и модули загружаются и выполняются, когда они используются.
  • Спецификация CMD сочетает в себе функции спецификаций CommonJS и AMD.
  • В Sea.js все модули JavaScript соответствуют спецификации определения модуля CMD.
  • базовая грамматика
    • Определите открытый модуль:
      // 没有依赖的模块
define(function(require, module, exports){
   let value = 'xxx';
   //通过require引入依赖模块
   //通过module.exports/exports来暴露模块
   exports.xxx = value
   module.exports = value
})
// 有依赖的模块
define(function(require, exports, module){
   //引入依赖模块(同步)
   var module2 = require('./module2')
   //引入依赖模块(异步)
   require.async('./module3', function (m3) {
 	  ......
   })
   //暴露模块
   exports.xxx = value
})
    • использовать модуль seajs.use(['module1', 'module2'])

Учебник по простому использованию sea.js

  1. Скачайте sea.js и импортируйте
    • Официальный сайт:seajs.org/
    • github : github.com/seajs/seajs
    • Импортируйте sea.js в проект:js/libs/sea.js
    • Как определить модуль экспорта:
    define()
exports
module.exports
    • Как зависеть от модулей:require()
    • Как использовать модули:seajs.use()
  2. Создать структуру проекта
|-js
  |-libs
    |-sea.js
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
    |-module4.js
    |-main.js
|-index.html

  1. Определите код модуля sea.js

    • module1.js
    define(function (require, exports, module) {
  //内部变量数据
  var data = 'this is module1'
  //内部函数
  function show() {
    console.log('module1 show() ' + data)
  }
  //向外暴露
  exports.show = show
})
    • module2.js
    define(function (require, exports, module) {
  module.exports = {
    msg: 'I Will Back'
  }
})
    • module3.js
    define(function (require, exports, module) {
 const API_KEY = 'abc123'
 exports.API_KEY = API_KEY
})
    • module4.js
    define(function (require, exports, module) {
 //引入依赖模块(同步)
 var module2 = require('./module2')；
 function show() {
   console.log('module4 show() ' + module2.msg)
 }
 exports.show = show
 //引入依赖模块(异步)
 require.async('./module3', function (m3) {
   console.log('异步引入依赖模块3  ' + m3.API_KEY)
 })
})
    • main.js : основной (входной) модуль
    define(function (require) {
  var m1 = require('./module1')
  var m4 = require('./module4')
  m1.show()
  m4.show()
})

  2. index.html:

<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
  seajs.use('./js/modules/main')
</script>

Модульный ES6

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

Основное использование

  • В es6 добавлены две новые команды export и import;

    • Команда экспорта используется для указания внешнего интерфейса модуля;
    • Команда import используется для импорта функций, предоставляемых другими модулями.
    • Модуль представляет собой один файл. Все переменные внутри этого файла не могут быть получены извне.
    • Если вы хотите, чтобы снаружи можно было прочитать переменную внутри модуля, вы должны использовать ключевое слово export для экспорта переменной.
    • Ниже приведен файл JS, который использует команду экспорта для вывода переменных.
    // math.js
export const add = function (a, b) {
    return a + b
}
export const subtract = function (a, b) {
    return a - b
}
    • После использования команды экспорта для определения внешнего интерфейса модуля другие файлы JS могут загрузить модуль (файл) с помощью команды импорта.
    // main.js
import { add, subtract } from './math.js'
add(1, 2)
substract(3, 2)

  • Определите открытый модуль: экспорт

    • Выставить объект:
      • Экспозиция по умолчанию, выставляйте любой тип данных, какой тип данных выставлять, какой тип данных получать
      export default 对象
    • Выставить несколько:
      • Обычная экспозиция, сущностью экспозиции является объект, при получении можно получить только значение путем деструктуризации и присвоения объекта
      export var xxx = value1
export let yyy = value2
// 暴露一个对象
var xxx = value1
let yyy = value2
export {xxx, yyy}

  • Импорт с использованием модуля: импорт

    • модуль по умолчанию:
    import xxx  from '模块路径/模块名'
    • другие модули
    import {xxx, yyy} from '模块路径/模块名'
import * as module1 from '模块路径/模块名'

экспорт подробного использования

  • Экспорт может не только экспортировать функции, но и объекты, классы, строки и т. д.;

  • Выставить несколько:

    1. выставлены отдельно
    export const obj = {test1: ''}
export const test = ''
export class Test {
   constuctor() {
   }
}
// 或者，直接在暴露的地方定义导出函数或者变量
export let foo = ()=>{console.log('fnFoo');return "foo"},bar="stringBar"
    1. Рекомендуется использовать этот способ записи, чтобы его можно было написать в конце скрипта, и вы сразу могли видеть, какие переменные выводятся.
    let a=1
let b=2
let c=3
export { a,b,c }
    1. Вы также можете изменить имя вывода с помощью as
    // test.js
let a = 1
let b = 2
let c = 3
export {
    a as test,
    b,
    c
};
import { test, b, c } from './test.js' // 改变命名后只能写 as 后的命名
    1. Показать другие импортированные модули с помощью подстановочных знаков
    // test.js
let a = 1
let b = 2
let c = 3
export {
    a as test,
    b,
    c
};
// lib.js引入test.js的内容
export * from './test.js'
// 引入
import {test,b,c} from './lib.js'

  • Показать объект, открытый по умолчанию

    • export default указывает вывод по умолчанию, а import можно использовать напрямую, не зная имени переменной.
    // test.js
export default function () {
    console.log('hello world')
}
//引入
import say from './test.js' // 这里可以指定任意变量名
say() // hello world
    • Часто используемые модули
    import $ from 'jQuery'   // 加载jQuery 库
import _ from 'lodash'   // 加载 lodash
import moment from 'moment' // 加载 moment

импорт подробного использования

  • import — это команда для загрузки модуля, основное использование такое же, как и раньше.
// main.js
import { add, subtract } from './test'

// 对于export default 导出的
import say from './test'
  • Измените имя импортированной переменной с помощью команды as
import {add as sum, subtract} from './test'
sum (1, 2)
  • Чтобы загрузить весь модуль, помимо указания имени выходной переменной или импорта, определенного в export.default, вы также можете загрузить весь модуль через знак *.
// math.js
export const add = function (a, b) {
    return a + b
}
export const subtract = function (a, b) {
    return a - b
}

//引入
import * as math from './test.js'
math.add(1, 2)
math.subtract(1, 2)

Учебник по ES6-Babel-Browserify

  • Проблема: модульный синтаксис ES6 еще не распознается всеми браузерами.
  • решать:
    • Используйте Babel для преобразования ES6 ---> ES5 (с использованием CommonJS) --- браузер не может выполнить его напрямую;
    • Используйте Browserify --- > Package js --- браузер может работать
  1. Определите файл package.json
{
  "name" : "es6-babel-browserify",
  "version" : "1.0.0"
}
  1. Установите babel-cli, babel-preset-es2015 и выполните браузер.
npm install babel-cli browserify -g
npm install babel-preset-es2015 --save-dev
  1. Определите файл .babelrc, который является файлом настроек Babel.
{
   "presets": ["es2015"]
 }
  1. кодирование
// js/src/module1.js
export function foo() {
	 console.log('module1 foo()');
};
export let bar = function () {
	 console.log('module1 bar()');
};
export const DATA_ARR = [1, 3, 5, 1];

// js/src/module2.js
let data = 'module2 data'; 
function fun1() {
	console.log('module2 fun1() ' + data);
};
function fun2() {
	console.log('module2 fun2() ' + data);
};
export {fun1, fun2};

// js/src/module3.js
export default {
  name: 'Tom',
  setName: function (name) {
    this.name = name
  }
}

// js/src/app.js
import {foo, bar} from './module1'
import {DATA_ARR} from './module1'
import {fun1, fun2} from './module2'
import person from './module3'
import $ from 'jquery'
//引入完毕
$('body').css('background', 'red')
foo()
bar()
console.log(DATA_ARR);
fun1()
fun2()
person.setName('JACK')
console.log(person.name);
  1. компилировать
  • Скомпилируйте код ES6 в ES5 с помощью Babel (но включите синтаксис CommonJS): babel js/src -d js/lib
  • Скомпилируйте js с помощью Browserify: browserify js/lib/app.js -o js/lib/bundle.js
  1. Внедрение тестов на страницу
<script type="text/javascript" src="js/lib/bundle.js"></script>

  1. Внедрение сторонних модулей (jQuery)

    • 1) Загрузите модуль jQuery:
    npm install jquery@1 --save
    • 2) Внедрить и использовать в app.js
    import $ from 'jquery'
$('body').css('background', 'red')

Суммировать

Модульное решение преимущество недостаток
commonJS Сильная возможность повторного использования;
Простой в использовании;
Простота реализации;		 Есть много модулей, которые можно использовать из коробки, и экология хорошая;
Синхронная загрузка не подходит для браузеров, а запросы браузеров загружаются асинхронно;
Несколько модулей не могут быть загружены параллельно.
AMD Асинхронная загрузка для браузеров Несколько модулей могут быть загружены параллельно;
Способ определения модуля неэлегантен и не соответствует стандартной модульности.
ES6 Статический анализ, предварительная компиляция перспективные стандарты;
Нативная совместимость браузера плохая, поэтому он обычно компилируется в ES5;
В настоящее время мало модулей, которые можно использовать из коробки, и экология оставляет желать лучшего.

Разница между AMD и CMD:

  • Официальная ссылка:GitHub.com/морской JS/морской JS…
  • Для зависимых модулей AMD — раннее выполнение, CMD — отложенное выполнение.
    • Однако, начиная с RequireJS 2.0, он также был изменен для задержки выполнения (в зависимости от метода написания метод обработки отличается). CMD продвигает максимально ленивых.
  • CMD уважает, полагаясь на ближайший, AMD уважает, полагаясь на фронт.
    // CMD
define(function(require, exports, module) {   
	var a = require('./a');
	a.doSomething()   // 此处略去 100 行   
	var b = require('./b') // 依赖可以就近书写   
	b.doSomething()   // ... })
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) {  
	// 依赖必须一开始就写好    
	a.doSomething()    // 此处略去 100 行    
	b.doSomething()   
	 ...})
    • Хотя AMD также поддерживает метод записи CMD, а также поддерживает передачу require в качестве зависимости, автор RequireJS по умолчанию предпочитает указанный выше метод записи, и это также метод записи определения модуля по умолчанию в официальной документации.
  • API AMD по умолчанию один для многократного использования, API CMD строго дифференцирован, и рекомендуется единая ответственность. Например, в AMD требование делится на глобальное требование и локальное требование, оба называются требованием. В CMD нет глобального требования, но в зависимости от полноты модульной системы предоставляется seajs.use для реализации загрузки и запуска модульной системы. В CMD каждый API прост и чист.
  • Есть еще некоторые различия в деталях, просто посмотрите на определение этой спецификации, поэтому я не буду говорить больше.

Ссылаться на:Написание модульного JavaScript с помощью AMD, CommonJS и ES Harmony

Категории