Question

我有

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.js加载pageA.html，为pageB.js加载pageB.html，因为其他页面中不需要每个文件中的代码。

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

Answer 1

你是否有JavaScript加载每个html文件的内容？如果是这样，并且每个文件加载后你都有JavaScript代码运行，你可以在load函数中调用所需的设置函数，如下所示：

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，你可以在page 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!'); }

Answer 2

我认为您可以做的最好的事情是在<script src="js/pageX.js"></script> IF 的末尾添加pageX.html动态加载此页面。如果页面未动态加载，则可能会在jquery.js之前加载并打破javascript。

或者您可以阅读当前网址并根据此信息加载正确的脚本，如下所示：

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);

Answer 3

我最终使用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 %}

如果您使用模板引擎，它可能是一个可行的解决方案。

如何构建javascript文件？

3 个答案: