[Javascript] *.js 파일에 인자 전달하기

Passing Arguments parameter to External JavaScript Files

//-------------------------------------
< 방법 1 >
    - data 속성 이용

    - html 파일
<script id="helper" data-name="helper" src="helper.js"></script>

    - js 파일
const name = document.getElementById('helper').getAttribute('data-name');


//-------------------------------------
< 방법 2 >
    - 쿼리 문자열 파싱

    - html 파일
<script src="helper.js?name=helper"></script>

    - js 파일
var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

var queryString = myScript.src.replace(/^[^\?]+\??/,'');

var params = parseQuery( queryString );

function parseQuery ( query ) {
  var Params = new Object ();
  if ( ! query ) return Params; // return empty object
  var Pairs = query.split(/[;&]/);
  for ( var i = 0; i < Pairs.length; i++ ) {
    var KeyVal = Pairs[i].split('=');
    if ( ! KeyVal || KeyVal.length != 2 ) continue;
    var key = unescape( KeyVal[0] );
    var val = unescape( KeyVal[1] );
    val = val.replace(/\+/g, ' ');
    Params[key] = val;
  }
  return Params;
}


//-----------------------------------------------------------------------------
< ES6 모듈에서 인자 받기 >

    - html 파일
<script type="module" src="helper.js?name=helper1"></script>


    - js 파일
// import.meta.url 이 쿼리 문자열 정보를 가지고 있음

    var url = new URL(import.meta.url);
    var search = url.search; 
    const searchParams = new URLSearchParams(search);
    var parmVal = searchParams.get('name');
    let val = decodeURI(parmVal);



//-------------------------------------
// 참고
https://getbutterfly.com/passing-arguments-to-external-javascript-files/

https://flaming.codes/en/posts/es6-import-with-parameters