Question

我想就我正在进行的项目询问有关文件夹结构和命名空间的意见/建议。它是一个Play Framework 2.0，以及用于UI的React + Backbone。

目前的结构：

/assets
  /css
  /js
    /lib
      someLib.js
    /models
      bar.js
    /ui
      /components
        Foo.jsx
      App.jsx
      router.jsx
    main.js

我有/assets/js个文件夹。在其中我有main.js我引导我的应用程序。

// main.js
import router from './ui/router';
window.addEventListener('DOMContentLoaded', router);

router.jsx包含react-router使用的路由，还包含这些路由使用的一些主要组件。

// router.jsx
import App from './App';
import Foo from './components/Foo';

...
const Routes = {
  <ReactRouter.Route handler={App} path="/">
     <ReactRouter.Route name="foo" path="foo" handler={Foo} />
  </ReactRouter.Route>
}

export default function() {
    ReactRouter.run(
        Routes,
        ReactRouter.HistoryLocation,
        function(Handler) {
            React.render(<Handler/>, document.body);
        }
    );
}

我还有Backbone模型，它们与React连接并将它们存储在/assets/js/models中。 E.g。

// Foo.jsx 
import bar from './../../models/bar';

..
// some react code
export default Foo;

我的模特档案：

// bar.js
import someLib from './../lib/someLib';

..
// some backbone model code
export default Bar;

就是这样。我不喜欢的事情就是那些漫长的道路 import API from '../../../api/websocket';或 import API from '../../../api/websocket';

我还想避免引用ReactRouter.Route，而只是引用Route等。

我在考虑进口/出口的一些中心点，但不确定在这种情况下最佳做法是什么。

Answer 1

您的应用布局对我来说没问题。在你需要之前不要重构。

您可以通过避免多余./来清理您的路径，因此请使用../../models/bar代替./../../models/bar。

使用ReactRouter.Route我发现转到https://facebook.github.io/react/jsx-compiler.html并查看代码在转换为普通JS后的外观会很有用。以您的路线为例：

const Routes = (
  <ReactRouter.Route handler={App} path="/">
     <ReactRouter.Route name="foo" path="foo" handler={Foo} />
  </ReactRouter.Route>
)

编译为：

const Routes = (
  React.createElement(ReactRouter.Route, {handler: App, path: "/"}, 
     React.createElement(ReactRouter.Route, {name: "foo", path: "foo", handler: Foo})
  )
)

因此，您可以看到ReactRouter.Route只是传递给React.createElement的普通对象。这意味着你可以随意命名。您可以执行const Route = ReactRouter.Route;或从模块中导出该文件并将其导入为import { Route } from '../lib/MyReactUtils'等...

播放框架+ React，名称空间

1 个答案: