Fatal编程技术网

如何构造javascript文件？

javascript web-applications requirejs

如何构造javascript文件？,javascript,web-applications,requirejs,Javascript,Web Applications,Requirejs,我有 base.html pageA.html pageB.html pageA.js pageB.js pageA.js有pageA.html的代码，pageB.js有pageB.html的代码 pageA.js和pageB.js都使用jQuery 目前，我正在base.html中包含所有脚本，如下所示： <html> <body> <div id="contents"> <!-- pageA.html / pageB.h

我有

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

  • pageA.js
    有
    pageA.html
    的代码，
    pageB.js
    有
    pageB.html
    的代码
  • 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.html
加载
pageA.js
，为
pageB.html
加载
pageB.js
，因为在另一个页面中不需要每个文件中的代码

我已经研究了图书馆，但我还不确定它是否是解决我问题的正确方法。在这种情况下，构建javascript文件的最佳实践是什么？

在每个html文件的内容中都要加载javascript吗？如果是这样，并且在加载每个文件后都要运行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);
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>

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

console.log($('#pageBContents').text());
function testScriptB(){ console.log('Can still call testScriptB!'); }
我认为，如果动态加载此页面，则最好在
pageX.html
的末尾添加
。 如果页面不是动态加载的，它可能会在
jquery.js
之前加载，并破坏javascript

或者，您可以读取当前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);
我最终使用（模板引擎）来放置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>

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


{%block contents%}
{%endblock%}
{%block scripts%}
{%endblock%}
pageA.html

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

{%block contents%}
…A页目录。。
{%endblock%}
{%block scripts%}
{%endblock%}
如果您使用的是模板引擎，它可能是一个可行的解决方案。

第一种方法的问题是
pageA.js
和
pageB.js
的全部内容都将被下载，即使它们没有被使用。这是真的，如果它们不是大脚本，那么它就不是一个真正的问题。但是，第二种解决方案完全避免了这个问题。是的，脚本加载到浏览器中后，它似乎会留在那里（大概直到您关闭选项卡/窗口）。如果脚本src仍然比其他方法更有用，我将用一个演示更新我的答案，并用一种快速的方法更改脚本src。再次使用相同名称定义的函数（由第二次加载脚本引起）只会覆盖旧函数。即使脚本被删除或src更改，对函数的引用仍在内存中。这种方法的唯一问题是每次更改后都必须记得清理脚本元素。如果有人再次加载a页、B页和a页，则可能会导致冲突。但如果做对了，这是一个非常好的主意@安布罗西亚+1，很好。但是，请注意，我的第一种方法与您的方法相同（在每个html末尾添加
script
标记），第二种方法考虑到页面将重新加载，但是如果URL发生变化（没有完全重新加载），是的，可能会是一个大问题……啊，是的，您将进行整个重新加载以运行它。我想这样可以避免冲突。另外需要注意的是，我认为您必须等到DOM完全加载完毕后，才能对
标记中的内容进行更改，因此您可能希望将其包装在
$（document.ready（function（）{}）中块。如果通过更改src（在加载DOM之后）来删除脚本，它是否会从浏览器内存中删除函数，或者是否仍然存在冲突？我可能会尝试编写另一个动态脚本转换器来测试这一点。@Ambrosia，刚刚在FireFox上本地尝试了这两个假设。首先，不需要等待整个DOM开始戳它（我在body和head部分添加了
脚本）。第二，即使从DOM中删除整个脚本标记，该文件中的代码仍在运行。哦，对不起，我误读了我的源代码。DOM可以是未完成的，尽管“在渲染到达标记之前不可能更改src属性”有道理。

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



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



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



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