다른 JavaScript 파일 안에 JavaScript 파일을 포함할 수 있도록 하는 CSS의 @import 와 유사한 JavaScript의 무언가가 있습니까?
반응형
질문자 :Alec Smart
답변자 : e-satis
이전 버전의 JavaScript에는 가져오기, 포함 또는 필요가 없었으므로 이 문제에 대한 다양한 접근 방식이 개발되었습니다.
그러나 2015년(ES6)부터 JavaScript는 Node.js에서 모듈을 가져오기 위한 ES6 모듈 표준을 갖게 되었으며, 이는 대부분의 최신 브라우저 에서도 지원됩니다.
이전 브라우저와의 호환성을 위해 Webpack 및 Rollup 과 같은 빌드 도구 및/또는 Babel 과 같은 번역 도구를 사용할 수 있습니다.
ES6 모듈
ECMAScript(ES6) 모듈은 --experimental-modules 플래그가 있는 v8.5부터, 그리고 플래그가 없는 Node.js v13.8.0 이상부터 Node.js에서 지원되었습니다. "ESM"(Node.js의 이전 CommonJS 스타일 모듈 시스템 ["CJS"] 대)을 활성화하려면 package.json "type": "module" 을 사용하거나 파일 확장자를 .mjs 합니다. (마찬가지로 Node.js의 이전 CJS 모듈로 작성된 모듈은 기본값이 ESM인 경우 .cjs
package.json 사용:
{ "type": "module" } 그런 다음 module.js :
export function hello() { return "Hello"; } 그런 다음 main.js :
import { hello } from './module.js'; let val = hello(); // val is "Hello"; .mjs 사용하면 module.mjs .
export function hello() { return "Hello"; } 그런 다음 main.mjs :
import { hello } from './module.mjs'; let val = hello(); // val is "Hello";브라우저의 ECMAScript 모듈
브라우저는 Safari 10.1, Chrome 61, Firefox 60 및 Edge 16 부터 ECMAScript 모듈을 직접 로드하는 것을 지원했습니다(Webpack과 같은 도구가 필요 없음). caniuse에서 현재 지원을 확인하십시오. .mjs 확장자를 사용할 필요가 없습니다. 브라우저는 모듈/스크립트의 파일 확장자를 완전히 무시합니다.
<script type="module"> import { hello } from './hello.mjs'; // Or it could be simply `hello.js` hello('world'); </script> // hello.mjs -- or it could be simply `hello.js` export function hello(text) { const div = document.createElement('div'); div.textContent = `Hello ${text}`; document.body.appendChild(div); }https://jakearchibald.com/2017/es-modules-in-browsers/ 에서 자세한 내용을 읽어보십시오.
브라우저에서 동적 가져오기
동적 가져오기를 사용하면 스크립트가 필요에 따라 다른 스크립트를 로드할 수 있습니다.
<script type="module"> import('hello.mjs').then(module => { module.hello('world'); }); </script>https://developers.google.com/web/updates/2017/11/dynamic-import에서 자세히 알아보기
Node.js는
Node.js에서 여전히 널리 사용되는 이전 CJS 모듈 스타일은 module.exports / require 시스템입니다.
// mymodule.js module.exports = { hello: function() { return "Hello"; } } // server.js const myModule = require('./mymodule'); let val = myModule.hello(); // val is "Hello"JavaScript가 사전 처리가 필요하지 않은 브라우저에 외부 JavaScript 콘텐츠를 포함하는 다른 방법이 있습니다.
AJAX 로딩
AJAX 호출로 추가 스크립트를 로드한 다음 eval 을 사용하여 실행할 수 있습니다. 이것은 가장 간단한 방법이지만 JavaScript 샌드박스 보안 모델 때문에 도메인으로 제한됩니다. eval 을 사용하면 버그, 해킹 및 보안 문제가 발생할 수도 있습니다.
불러오기 로드
동적 가져오기와 마찬가지로 Fetch Inject 라이브러리를 사용하여 스크립트 종속성에 대한 실행 순서를 제어하기 위해 약속을 사용하여 fetch 호출로 하나 이상의 스크립트를 로드할 수 있습니다.
fetchInject([ 'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js' ]).then(() => { console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`) })jQuery 로딩
jQuery 라이브러리는 한 줄로 로드 기능을 제공합니다.
$.getScript("my_lovely_script.js", function() { alert("Script loaded but not necessarily executed."); });동적 스크립트 로딩
스크립트 URL이 있는 스크립트 태그를 HTML에 추가할 수 있습니다. jQuery의 오버헤드를 피하기 위해 이것은 이상적인 솔루션입니다.
스크립트는 다른 서버에 있을 수도 있습니다. 또한 브라우저는 코드를 평가합니다. <script> 태그는 웹 페이지 <head> 에 삽입하거나 닫는 </body> 태그 바로 앞에 삽입할 수 있습니다.
다음은 이것이 작동하는 방법의 예입니다.
function dynamicallyLoadScript(url) { var script = document.createElement("script"); // create a script DOM node script.src = url; // set its src to the provided URL document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead) } 이 함수는 페이지의 헤드 섹션 끝에 <script> src 속성은 첫 번째 매개변수로 함수에 제공된 URL로 설정됩니다.
이 두 가지 솔루션 모두 JavaScript Madness: Dynamic Script Loading 에서 설명하고 설명합니다.
스크립트가 언제 실행되었는지 감지
자, 여러분이 반드시 알아야 할 큰 문제가 있습니다. 그렇게 하는 것은 코드를 원격으로 로드 한다는 것을 의미합니다. 최신 웹 브라우저는 성능을 향상시키기 위해 모든 것을 비동기식으로 로드하기 때문에 파일을 로드하고 현재 스크립트를 계속 실행합니다. (이는 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(); Error : MySuperObject is undefined그런 다음 F5 키를 눌러 페이지를 다시 로드합니다. 그리고 그것은 작동합니다! 혼란스러운...
그럼 어떻게 해야 할까요?
글쎄, 당신은 내가 당신에게 준 링크에서 저자가 제안한 해킹을 사용할 수 있습니다. 요약하면 서두르는 사람들을 위해 스크립트가 로드될 때 이벤트를 사용하여 콜백 함수를 실행합니다. 따라서 콜백 함수에 원격 라이브러리를 사용하여 모든 코드를 넣을 수 있습니다. 예를 들어:
function loadScript(url, callback) { // Adding the script tag to the head as suggested before var head = document.head; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; // Then bind the event to the callback function. // There are several events for cross browser compatibility. script.onreadystatechange = callback; script.onload = callback; // Fire the loading head.appendChild(script); }그런 다음 스크립트가 람다 함수에 로드된 후 사용하려는 코드를 작성합니다.
var myPrettyCode = function() { // Here, do whatever you want };그런 다음 모든 것을 실행합니다.
loadScript("my_lovely_script.js", myPrettyCode); script.async = false; 행을 포함했는지 여부에 따라 DOM이 로드된 후 또는 그 전에 실행될 수 있습니다. . 이에 대해 논의하는 일반적으로 Javascript 로딩에 대한 훌륭한 기사가 있습니다.
소스 코드 병합/전처리
이 답변의 맨 위에서 언급했듯이 많은 개발자는 프로젝트에서 Parcel, Webpack 또는 Babel과 같은 빌드/트랜스파일 도구를 사용하여 향후 JavaScript 구문을 사용하고, 이전 브라우저에 이전 버전과의 호환성을 제공하고, 파일을 결합하고, 축소하고, 코드 분할 등을 수행합니다.
답변자 : John Strickler
누군가 더 고급 기능을 찾고 있다면 RequireJS를 사용해 보세요. 종속성 관리, 더 나은 동시성, 중복 방지(즉, 스크립트를 두 번 이상 검색)와 같은 추가 이점을 얻을 수 있습니다.
"모듈"에 JavaScript 파일을 작성한 다음 다른 스크립트에서 종속성으로 참조할 수 있습니다. 또는 RequireJS를 간단한 "이 스크립트 가져오기" 솔루션으로 사용할 수 있습니다.
예시:
종속성을 모듈로 정의:
일부 의존성.js
define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) { //Your actual script goes here. //The dependent scripts will be fetched if necessary. return libraryObject; //For example, jQuery object });구현 .js는 some-dependency.js에 의존 하는 "기본" JavaScript 파일입니다.
require(['some-dependency'], function(dependency) { //Your script goes here //some-dependency.js is fetched. //Then your script is executed });GitHub README에서 발췌:
RequireJS는 일반 JavaScript 파일과 더 정의된 모듈을 로드합니다. Web Worker를 포함하여 브라우저 내 사용에 최적화되어 있지만 Rhino 및 Node.js와 같은 다른 JavaScript 환경에서도 사용할 수 있습니다. 비동기 모듈 API를 구현합니다.
RequireJS는 일반 스크립트 태그를 사용하여 모듈/파일을 로드하므로 쉽게 디버깅할 수 있습니다. 단순히 기존 JavaScript 파일을 로드하는 데 사용할 수 있으므로 JavaScript 파일 을 다시 작성할 필요 없이 기존 프로젝트에 추가할 수 있습니다.
...
답변자 : Kipras
실제로 자바스크립트 파일 을 비동기식으로 로드하지 않는 방법이 있어서 새로 로드한 파일에 포함된 기능을 로드한 직후에 사용할 수 있고 모든 브라우저에서 작동한다고 생각합니다.
페이지의 <head> jQuery.append() 를 사용해야 합니다.
$("head").append($("<script></script>").attr("src", url)); /* Note that following line of code is incorrect because it doesn't escape the * HTML attribute src correctly and will fail if `url` contains special characters: * $("head").append('<script src="' + url + '"></script>'); */그러나 이 방법에도 문제가 있습니다. 가져온 JavaScript 파일에서 오류가 발생하면 Firebug (및 Firefox 오류 콘솔 및 Chrome 개발자 도구 도 포함)가 해당 위치를 잘못 보고합니다. 이는 Firebug를 사용하여 추적하는 경우 큰 문제입니다. JavaScript 오류가 많이 줄어듭니다(그렇습니다). Firebug는 어떤 이유로 새로 로드된 파일에 대해 알지 못하므로 해당 파일에 오류가 발생하면 기본 HTML 파일에서 발생했다고 보고하고 오류의 실제 원인을 찾는 데 어려움을 겪을 것입니다.
그러나 그것이 당신에게 문제가 되지 않는다면 이 방법이 효과가 있을 것입니다.
실제로 이 메서드를 사용하는 $.import_js() 라는 jQuery 플러그인을 작성했습니다.
(function($) { /* * $.import_js() helper (for JavaScript importing within JavaScript code). */ var import_js_imported = []; $.extend(true, { import_js : function(script) { var found = false; for (var i = 0; i < import_js_imported.length; i++) if (import_js_imported[i] == script) { found = true; break; } if (found == false) { $("head").append($('<script></script').attr('src', script)); import_js_imported.push(script); } } }); })(jQuery);따라서 JavaScript를 가져오기 위해 해야 할 일은 다음과 같습니다.
$.import_js('/path_to_project/scripts/somefunctions.js');또한 Example 에서 이에 대한 간단한 테스트를 수행했습니다.
기본 HTML에 main.js 파일이 포함된 main.js 의 스크립트는 $.import_js() 를 사용하여 이 기능을 정의하는 included.js 라는 추가 파일을 가져옵니다.
function hello() { alert("Hello world!"); } included.js 를 포함시킨 직후 hello() 함수가 호출되고 경고를 받습니다.
(이 답변은 e-satis의 의견에 대한 답변입니다).
답변자 : Ariel
<script> 태그를 사용하는 대신 동기식 Ajax 요청을 만드는 것입니다. 이는 Node.js 가 포함을 처리하는 방법이기도 합니다.
다음은 jQuery를 사용한 예입니다.
function require(script) { $.ajax({ url: script, dataType: "script", async: false, // <-- This is the key success: function () { // all good... }, error: function () { throw new Error("Could not load script " + script); } }); }그런 다음 일반적으로 포함을 사용하는 것처럼 코드에서 사용할 수 있습니다.
require("/scripts/subscript.js");그리고 다음 줄의 필수 스크립트에서 함수를 호출할 수 있습니다.
subscript.doSomethingCool();답변자 : Svitlana Maksymchuk
JavaScript 태그를 동적으로 생성하고 다른 JavaScript 코드 내부에서 HTML 문서에 추가할 수 있습니다. 그러면 대상 JavaScript 파일이 로드됩니다.
function includeJs(jsFilePath) { var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js); } includeJs("/path/to/some/file.js");답변자 : Imdad
좋은 소식이 있습니다. 머지 않아 JavaScript 코드를 쉽게 로드할 수 있을 것입니다. 이것은 JavaScript 코드의 모듈을 가져오는 표준 방법이 될 것이며 핵심 JavaScript 자체의 일부가 될 것입니다.
import cond from 'cond.js'; 를 작성하기만 하면 됩니다. cond.js 파일에서 cond 라는 매크로를 로드합니다.
따라서 JavaScript 프레임워크에 의존하거나 Ajax 를 명시적으로 호출할 필요가 없습니다.
인용하다:
답변자 : draupnie
명령문 import 는 ECMAScript 6에 있습니다.
통사론
import name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import name , { member [ , [...] ] } from "module-name"; import "module-name" as name;답변자 : Arnaud Gouder de Beauregard
이 페이지에서 찾은 이 기능을 사용할 수 있습니다 . JavaScript 파일에 JavaScript 파일을 어떻게 포함합니까? :
function include(filename) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = filename; script.type = 'text/javascript'; head.appendChild(script) }답변자 : heinob
다음은 jQuery 가 없는 동기 버전입니다.
function myRequire( url ) { var ajax = new XMLHttpRequest(); ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous ajax.onreadystatechange = function () { var script = ajax.response || ajax.responseText; if (ajax.readyState === 4) { switch( ajax.status) { case 200: eval.apply( window, [script] ); console.log("script loaded: ", url); break; default: console.log("ERROR: script not loaded: ", url); } } }; ajax.send(null); } 이 작동하는 교차 도메인을 얻으려면 서버가 응답에서 allow-origin
답변자 : nornagon
방금 이 JavaScript 코드를 작성했습니다( DOM 조작을 위해 Prototype 사용).
var require = (function() { var _required = {}; return (function(url, callback) { if (typeof url == 'object') { // We've (hopefully) got an array: time to chain! if (url.length > 1) { // Load the nth file as soon as everything up to the // n-1th one is done. 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') { // Haven't loaded this URL yet; gogogo! _required[url] = []; var script = new Element('script', { src: url, type: 'text/javascript' }); script.observe('load', function() { console.log("script " + url + " loaded."); _required[url].each(function(cb) { cb.call(); // TODO: does this execute in the right context? }); _required[url] = true; }); $$('head')[0].insert(script); } else if (typeof _required[url] == 'boolean') { // We already loaded the thing, so go ahead. if (callback) { callback.call(); } return; } if (callback) { _required[url].push(callback); } }); })();용법:
<script src="prototype.js"></script> <script src="require.js"></script> <script> require(['foo.js','bar.js'], function () { /* Use foo.js and bar.js here */ }); </script>답변자 : Dan Dascalescu
다음은 Facebook이 어디에서나 볼 수 있는 좋아요 버튼에 대해 일반화된 버전입니다.
<script> 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 () { // do stuff with your dynamically loaded script snowStorm.snowColor = '#99ccff'; }; firstScript.parentNode.insertBefore(js, firstScript); </script>Facebook에서 작동하면 작동합니다.
head 나 body script 요소를 찾는 이유는 일부 브라우저에서 누락된 경우 script 요소를 생성하지 않기 때문입니다. http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ 에서 자세한 내용을 읽어보십시오.
답변자 : Venu immadi
순수한 JavaScript로 원하면 document.write 를 사용할 수 있습니다.
document.write('<script src="myscript.js" type="text/javascript"></script>'); jQuery 라이브러리를 사용하는 경우 $.getScript 메소드를 사용할 수 있습니다.
$.getScript("another_script.js");답변자 : Calmarius
PHP 를 사용하여 스크립트를 어셈블할 수도 있습니다.
파일 main.js.php :
<?php header('Content-type:text/javascript; charset=utf-8'); include_once("foo.js.php"); include_once("bar.js.php"); ?> // Main JavaScript code goes here답변자 : Dmitry Sheiko
여기에 표시된 대부분의 솔루션은 동적 하중을 의미합니다. 나는 종속된 모든 파일을 단일 출력 파일로 어셈블하는 컴파일러를 대신 찾고 있었습니다. Less / Sass 전처리기는 CSS @import at-rule을 처리하는 것과 동일합니다. 이런 종류의 적절한 것을 찾지 못했기 때문에 문제를 해결하는 간단한 도구를 작성했습니다.
그래서 여기에 $import("file-path") 를 요청된 파일 콘텐츠로 안전하게 대체 하는 컴파일러 https://github.com/dsheiko/jsic 가 있습니다. 여기에 해당하는 Grunt 플러그인이 있습니다: https://github.com/dsheiko/grunt-jsic .
JQuery와 마스터 지점에서 하나 하나에 그들은 단순히 CONCATENATE 원자 소스 파일로 시작 intro.js 과로 끝나는 outtro.js . 그것은 소스 코드 디자인에 유연성을 제공하지 않기 때문에 저에게 적합하지 않습니다. jsic과 어떻게 작동하는지 확인하십시오:
src/main.js
var foo = $import("./Form/Input/Tel");src/양식/입력/Tel.js
function() { return { prop: "", method: function(){} } }이제 컴파일러를 실행할 수 있습니다.
node jsic.js src/main.js build/mail.js그리고 결합 된 파일을 얻으십시오
빌드/메인.js
var foo = function() { return { prop: "", method: function(){} } };답변자 : Adem İlhan
JavaScript 파일을 로드하려는 의도가 가져온/포함된 파일의 기능을 사용하는 경우 전역 개체를 정의하고 기능을 개체 항목으로 설정할 수도 있습니다. 예를 들어:
글로벌.js
A = {};파일1.js
A.func1 = function() { console.log("func1"); }파일2.js
A.func2 = function() { console.log("func2"); }메인.js
A.func1(); A.func2();HTML 파일에 스크립트를 포함할 때 주의해야 합니다. 순서는 아래와 같아야 합니다.
<head> <script type="text/javascript" src="global.js"></script> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="main.js"></script> </head>답변자 : JMawer
또는 런타임에 포함하는 대신 스크립트를 사용하여 업로드하기 전에 연결합니다.
나는 스프로킷을 사용합니다(다른 것이 있는지 모르겠습니다). JavaScript 코드를 별도의 파일에 빌드하고 Sprockets 엔진에서 처리하는 주석을 포함으로 포함합니다. 개발을 위해 파일을 순차적으로 포함시킨 다음 프로덕션을 위해 파일을 병합할 수 있습니다...
또한보십시오:
답변자 : tggagne
다음을 수행해야 합니다.
xhr = new XMLHttpRequest(); xhr.open("GET", "/soap/ajax/11.0/connection.js", false); xhr.send(); eval(xhr.responseText);답변자 : Manohar Reddy Poreddy
간단한 문제가 있었지만 이 질문에 대한 답변에 당황했습니다.
한 JavaScript 파일(myvariables.js)에 정의된 변수(myVar1)를 다른 JavaScript 파일(main.js)에 사용해야 했습니다.
이를 위해 아래와 같이 했습니다.
HTML 파일의 JavaScript 코드를 올바른 순서로 로드합니다. myvariables.js를 먼저 로드한 다음 main.js를 로드합니다.
<html> <body onload="bodyReady();" > <script src="myvariables.js" > </script> <script src="main.js" > </script> <!-- Some other code --> </body> </html>파일: myvariables.js
var myVar1 = "I am variable from myvariables.js";파일: main.js
// ... function bodyReady() { // ... alert (myVar1); // This shows "I am variable from myvariables.js", which I needed // ... } // ...보시다시피 다른 JavaScript 파일의 한 JavaScript 파일에서 변수를 사용했지만 다른 JavaScript 파일에 변수를 포함할 필요가 없었습니다. 첫 번째 JavaScript 파일이 두 번째 JavaScript 파일보다 먼저 로드되고 첫 번째 JavaScript 파일의 변수가 두 번째 JavaScript 파일에서 자동으로 액세스 가능한지 확인하기만 하면 됩니다.
이것은 내 하루를 구했습니다. 이게 도움이 되길 바란다.
답변자 : Dmitry Sheiko
스크립트가 이미 로드되었는지 확인하는 현대 언어에서는 다음과 같습니다.
function loadJs( url ){ return new Promise(( resolve, reject ) => { if (document.querySelector( `head > script[ src = "${url}" ]`) !== null ){ console.warn( `script already loaded: ${url}` ); resolve(); } const script = document.createElement( "script" ); script.src = url; script.onload = resolve; script.onerror = function( reason ){ // This can be useful for your error-handling code reason.message = `error trying to load script ${url}`; reject( reason ); }; document.head.appendChild( script ); }); }사용법(비동기/대기):
try { await loadJs("https://.../script.js"); } catch(error) { console.log(error); }또는
await loadJs( "https://.../script.js" ).catch( err => {} );사용법(약속):
loadJs( "https://.../script.js" ).then( res => {} ).catch( err => {} );답변자 : Isaac Gregson
CSS와 같은 JavaScript 가져오기를 달성하기 위한 @import .mix 파일 유형을 통해 Mixture와 같은 도구를 사용하여 가능합니다( 여기 참조). 나는 응용 프로그램이 위에서 언급한 방법 중 하나를 통해 이 작업을 수행한다고 가정합니다.
.mix 파일에 대한 혼합물 문서에서:
믹스 파일은 .mix가 있는 .js 또는 .css 파일입니다. 파일 이름에. 믹스 파일은 단순히 일반 스타일 또는 스크립트 파일의 기능을 확장하고 가져오기 및 결합을 허용합니다.
다음은 여러 .js 파일을 하나로 .mix 파일의 예입니다.
// 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를 프론트 엔드 개발 도구로 사용하는 것 외에는 어떤 식으로든 Mixture와 관련이 없습니다. .mix JavaScript 파일이 작동하는 것을 보고 약간 혼란스러워서("이걸 할 수 있어요?"라고 생각하면서) 이 질문을 발견했습니다. 그런 다음 나는 그것이 응용 프로그램별 파일 형식이라는 것을 깨달았습니다(다소 실망스럽긴 하지만 동의함). 그럼에도 불구하고 지식이 다른 사람들에게 도움이 될 수 있다고 생각했습니다.
참고: 혼합물은 2016/07/26에 중단되었습니다(2015/04/12에 공개된 후).
답변자 : Turnerj
웹 작업자를 사용 중이고 작업자 범위에 추가 스크립트를 포함하려는 경우 head 태그에 스크립트 추가 등에 대해 제공된 다른 답변은 작동하지 않습니다.
다행스럽게도 웹 워커에는 웹 워커 범위의 전역 기능인 importScripts 기능 이 있습니다. 이 기능은 사양의 일부 이므로 브라우저 자체에 고유합니다.
또는 귀하의 질문에 대해 두 번째로 높은 투표를 받은 답변이 강조 표시된 것처럼 RequireJS 는 웹 작업자 내부에 스크립트를 포함하는 것도 처리할 수 있습니다( importScripts 자체를 호출할 수 있지만 몇 가지 다른 유용한 기능이 있음).
답변자 : Sam4Code
var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js);답변자 : KthProg
이러한 답변은 훌륭하지만 스크립트 로딩이 존재한 이래로 주변에 있었던 간단한 "해결책"이 있으며 대부분의 사람들의 사용 사례의 99.999%를 다룰 것입니다. 필요한 스크립트 앞에 필요한 스크립트를 포함하기만 하면 됩니다. 대부분의 프로젝트에서 필요한 스크립트와 순서를 결정하는 데 오랜 시간이 걸리지 않습니다.
<!DOCTYPE HTML> <html> <head> <script src="script1.js"></script> <script src="script2.js"></script> </head> <body></body> </html>script2에 script1이 필요한 경우 이것이 실제로 이와 같은 작업을 수행하는 가장 쉬운 방법입니다. 거의 모든 경우에 적용되는 가장 명확하고 간단한 답변이기 때문에 아무도 이 문제를 제기하지 않았다는 사실에 매우 놀랐습니다.
답변자 : Christopher Dumas
내 일반적인 방법은 다음과 같습니다.
var require = function (src, cb) { cb = cb || function () {}; var newScriptTag = document.createElement('script'), firstScriptTag = document.getElementsByTagName('script')[0]; newScriptTag.src = src; newScriptTag.async = true; newScriptTag.onload = newScriptTag.onreadystatechange = function () { (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb()); }; firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag); }그것은 훌륭하게 작동하고 나를 위해 페이지 새로 고침을 사용하지 않습니다. AJAX 방법 (다른 답변 중 하나)을 시도했지만 나에게 잘 작동하지 않는 것 같습니다.
다음은 궁금한 사람들을 위해 코드가 작동하는 방식에 대한 설명입니다. 기본적으로 URL의 새 스크립트 태그(첫 번째 태그 다음에)를 생성합니다. 코드의 나머지 부분을 차단하지 않도록 비동기 모드로 설정하지만 readyState(로드할 콘텐츠의 상태)가 'loaded'로 변경되면 콜백을 호출합니다.
답변자 : Kamil Kiełczewski
ES6 모듈
예 , 스크립트 태그( support )에서 type="module" 사용:
<script type="module" src="script.js"></script> 그리고 script.js 파일에는 다음과 같은 다른 파일이 포함됩니다.
import { hello } from './module.js'; ... // alert(hello());'module.js'에서 가져올 함수/클래스를 내보내야 합니다.
export function hello() { return "Hello World"; }작동 예가 여기에 있습니다 .
답변자 : stamat
JavaScript에서 모듈 스크립트를 가져오거나 포함하는 작업을 자동화하는 간단한 모듈을 작성했습니다. 코드에 대한 자세한 설명은 JavaScript require/import/include 모듈 블로그 게시물을 참조하세요.
// ----- USAGE ----- 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(){ //Do something when required scripts are loaded }); //-------------------- var _rmod = _rmod || {}; //Require module namespace _rmod.LOADED = false; _rmod.on_ready_fn_stack = []; _rmod.libpath = ''; _rmod.imported = {}; _rmod.loading = { scripts: {}, length: 0 }; _rmod.findScriptPath = function(script_name) { var script_elems = document.getElementsByTagName('script'); for (var i = 0; i < script_elems.length; i++) { if (script_elems[i].src.endsWith(script_name)) { var href = window.location.href; href = href.substring(0, href.lastIndexOf('/')); var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length); return url.substring(href.length+1, url.length); } } return ''; }; _rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark //the root directory of your library, any library. _rmod.injectScript = function(script_name, uri, callback, prepare) { if(!prepare) prepare(script_name, uri); var script_elem = document.createElement('script'); script_elem.type = 'text/javascript'; script_elem.title = script_name; script_elem.src = uri; script_elem.async = true; script_elem.defer = false; if(!callback) script_elem.onload = function() { callback(script_name, uri); }; document.getElementsByTagName('head')[0].appendChild(script_elem); }; _rmod.requirePrepare = function(script_name, uri) { _rmod.loading.scripts[script_name] = uri; _rmod.loading.length++; }; _rmod.requireCallback = function(script_name, uri) { _rmod.loading.length--; delete _rmod.loading.scripts[script_name]; _rmod.imported[script_name] = uri; if(_rmod.loading.length == 0) _rmod.onReady(); }; _rmod.onReady = function() { if (!_rmod.LOADED) { for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){ _rmod.on_ready_fn_stack[i](); }); _rmod.LOADED = true; } }; _.rmod = namespaceToUri = function(script_name, url) { var np = script_name.split('.'); if (np.getLast() === '*') { np.pop(); np.push('_all'); } if(!url) url = ''; script_name = np.join('.'); return url + np.join('/')+'.js'; }; //You can rename based on your liking. I chose require, but it //can be called include or anything else that is easy for you //to remember or write, except "import", because it is reserved //for future use. var require = function(script_name) { var uri = ''; if (script_name.indexOf('/') > -1) { uri = script_name; var lastSlash = uri.lastIndexOf('/'); script_name = uri.substring(lastSlash+1, uri.length); } else { uri = _rmod.namespaceToUri(script_name, ivar._private.libpath); } if (!_rmod.loading.scripts.hasOwnProperty(script_name) && !_rmod.imported.hasOwnProperty(script_name)) { _rmod.injectScript(script_name, uri, _rmod.requireCallback, _rmod.requirePrepare); } }; var ready = function(fn) { _rmod.on_ready_fn_stack.push(fn); };답변자 : Vicky Gonsalves
<script> 태그의 맨 위에 JavaScript 파일을 추가합니다.
(function () { var li = document.createElement('script'); li.type = 'text/javascript'; li.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; li.async = true; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })();답변자 : tfont
멋지고, 짧고, 간단하고, 유지 관리가 용이하도록 유지하십시오! :]
// Third-party plugins / script (don't forget the full path is necessary) var FULL_PATH = '', s = [ FULL_PATH + 'plugins/script.js' // Script example FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library FULL_PATH + 'plugins/crypto-js/hmac-sha1.js', // CryptoJS FULL_PATH + 'plugins/crypto-js/enc-base64-min.js' // CryptoJS ]; function load(url) { var ajax = new XMLHttpRequest(); ajax.open('GET', url, false); ajax.onreadystatechange = function () { var script = ajax.response || ajax.responseText; if (ajax.readyState === 4) { switch(ajax.status) { case 200: eval.apply( window, [script] ); console.log("library loaded: ", url); break; default: console.log("ERROR: library not loaded: ", url); } } }; ajax.send(null); } // Initialize a single load load('plugins/script.js'); // Initialize a full load of scripts if (s.length > 0) { for (i = 0; i < s.length; i++) { load(s[i]); } }이 코드는 모든(또는 주어진) 플랫폼에서 전체 지원을 위해 추가 기능 기능 이 필요할 수 있는 간단한 기능 예제입니다.
답변자 : rgb_life
유용한 JavaScript 플러그인 모음을 유지 관리하는 간단한 방법을 찾고 있었기 때문에 이 질문에 왔습니다. 여기에서 몇 가지 솔루션을 본 후 다음과 같이 생각해 냈습니다.
"plugins.js"(또는 extension.js 또는 원하는 것)라는 파일을 설정합니다. 하나의 마스터 파일과 함께 플러그인 파일을 보관하십시오.
each()에 대해 반복할pluginNames[]라는 배열이 있으며 각 플러그인의 헤드에<script>태그를 추가합니다.
//set array to be updated when we add or remove plugin files var pluginNames = ["lettering", "fittext", "butterjam", etc.]; //one script tag for each plugin $.each(pluginNames, function(){ $('head').append('<script src="js/plugins/' + this + '.js"></script>'); });- 머리에 있는 하나의 파일만 수동으로 호출합니다.
<script src="js/plugins/plugins.js"></script>
하지만:
모든 플러그인이 헤드 태그에 있어야 하는 방식으로 드롭되지만 페이지를 클릭하거나 새로 고칠 때 브라우저에서 항상 실행되는 것은 아닙니다.
PHP 포함에 스크립트 태그를 작성하는 것이 더 안정적이라는 것을 알았습니다. 한 번만 작성하면 됩니다. JavaScript를 사용하여 플러그인을 호출하는 것만큼의 작업입니다.
답변자 : Willem van der Veen
JavaScript에서 모듈을 구현하는 방법에는 여러 가지가 있습니다. 다음은 가장 인기 있는 두 가지입니다.
ES6 모듈
브라우저는 아직 이 모듈링 시스템을 지원하지 않으므로 이 구문을 사용하려면 Webpack 과 같은 번들러를 사용해야 합니다. 번들러를 사용하면 다른 모든 파일을 단일(또는 몇 개의 관련) 파일로 결합할 수 있기 때문에 어쨌든 더 좋습니다. 이렇게 하면 각 HTTP 요청에 관련 오버헤드가 수반되기 때문에 서버에서 클라이언트로 파일을 더 빨리 제공할 수 있습니다. 따라서 전체 HTTP 요청을 줄임으로써 성능을 향상시킵니다. 다음은 ES6 모듈의 예입니다.
// main.js file export function add (a, b) { return a + b; } export default function multiply (a, b) { return a * b; } // test.js file import {add}, multiply from './main'; // For named exports between curly braces {export1, export2} // For default exports without {} console.log(multiply(2, 2)); // logs 4 console.log(add(1, 2)); // logs 3CommonJS (Node.js에서 사용)
이 모듈화 시스템은 Node.js에서 사용됩니다. module.exports 라는 객체에 내보내기를 추가합니다. require('modulePath') 를 통해 이 객체에 액세스할 수 있습니다. 여기서 중요한 것은 이러한 모듈이 캐시되고 있다는 사실을 깨닫는 것입니다. 따라서 require() 하면 이미 생성된 모듈을 반환합니다.
// main.js file function add (a, b) { return a + b; } module.exports = add; // Here we add our 'add' function to the exports object // test.js file const add = require('./main'); console.log(add(1,2)); // logs 3출처 : Here
출처 : http:www.stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file">
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| 스택과 힙은 무엇이며 어디에 있습니까? (0) | 2021.09.25 |
|---|---|
| JavaScript 비교에서 어떤 등호 연산자(== vs ===)를 사용해야 합니까? (0) | 2021.09.25 |
| HTTP에서 POST와 PUT의 차이점은 무엇입니까? (0) | 2021.09.25 |
| Git에서 가장 최근의 로컬 커밋을 어떻게 취소합니까? (0) | 2021.09.25 |
| Git 브랜치를 로컬 및 원격으로 어떻게 삭제합니까? (0) | 2021.09.25 |