4

私は持っている

  • base.html
  • pageA.html
  • pageB.html
  • pageA.js

  • pageB.js

    1. pageA.jsのコードがpageA.htmlあります。pageB.jsのコードがありますpageB.html。
    2. との両方pageA.jsをpageB.js使用しますjQuery。

現在、次のように base.html にすべてのスクリプトを含めています。

<html>
  <body>
    <div id="contents">
      <!-- pageA.html / pageB.html comes here -->
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/pageA.js"></script>
    <script src="js/pageB.js"></script>
  </body>
</html>

各ファイルのコードは他のページでは必要ないため、 forとforpageA.jsのみをロードしたいと思います。pageA.htmlpageB.jspageB.html

requires.jsライブラリを調べましたが、それが私の問題に対する適切な解決策であるかどうかはまだわかりません。このような状況で JavaScript ファイルを構造化するためのベスト プラクティスは何ですか?

4

3 に答える 3

1

あなたができる最善のことは、このページが動的に読み込まれるIF<script src="js/pageX.js"></script>の最後に追加することだと思います。ページが動的に読み込まれない場合、前に読み込まれて JavaScript が壊れる可能性があります。pageX.html jquery.js

または、次のように、現在の URL を読み取り、この情報に基づいて正しいスクリプトを読み込むことができます。

var scriptPath;
var currentPage = window.location.pathname;

if (currentPage == "pageA.html")
{
    scriptPath = "pageA.js";
}
else if (currentPage == "pageB.html")
{
    scriptPath = "pageB.js";
}

var scriptElement = document.createElement("script");
scriptElement.setAttribute("type", "text/javascript");
scriptElement.setAttribute("src", scriptPath);

document.getElementsByTagName("head")[0].appendChild(scriptElement);
于 2013-04-22T03:57:13.703 に答える
0

最終的には、Jinja (テンプレート エンジン) を使用して、次のように JavaScript ファイルを配置しました。

base.html

<html>
  <body>
    <div id="contents">
      {% block contents %}
      {% endblock %}
    </div>
    <script src="js/jquery.js"></script>
      {% block scripts %}      
      {% endblock %}       
  </body>
</html>

pageA.html

{% block contents %}
   ..page A contents..
{% endblock %}
{% block scripts %}
<script src="js/pageA.js"></script>
{% endblock %}

テンプレート エンジンを使用している場合は、実行可能なソリューションになる可能性があります。

于 2013-04-26T02:27:28.223 に答える