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>

我只想加载pageA.jsforpageA.html和pageB.jsfor pageB.html，因为其他页面不需要每个文件中的代码。

我查看了requires.js库，但我不确定它是否是解决我问题的正确方法。在这种情况下构建 javascript 文件的最佳实践是什么？

4

3 回答 3

1

你有 JavaScript 来加载每个 html 文件的内容吗？如果是这样，并且一旦加载了每个文件，您就可以运行 JavaScript 代码，您可以在加载函数中调用所需的设置函数，如下所示：

base.html

<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/pageA.js"></script>
        <script type="text/javascript" src="js/pageB.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $('#loadPageA').on('click', function()
                {
                    $('#contents').load('pageA.html', function()
                    {
                        setupPageA(); // defined in pageA.js
                    });
                });

                $('#loadPageB').on('click', function()
                {
                    $('#contents').load('pageB.html', function()
                    {
                        setupPageB(); // defined in pageB.js
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="contents"></div>
        <a id="loadPageA">Load Page A</a>
        <a id="loadPageB">Load Page B</a>
    </body>
<html>

或者，如果您只想在加载 pageA.html 时运行 pageA.js，您可以在 pageA.html 本身中包含 pageA.js 脚本元素，如下所示：

pageA.html：

<div id="pageAContent">Page A</div>
<script type="text/javascript src="js/pageA.js"></script>

pageB.html：

<div id="pageBContent">Page B</div>
<script type="text/javascript src="js/pageB.js"></script>

base.html：

<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $('#loadPageA').on('click', function()
                {
                    $('#contents').load('pageA.html');
                });

                $('#loadPageB').on('click', function()
                {
                    $('#contents').load('pageB.html');
                });
            });
        </script>
    </head>
    <body>
        <div id="contents"></div>
        <a id="loadPageA">Load Page A</a>
        <a id="loadPageB">Load Page B</a>
    </body>
<html>

动态脚本src解决方案：

base.html：

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            function loadScript(script)
            {
                // Modify the existing script tag
                if($('#dynamicScriptTag').length != 0)
                {
                    $('#dynamicScriptTag').attr('src', script);
                }
                else // Create script tag
                {
                    $('<script>').attr('type', 'text/javascript')
                                 .attr('src', script)
                                 .attr('id', 'dynamicScriptTag')
                                 .appendTo('head');
                }
            }

            $(document).ready(function()
            {
                $('#loadPageA').on('click', function(event)
                {
                    event.preventDefault();
                    $('#contents').load('pageA.html', function()
                    {
                        loadScript('js/scriptA.js');
                        testScriptB(); // test if we can still call a function in scriptB.js
                    });
                });

                $('#loadPageB').on('click', function(event)
                {
                    event.preventDefault();
                    $('#contents').load('pageB.html', function()
                    {
                        loadScript('js/scriptB.js')
                        testScriptA(); // test if we can still call a function in scriptA.js
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="contents"></div>
        <a id="loadPageA" href="#">Load Page A</a>
        <a id="loadPageB" href="#">Load Page B</a>
    </body>
</html>

pageA.html：

<div id="pageAContents">Page A</div>

pageB.html：

<div id="pageBContents">Page B</div>

js/scriptA.js：

console.log($('#pageAContents').text());
function testScriptA(){ console.log('Can still call testScriptA!'); }

js/scriptB.js：

console.log($('#pageBContents').text());
function testScriptB(){ console.log('Can still call testScriptB!'); }
于 2013-04-22T03:47:53.653 回答
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 回答