香草JS上的SPA路由，三个JS对象未呈现

时间：2019-01-26 18:32:11

标签： javascript

我正在一个基于Three JS Web的项目上进行SPA路由。我将三个js对象放在单独的脚本文件中，该文件在viewer.html中调用。因此，当SPA路由开始时，我可以在不同页面之间导航，但是除了将代码复制到index.html

时，我的三个JS objet都不会呈现。

但是，index.html会全局显示三个js对象，但我不希望如此，如何解决此问题，以便三个js仅在不同页面之间的路由过程中显示在指定的html文件中？

我期望的输出是使我的三个js对象在指定的html文件中运行，而不是全局运行，并且当我导航到其他页面时，我可以将其他相关信息存储到该页面，而无需三个js徘徊。

这是我的home.html代码，我在其中插入了三个js脚本引用，并且在路由过程开始之前效果很好。

<!DOCTYPE html>
<html>

<head>
  <title>ShopEXR</title>
</head>

<body>

  <!-- <button class="trigger">Click here to trigger</button> -->
  <div class="modal">
    <div class="modal-content">
      <span class="close-button">&times;</span>

      <div class="desc-rating">
        <h1 class="product-desc">Kursi Minimalis

          <div class="rating-container">
            <img src="assets/images/star.png" alt="rating" class="product-rating" />
            <img src="assets/images/star.png" alt="rating" class="product-rating" />
            <img src="assets/images/star.png" alt="rating" class="product-rating" />
          </div>
      </div>
      </h1>

      <!-- Large thumbnail -->
      <div class="container">
        <div class="column">
          <img src="assets/images/chair1.png" alt=" Hope" class="thumbnail" width="350" />
        </div>
      </div>

      <h2 class="modal-text">
        A design chair that combines strength and beauty with practicality and reliability. Elephant, pushes
        the boundaries of innovation and sets new standards for design and usability
      </h2>

      <h3 class="other-product-text">Other products</h3>
    </div>
  </div>

  <!-- Footer Card -->
  <div class="footer-card"></div>

  <div id="sidebar">
    <div class="toggle-btn" onclick="toggleSidebar()">
      <span class="bar1"></span> <span class="bar2"></span>
      <span class="bar3"></span>
    </div>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Author</li>
    </ul>
  </div>

  <div class="header-items">
    <img src="assets/images/bl.png" alt=" Hope" class="center" />
    <p class="psx">Extended Reality Shopping Experience</p>
  </div>

  <script src="components/frameworks/three.js"></script>
  <script src="components/loaders/OrbitControls.js"></script>
  <script src="components/loaders/OBJLoader.js"></script>
  <script src="components/frameworks/threex.domevents.js"></script>
  <script src="components/sidebar.js"></script>
  <script src="js/xr.js"></script>

</body>

<style>
  body {
    margin: 0;
    /* background-color: black; */
  }

  canvas {
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0px;
    padding: 0px;
    /* box-sizing: border-box; */
    background-color: black;
    font-family: sans-serif;
  }

  #sidebar {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: black;
    left: -200px;
    transition: all 160ms cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
  }

  .product-rating {
    width: 5%;
    padding: 10px 0px 10px;
  }

  .ratings {
    padding: 2px;
  }


  .column {
    float: right;
    width: 15%;
    padding: 0px;
    margin-top: -160px;
    margin-right: 30px;
  }

  .thumbnail {
    margin-top: 30px;
  }


  .rating-container {
    float: left;
  }

  .container {
    padding: 2px 16px;
  }

  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }

  /* .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        width: 40%;
        back
    } */

  .row {
    content: "";
    clear: both;
    display: table;
  }

  #sidebar.active {
    left: -15px;
  }

  #sidebar ul li {
    color: white;
    list-style: none;
    padding: 25px 40px;
    font-weight: lighter;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    /* border-bottom: 1px solid rgba(100, 100, 100, 0.1); */
  }

  #sidebar .toggle-btn {
    position: absolute;
    left: 230px;
    top: 20px;
    color: #ffffff;
  }

  #sidebar .toggle-btn span {
    display: block;
    width: 30px;
    height: 2.9px;
    background: #ffffff;
    margin: 5px 0px;
  }

  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    margin: 6px 0;
    transition: 0.4s;
  }

  .active .bar1 {
    -webkit-transform: rotate(-45deg) translate(-3px, 4px);
    transform: rotate(-45deg) translate(-3px, 4px);
  }

  .active .bar2 {
    opacity: 0;
  }

  .active .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8x, -8px);
  }

  .psx {
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 15px;
    /* font-size: 10vw; */
    text-align: center;
    margin-top: 10px;
    background-color: black;
    /* border-bottom-color: black; */
    z-index: -1;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15%;
  }


  .modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    opacity: 0;
    visibility: hidden;
    overflow: auto;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  }

  .modal-text {
    color: white;
    background-color: black;
    font-size: 14px;
    padding: 10px 10px;
    font-weight: 200;
    text-align: left;
    font-family: "-apple-system", BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  }

  .other-product-text {
    color: white;
    background-color: black;
    font-size: 15px;
    padding: 20px 10px;
    font-weight: 200;
    font-family: "-apple-system", BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  }

  .product-desc {
    color: white;
    background-color: black;
    font-size: 25px;
    text-align: left;
    padding: 10px;

    font-family: "-apple-system", BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  }

  .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    padding: 2rem 5rem;
    width: 24rem;
    border-radius: 0.5rem;
  }


  .show-modal {
    opacity: 0.85;
    visibility: visible;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }

</style>

</html>

这是开始进行SPA路由后的index.html，只有当我在此处复制脚本引用时，我的三个js才会出现

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>ShopEXR</title>
</head>

<body>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div id="app"></div>

  </div>
  
  <script src="js/route.js"></script>
  <script src="js/router.js"></script>
  <script src="js/app.js"></script>
   <script src="components/frameworks/three.js"></script>
  <script src="components/loaders/OrbitControls.js"></script>
  <script src="components/loaders/OBJLoader.js"></script>
  <script src="components/frameworks/threex.domevents.js"></script>
  <script src="components/sidebar.js"></script>
  <script src="js/xr.js"></script>
 





</body>

</html>

如果需要的话，这是我的route.js和router.js代码

//route.js
'use stict';

function Route(name, htmlName, defaultRoute) {
    try {
        if(!name || !htmlName) {
            throw 'error: name and htmlName params are mandatories';
        }
        this.constructor(name, htmlName, defaultRoute);
    } catch (e) {
        console.error(e);
    }
}

Route.prototype = {
    name: undefined,
    htmlName: undefined,
    default: undefined,
    constructor: function (name, htmlName, defaultRoute) {
        this.name = name;
        this.htmlName = htmlName;
        this.default = defaultRoute;
    },
    isActiveRoute: function (hashedPath) {
        return hashedPath.replace('#', '') === this.name; 
    }
}

//router.js
'use strict';

function Router(routes) {
    try {
        if (!routes) {
            throw 'error: routes param is mandatory';
        }
        this.constructor(routes);
        this.init();
    } catch (e) {
        console.error(e);   
    }
}

Router.prototype = {
    routes: undefined,
    rootElem: undefined,
    constructor: function (routes) {
        this.routes = routes;
        this.rootElem = document.getElementById('app');
    },
    init: function () {
        var r = this.routes;
        (function(scope, r) { 
            window.addEventListener('hashchange', function (e) {
                scope.hasChanged(scope, r);
            });
        })(this, r);
        this.hasChanged(this, r);
    },
    hasChanged: function(scope, r){
        if (window.location.hash.length > 0) {
            for (var i = 0, length = r.length; i < length; i++) {
                var route = r[i];
                if(route.isActiveRoute(window.location.hash.substr(1))) {
                    scope.goToRoute(route.htmlName);
                }
            }
        } else {
            for (var i = 0, length = r.length; i < length; i++) {
                var route = r[i];
                if(route.default) {
                    scope.goToRoute(route.htmlName);
                }
            }
        }
    },
    goToRoute: function (htmlName) {
        (function(scope) { 
            var url = 'views/' + htmlName,
                xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    scope.rootElem.innerHTML = this.responseText;
                }
            };
            xhttp.open('GET', url, true);
            xhttp.send();
        })(this);
    }
};

这是针对我当前的项目，对我来说非常重要。我希望所有问题和要求都足够清楚。谢谢

0 个答案:

没有答案
相关问题
最新问题