Question

我是 javascript 模块的新手，我试图在无模块 js 文件中使用模块中的函数 - 函数。我正在制作 Vanilla Js SPA。

在-Index.html的底部

<script type="module" src="static/js/index.js"></script>

我想在一个函数的另一个js文件中使用这部分：

const navigateTo = url => {
  history.pushState(null, null, url); // Add the url to the history APi of Js
  router();
};

模块：

// Imports
import Dashboard from "./views/Dashboard.js";
import Posts from "./views/Posts.js";
import Settings from "./views/Settings.js";
import Register from "./views/Register.js";
import Login from "./views/Login.js";
import Profile from "./views/Profile.js";


// Navigator--------------------------------------------------------------------------------->
 const navigateTo = url => {
  history.pushState(null, null, url); // Add the url to the history APi of Js
  router();
};
                       

// Router------------------------------------------------------------------------------------>
const router = async () => {
 const routes = [
   {path: "/", view: Dashboard}, // On Path "/" use the dashboard class and inject html in the #app div
   {path: "/posts", view: Posts },
   {path: "/settings", view: Settings },
   {path: "/Register", view: Register },
   {path: "/Login", view: Login },
   {path: "/Profile", view: Profile }
 ];

 

 

 // Test each route for potential match ----------------------------------------------------->
 // Get the current Url and check if its defined in routes method "Check if its one of our Spa Urls" ----------------------------------------------------->
 const potentialMatches = routes.map(route => {
  return {
      route: route,
      isMatch: location.pathname === route.path  // true if match else false
  };
 });




// Check if there is Match------------------------------------------------------------------->
    let match = potentialMatches.find(potentialMatch => potentialMatch.isMatch);  // Get isMatch from potentialMatches


 // If no match return to StartPage
 if(!match)
 {
     match = {
     route: routes[0],
     isMatch: true
     };
 }

 const view = new match.route.view(); // If match  use the routes array of the router and get the view function for the route

 document.querySelector("#app").innerHTML = await view.getHtml();  // Get the #app div and use the view function to inject Html in it from the view class ex."Dashboard, Posts, Settings etc."
    await view.executeViewScript(); 
};





// On-Navigating-Back&Forth-Load the Content--Together with the url------------------------------------------------------------------------------------>
window.addEventListener("popstate", router); // On popstate "If back button is pressed" use the router array to load back the previeous SPA View


// Listen to document fully Loaded
document.addEventListener("DOMContentLoaded", () => {
  document.body.addEventListener("click", e => { //Listen for click in the body
    if(e.target.matches("[data-link]")){  // If body item was clicked and its data-link decorated
      e.preventDefault();  // Prevent deafult behavior dont follow the link
      navigateTo(e.target.href);  // Navigate method   
    }
  });


router(); // Load the content if the url is defined in our "Spa Urls"
});

//#### Client Routing END #####

Answer 1

这是有效的window.navigate('/');

但正如@BERGI 推荐的那样，我在模块中完成了所有工作，而且效果更好。

如何在无模块js文件中使用模块的功能 - Vanilla JS

1 个答案: