如何构造JavaScript文件？

base.html
pageA.html
pageB.html
pageA.js
pageB.js
1. pageA.js具有代码pageA.html，pageB.js的代码为pageB.html。使用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文件的最佳做法是什么？

来源

2013-04-22 Yeonho

我认为你能做的最好的是在IF此页面动态加载的pageX.html的末尾添加<script src="js/pageX.js"></script>。如果页面未被动态加载，它可能会在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);

来源

2013-04-22 03:57:13 NemoStein

这种方法唯一的问题是您必须记住在每次更改后清理脚本元素。如果您遇到有人加载页面A，然后加载页面B，再加载页面A的情况，则可能导致冲突。但是，如果做得对，一个非常好的主意！ – SimonDever 2013-04-22 04:11:51

@Ambrosia +1，好点。但是请注意，我的第一种方法与您的第一种方法相同（在每个html的末尾添加脚本标签），第二种方法考虑到页面将重新加载，但如果URL更改（没有完全重新加载），是的，可以是一个大问题... – NemoStein 2013-04-22 04:26:20

啊，是的，你要做一个完整的重新加载运行。我想这会避免冲突。另外值得注意的是，我认为你必须等到DOM完全加载完成之后才能对''标签中的内容进行更改，以便您可以将它包装在'$（document）.ready（function（）{}）;'块。如果通过更改src（在DOM加载之后）删除脚本，它是否会从浏览器的内存中删除这些功能，或者是否仍然存在冲突？我可能会尝试编写另一个动态脚本转换器来测试它。 – SimonDever 2013-04-22 04:33:17

是否有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.js脚本元素将pageA.html本身，就像这样：

将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-22 03:47:53 SimonDever

第一种方法的问题是即使没有使用，也会下载'pageA.js'和'pageB.js'的全部内容。 – NemoStein 2013-04-22 04:01:37

这是真的，如果他们不是大脚本，那么它不是一个真正的问题。然而，第二种解决方案完全避免了这个问题。 – SimonDever 2013-04-22 04:05:45

是的，它看起来好像一旦脚本被加载到浏览器中，它就停留在那里（大概直到你关闭标签页/窗口）。如果它仍然比其他方法更有用，我将通过演示这个更新我的答案，并更新脚本src。 – SimonDever 2013-04-22 04:42:47

我结束了使用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-26 02:27:28 Yeonho

如何构造JavaScript文件？

回答

相关问题