javascript - 根据当前页面加载和运行 Javascript 模块

Question

我有一个使用 Laravel 构建的多页面网站，我现在正在研究如何构建 Javascript 前端。 Javascript 将用于一些小事情，例如在单击按钮时显示/隐藏组件、提交表单时调用 Ajax、将组件附加到 DOM、调整在 Laravel/Blade 中创建的组件的大小/定位。

纯 JS 示例:

//navbar.js

export function exec() {
    var hamburger = document.getElementById("hamburger");
    var menu = document.getElementById("menu");

    hamburger.onclick = function() {
        menu.classList.toggle("expanded");
    };
};

// app.js

var navbar = require('./navbar');
/* more imports */

navbar.exec();
/* more executions of modules*/

我已将代码拆分为 (ES2015) modules然后使用 browserify 连接起来.这意味着一切都试图在每个页面上执行。我应该如何构建主文件中模块的加载，以便它只加载基于当前页面的必要模块？

我调查了 React和 Vue将路由与组件一起使用以及更好地构建组件和呈现似乎可以做到这一点，但它们似乎仅适用于单页网络应用程序。

react 示例

//progressbar.js
var React = require('react');
var ReactDOM = require('react-dom');

var ProgressBar = React.createClass({
    render: function() {
        return (
            <div className="ProgressBar">
                This is a progress bar.
            </div>
        );
    }
});

module.exports = ProgressBar;

//app.js
import React from 'react';
import { render } from 'react-dom';

var ProgressBar = require('./progressbar');

function renderToElements(toRender, elements) {
  for (var i = 0; i < elements.length; i++) {
    render(toRender, elements[i]);
  }
}

renderToElements(
    <ProgressBar />,
    document.getElementsByClassName('progress-bar')
);

React(我认为 Vue 也是)的一个问题是，如果我使用 Blade 创建了一个组件，并在 PHP 中创建了变量，并且我想将其用作 React 组件，我必须重新渲染该组件在 react 中。我该如何保留这些变量？我是否必须对服务器进行 Ajax 调用并再次获取该值？

Laravel + React 示例

//somepage.blade.php
/* other code */
<div class="progress-bar">
    <div class="bar" style="width: {{$product->progress}}%">
        <span>
            <span class="sum">{{$product->progress}}</span>
        </span>
    </div>
</div>
/* other code */

//progressbar.js
var ProgressBar = React.createClass({
    render: function() {
        return (
            <div className="ProgressBar">
                This is a progress bar.
            </div>
        );
    },
    handleResize: function(e) {
        //do something
    }
});

我错过了什么？

Answer 1

只需使用 React 路由器并将路由定义为:

<Router>
  <Route name="welcome" />
  <Route name="about" />
  ...
</Router>

您会发现它的使用非常简单直接，当然它会大大简化您的应用程序。