Estoy intentando organizar mi archivo de rutas en varios archivos, pero no puedo acceder a un objeto "enumeración" declarado en el archivo principal porque aún no se ha declarado.
En el siguiente ejemplo, aparece el error ReferenceError: Cannot access 'MenuItem' before initialization .
Pensé que era extraño que la función (createRoute) no provoque el mismo error, por lo que se declara antes de que el archivo routeSettings la llame.
¿Hay algún truco que me permita mantener la estructura que busco?
rutas.js
import Home from "../pages/Home"; import Settings from "../pages/settings"; import { routesSettings } from "./routesSettings" export const MenuItem = Object.freeze({ HOME: "Home", SETTINGS: "Settings", }); export const routes = [ // Home createRoute(MenuItem.HOME, "/", Home), // Settings createRoute(MenuItem.SETTINGS, "/", SETTINGS), ...routesSettings, ] export function createRoute(name, route, component) { return { name, route, component }; }rutasConfiguraciones.js
import PasswordSettings from "../pages/settings/password"; import UserSettings from "../pages/settings/user"; import { createRoute, MenuItem } from "./routes" export const routesSettings = [ createRoute(MenuItem.SETTINGS_PASSWORD, "/settings/password", PasswordSettings), createRoute(MenuItem.SETTINGS_USER, "/settings/password", UserSettings), ];La razón por la que ve este error: ReferenceError: no se puede acceder a 'MenuItem' antes de la inicialización
es porque importó MenuItem en su archivo routesSettings.js ; por lo general, durante el tiempo de compilación, el motor JS levantará todas las declaraciones de variables en su entorno léxico sin undefined y todas permanecerán sin uninitialized y solo se inicializarán durante la evaluación real del código.
Intente iniciar sesión en la consola MenuItems en su archivo routesSettings.js , verá que su valor en realidad no está definido en ese archivo.
Sin embargo, notará que la función createRoute no arrojó ningún error... la razón es que las declaraciones de función en JS se agregan a la memoria durante la compilación, que podemos usar antes de la declaración de la función real. Por lo general, el motor JS busca en el entorno léxico donde encuentra la función y la ejecuta.
Además, si cambia su función createRoute a:
export const createRoute = (name, route, component) => { return { name, route, component }; }; tendrá errores como createRoute is undefined etc.. porque const permanece sin uninitialized , por lo tanto, undefined en su entorno léxico. Las expresiones de función tampoco se const neverHoisted = function(){...} .
En resumen, JS solo eleva declaraciones y no asignaciones/inicializaciones.
Lo que debe hacer para resolver los problemas que está viendo es crear un archivo separado para menuItem e importarlo en los archivos router.js y routeSettings.js .