Question

我正在尝试将所有页面链接在一起并仅显示另一页的内容，包括所有脚本。是在使用.load（）函数，但我被告知它不包含脚本，我还必须在一个页面中使用angularJS输入到另一个，所以我尝试了这个：

$('nav a').on('click', function(e) {                 // User clicks nav link
  e.preventDefault();                                // Stop loading new link
  var url = this.href;                               // Get value of href

  $('nav a.current').removeClass('current');         // Clear current indicator
  $(this).addClass('current');                       // New current indicator
  $('#container').remove();                          // Remove old content
  $('#content').load(url + ' #container').hide().fadeIn('slow'), function(){
//these are all the scripts in the pages:
$.getScript('https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
$.getScript('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js');
    $.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCzkXXGUHTJkR86sa0L4CrpmFmytuKWJ8k&callback=initMap');
    $.getScript('js/geolocation.js');
    $.getScript('js/angular-controller.js');
    $.getScript('js/valid.js');
    $.getScript('js/validate.js');
    $.getScript('js/angular-external-data.js');
  }    
});

这也不会加载脚本。还有更好的包含脚本吗？提前谢谢。

Answer 1

你有一个单页应用程序的想法很好，但你做错了。

我会做@Chris Satchell在评论中说的内容，并将所有/js/个文件捆绑到一个bundle.js

然后在HTML的<head>中添加所需的所有脚本：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzkXXGUHTJkR86sa0L4CrpmFmytuKWJ8k&callback=initMap"></script>

  <!-- BUNDLED JAVASCRIPT FILE -->
  <script src="/js/main.js"></script>
</head>

然后，每次单击导航栏项时，都不要从URL加载组件。加载所有脚本一次，您的页面将更快。

这样做的另一个好处是它可以让您的代码更轻松：

$('nav a').on('click', function(e) {                 // User clicks nav link
  e.preventDefault();                                // Stop loading new link
  var url = this.href;                               // Get value of href
  var currentUrl = $('nav a.current').attr('href');  // Get id of current active component

  $('nav a.current').removeClass('current');         // Clear current indicator
  $(this).addClass('current');                       // New current indicator
  $('#' + currentUrl + '-content').hide();              // Hide old content
  $('#' + url + '-content').show();              // Show new content
});`

将此作为您的HTML：

<!-- NAV BAR -->
<li><a href="page1">Page 1</a></li>
<li>a href="page2">Page 2</a></li>


<!-- COMPONENTS -->
<div id="page1-content">
  <!-- component stuff -->
</div>

<div id="page2-content" style="display:none">
  <!-- component stuff -->
</div>

Answer 2

只是可以做什么的概念性想法，但在主页上作为一个捆绑加载会好99％。

如果您的js文件很大，这是值得做的！比如每个人大于500kb并且有很多。如果他们不喜欢使用它们你就不愿意加载它们。

只有在他们不喜欢每次访问时才会使用。

未经测试 - 只是在概念上给出一个想法

- 主页

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- ... ommited other core script -->

  <!-- ... custome everypage scripts -->
  <script src="/main.js"></script>
</head>

- 注入视图，使用类似下面的内容

-------------------------- view start

<script>

    var url = '"/views/login.js"'

    if (typeof loginFunctions == 'undefined') 
    {
        //untested but just some code to add file to main page.
        $.loadScript(url, function(){


        });
    }
</script>

 <div>
    some html for the view 
 </div>

--------------------------查看结束

- scripy login.js --------------------------脚本开始

//where this only exists here.
var loginFunctions = {

}

-------------------------- script end

使用包含所有脚本的jQuery的动态内容

2 个答案: