根据当前页面加载和运行 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 使用带有组件的路由以及更好的组件结构和渲染，这似乎可以做到这一点，但它们似乎只适用于单页网络应用程序。

反应示例

//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 组件，我必须重新渲染该组件在反应。那么我该如何保留这些变量呢？我是否必须对服务器进行 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>

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