/ jsФайл заархивирован

Библиотека JavaScript для работы с файлами в браузере

⚠️ Этот проект устарел и заменен https://github.com/file2html/file2html

  • Установка
  • Использование
  • API
  • JsFile
  • JsFile.Engine
  • JsFile.Document
  • Тесты
  • Механизмы JsFile
  • Примеры
  • Поддержка браузера
  • Дорожная карта
  • Справка
  • Содействовать
  • Создать собственный движок

Установка

через NPM

Вы можете очень легко установить пакет jsFile с помощью NPM. После установки NPM на вашем компьютере просто запустите:

  $ npm install jsfile  

с Git

Вы можете клонировать весь репозиторий с помощью Git:

  $ git clone git://github.com/jsFile/jsFile.git  

из последней версии

Также вы можете скачать последнюю версию jsFile и включите встроенные файлы в свой проект.

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

Вы можете включить jsFile в свой проект разными способами:

как независимый файл от

    window.JsFile; //использовать объект в глобальном пространстве имен  

как модуль CommonJS

 var JsFile = require ('JsFile'); 

как модуль ES6

  импортировать JsFile из 'JsFile'; 

Включить один или несколько движков для необходимых типов файлов. Просмотреть весь список движков

 импортировать JsFile из 'JsFile'; импортировать JsFileDsv из 'jsfile-dsv'; //читать .csvimport JsFileOoxml из 'jsfile-ooxml'; //читаем .docxJsFile.defineEngine (JsFileDsv); JsFile.defineEngine (JsFileOoxml); const jf = new JsFile (file, options); 

API

JsFile

JsFile.version

Тип: String

Это текущая версия библиотеки.

JsFile.isSupported

Тип: Boolean

Показывает, что jsFile может работать в текущем браузере или нет .

 JsFile.isSupported; 

JsFile.mimeTypes

Тип: Array

Содержит список поддерживаемых mime-типов в механизмах jsFile.

 JsFile  .mimeTypes; //[... поддерживаемые типы mime ...] 

JsFile.defineEngine ()

Возвращает объект JsFile.Engine или null (если движок недействителен). Вы можете создать свой собственный движок документов для jsFile и включить его в библиотеку..

JsFile.defineEngine(Engine);

Engine {Function} — это унаследованный class от JsFile.Engine. Он должен иметь статическое свойство mimeTypes (массив с поддерживаемыми типами mime) и статический метод test , чтобы проверить, какой тип файла поддерживается.

JsFile.removeEngine (Engine)

Engine { Функция} — это унаследованный класс от JsFile.Engine. Он удаляет указанный Engine из определенных механизмов. Если аргумент Engine не определен, он удаляет все определенные механизмы.

Экземпляр JsFile

В следующих примерах я буду использовать JsFile instance:

 let jf = new JsFile (file [, options]); 

file {File | Blob} [обязательно] (Прочтите о файле или Blob)

параметры {Object} [необязательно] — объект с вашими пользовательскими настройками:

  • workerPath {String} — путь к файлам Web Worker .

jf.read ()

Возвращает объект обещания

 jf.read (). then ((document) => {... ваш обработчик ошибок ...}, (error) => {... ваш обработчик ошибок ...}); 

error {Error} — объект содержит описание ошибки в свойстве error.message

документ — объект содержит результат чтения файла. Подробнее см. JsFile.Document

jf.findEngine ()

Возвращает JsFile.Engine или null . Этот метод находит движок для jf.file.

jf.findEngine()

JsFile.Engine

JsFile.Engine.getCharFromHex (шестнадцатеричный)

Возвращает символ из шестнадцатеричного значения.

JsFile.Engine.replaceSpaces (str)

Возвращает String . Заменяет 2 и более пробела в значении u2000 u2000 .

JsFile.Engine.test ()

Возвращает Boolean . Если вы разрабатываете собственный механизм JsFile, вы должны переопределить этот метод:

 static test (file) {return Boolean (file && Engine.validateFile (file, files));} 

files — Объект с метаинформацией о поддерживаемых форматах:

//Пример для движка FB2: const files = {extension: ['fb2'], mime: ['application/ x-fictionbook + xml ']}; 

JsFile.Engine.normalizeDataUri (dataUri, filename)

Нормализует dataU ri строка в соответствии с указанным filename .

 const dataUri = 'data:; base64, ....'; const  filename = 'test.png'; JsFile.Engine.normalizeDataUri (dataUri, имя файла); //данные: изображение/png; base64, ... 

JsFile.Engine.formatPropertyName (имя, параметры)
 JsFile.Engine. formatPropertyName ('пространство имен: опора'); //propertyJsFile.Engine.formatPropertyName('prop-name '); //propNameJsFile.Engine.formatPropertyName('prop-name ', {capitalize: true}); //PropName
JsFile.Engine.cropUnit(value)
JsFile.Engine  .cropUnit ('18px'); //18
JsFile.Engine.normalizeColorValue(value)
JsFile.Engine  .normalizeColorValue ('черный'); //#000000JsFile.Engine.normalizeColorValue('darkgreen '); //# 006400 

JsFile.Engine.attributeToBoolean (значение)
 JsFile.  Engine.attributeToBoolean («да»); //trueJsFile.Engine.attributeToBoolean('on '); //trueJsFile.Engine.attributeToBoolean('off '); //falseJsFile.Engine.normalizeColorValue({value: 1}); //true
JsFile.Engine.validateUrl()

Возвращает Boolean код> значение. Это служебный метод для проверки URL. Может быть полезно при разработке собственных движков

 let engine = new JsFile.defineEngine (...); engine.validateUrl (url); //истина или ложь 

url {String}

JsFile .Engine.merge ()

Глубокое слияние объектов;

 const a = {data: {value: 1}, name: 'test  '}; const b = {data: {value: 0}}; JsFile.Engine.merge (a, b);/* Возвращает: {data: {value: 0}, name:' test '} */
JsFile.Engine.clone()

Возвращает глубокий клон объекта;

JsFile.Engine.errors

{Object}. Список констант с сообщениями об ошибках

JsFile.Engine.prototype.isValid

Метод JsFile.Engine экземпляр. Возвращает истину, если файл из движка поддерживается.

JsFile.Document

JsFile. Document.elementPrototype

Тип: Object

Это статическое свойство, которое содержит базовую структуру для каждого элемента анализируемого документа

 {"children": [], "style": {"position": "relative", "boxSizing": "border-box"}, "properties": {  "tagName": "DIV", "textContent": ""}} 

doc.html ()

Возвращает DocumentFragment с содержимым документа в формате HTML

 const doc = new JsFile.Document (...); doc.html (); 

doc.json ()

Возвращает простой JS Object с разобранным деревом документов

 const doc = новый JsFile.Document (...); doc.json (); //{name: '', language: '', content: [...]} 

doc.page ()

Возвращает проанализированную страницу по индексу

 const doc = new JsFile.Document (...); doc.page (0); 

документ. language

Возвращает основной язык проанализированного документа

 const doc = new JsFile.Document (...); doc.language; //Строка 

doc.name

Возвращает имя проанализированного документа

 const doc = новый JsFile.Document (...); doc.name; //Строка 

doc.wordsCount

Возвращает количество слов в проанализированном документе

 const doc = новый JsFile.Document (...); doc.wordsCount; //Число 

doc.length

Возвращает количество страниц в проанализированном документе

 const doc = новый JsFile.Document (...); doc.length; //Число 

doc.zoom

Возвращает значение масштабирования проанализированного документа

 const doc = новый JsFile.Document (...); doc.zoom; //Число 

doc.isEmpty

Тип: Boolean

 const doc = new JsFile.Document (...); doc.isEmpty; //Логическое 

  • Клонировать источники JsFile через Git
  • Установить зависимости. Просто запустите следующую команду в каталоге JsFile:
  $ npm install  
  • Запустить тесты задача:
  $ npm запустить тесты  

Механизмы JsFile

  • jsFile-ooxml для формата Office Open XML (файлы .docx и т. д.)
  • jsFile-odf для формата OpenDocument (файлы .odf и т. д.) )
  • jsFile-rtf для расширенного текстового формата (файлы .rtf)
  • jsFile-wcbff для двоичного формата составного файла Windows (файлы .doc и т. д.)
  • jsFile-fb для формата FictionBook (файлы .fb2 и т. д.)
  • jsFile-dsv для формата значений с разделителями (файлы .csv, .tsv и т. д.)
  • jsFile-image работает со многими форматами изображений.
  • jsFile-txt обрабатывает файл как простой текст
  • jsFile-epub для EPUB формат (файлы .epub и т. д.)

Поддержка браузера

Зависимости

  • Promise
  • Web Workers
  • Файл
  • Blob
  • FileReader
  • ArrayBu ffer
  • Uint8Array
  • DataView
  • zip.js (см. папку src/zip/)
Chrome Firefox Opera Safari
43+ ✔ 41+ ✔ 32✔ 8+ ✔

Вы можете использовать полифиллы для требуемого API и попробовать JsFile в старых браузерах.

Roadmap

Выполняется работа

  • Повышение производительности парсинга документа
  • Поддержка формата .doc
  • Добавить тесты e2e
  • рефакторинг zip Engine

Новый функции

  • Поддержка формата .xslx
  • Поддержка формата .pptx
  • Поддержка. pdf
  • Поддержка редактирования и создания документов

Связанные проекты

  • EasyDocs для браузеров:
    • Chrome

Справка

Вы можете нас поддержать:

  • Bountysource
  • Gratipay

Содействовать

Рекомендации

Кодекс поведения

JsFile — проект с открытым исходным кодом. Пожалуйста, прочтите нашу лицензию на код

Нашли проблему?

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

Хотите функцию?

Вы можете запросить новую функцию, отправка проблемы в наш репозиторий GitHub.

Правила кода

  • Все функции или исправления ошибок должны быть протестированы по одной или нескольким спецификациям.
  • Все общедоступные методы API должны быть задокументированы с помощью jsdoc.
  • Мы используем ES6 (EcmaScript2015) в JsFile
  • См. Нашу конфигурацию jscs.

Создать собственный механизм

См. Специальный генератор для нового механизма jsFile. Это поможет вам запустить и предоставит необходимые зависимости, структуру и инструменты для движка jsFile.

Установка зависимостей

  • Git: Руководство Github по установке Git — хороший источник информации.
  • Node.js
  • Grunt

Форкование JsFile в Github

Чтобы создать учетную запись Github, следуйте инструкциям здесь. После этого продолжайте и создайте форк основного репозитория JsFile.

Создание JsFile

  • Установите JsFile с помощью Git
  • Выполните следующие шаги:
 # Перейдите в каталог JsFile: cd jsfile # Добавьте основной репозиторий JsFile в качестве удаленного источника в ваш репозиторий: git remote add upstream "https://github.com /jsFile/jsFile.git"#Install node.js dependencies: npm install # Build JsFile: grunt build 

Запуск модульных тестов

 npm run test 

История выпусков

  • 12.08.2015 v0.0.1 Выпуск t первая версия

Библиотека, представленная @webschik



Как мне включить Файл JavaScript в другом файле JavaScript?

Есть ли что-то в JavaScript, подобное @import в CSS, что позволяет вам включать файл JavaScript в другой файл JavaScript?


В старых версиях JavaScript не было импорта, включения или требования, поэтому было разработано множество различных подходов к этой проблеме.

Но с 2015 года (ES6), в JavaScript есть стандарт модулей ES6 для импорта модулей в Node.js, который также поддерживается большинством современных браузеров.

Для совместимости со старыми браузерами используйте инструменты сборки, такие как Webpack и Rollup и /или можно использовать инструменты транспиляции, такие как Babel.

Модули ECMAScript (ES6) поддерживаются в Node.js начиная с версии 8.5, с флагом - experimental-modules , и с тех пор, как по крайней мере Node. js v13.8.0 без флага. Чтобы включить «ESM» (по сравнению с предыдущей модульной системой в стиле CommonJS [«CJS»] в Node.js), вы можете использовать "type": "module" в пакете . json или присвойте файлам расширение .mjs . (Точно так же модули, написанные с использованием предыдущего модуля CJS Node.js, могут называться .cjs , если по умолчанию используется ESM.)

Использование пакета . json :

  {"type": "module"}  

Затем модуль . js :

  функция экспорта hello () {return "Hello";}  

Затем main.js :

  import {hello} from './module.js';let val = hello (); //val - это "Hello";  

Используя .mjs , у вас будет module.mjs :

  функция экспорта hello () {return "Hello";}  

Затем main.mjs :

  import {hello} from './module.mjs';let val = hello (); //val - это "Hello";  

Модули ECMAScript в браузерах

Браузеры поддерживают прямую загрузку модулей ECMAScript (такие инструменты, как Webpack, не требуются) начиная с Safari 10.1, Chrome 61, Firefox 60 и Edge 16. Проверьте текущую поддержку на caniuse. Нет необходимости использовать расширение Node.js ‘ .mjs ; браузеры полностью игнорируют расширения файлов в модулях/скриптах.

   import {hello} from './hello.mjs'; //Или это может быть просто `hello.js` hello ('world');   
 //hello.mjs - или это  может быть просто `hello.js`export function hello (text) {const div = document.createElement ('div');  div.textContent = `Привет, $ {text}`;  document.body.appendChild (div);}  

Подробнее на https://jakearchibald.com/2017/es-modules-in-browsers/

Динамический импорт в браузерах

Динамический импорт позволяет скрипту загружать другие скрипты по мере необходимости:

   import  ('hello.mjs'). then (module => {module.hello ('world');});   

Подробнее на https:// developers.google.com/web/updates/2017/11/dynamic-import

Старый стиль модуля CJS, все еще широко используемый в Node.js, — это module.exports / require system.

 //mymodule.jsmodule.exports = {hello: function () {return "Hello"  ;  }}  
 //server.jsconst myModule = require ('./mymodule'); let val = myModule.hello (); //val is "Hello"  

Есть другие способы для JavaScript для включения внешнего содержимого JavaScript в браузеры, которые не требуют предварительной обработки.

Вы можете загрузить дополнительный сценарий с вызовом AJAX, а затем использовать eval для его запуска. Это наиболее простой способ, но он ограничен вашим доменом из-за модели безопасности песочницы JavaScript. Использование eval также открывает дверь для ошибок, взломов и проблем безопасности.

Как и в случае с динамическим импортом, вы можете загрузить один или несколько скриптов с помощью выборки. вызов с использованием обещаний для управления порядком выполнения зависимостей скрипта с помощью библиотеки Fetch Inject:

  fetchInject (['https://cdn.jsdelivr.net/momentjs /2.17.1/moment.min.js ']). Then (() => {console.log (`Завершить менее чем за $ {moment (). EndOf (' year '). FromNow (true)}`)  })  

Библиотека jQuery обеспечивает загрузку в одну строку:

  $. getScript ("my_lovely_script.js", function  () {alert ("Сценарий загружен, но не обязательно выполняется.");});  

Вы можете добавить тег скрипта с URL-адресом скрипта в HTML. Это идеальное решение, чтобы избежать накладных расходов на jQuery.

Сценарий может даже находиться на другом сервере. Кроме того, браузер оценивает код. Тег может быть вставлен либо на веб-страницу , либо вставлен непосредственно перед закрывающим тег.

Вот пример того, как это может работать:

  функция dynamicLoadScript (url) {var script = document.  createElement ("скрипт"); //создаем скрипт DOM-узла script.src = url; //установить его src на указанный URL document.head.appendChild (script); //добавляем его в конец раздела заголовка страницы (можно изменить 'head' на 'body', чтобы вместо этого добавить его в конец раздела body)}  

Эта функция добавит новый тег в конец раздела заголовка страницы, где атрибут src установлен на URL, который передается функции в качестве первого параметра.

Оба этих решения обсуждаются и проиллюстрированы в книге «Безумие JavaScript: загрузка динамических сценариев».

Теперь есть большая проблема вы должны знать о. Это означает, что вы загружаете код удаленно . Современные веб-браузеры загрузят файл и продолжат выполнение вашего текущего скрипта, потому что они загружают все асинхронно для повышения производительности. (Это относится как к методу jQuery, так и к методу загрузки динамического скрипта вручную.)

Это означает, что если вы используете эти уловки напрямую, вы не сможете использовать свой вновь загруженный код в следующей строке после того, как вы попросили его загрузить , потому что он все еще будет загружаться.

Например: my_lovely_script.js содержит MySuperObject :

  var js = document.createElement ("script"); js.type = "text/javascript"; js.src  = jsFilePath; document.body. appendChild (js); var s = new MySuperObject (); Ошибка: MySuperObject не определен  

Затем вы перезагружаете страницу, нажимая F5 . И это работает! Непонятно …

Итак, что с этим делать?

Что ж, вы можете использовать хитрость, предложенную автором в ссылку я вам дал. Таким образом, для людей, которые спешат, он использует событие для запуска функции обратного вызова при загрузке скрипта. Таким образом, вы можете поместить весь код с помощью удаленной библиотеки в функцию обратного вызова. Например:

  function loadScript (url, callback) {//Добавление тега скрипта в заголовок, как предлагалось ранее var head = document.head;  var script = document.createElement ('сценарий');  script.type = 'текст/javascript';  script.src = url; //Затем привяжите событие к функции обратного вызова. //Есть несколько событий для кроссбраузерной совместимости.  script.onreadystatechange = обратный вызов;  script.onload = обратный вызов; //Запускаем загрузку head.appendChild (script);}  

Затем вы пишете код, который хотите использовать ПОСЛЕ загрузки скрипта в лямбда-функцию:

  var myPrettyCode = function () {//Здесь делайте все, что хотите};  

Затем вы запускаете все это:

  loadScript ("my_lovely_script.js", myPrettyCode);  

Обратите внимание, что сценарий может выполняться после загрузки DOM или раньше, в зависимости от браузер и включили ли вы строку script.async = false; . Есть отличная статья о загрузке Javascript в целом, в которой обсуждается это.

Как упоминалось в верхней части этого ответа, многие разработчики используют инструменты сборки/транспиляции, такие как Parcel, Webpack или Babel в своих проекты, позволяя им использовать будущий синтаксис JavaScript, обеспечивать обратную совместимость для старых браузеров, объединять файлы, минимизировать, выполнять разделение кода и т. д.


592

Если кто-то ищет что-то более продвинутое, попробуйте RequireJS. Вы получите дополнительные преимущества, такие как управление зависимостями, улучшенный параллелизм и избежание дублирования (то есть получения скрипта более одного раза).

Вы можете записывать свои файлы JavaScript в «модулях», а затем ссылаться на них как на зависимости в других скриптах. Или вы можете использовать RequireJS как простое решение «иди и получи этот скрипт».

Пример:

Определите зависимости как модули:

  define (['lib/dependency1', 'lib/dependency2'], function (d1, d2)  {//Ваш реальный сценарий находится здесь.//При необходимости будут извлечены зависимые сценарии. Return libraryObject;//Например, объект jQuery});  

implementation.js — ваш «основной» файл JavaScript, который зависит от некоторой зависимости. js

  require (['some-dependency'], function (dependency) {//Ваш скрипт идет сюда//извлекается some-dependency.js. //Затем ваш скрипт выполняется});  

Выдержка из GitHub README:

RequireJS также загружает простые файлы JavaScript как более определенные модули. Он оптимизирован для использования в браузере, в том числе в Web Worker, но может использоваться и в других средах JavaScript, таких как Rhino и Node. Он реализует API асинхронных модулей.

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

.. .

Улучшите этот ответ
отредактировано 28 сен. 2013 в 13:11
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 07 июня ’12 в 20:55
добавить комментарий |

Если кто-то ищет что-то более продвинутое, попробуйте RequireJS. Вы получите дополнительные преимущества, такие как управление зависимостями, улучшенный параллелизм и избежание дублирования (то есть получения скрипта более одного раза).

Вы можете записывать свои файлы JavaScript в «модулях», а затем ссылаться на них как на зависимости в других скриптах. Или вы можете использовать RequireJS как простое решение «иди и получи этот сценарий».

Пример:

Определите зависимости как модули:

  define (['lib/dependency1', 'lib/dependency2'], function (d1, d2)  {//Ваш реальный сценарий находится здесь.//При необходимости будут извлечены зависимые сценарии. Return libraryObject;//Например, объект jQuery});  

implementation.js — это ваш «основной» файл JavaScript, который зависит от

  require (['  some-dependency '], function (dependency) {//Здесь идет ваш скрипт//извлекается some-dependency.js.//Затем ваш скрипт выполняется});  

Выдержка из GitHub README:

RequireJS загружает простые файлы JavaScript, а также более определенные модули. Он оптимизирован для использования в браузере, в том числе в Web Worker, но может использоваться и в других средах JavaScript, таких как Rhino и Node. Он реализует API асинхронных модулей.

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

.. .


212

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

Вам необходимо использовать jQuery.append () в элементе вашей страницы , то есть:

  $ ("head"). append ('  ');  

Однако у этого метода также есть проблема: если ошибка возникает в импортированном файле JavaScript, Firebug (а также Консоль ошибок Firefox и Инструменты разработчика Chrome) сообщит свое место неверно, что является большой проблемой, если вы часто используете Firebug для отслеживания ошибок JavaScript (я делаю). Firebug по какой-то причине просто не знает о недавно загруженном файле, поэтому, если в этом файле возникает ошибка, он сообщает, что она произошла в вашем основном HTML-файле, и у вас возникнут проблемы с выяснением настоящей причины ошибки.

Но если это не проблема для вас, тогда этот метод должен работать.

На самом деле я написал плагин jQuery под названием $. import_js ( ) , который использует этот метод:

  (function ($) {/* * $ .import_js () helper (для импорта JavaScript в код JavaScript). */ var import_js_imported = []; $ .extend (true, {import_js: function (script) {var found = false; for (var i = 0; i  '  ); import_js_imported.push (script);}}});}) (jQuery);  

Итак, все, что вам нужно сделать для импорта JavaScript, это:

  $. import_js ('/path_to_p  roject/scripts/somefunctions.js ');  

Я также провел простой тест для этого в примере.

Он включает main.js в основном HTML, а затем скрипт в main.js использует $. import_js () для импорта дополнительного файла называется included.js , который определяет эту функцию:

  function hello () {alert ("Hello world!");}  

И сразу после включения included.js вызывается функция hello () , и вы получаете предупреждение .

(Этот ответ является ответом на комментарий e-satis).

Улучшите этот ответ
отредактировано 21 марта 2018, 16:29
31piy
20.6k66 золотых знаков3232 серебряных знака5454 бронзовых знака
ответил 28 апр. ’11 в 15:25
добавить комментарий |

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

Вам нужно использовать jQuery.append () в элементе вашей страницы, то есть:

  $ ("head"). append  (' ');  

Однако у этого метода также есть проблема: если в импортированном файле JavaScript возникает ошибка, Firebug (а также Консоль ошибок Firefox и Инструменты разработчика Chrome) неверно сообщит о своем месте, что является большой проблемой, если вы используете Firebug для отслеживания ошибок JavaScript во многих случаях (я делаю) . Firebug по какой-то причине просто не знает о недавно загруженном файле, поэтому, если в этом файле возникает ошибка, он сообщает, что она произошла в вашем основном HTML-файле, и у вас возникнут проблемы с выяснением настоящей причины ошибки.

Но если это не проблема для вас, тогда этот метод должен работать.

На самом деле я написал плагин jQuery под названием $. import_js ( ) , который использует этот метод:

  (function ($) {/* * $ .import_js () helper (для импорта JavaScript в код JavaScript). */ var import_js_imported = []; $ .extend (true, {import_js: function (script) {var found = false; for (var i = 0; i  '  ); import_js_imported.push (script);}}});}) (jQuery);  

Итак, все, что вам нужно сделать для импорта JavaScript, это:

  $. import_js ('/path_to_p  roject/scripts/somefunctions.js ');  

Я также провел простой тест для этого в примере.

Он включает main.js в основном HTML, а затем скрипт в main.js использует $. import_js () для импорта дополнительного файла называется included.js , который определяет эту функцию:

  function hello () {alert ("Hello world!");}  

И сразу после включения . js , вызывается функция hello () , и вы получаете предупреждение.

(Этот ответ является ответом на комментарий e-satis ).


167

Другой способ, что в мое мнение намного чище, это сделать синхронный запрос Ajax вместо использования тега . То же самое и в Node.js.

Вот пример использования jQuery:

  function require (script) {$ .ajax ({  url: script, dataType: "script", async: false,// 

Затем вы можете использовать его в своем коде так же, как вы обычно используете include:

  require ("/scripts/subscript.js");  

И иметь возможность вызывать функцию из необходимого скрипта в следующей строке:

  subscript.doSomethingCool ();   

Улучшите этот ответ
отредактировано 28 сен. 2013 в 12:55
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 8 сентября 2011 в 18:22
добавить комментарий |

Другой способ, который, на мой взгляд, намного чище, — это сделать синхронный запрос Ajax вместо использования тег. То же самое и в Node.js.

Вот пример использования jQuery:

  function require (script) {$ .ajax ({  url: script, dataType: "script", async: false,// 

Затем вы можете использовать его в своем коде так же, как вы обычно используете include:

  require ("/scripts/subscript.js");  

И иметь возможность вызывать функцию из необходимого скрипта в следующей строке:

  subscript.doSomethingCool ();   

110

Есть хорошие новости для вас. Очень скоро вы сможете легко загружать код JavaScript. Он станет стандартным способом импорта модулей кода JavaScript и станет частью самого ядра JavaScript.

Вам просто нужно написать import cond from 'cond. js '; для загрузки макроса с именем cond из файла cond.js .

Итак, вы не ‘Не нужно полагаться на какую-либо структуру JavaScript, и вам не нужно явно выполнять вызовы Ajax.

Обратитесь к:

  • Разрешение статического модуля

  • Загрузчики модулей

Улучшите этот ответ
отредактировано окт. 19 ’14, 18:05
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
3 июля ’12 в 16: 32
добавить комментарий |

Хорошие новости для вас. Очень скоро вы сможете легко загружать код JavaScript. Он станет стандартным способом импорта модулей кода JavaScript и станет частью самого ядра JavaScript.

Вам просто нужно написать import cond from 'cond.js'; , чтобы загрузить макрос с именем cond из файла cond.js .

Таким образом, вам не нужно полагаться на какую-либо структуру JavaScript и не нужно явно выполнять вызовы Ajax.

См .:

  • Разрешение статического модуля

  • Загрузчики модулей


107

Можно динамически сгенерировать тег JavaScript и добавить его в документ HTML из другого кода JavaScript. Это загрузит целевой файл JavaScript.

  function includeJs (jsFilePath) {var js = document.createElement ("script");  js.type = "текст/javascript";  js.src = jsFilePath;  document.body.appendChild (js);} includeJs ("/путь/к/some/file.js");  

Улучшите этот ответ
отредактировано 28 сентября 2013 г. в 12:44
Питер Мортенсен
27,4k2121 золотых значков 9393 серебра 123123 бронзовых знака
4 июня ’09 в 12:02
добавить комментарий |

Можно динамически сгенерировать тег JavaScript и добавить его в документ HTML из другого кода JavaScript. Это загрузит целевой файл JavaScript.

  function includeJs (jsFilePath) {var js = document.createElement ("script");  js.type = "текст/javascript";  js.src = jsFilePath;  document.body.appendChild (js);} includeJs ("/path/to/some/file.js");  

79

Оператор import находится в ECMAScript 6.

Синтаксис

  импортировать имя из «имя-модуля»; импортировать {член} из «имя-модуля»; импортировать {член как псевдоним} из «имя-модуля»; импортировать {член1,  member2} из «имя-модуля»; импортировать {член1, член2 как псевдоним2, [...]} из «имя-модуля»; импортировать имя, {член [, [...]]} из «имя-модуля»  ; импортировать "имя-модуля" как имя;  

Улучшите этот ответ
отредактировано 11 декабря 2016 г. в 9:47
Peter Mortensen
27.4k2121 золотых знака9393 серебряных знака123123 бронзовых знака ges
ответил 17 апр. ’15 в 1:56
добавить комментарий |

Оператор import находится в ECMAScript 6.

Синтаксис

  импортировать имя из «имя-модуля»; импортировать {член} из «имя-модуля»; импортировать {член как псевдоним} из «имя-модуля»; импортировать {член1, член2  } из «имя-модуля»; импортировать {член1, член2 как псевдоним2, [...]} из «имя-модуля»; импортировать имя, {член [, [...]]} из «имя-модуля»;  импортировать "имя-модуля" как имя;  

65

Может быть, вы сможете использовать эту функцию, которую я нашел на этой странице Как мне включить файл JavaScript в файл JavaScript? :

  function include (имя файла) {var head = document.getElementsByTagName ('head') [0];  var script = document.createElement ('сценарий');  script.src = имя файла;  script.type = 'текст/javascript';  голова. appendChild (script)}  

Улучшите этот ответ
отредактировано 15 нояб. в 17:01
Аджит Лакхани
3,13022 золотых знака1919 серебряных знаков3434 бронзовых знака
4 июня ’09 в 12:04
добавить комментарий |

Может быть, вы сможете использовать эту функцию, которую я нашел на этой странице Как мне включить файл JavaScript в файл JavaScript ? :

  функция include (filename) {var head = document.getElementsByTagName ('head') [0];  var script = document.createElement ('сценарий');  script.src = имя файла;  script.type = 'текст/javascript';  head.appendChild (скрипт)}  

58

Вот синхронная версия без jQuery :

  function myRequire (url) {  var ajax = новый XMLHttpRequest ();  ajax.open ('ПОЛУЧИТЬ', URL, ложь); // 

Обратите внимание, что для получения этого рабочего междоменного домена серверу потребуется установить заголовок allow-origin в своем ответе.

Улучшите этот ответ
отредактировал 18 июня ’15 в 14:44
Flimm
91.4k2828 золотых значков193193 серебра 202202 бронзовых знака
ответ дан 11 дек ’13 в 14: 54
добавить комментарий |

Вот синхронная версия без jQuery :

  function myRequire (url) {var ajax = new XMLHttpRequest ();  ajax.open ('ПОЛУЧИТЬ', URL, ложь); // 

Обратите внимание, что для получения этого рабочего междоменного сервера серверу потребуется установить заголовок allow-origin в своем ответ.


53

Я только что написал этот JavaScript код (с использованием прототипа для манипуляции с DOM):

  var require = (function () {var _required = {}; return (function (url, callback) {if (typeof url  == 'object') {//У нас есть (надеюсь) массив: пора связать! if (url.length> 1) {//Загружаем n-й файл, как только все до//n-1-го  один выполнен. require (url.slice (0, url.length - 1), function () {require (url [url.length - 1], callback);});} else if (url.length == 1  ) {require (url [0], callback);} return;} if (typeof _required [url] == 'undefined') {//Этот URL еще не загружен; gogogo! _required [url] = [];  var script = new Element ('скрипт', {src: url, type: 'text/javascript'}); скрипт  t.observe ('загрузка', функция () {console.log («сценарий» + URL + «загружено.»);  _required [url] .each (function (cb) {cb.call ();//TODO: выполняется ли это в правильном контексте?});  _required [url] = true;  });  $$ ('голова') [0] .insert (скрипт);  } else if (typeof _required [url] == 'boolean') {//Мы уже загрузили вещь, так что продолжайте.  если (обратный вызов) {callback.call ();  } возвращение;  } если (обратный вызов) {_required [URL] .push (обратный вызов);  }});}) ();  

Использование:

       require (['foo.js', 'bar.js'], function () {/* Используйте здесь foo.js и bar.js  */});   

Gist: http://gist.github.com/284442.

Улучшить этот ответ
отредактировал 25 июня ’17 в 21:04
Тальха Аван
3,86044 золотых знака2020 серебряных знаков3737 бронзовых знаков
ответил 23 янв.
добавить комментарий |

Я только что написал этот код JavaScript (используя Prototype для манипуляции с DOM):

   var require = (function () {var _required = {}; return (function (url, callback) {if (typeof url == 'object') {//У нас (надеюсь) есть массив: пора связать!  if (url.length> 1) {//Загружаем n-й файл, как только все до//n-1-го будет выполнено. require (url.slice (0, url.length - 1), function () {  require (url [url.length - 1], callback);});} else if (url. длина == 1) {требуется (URL [0], обратный вызов);  } возвращение;  } if (typeof _required [url] == 'undefined') {//Этот URL еще не загружен;  гого!  _required [url] = [];  var script = new Element ('сценарий', {src: url, type: 'text/javascript'});  script.observe ('load', function () {console.log ("script" + url + "loaded."); _required [url] .each (function (cb) {cb.call ();//TODO:  выполняется ли это в правильном контексте?}); _required [url] = true;});  $$ ('голова') [0] .insert (скрипт);  } else if (typeof _required [url] == 'boolean') {//Мы уже загрузили вещь, так что продолжайте.  если (обратный вызов) {callback.call ();  } возвращение;  } если (обратный вызов) {_required [URL] .push (обратный вызов);  }});}) ();  

Использование:

       require (['foo.js', 'bar.js'], function () {/* Используйте здесь foo.js и bar.js  */});   

Gist: http://gist.github.com/284442.


47

Вот обобщенная версия того, как Facebook делает это для своей вездесущей кнопки «Нравится»:

   var firstScript = document.getElementsByTagName ('script') [0], js = document.createElement  ('сценарий');  js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';  js.onload = function () {//что-то делать с вашим динамически загружаемым скриптом snowStorm.snowColor = '# 99ccff';  };  firstScript.parentNode.insertBefore (js, firstScript);   

Если он работает для Facebook, он будет работать и для вас.

Причина, по которой мы ищем первый элемент script вместо head или body , заключается в потому что некоторые браузеры не создают его, если он отсутствует, но у нас гарантированно есть элемент script — этот. Подробнее читайте на http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/.

Улучшите этот ответ
отредактировал 8 июля 2015 г. в 2:48
ответил 08 июля 2015 в 02: 41
добавить комментарий |

Вот обобщенная версия того, как Facebook делает это для своей вездесущей кнопки «Нравится»:

  var firstScript = document.getElementsByTagName ('script') [0], js = document.createElement ('script');  js. src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';  js.onload = function () {//что-то делать с вашим динамически загружаемым скриптом snowStorm.snowColor = '# 99ccff';  };  firstScript.parentNode.insertBefore (js, firstScript);   

Если он работает для Facebook, он будет работать и для вас.

Причина, по которой мы ищем первый элемент script вместо head или body , заключается в потому что некоторые браузеры не создают его, если он отсутствует, но у нас гарантированно есть элемент script — этот. Подробнее читайте на http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/.


45

Если вам нужен чистый JavaScript, вы можете использовать document.write .

  document.write (' ');  

Если вы используете библиотеку jQuery, вы можете использовать метод $. getScript .

  $. getScript ("another_script.js  ");  

Улучшите этот ответ
отредактировано 3 октября ’20 в 20:47
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответили d 13 ноя. ’13 в 9:18
добавить комментарий |

Если вам нужен чистый JavaScript, вы можете использовать document.write .

  document.write (' ');  

Если вы используете библиотеку jQuery, вы можете использовать метод $. getScript .

  $. getScript ("another_script.js"  );  

33

Вы также может собирать ваши скрипты с помощью PHP:

Файл main.js.php :

   php  заголовок ('Content-type: text/javascript; charset = utf-8');  include_once ("foo.js.php");  include_once ("bar.js.php");?>//Основной код JavaScript находится здесь  

Улучшите этот ответ
отредактировано 28 сентября 2013 г., 12:50
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 27 декабря ’10 в 21:03
добавить комментарий |

Вы также можете собирать свои скрипты с помощью PHP:

Файл main.js.php :

   php header ('Content-type: text/javascript; charset = utf-8'); include_once ("foo.js.php"); include_once (  "bar.js.php");?>//Основной код JavaScript находится здесь  

30

Большинство решений, показанных здесь, подразумевают динамическую загрузку. Вместо этого я искал компилятор, который собирает все зависимые файлы в один выходной файл. То же, что и препроцессоры Less/Sass иметь дело с CSS @import по-правилу. Так как я не нашел ничего подобного, я написал простой инструмент, решающий эту проблему.

Итак, вот компилятор https://github.com/dsheiko/jsic, который заменяет $ import ("file-path") с запрошенным содержимым файла безопасно. Вот соответствующий плагин Grunt: https://github.com/dsheiko/grunt-jsic.

В главной ветке jQuery они просто объединяют атомарные исходные файлы в один, начиная с intro.js и заканчивающийся outtro.js . Это меня не устраивает, так как не дает гибкости в дизайне исходного кода. Посмотрите, как это работает с jsic:

src/main.js

  var foo = $ import  ("./Form/Input/Tel");  

src/Form/Input/Tel.js

  function () {return {prop: "", method: function () {}}}  

Теперь мы можем запустить компилятор:

  node jsic.js src/main.js build/mail.js  

и получите объединенный файл

build/main.js

  var foo = function () {return {prop: "", method: function () {  }}};  

Улучшите этот ответ
отредактировано 19 октября 2014 в 18:13
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 13 июля ’13 в 21:44
добавить комментарий |

Большинство решений, показанных здесь, подразумевают динамическую загрузку. Вместо этого я искал компилятор, который собирает все зависимые файлы в один выходной файл. Так же, как препроцессоры Less/Sass работают с at-правилом CSS @import . Так как я не нашел ничего подобного, я написал простой инструмент, решающий эту проблему.

Итак, вот компилятор https://github.com/dsheiko/jsic, который заменяет $ import ("file-path") с запрошенным содержимым файла безопасно. Вот соответствующий плагин Grunt: https://github.com/dsheiko/grunt-jsic.

В главной ветке jQuery они просто объединяют атомарные исходные файлы в один, начиная с intro.js и заканчивающийся outtro.js . Это меня не устраивает, так как не дает гибкости в дизайне исходного кода. Посмотрите, как это работает с jsic:

src/main.js

  var foo = $ import  ("./Form/Input/Tel");  

src/Form/Input/Tel.js

  function () {return {prop: "", method: function () {}}}  

Теперь мы можем запустить компилятор:

  node jsic.js src/main.js build/mail.js  

и получите объединенный файл

build/main.js

  var foo = function () {return {prop: "", method: function () {  }}};  

28

Если вы намерены загрузить файл JavaScript с использованием функций из импортированного/включенного файла , вы также можете определить глобальный объект и установить функции как элементы объекта. Например:

global.js

  A = {};  

file1.js

  A.func1 = function () {console.log ("func1");}  

file2.js

  A.func2 = function () {console.log ("func2");}  

main.js

A.func1();A.func2(); 

Вам просто нужно быть осторожным, когда вы включаете скрипты в файл HTML. . Порядок должен быть таким, как показано ниже:

             

Улучшите этот ответ
отредактировано 11 декабря 2016 г. в 9:42
Питер Мортенсен
27. 4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 24 июля ’15 в 06:53
добавить комментарий |

Если вы намерены загрузить файл JavaScript с помощью функций из импортированного/включенного файла , вы также можете определить глобальный объект и установить функции как элементы объекта. Например:

global.js

  A = {};  

file1.js

  A.func1 = function () {console.log ("func1");}  

file2.js

  A.func2 = function () {console.log ("func2");}  

main.js

A.func1();A.func2(); 

Вам просто нужно быть осторожным, когда вы включаете скрипты в файл HTML. . Порядок должен быть таким, как показано ниже:

             

23

Или вместо включения во время выполнения используйте скрипт для объединения перед загрузкой.

Я использую звездочки (не знаю, есть ли другие) . Вы создаете свой код JavaScript в отдельных файлах и включаете комментарии, которые обрабатываются механизмом Sprockets как включенные. Для разработки вы можете включать файлы последовательно, а затем для производства, чтобы объединить их …

См. Также:

  • Знакомство со звездочками : Управление зависимостями и объединение JavaScript
Улучшите этот ответ
отредактировано 19 октября 2014 г. в 18:02
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 7 июня ’12 в 20:48
добавить комментарий |

Или вместо включения во время выполнения используйте сценарий для объединения перед загрузкой.

Я использую Звездочки (не знаю, есть ли другие). Вы создаете свой код JavaScript в отдельных файлах и включаете комментарии, которые обрабатываются движком Sprockets, включая. Для разработки вы можете включать файлы последовательно, а затем для производства, чтобы объединить их …

См. Также:

  • Знакомство со звездочками : Управление зависимостями JavaScript и объединение

23

Это должно сделать:

  xhr = new XMLHttpRequest (); xhr.open ("GET", "/soap/ajax/11.0/connection.  js ", false); xhr.send (); eval (xhr.responseText);  

Улучшите этот ответ
отредактировано 2 ноября ’14 в 13:50
Peter Mortensen
27.4k2121 золотых знака9393 серебряных знака123123 бронзовых знака
ответил 24 марта ’13 в 19:32
добавить комментарий |

Это должно сделать:

  xhr = new XMLHttpRequest (); xhr.open  ("GET", "/soap/ajax/11.0/connection.js", false); xhr.send (); eval (xhr.responseText);  

21

У меня была простая проблема, но ответы на этот вопрос меня озадачили.

Мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js), в другом файле JavaScript (main.js).

Для этого я сделал, как показано ниже :

Загрузил код JavaScript в файл HTML в правильном порядке, сначала myvariables.js, затем main.js:

             

Файл: myvariables.js

  var myVar1 = "Я - переменная из myvariables.js";  

Файл: main.js

 //... function bodyReady () {//... alert (myVar1); //Это показывает "Я - переменная из myvariables.js", что мне было нужно//...}//...  

Как вы видели, я использовал переменную в одном файле JavaScript в другом файле JavaScript, но мне не нужно было включать один в другой. Мне просто нужно было убедиться, что первый файл JavaScript загружается перед вторым файлом JavaScript, а переменные первого файла JavaScript автоматически доступны во втором файле JavaScript.

Это спасло меня. надеюсь, это поможет.

Улучшите этот ответ
отредактировано 11 дек. '16, 9:45
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 22 июля '15 в 2:15
добавить комментарий |

У меня была простая проблема, но ответы на этот вопрос сбили меня с толку.

Мне пришлось используйте переменную (myVar1), определенную в одном файле JavaScript (myvariables.js), в другом файле JavaScript (main.js).

Для этого я сделал следующее:

Загрузил код JavaScript в файл HTML в правильном порядке, сначала myvariables.js, затем main.js:

            

Файл: myvariables.js

  var myVar1 = "Я - переменная из myvariables.js";  

Файл: main.js

 //... function bodyReady () {//... alert (myVar1); //Это показывает "Я - переменная из myvariables.js", что мне было нужно//...}//...  

Как вы видели, я использовал переменную в одном файле JavaScript в другом файле JavaScript, но мне не нужно было включать один в другой. Мне просто нужно было убедиться, что первый файл JavaScript загружается перед вторым файлом JavaScript, а переменные первого файла JavaScript автоматически доступны во втором файле JavaScript.

Это спасло меня. Надеюсь, это поможет.


18

В современный язык с проверкой того, был ли уже загружен скрипт, это будет:

  function loadJs (url) {return new Promise ((resolve, reject) => {if (  document.querySelector (`head> script [src =" $ {url} "]`)! == null) {console.warn (`сценарий уже загружен: $ {url}`); resolve ();} const script =  document.createElement ("script"); script.src = url; script.onload = resolve; script.onerror = function (cause) {//Это может быть полезно для кода обработки ошибок. Причина.message = `error пытается  загрузить скрипт $ {url} `; reject (reason);}; document.head.appendChild (script);});}  

Использование (async/await):

  попробуйте {await loadJs ("https://.../script.js");  } catch (ошибка) {console.log (ошибка);  }  

или

  await loadJs ("https://.../script.js"). catch (err => {});  

Использование (Promise):

  loadJs ("https://..  ./script.js ") .then (res => {}) .catch (err => {});  

Улучшите этот ответ
отредактировано 3 октября '20 в 19:47
Питер Мортенсен
27,4k2121 золотых значков 9393 серебра 123123 бронзовых знака
ответ дан 20 июля '17 в 18: 15
  • Это очень хорошо, если вы не хотите связываться с модулями и не хотите использовать функцию обратного вызова, но хотите использовать async / ждать . - mike rodent 19 июл. '20 в 7:25
добавить комментарий |

На современном языке с проверкой, загружен ли уже скрипт, это будет:

  function loadJs (url) {return new Promise ((resolve, reject) => {if (document.querySelector (`head> script [src =" $ {url} "]`)! == null) {  console.warn (`script уже загружен: $ {url}`); resolve ();} const script = document.createElement ("script"); script.src = url; script.onload = resolve; script.onerror = function  (причина) {//Это может быть полезно для кода обработки ошибок. Причина.message = `ошибка при попытке загрузить скрипт $ {url}`; reject (reason);}; document.head.appendChild (script);})  ;}  

Использование (async/await):

  попробуйте {await loadJs ("https://.../ script.js ");  } catch (ошибка) {console.log (ошибка);  }  

или

  await loadJs ("https://.../script.js") .catch (err  => {});  

Использование (обещание):

  loadJs ("https://.../script  .js ") .then (res => {}) .catch (err => {});  

17

В случае, если вы используете веб-воркеров и хотите включить дополнительные скрипты в сферу деятельности воркера, другие ответы предоставлены о добавлении скриптов в head и т. д. вам не подойдет.

К счастью, у Web Workers есть собственная функция importScripts , которая является глобальной функция в рамках Web Worker, встроенная в сам браузер, поскольку она является частью спецификации.

В качестве альтернативы, поскольку второй по количеству голосов ответ на ваш вопрос подчеркивает, RequireJS также может обрабатывать включение скриптов внутри Web Worker (вероятно, вызывающего сам importScripts ) , но с некоторыми другими полезными функциями).

Улучшите этот ответ
отредактировано 23 мая 2017, 12:34
Сообщество ♦
111 серебряных значков
ответил 01 января 2015, в 8:58
добавить комментарий |

Если вы используете веб-воркеров и хотите включить дополнительные скрипты в сферу деятельности воркера, другие ответы предоставили о добавлении скриптов в тег head и т. д. не подойдет вам.

К счастью, у Web Workers есть собственная функция importScripts , которая глобальная функция в области Web Worker, встроенная в сам браузер, поскольку она является частью спецификации.

В качестве альтернативы, как подчеркивает второй по количеству голосов ответ на ваш вопрос, RequireJS также может обрабатывать включая скрипты внутри Web Worker (вероятно, вызывающий сам importScripts , но с некоторыми другими полезными функциями).


16

Синтаксис @import для импортирования CSS-подобного JavaScript возможен с использованием такого инструмента, как Mixture через специальный файл .mix типа (см. здесь). Я предполагаю, что приложение делает это одним из вышеупомянутых методов.

Из документации Mixture по файлам .mix :

Файлы микса - это просто файлы .js или .css с расширением .mix. в имени файла. Файл Amix просто расширяет функциональность файла обычного стиля или файла сценария и позволяет импортировать и комбинировать.

Вот пример файла .mix , который объединяет несколько файлов .js в один:

 //scripts-global.mix.js//Plugins - Global @ import "global-plugins /headroom.js";@import "global-plugins/retina-1.1.0.js"; @ import "global-plugins/isotope.js"; @ import "global-plugins/jquery.fitvids.js";  

Mixture выводит это как scripts-global.js , а также как минифицированную версию ( scripts-global.min.js ).

Примечание: я никоим образом не связан с Mixture, кроме как использую его в качестве инструмента для разработки интерфейса. Я столкнулся с этим вопросом, когда увидел файл JavaScript .mix в действии (в одном из шаблонов Mixture) и был немного сбит с толку («вы можете это сделать?» - подумал я про себя ). Потом я понял, что это тип файла для конкретного приложения (несколько разочаровал, согласился). Тем не менее, посчитал, что эти знания могут быть полезны другим.

Примечание: выпуск Mixture был прекращен 26.07.2016 (после того, как открытый исходный код был открыт 04.04.2015). 12).

Улучшите этот ответ
отредактировано 05 окт., 17:34
ответил 14 марта '14 в 4:40
  • Лучше избегать «Обновления» (метаинформации, принадлежащие ревизии история к этому посту). Вместо этого примените его к контенту (не к этому сообщению), например «Открытый исходный код Mixture был открыт 12 апреля 2015 г., а выпуск был прекращен 26 июля 2016 г.» - Питер Мортенсен 3 октября 2020 г., 20:50
добавить комментарий |

Синтаксис @import для импортирования CSS-подобного JavaScript возможен с использованием такого инструмента, как Mixture через их специальный тип файла .mix (см. здесь). Я предполагаю, что приложение делает это одним из вышеупомянутых методов.

Из документации Mixture по файлам .mix :

Файлы микса - это просто файлы .js или .css с расширением .mix. в имени файла. Файл Amix просто расширяет функциональность файла обычного стиля или файла сценария и позволяет импортировать и комбинировать.

Вот пример файла .mix , который объединяет несколько файлов .js в один:

 //scripts-global.mix.js//Plugins - Global @ import "global-plugins /headroom.js";@import "global-plugins/retina-1.1.0.js"; @ import "global-plugins/isotope.js"; @ import "global-plugins/jquery.fitvids.js";  

Mixture выводит это как scripts-global.js , а также как минифицированную версию ( scripts-global.min.js ).

Примечание: я никоим образом не связан с Mixture, кроме как использую его в качестве инструмента для разработки интерфейса. Я столкнулся с этим вопросом, когда увидел файл JavaScript .mix в действии (в одном из шаблонов Mixture) и был немного сбит с толку («вы можете это сделать?» - подумал я про себя ). Потом я понял, что это тип файла для конкретного приложения (несколько разочаровал, согласился). Тем не менее, посчитал, что эти знания могут быть полезны другим.

Примечание: выпуск Mixture был прекращен 26.07.2016 (после того, как исходный код был открыт 04.04.2015/ 12).


15

Хотя эти ответы Отлично, есть простое «решение», которое существует с момента загрузки скрипта, и оно охватывает 99,999% случаев использования большинством людей. Просто включите нужный сценарий перед тем, как он требует.. Для большинства проектов не требуется много времени, чтобы определить, какие скрипты необходимы и в каком порядке.

           

Если для сценария 2 требуется сценарий 1, это действительно самый простой способ сделать что-то подобное. Я очень удивлен, что никто не поднял этот вопрос, поскольку это наиболее очевидный и простой ответ, который применим почти в каждом отдельном случае.

Улучшите этот ответ
ответил 12 апр 2018 в 19:38
  • Это хороший ответ. Возможно, его пропустили, потому что он не дает прямого ответа на вопрос, но также важно понимать, что «обычно вам не нужно этого делать». Тем более, что другие решения такие беспорядочные. - Натан Ковнер, 27 июля '20, в 18:44
  • Но это работает только в веб-браузере? А как насчет автономного модульного тестирования (скажем, под Node.js)? - Питер Мортенсен 03 окт. '20 в 20:31
добавить комментарий |

Хотя эти ответы прекрасны, существует простое «решение», которое существует с момента загрузки скрипта, и оно покрывает 99,999% вариантов использования большинства людей. Просто включите нужный сценарий перед тем, как он требует. Для большинства проектов не требуется много времени, чтобы определить, какие скрипты необходимы и в каком порядке.

           

Если для сценария 2 требуется сценарий 1, это действительно самый простой способ сделать что-то подобное. Я очень удивлен, что никто не поднял этот вопрос, поскольку это наиболее очевидный и простой ответ, который применим почти в каждом отдельном случае.


14
  var js = document.createElement ("script"); js.type = "text/javascript";  js.src = jsFilePath; document.body. appendChild (js);  

Улучшите этот ответ
отредактировано 22 августа 2012 г. в 06:44
Spudley
154k3737 золотых знаков218218 серебряных знаков289289 бронзовых знаков
ответил 22 авг. >
добавить комментарий |

  var js = document.createElement ("script"); js.type = "text/javascript"; js  .src = jsFilePath; document.body.appendChild (js);  

13

Мой обычный метод:

  var require = function (src, cb) {cb = cb ||  function () {};  var newScriptTag = document.createElement ('сценарий'), firstScriptTag = document.getElementsByTagName ('сценарий') [0];  newScriptTag.src = src;  newScriptTag.async = true;  newScriptTag.onload = newScriptTag.onreadystatechange = функция () {(! this.readyState || this.readyState === 'загружено' || this.readyState === 'завершено') && (cb ());  };  firstScriptTag.parentNode.insertBefore (newScriptTag, firstScriptTag);}  

Он отлично работает и не требует перезагрузки страниц для меня. Я пробовал метод AJAX (один из других ответов), но, похоже, он не так хорошо работает для меня.

Вот объяснение того, как работает код для тех, кому интересно: по сути, он создает новый тег скрипта (после первого) URL-адреса. Он устанавливает его в асинхронный режим, поэтому он не блокирует остальную часть кода, но вызывает обратный вызов, когда readyState (состояние загружаемого содержимого) изменяется на «загружено».

Улучшить этот ответ
отредактировано 26 августа 2017 в 17:02
ответил 31 мая '13 в 22: 31
добавить комментарий |

Мой обычный метод:

  var require = function (src, cb)  {cb = cb ||  function () {};  var newScriptTag = document.createElement ('сценарий'), firstScriptTag = document.getElementsByTagName ('сценарий') [0];  newScriptTag.src = src;  newScriptTag.async = true;  newScriptTag.onload = newScriptTag.onreadystatechange = функция () {(! this.readyState || this.readyState === 'загружено' || this.readyState === 'завершено') && (cb ());  };  firstScriptTag.parentNode. insertBefore (newScriptTag, firstScriptTag);}  

Он отлично работает и не требует перезагрузки страниц для меня. Я пробовал метод AJAX (один из других ответов), но, похоже, он не так хорошо работает для меня.

Вот объяснение того, как работает код для тех, кому интересно: по сути, он создает новый тег скрипта (после первого) URL-адреса. Он устанавливает его в асинхронный режим, поэтому он не блокирует остальную часть кода, но вызывает обратный вызов, когда readyState (состояние загружаемого содержимого) изменяется на «загружено».


12

Я написал простой модуль, который автоматизирует работу по импорту/включению скриптов модуля в JavaScript. Подробное описание кода см. В сообщении блога JavaScript require/import/include modules .

 //-----  ИСПОЛЬЗОВАНИЕ ----- require ('ivar.util.string'); require ('ivar.net. *'); Require ('ivar/util/array.js'); require ('http://ajax.  googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js '); ready (function () {//Делаем что-нибудь, когда требуемые скрипты загружены}); //-------------------- var _rmod = _rmod ||  {}; //Требовать модуль namespace_rmod.LOADED = false; _rmod.on_ready_fn_stack = []; _ rmod.libpath = ''; _rmod.imported = {}; _ rmod.loading = {scripts: {}, length: 0}; _ rmod.findScriptPath =  функция (имя_сценария) {var script_elems = document.getElementsByTagName ('сценарий');  for (var i = 0; i  -1) {uri = script_name;  var lastSlash = uri.lastIndexOf ('/');  script_name = uri.substring (lastSlash + 1, uri.length);  } else {uri = _rmod.namespaceToUri (имя_сценария, ivar._private.libpath);  } if (! _rmod.loading.scripts.hasOwnProperty (имя_сценария) &&! _rmod.imported.hasOwnProperty (имя_сценария)) {_rmod.injectScript (имя_сценария, uri, _rmod.requireCallback, _rmod.requirePrepare);  }}; var ready = function (fn) {_rmod.on_ready_fn_stack.push (fn);};  

Улучшите этот ответ
отредактировано 19 октября 2014 г. в 18:26
Peter Mortensen
27.4k2121 золотых знака9393 серебряных знака123123 бронзовых знака
ответил 12 апр. '13 в 16:34
добавить комментарий |

Я написал простой модуль, который автоматизирует работу по импорту/включению скриптов модуля в JavaScript. Подробное описание кода см. В сообщении блога JavaScript require/import/include modules .

 //-----  ИСПОЛЬЗОВАНИЕ ----- require ('ivar.util.string'); require ('ivar.net. *'); Require ('ivar/util/array.js'); require ('http://ajax.  googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js '); ready (function () {//Делаем что-нибудь, когда требуемые скрипты загружены}); //-------------------- var _rmod = _rmod ||  {}; //Требовать модуль namespace_rmod.LOADED = false; _rmod.on_ready_fn_stack = []; _ rmod.libpath = ''; _rmod.imported = {}; _ rmod.loading = {scripts: {}, length: 0}; _ rmod.findScriptPath =  функция (имя_сценария) {var script_elems = document.getElementsByTagName ('сценарий');  for (var i = 0; i  -1) {uri = script_name;  var lastSlash = uri.lastIndexOf ('/');  script_name = uri.substring (lastSlash + 1, uri.length);  } else {uri = _rmod.namespaceToUri (имя_сценария, ivar._private.libpath);  } if (! _rmod.loading.scripts.hasOwnProperty (имя_сценария) &&! _rmod.imported.hasOwnProperty (имя_сценария)) {_rmod.injectScript (имя_сценария, uri, _rmod.requireCallback, _rmod.requirePrepare);  }}; var ready = function (fn) {_rmod.on_ready_fn_stack.push (fn);};  

11

Да , используйте type = "module" в теге скрипта (поддержка):

     

И в сценарии . js включите другой файл, например:

  import {hello} from './module.js';...//alert (hello ())  ;  

В 'module.js' вы должны экспортировать функцию/класс, который вы будете импортировать:

  export function hello (  ) {return "Hello World";}  

Рабочий пример здесь.

Улучшите этот ответ
отредактировано 03 окт.2020, 20:06
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 10 июля '19 в 16:12
добавить комментарий |

Да , используйте type = "module" в теге скрипта (поддержка):

     

И в script.js файл включает другой файл, например этот:

  import {hello} from './module.js';...//alert (hello  ());  

В 'module.js' вы должны экспортировать функцию/класс, которые вы будете импортировать:

  export  function hello () {return "Hello World";}  

Вот рабочий пример.


10

Также есть Head.js. С этим очень легко справиться:

  head.load ("js/jquery.min.js", "js/jquery.someplugin.js", "js/jquery  .someplugin.css ", function () {alert (" Все в порядке! ");});  

Как видите, это проще, чем Require.js, и так же удобно, как Метод jQuery $. getScript . Он также имеет некоторые расширенные функции, такие как условная загрузка, обнаружение функций и многое другое.

Улучшите этот ответ
отредактировано 19 октября 2014 г. в 18:18
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 22 ноября '13 в 18:40
добавить комментарий |

Также есть Head.js. С этим очень легко справиться:

  head.load ("js/jquery.min.js", "js/jquery.someplugin.js", "js/jquery  .someplugin.css ", function () {alert (" Все в порядке! ");});  

Как видите, это проще, чем Require.js, и так же удобно, как Метод jQuery $. getScript . Он также имеет некоторые расширенные функции, такие как условная загрузка, обнаружение функций и многое другое..


10

Есть много потенциальных ответов по этому вопросу. Мой ответ, очевидно, основан на ряде из них. Это то, к чему я пришел после прочтения всех ответов.

Проблема с $. GetScript и действительно с любым другим решением, требующим обратного вызова при загрузке, заключается в полное состоит в том, что если у вас есть несколько файлов, которые используют его и зависят друг от друга, у вас больше нет возможности узнать, когда все скрипты были загружены (если они вложены в несколько файлов).

Пример :

file3.js

  var f3obj = "file3";//Определить другое  

file2.js:

  var f2obj = "file2"; $. getScript ("file3.js", function () {alert (f3obj);//Используем что угодно  определено в file3.});  

file1.js:

  $. getScript ("file2.js", function (  ) {alert (f3obj);//Это, вероятно, не удастся, потому что file3 гарантированно загружен только внутри обратного вызова в file2. alert (f2obj);//Используйте все, что определено в загруженном скрипте ...});  

Вы правы, когда говорите, что можете указать Ajax для синхронного запуска или использовать XMLHttp Request, но текущая тенденция, похоже, состоит в том, чтобы не рекомендовать синхронные запросы, поэтому вы не можете получить полную поддержку браузера сейчас или в будущем.

Вы можете попробовать использовать $. When , чтобы проверить массив отложенных объектов, но теперь вы делаете это в каждом файле, и file2 будет считаться загруженным, как только будет выполнен $. when , а не при обратном вызове выполняется, поэтому файл1 продолжает выполнение до загрузки файла3. Это действительно все та же проблема.

Я решил вернуться назад, а не вперед. Спасибо, document.writeln . Я знаю, что это табу, но пока оно используется правильно, это хорошо работает. В итоге вы получаете код, который можно легко отлаживать, правильно отображать в DOM и обеспечивать правильный порядок загрузки зависимостей.

Конечно, вы можете использовать $ ("body"). Append ( ), но тогда вы больше не сможете правильно отлаживать.

ПРИМЕЧАНИЕ. Вы должны использовать это только во время загрузки страницы, иначе вы получите пустой экран. Другими словами, всегда помещайте это перед/вне document.ready . Я не тестировал использование этого метода после загрузки страницы в событии щелчка или в чем-то подобном, но я почти уверен, что это не удастся.

Мне понравилась идея расширения jQuery, но, очевидно, вы не нужно.

Перед вызовом document.writeln он проверяет, не загружен ли еще скрипт, оценивая все элементы скрипта.

Я предполагаю, что сценарий не выполняется полностью, пока не будет выполнено его событие document.ready . (Я знаю, что использование document.ready не требуется, но многие люди его используют, и обработка этого является мерой предосторожности. )

При загрузке дополнительных файлов обратные вызовы document.ready будут выполняться в неправильном порядке. Чтобы решить эту проблему, когда сценарий фактически загружен, импортировавший его сценарий повторно импортируется и выполнение останавливается. Это приводит к тому, что у исходного файла теперь выполняется обратный вызов document.ready после любого из импортируемых им скриптов.

Вместо этого подхода вы можете попытаться изменить jQuery readyList , но это казалось худшим решением.

Решение:

  $. extend (  true, {import_js: function (scriptpath, reAddLast) {if (typeof reAddLast === "undefined" || reAddLast === null) {reAddLast = true;//По умолчанию это значение равно true. Оно не используется в конце  user, только для правильной рекурсии.} var found = false; if (reAddLast == true)//Если мы повторно добавляем исходный скрипт, нам все равно, был ли он уже добавлен. {found = $ ('script  ') .filter (function () {return ($ (this) .attr (' src ') == scriptpath);}). length! = 0;//jQuery, чтобы проверить, существует ли уже скрипт. (замените его на  прямой JavaScript, если вам не нравится jQuery.} if (found == false) {var callScriptPath = $ ('script'). last (). attr ("src");//Получить  скрипт, который в данный момент загружается.  Опять же, это создает ограничение, когда это не должно использоваться в кнопке, а только перед document.ready.  document.writeln (" "); //Добавляем скрипт в документ с помощью Writeln if (reAddLast) {$ .import_js (CallingScriptPath, false); //Вызов самого себя с исходным скриптом, чтобы исправить порядок.  бросить 'Сценарий чтения в правильном порядке:' + scriptpath + ' 

Использование:

File3:

  var f3obj = "file3"  ;//Определяем другой материал $ (function () {f3obj = "file3docready";});  

File2:

   $ .import_js ('js/file3.js'); var f2obj = "file2"; $ (function () {f2obj = "file2docready";});  

File1:

  $. import_js ('js/file2.js');//Использовать объекты из file2 или file3alert (f3obj); //предупреждение "файл3" (f2obj); //"file2" $ (function () {//Используем объекты из file2 или file3 еще немного. оповещение (f3obj); //Предупреждение "file3docready" (f2obj); //"file2docready"});  

Улучшите этот ответ
отредактировал 20 июня '20 в 9:12
Сообщество ♦ 111 серебряный значок
ответил 11 января 2015 в 20:19
добавить комментарий |

На этот вопрос есть много возможных ответов. Мой ответ, очевидно, основан на ряде из них. Это то, к чему я пришел после прочтения всех ответов.

Проблема с $. GetScript и действительно с любым другим решением, требующим обратного вызова при загрузке, заключается в полное состоит в том, что если у вас есть несколько файлов, которые используют его и зависят друг от друга, у вас больше нет возможности узнать, когда все скрипты были загружены (если они вложены в несколько файлов).

Пример :

file3.js

  var f3obj = "file3";//Определить другое  

file2.js:

  var f2obj = "file2"; $. getScript ("file3.js", function () {alert (f3obj);//Используем что угодно  определено в file3.});  

file1.js:

  $. getScript ("file2.js", function (  ) {alert (f3obj);//Это, вероятно, не удастся, потому что file3 гарантированно загружен только внутри обратного вызова в file2. alert (f2obj);//Используйте все, что определено в загруженном скрипте ...});  

Вы правы, когда говорите, что можете указать Ajax для синхронного запуска или использовать XMLHttp Request, но текущая тенденция, похоже, состоит в том, чтобы не рекомендовать синхронные запросы, поэтому вы не можете получить полную поддержку браузера сейчас или в будущем.

Вы можете попробовать использовать $. When , чтобы проверить массив отложенных объектов, но теперь вы делаете это в каждом файле, и file2 будет считаться загруженным, как только будет выполнен $. when , а не при обратном вызове выполняется, поэтому файл1 продолжает выполнение до загрузки файла3. Это действительно все та же проблема.

Я решил вернуться назад, а не вперед. Спасибо, document.writeln . Я знаю, что это табу, но пока оно используется правильно, это хорошо работает. В итоге вы получаете код, который можно легко отлаживать, правильно отображать в DOM и обеспечивать правильный порядок загрузки зависимостей.

Конечно, вы можете использовать $ ("body"). Append ( ), но тогда вы больше не сможете правильно отлаживать.

ПРИМЕЧАНИЕ. Вы должны использовать это только во время загрузки страницы, иначе вы получите пустой экран. Другими словами, всегда помещайте это перед/вне document.ready . Я не тестировал использование этого после загрузки страницы в событии щелчка или в чем-то подобном, но я почти уверен, что это не удастся.

Мне понравилась идея расширения jQuery, но, очевидно, в этом нет необходимости.

Перед вызовом document.writeln , он проверяет, что сценарий еще не загружен, оценивая все элементы сценария.

Я предполагаю, что сценарий не выполняется полностью до тех пор, пока его document.ready событие выполнено. (Я знаю, что использование document.ready не требуется, но многие люди его используют, и обработка этого является мерой предосторожности.)

Когда дополнительные файлы загружаются, Обратные вызовы document.ready будут выполняться в неправильном порядке. Чтобы решить эту проблему, когда сценарий фактически загружен, импортировавший его сценарий повторно импортируется и выполнение останавливается. Это приводит к тому, что у исходного файла теперь выполняется обратный вызов document.ready после любого из импортируемых им скриптов.

Вместо этого подхода вы можете попытаться изменить jQuery readyList , но это казалось худшим решением.

Решение:

  $. extend (  true, {import_js: function (scriptpath, reAddLast) {if (typeof reAddLast === "undefined" || reAddLast === null) {reAddLast = true;//По умолчанию это значение равно true. Оно не используется в конце  user, только для правильной рекурсии.} var found = false; if (reAddLast == true)//Если мы повторно добавляем исходный скрипт, нам все равно, был ли он уже добавлен. {found = $ ('script  ') .filter (function () {return ($ (this) .attr (' src ') == scriptpath);}). length! = 0;//jQuery, чтобы проверить, существует ли уже скрипт. (замените его на  прямой JavaScript, если вам не нравится jQuery.} if (found == false) {var callScriptPath = $ ('script'). last (). attr ("src");//Получить  скрипт, который в данный момент загружается.  Опять же, это создает ограничение, когда это не должно использоваться в кнопке, а только перед document.ready.  document.writeln (" "); //Добавляем скрипт в документ с помощью Writeln if (reAddLast) {$ .import_js (CallingScriptPath, false); //Вызов самого себя с исходным скриптом, чтобы исправить порядок.  бросить 'Сценарий чтения в правильном порядке:' + scriptpath + ' 

Использование:

File3:

  var f3obj = "file3"  ;//Определяем другие элементы $ (function () {f3obj = "file3docready";});  

File2:

   $ .import_js ('js/file3.js'); var f2obj = "file2"; $ (function () {f2obj = "file2docready";});  

File1:

  $. import_js ('js/file2. js ');//Используем объекты из file2 или file3alert (f3obj); //предупреждение "файл3" (f2obj); //"file2" $ (function () {//Используйте еще объекты из file2 или file3. alert (f3obj);//"file3docready" alert (f2obj);//"file2docready"});  

10

Я пришел к этому вопросу, потому что ищите простой способ поддерживать коллекцию полезных плагинов JavaScript. Увидев здесь некоторые решения, я пришел к следующему:

  1. Настройте файл с именем «plugins.js» (или extension.js или что-то еще вы хотите). Храните файлы плагинов вместе с этим одним главным файлом.

  2. plugins.js будет иметь массив с именем pluginNames [] , который мы будем перебирать each () , а затем добавлять тег в заголовок для каждого плагина

 //устанавливаем массив, который будет обновляться при добавлении или удалении файлов плагинов var pluginNames = ["lettering", "fittext", "butterjam" и т. д.];//один тег скрипта для  каждый плагин $ .each (pluginNames, function () {$ ('head'). append (' ');});   
  1. Вручную вызовите только один файл в голове:

НО:

Даже несмотря на то, что все плагины помещаются в тег заголовка, как они должны до, они не всегда запускаются браузером, когда вы нажимаете на страницу или обновляете ее.

Я обнаружил, что более надежно просто написать теги сценария во включении PHP. Вам нужно написать его только один раз, и это столько же работы, сколько вызов плагина с помощью JavaScript.

Улучшите этот ответ
отредактировано 10 января '20 в 5:03
ответил 01 декабря 2011 в 5:36
добавить комментарий |

Я пришел к этому вопросу, потому что искал простой способ поддерживать коллекцию полезных плагинов JavaScript. Увидев здесь некоторые решения, я пришел к следующему:

  1. Настройте файл с именем «plugins.js» (или extension.js или что-то еще вы хотите). Храните файлы плагинов вместе с этим одним главным файлом.

  2. плагины. js будет иметь массив с именем pluginNames [] , который мы будем перебирать по each () , а затем добавим тег в заголовок для каждого плагина

 //устанавливаем массив, который будет обновляться при добавлении или удалении файлов плагина var pluginNames = ["lettering"  , "fittext", "butterjam" и т. д.];//по одному тегу скрипта для каждого плагина $ .each (pluginNames, function () {$ ('head'). append ('  ');});  
  1. Вручную вызовите только один файл в вашей голове:

НО:

Несмотря на то, что все плагины помещаются в тег заголовка так, как они должны, они не всегда запускаются браузером, когда вы нажимаете на страницу или обновляете ее.

I Я обнаружил, что более надежно просто написать теги сценария во включении PHP. Вам нужно написать его только один раз, и это столько же работы, сколько вызов плагина с помощью JavaScript.


10

Есть несколько способов реализовать модули в JavaScript. Вот два самых популярных из них:

Модули ES6

Браузеры пока не поддерживают эту систему модуляции, поэтому для чтобы использовать этот синтаксис, вы должны использовать пакет, например Webpack. В любом случае лучше использовать сборщик, потому что он может объединить все ваши разные файлы в один (или несколько связанных) файлов. Это ускорит передачу файлов с сервера клиенту, поскольку каждый HTTP-запрос связан с некоторыми накладными расходами. Таким образом, уменьшая общий HTTP-запрос, мы улучшаем производительность. Вот пример модулей ES6:

 //main.js fileexport function add (a, b) {return a + b;} экспортировать функцию по умолчанию multiply (a, b  ) {return a * b;}//test.js fileimport {add}, умножаем на './main'; //Для именованного экспорта в фигурных скобках {export1, export2}//Для экспорта по умолчанию без {} console.log (multiply (2, 2)); //регистрирует 4console.log (add (1, 2)); //регистрирует 3  

CommonJS (используется в Node.js)

Эта система модуляции используется в Node .js. Вы в основном добавляете свой экспорт в объект, который называется module.exports . Затем вы можете получить доступ к этому объекту через require ('modulePath') . Здесь важно понимать, что эти модули кэшируются, поэтому, если вы require () два раза определенный модуль, он вернет уже созданный модуль.

 //файл main.jsfunction add (a, b) {return a + b;} module.exports = add; //Здесь мы добавляем нашу функцию 'add' к объекту экспорта//test.js fileconst add = require ('./main'); console. журнал (добавить (1,2)); //регистрирует 3  

Улучшите этот ответ
отредактировано 3 октября '20 в 20:17
Peter Mortensen
27.4k2121 золотой знак9393 серебряных знака123123 бронзовых знака
ответил 10 августа '18 в 17:11
добавить комментарий |

Есть несколько способов реализовать модули в JavaScript. Вот два самых популярных из них:

Модули ES6

Браузеры пока не поддерживают эту систему модуляции, поэтому для чтобы использовать этот синтаксис, вы должны использовать пакет, например Webpack. В любом случае лучше использовать сборщик, потому что он может объединить все ваши разные файлы в один (или несколько связанных) файлов. Это ускорит передачу файлов с сервера клиенту, поскольку каждый HTTP-запрос связан с некоторыми накладными расходами. Таким образом, уменьшая общий HTTP-запрос, мы улучшаем производительность. Вот пример модулей ES6:

 //main.js fileexport function add (a, b) {return a + b;} экспортировать функцию по умолчанию multiply (a, b  ) {return a * b;}//test.js fileimport {add}, умножаем на './main'; //Для именованного экспорта в фигурных скобках {export1, export2}//Для экспорта по умолчанию без {} console.log (multiply (2, 2)); //регистрирует 4console.log (add (1, 2)); //регистрирует 3  

CommonJS (используется в Node.js)

Эта система модуляции используется в Node .js. Вы в основном добавляете свой экспорт в объект, который называется module.exports . Затем вы можете получить доступ к этому объекту через require ('modulePath') . Здесь важно понимать, что эти модули кэшируются, поэтому, если вы require () два раза определенный модуль, он вернет уже созданный модуль.

 //файл main.jsfunction add (a, b) {return a + b;} module.exports = add; //Здесь мы добавляем нашу функцию 'add' к объекту экспорта//test.js fileconst add = require ('./main'); console.log (add (1,2)); //регистрирует 3  

Оцените статью
logicle.ru
Добавить комментарий