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

Loading and running Javascript modules depending on current page

本文关键字：运行 Javascript 模块 加载 当前页      更新时间：2023-09-26

我有一个使用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）模块，然后使用browserfy将这些模块连接起来。这意味着所有的东西都试图在每一页上执行。我应该如何构建主文件中模块的加载结构，以便它只加载基于当前页面的必要模块？

我已经研究了React和Vue是否使用了带有组件的路由，以及更好的组件结构和渲染，这似乎可以做到这一点，但它们似乎只适用于单页web应用程序。

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）是，如果我使用在PHP中创建的变量使用Blade创建了一个组件，并且我想将其用作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
    }
});

我错过了什么？

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

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

你会发现它使用起来非常简单明了，当然它会大大简化你的应用程序。

相关文章：