JS 実装は必要に応じて js および css ファイルをロードします_html/css_WEB-ITnose

フロントエンド開発をしていると、次のような状況によく遭遇します。特別な処理を行うにはいくつかのパッケージを導入する必要があるかもしれませんが、このパッケージは状況によっては使用されません。したがって、必要に応じてこのパッケージをロードしたいと考えています。 js および css ファイルを動的にロードするためのより良いメソッドを以下に示します。

function $import(path,type,title){ var s,i; if(!type) type=path.substr(path.lastIndexOf(".")+1); if(type=="js"){ var ss=document.getElementsByTagName("script"); for(i=0;i<ss.length;i++){     if(ss[i].src && ss[i].src.indexOf(path)!=-1 ||        ss[i].title==title)return ss[i]; } s=document.createElement("script"); s.type="text/javascript"; s.src=path; if(title) s.title=title; }else if(type=="css"){ var ls=document.getElementsByTagName("link"); for(i=0;i<ls.length;i++){     if(ls[i].href && ls[i].href.indexOf(path)!=-1 || ls[i].title==title)return ls[i]; } s=document.createElement("link"); s.rel="stylesheet"; s.type="text/css"; s.href=path; if(title) s.title=title; s.disabled=false; } else return; var head=document.getElementsByTagName("head")[0]; head.appendChild(s); return s; }

このメソッドを呼び出すときは、ファイル パスとファイル タイプ (js、css) を渡すだけです。これにより、パッケージインポート

が タグに追加されます。