Подключение import в js коде
Добрый день всем. Скажите как правильно и можно ли подключить с удаленного репозитория js в самом js файле .
Например есть //web.com/js.js есть в сайте подключения к main.js в самом main.js как можно подключить //web.com/js.js ? |
|
Poznakomlus, я вам не рекомендую использовать https://requirejs.org/, поскольку он заставляет писать нестандартный код. И тем более в JS есть понятие модуля (ключеные слова import и export) https://requirejs.org/ выглядит как костыль!
Цитата:
файл main.js import myObject from "https://web.com/js.js"; // тут можно использовать ваш myObject(Если вам нужна поддержка старых браузеров, то вы можете использовать parcel) Если https://web.com/js.js ведёт к файлу, который содержит скрипт, который объявляет что-то глобально (и ничего не экспортирует), то вы можете его подключить при помощи функции import. Например... файл main.js
import("https://web.com/js.js").then(() => {
// тут можно использовать ваш глобальный объект
});
|
Malleys,
Он был одно время популярен и в нем была возможность работы с разными типами модулей. Рейтинг 12,4 k GitHub То, что вы рекомендуете оправдано в разаработке современных разработок откидывая старые версии броузеров Когда то import небыло, тем более parcel. И сейчас совместимость с браузерами бывает отталкивает. Ранее использовал нечто подобное
var loader = (function (src, callback) {
var doc = window.document, cache = {};
return function (src, callback) {
if (cache.hasOwnProperty(src)) {
callback && (callback());
} else {
var el = doc.createElement('script'), loaded = 0;
el.src = src, doc.body.appendChild(el), cache[src] = 1;
if (callback) {
el.onload = el.onreadystatechange = function () {
if ((el.readyState && el.readyState !== 'complete' && el.readyState !== 'loaded') || loaded)
return false;
el.onload = el.onreadystatechange = null, loaded = 1, callback();
};
}
}
};
}());
loader('test1.js', me);
function me() {
alert('This callback Me');
}
|
Если постоянно думать о браузерах 5-ти летней давности и старше, то почти ни чем нельзя пользоваться.
|
voraa,
это да, но вебкомпоненты в пример мы ждем очень долго иначе большинство фреймворков пошло в утиль зачастую перед разработкой смотрят процент использования браузеров и ставят в версси тз минимальные значения. и есть полифилы, и RequireJS works in IE 6+, Firefox 2+, Safari 3.2+, Chrome 3+, and Opera 10+. |
Цитата:
|
Мне кажется, что сознательная ориентация на старье не побуждает пользователей обновлять браузеры.
По мне нормально, если разработчик ориентируется на сегодня - 3 года. Если на платформе существуют хотя бы пара браузеров, которые поддерживают технологию или api, то на них и нужно ориентироваться. |
Цитата:
вы спрашиваете процент старых браузеров, я привел данные из документации это минимальные версии браузеров Цитата:
понятно, что все мы разрабатываем с учетом современных технологий, но если стоит задача поддержка старых версий то это да решение |
[quote=Poznakomlus;519616
здесь не понял совсем [/QUOTE] Зачем ориентироваться на ИЕ6-11, Когда в Винде есть Хром, Опера, Лис? Совершенно бесплатные. И почему ИЕ6, а не ИЕ4 или НетскэйпНавигатор Ну представьте, если бы производители игр (или более нужных программ) ориентировались на Вин-95 на Пентиуме-4? Но сайтопрограммеры почему то принуждают себя (или принуждаются) к этому. |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Но сайт это не только Javascript, это еще и HTML и CSS. С ними то как быть? |
Malleys, Google Closure Compiler, каим боком к import относится
Цитата:
Цитата:
У тех библиотек которые вы предлагаете есть версии совместимости(минимальные) так-же. Цитата:
Цитата:
Я переписывать ничего не предлагал, зачем вы сочиняете от моего имени? Не нравится мое мнение, что скажите про 12 тысяч других. Или это тоже не аргумент? Научитесь считатся с мнениями других. Мы все в жизни ошибаемся, в любых сферах. Но учитывать , обращать на мнения доугих стоит. Они могут быть правильными или неправильными в вашем понимании (но рассмотреть и учитывать их нужно, с вашими весами). Глядишь через какой-то промежуток времени помеяется взгляд. :) |
Цитата:
Далее для Poznakomlus... Цитата:
Цитата:
Цитата:
Цитата:
И почему виртуальный DOM должен реализован внутри веб-компонент? Разве веб-компонент не должен быть представим при помощи виртуального DOM (конечно же должен, что мы и видим, используя, например, React), как и все остальные HTML-элементы. И вообще идея виртуального DOM заключается в том, что есть некий объект o1, который описывает, как должен выглядеть реальный DOM без привязки к нему. После некого изменения появляется другой объект o2, который сравнивается с o1. Различия применяются к реальному DOM. Это один из способов изменения реального DOM, но совершенно непонятно, зачем внутри веб-компонент нужна обвязка вокруг уже существующего API. Не нужно решая проблемы всё время добавлять новый синтаксис или библиотеки в ядро языка. Вы написали, что ждёте «веб-компоненты». Не совсем понятно, что заключается в «ожидании». Они уже поддерживаются во всех современных браузерах. Скорей вы предполагаете, что они должны делать совсем не то, для чего они предназначены. Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
|
Malleys,
ты троль точка |
Цитата:
Какой полифил для css position:sticky; ? Мы используем новые возможности новых браузеров, что бы работало быстро. И зачем их пихать в старые браузеры, если они станут работать медленнее из-за их интерпретации, чем если бы мы решали эту задачу по-другому сразу используя возможности только старых браузеров. Google Closure Compiler вообще не при чем ту. Он только сжимает существующий код без всяких преобразований, типа заменим эту функцию на две другие. (И то тут столкнулся, что свежий Compiler не справляется с новыми синтаксическими конструкциями Javascript, которые уже реализованы в Хроме) Цитата:
|
Цитата:
А VDOM — это узкая задача, что именно будет улучшено в ядре? Какой широкий спектр задач удастся решать? Какие примеры реализации в других языках программирования? Непредвзятые ответы «нет», а значит достаточно библиотеки. (Или вы мечтаете, что в ядро однажды будет включен весь NPM-регистр?) Цитата:
<script type="module" src="app.js"></script> <script nomodule src="fallback-app.js"></script>Поскольку все современные браузеры понимают type="module" и игнорируют скрипты с nomodule, то в них будет загружен app.js. А поскольку старые браузеры игнорируют скрипты с неправильным type и не понимают nomodule, то в них будет загружен fallback-app.js. Цитата:
Если вам в проекте так критически важно «правильное наследование Array», то ведь не сложно добавить одну строчку с __proto__ в объявлении класса (__proto__ широко доступен с 2010–2013 годов) https://caniuse.com/#feat=mdn-javasc...s_object_proto «Хочу, чтобы всё работало в IE6» выглядит как теоретический бред, который не несёт никакого практического смысла — Proxy работает во всех современных браузерах с 2015–2016 годов — https://caniuse.com/#feat=mdn-javascript_builtins_proxy Этого вполне достаточно, даже если вы обновляете браузер раз в полтора года! position: sticky; работает с 2014–2017 годов, в основном ничего не ломается, если не поддерживается. Частное решение — position: fixed; Учитывая, что есть @supports, который поддерживается с 2013–2015 годов (https://caniuse.com/#feat=mdn-css_at-rules_supports), вы можете сделать альтернативное представление элемента для любителей старых браузеров! А все эти ваши борьбы с системами, где по какой-то параноидальной причине запрещено обновить браузер 15-ти летней давности похожи на Специальную Олимпиаду. Сам же Microsoft активно призывает пользователей переезжать на новый Edge. https://www.microsoft.com/en-us/edge Также может не стоит исключать SSR, но всё зависит от того, что вы делаете. Например, если делаешь что-то с использованием WebGL, как не крути не трансформируй код, и не придумывай фантастические полифилы, а WebGL в первую очередь должен поддерживаться! Цитата:
|
Цитата:
Цитата:
Но если одинаково хорошо работает и там и там, то зачем нужен новый? Вот только что наткнулся, что оказывается даже edge 18 не поддерживает в css rgba(0,0,0,50%). И никакой бабилон, или вебпак тут не помогут. Перетряхивать весь код и приводить к какому то старому варианту. А зачем тогда новый нужен? Цитата:
Многое наследуется, но a[i] = x не изменяет length, если i больше. Такое возможно только при наследовании с классами. Там немного другой механизм. Цитата:
Хуже когда и совершенно новые браузеры не следуют стандартам и творят хрен знает что. Тут уже больше недели трахаюсь с FF (совершенно свежая 72 версия) что они там с pointer events творят! Тут прочитал на бугзиле их переписку (месячной давности) по этой теме (Правда она наверно относится к мобильной версии). Так они там с удивлением обнаруживают, что оказывается Хром (и даже Едж 18) производят захват событий! Оказывается! А стандарты и спецификации не дано посмотреть? Потом обсуждения про то, что НЕОЖИДАННО вылетает событие pointercancel.... Так у меня и на десктопе в 72 версии FF тоже самое! А десктопная версия в caniuse отмечена как полностью рабочая. Начинаю хренеть с поделки под названием firefox. |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
{
class ArrayFiller extends Array {
constructor(count, filler) {
super(count);
this.fill(filler);
}
/* остальные методы */
}
const af = new ArrayFiller(5, "a");
console.log(af.length); // 5
af[10] = "b";
console.log(af.length); // 11
af.length = 1;
console.log(af); // ArrayFiller ["a"]
console.log(af instanceof ArrayFiller); // true
}
равносильно...
{
function ArrayFiller(count, filler) {
var af = new Array(count);
af.__proto__ = ArrayFiller.prototype;
af.fill(filler);
return af;
}
ArrayFiller.prototype = {
__proto__: Array.prototype,
constructor: ArrayFiller
/* остальные методы */
};
var af = new ArrayFiller(5, "a");
console.log(af.length); // 5
af[10] = "b";
console.log(af.length); // 11
af.length = 1;
console.log(af); // ["a"]
console.log(af instanceof ArrayFiller); // true
}
Такой же способ использовался в Chrome DevTools для наследования от HTMLDivElement и пр. HTML-элементов. |
не срабатывает так почему не знаете ?
function include(url) {
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
}
include("https://***");
|
Решено
document.write('<script src="https://*"></script>');
так работает |
Это
document.write('<script src="https://*"></script>');
Сработает только во время парсинга HTML Это не динамическое подключение скрипта. Это не сработает, если вам, например надо подключить скрипт при нажатии кнопки Почему не работает это
function include(url) {
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
}
include("https://***");
Трудно сказать, не зная где это используется. Но так
function include(url) {
var script = document.createElement('script');
script.src = url;
script.type='text/javascript'
document.getElementsByTagName('head')[0].appendChild(script);
}
include("https://***");
Обычно срабатывает всегда Только лучше еще добавить
script.onload =function () {
...
}
И уже в ней делать то, что нужно после загрузки скрипта.Ну или Promise замутить |
| Часовой пояс GMT +3, время: 08:26. |