動的ロードJSとCSS

、それはチェーンを通して道を意味して、あなたのページを設計するために、フォームのHTMLとCSS / JS分離をHTMLファイルに必要なファイルをインポートする必要が使用して、分離の目的を達成するために、そうすることも、いくつかの問題をもたらす可能性があります。

　　必然的に、コードの重複につながる一度インポートする各ページ内のCSSやJS、1.。

　　パスの2インポート文言は、パスは、絶対または相対パスでありますか？

　　　　①絶対パス：プロジェクトから書き込まれるルートからのパス、プロジェクトがその名前を変更したり、ファイルパスの名前を変更する場合は、インポートにつながるすべてのHTMLページは明らかにあまりにも大騒ぎである、再びそれを変更する必要があります。

　　　　②相対パスを：ページレベルのHTMLファイルに不整合がある場合、それは私がHTMLページの相対インポートがどのレベルにある判断し、その後、適切に導入するようにどのように多くの「../」、書くために必要なファイルが発生します。

単に一般的なJSファイル（例えばcommon.js）により、上記課題を解決し、次に解決することができる動的な方法のJSコードに導入しました。

　　common.jsの調製

1  / * *
 2  * JS / CSSファイルを読み込む
 。3  * @paramファイルパスファイルパス
 。4  * @paramファイルタイプのファイルタイプ（JS、CSS）
 。5  * @return
 。6   * / 
7  関数loadJsOrCssFile（filePathに）{
 。8      
。9      VAR isJsFile = / $ JS / i.test（filePathに）;
 10      VARたfileType = isJsFile "JS"：？ "CSS" ;
 11  
12は、     IF （isIncludeFile（filePathに、isJsFile））{
 13が         返す;
 14      }
 15  
16      IF（たfileType ==「JS " ）{
 17  
18であります         VAR fileRef =のdocument.createElement（ 'スクリプト' ）
 19          fileRef.setAttribute（ "タイプ"、 "テキスト/ジャバスクリプト" ）
 20          fileRef.setAttribute（ "SRC" ファイルパス）
 21      } そう であれば（たfileType == "CSS" ）{
 22  
23          VAR fileRef =のdocument.createElement（ "リンク" ）
 24          fileRef.setAttribute（ "REL"、 "スタイルシート" ）
 25          fileRef.setAttribute（ "タイプ"、 "テキスト/ CSS" ）
 26          fileRef.setAttribute（ "HREF" 、
filePathに） 27      }
 28  
29      もし（typeof演算 fileRef！= "未定義" ）{
 30  
31である          document.getElementsByTagName（ "ヘッド"）は、[0 ] .appendChild（fileRef）
 32      }
 33である }
 34である 
35  / * *
 36  *に決定するかどうかにJS / CSSファイル
 37  * @param fileNameにファイル名
 38は、 インポートするかどうかを@return *
 39   * / 
40  機能{isIncludeFile（ファイル名、isJsFile）が
 41である     
42がある     VAR：fileRefArray = document.getElementsByTagName（？ 'リンク' isJsFile 'スクリプト' ;）
 43である     ため（VAR0 = I、LEN = fileRefArray.length; IがLEN <; I ++は）{
 44が         IF（fileRefArray [I] [isJsFile 'SRC'：？ 'のhref']のindexOf（ファイル名。）= -1）！返す trueに、
 45      }
 46で     返す falseに;
 47  }
 48  
49  // ベースパス（絶対パス）
50  VAR basePathを= "/ smilenursecare /ビュー/"を、
 51である // JSファイルストレージパス（絶対パス）
52である VaRの basePathJs =「/ smilenursecare /ビュー/ JS / " ;
 53です // CSSファイル・ストレージ・パス（絶対パス）
54がある のvar / smilenursecare /ビュー/ CSS /「basePathCss =" ;
55  
56  
57  // 导入共通的JS和CSS 
58 loadJsOrCssFile（basePathCss + "general.css" ）。
59 loadJsOrCssFile（basePathを+ "ヘッダ/ CSS / smart.css" ）。
60 loadJsOrCssFile（basePathを+ "LIB / TinyDropdown / style.cssに" ）。
61  
62 loadJsOrCssFile（basePathJs + "jqueryの-1.7.1.min.js" ）。
63 loadJsOrCssFile（basePathを+ "LIB / TinyDropdown / script.js" ）。
64 loadJsOrCssFile（basePathJs + "corpus.js" ）。
65 loadJsOrCssFile（basePathJs + "control.js" ）。
 
 
 loadTabsFile（）{
 69  　　loadJsOrCssFile（basePathを+ "LIB /タブ/ ui.tabs.css" ）。
70  　　loadJsOrCssFile（basePathを+ "LIB /タブ/ ui.core.js" ）。
71  　　loadJsOrCssFile（basePathを+ "LIB /タブ/ ui.tabs.js" ）。
72 }

common.js

　　ロードするファイルを選択するためにカスタマイズすることができloadJsOrCssFile（）関数を使用して。定義が絶対パスであるため、複数のパスを定義していない、プロジェクトの名前が変更された場合は、相対パスによる問題のレベルを心配したり、ファイルのパスを変更し、それだけの変数ベースパスの値を変更する必要があり、プロジェクトを強化するためにそうするので不要移植性と柔軟性を提供します。必要と必要に応じて輸入量は、isIncludeFile（検証）機能も効果的に単一のページを導入する問題が繰り返される避けるように、異なる複数のコンテンツをロードするように、さらに、loadTabsFile（）このような関数も定義することができます。

　　HTMLへ2. common.js方法相対パスを

< スクリプトタイプ= "テキスト/ javascriptの" srcが= "../のJS / common.js" > </ スクリプト>

　　あなたが最良のテンプレートHTMLファイルを持っている場合は、これだけのテンプレートのHTMLは、一度ファイルをインポートします。

ます。https：//www.cnblogs.com/lishaofei/p/5147869.htmlで再現

おすすめ