JavaScript可视化应用——代码组织、主干mvc、桌面版本等
我正在着手开发一个用于可视化的 JavaScript Web 应用程序，其特点是为带有注释的各种图表添加书签等。
一个典型的例子是：给定一个 url 状态，显示两个 SVG 图形和一个用于操作的时间滑块，以及到处放置的一些信息注释。
传统上（并且有一段时间没有编写 JS），我会尝试某种模块化 JS 方法：
src
data
chart
chartType1
chartType2
chartType3
layoutManager
stateManager
utils
lib
d3?
backbone?
jquery?
...打破数据处理、一些实用函数、状态和功能。但是
，由于存在大量的库，也许我应该保持冷静并尝试一种新方法？
代码组织？
- 就像上面的或者更多的 MVC 一样？
- 有什么具体的模式会有帮助吗？
（非常感谢伪代码）
状态处理/模型？
- Backbone.js
- JavaScriptMVC
视图？
- 是否有任何使用 SVG 库（D3、Raphaël 等）和 mvc 框架的 JS vis 应用程序的好例子？
编译器/压缩器？
- Google 闭包编译器
- Jammit
IDE？
- 阿普塔纳工作室 3
- Netbeans
- 其他？
桌面版本？（标准：数据存储、可更新等）
- 空气
- 嵌入式铬
- XULrunner
- 钛合金加速器
- 其他选择？
很抱歉，这个问题的范围相当广泛，但如果深入了解这些领域中的任何一个，我将认为它得到了回答。所以请帮我选择...
I'm setting out to develop a JavaScript web application for visualization, featuring bookmarking of various graphs with annotations etc.
A typical example would be: Given a url state, show two SVG graphs and a time slider for manipulation together with some informative annotations placed out here and there.
Traditionally (and not having written JS for some time), I'd try some sort of modular JS approach:
src
data
chart
chartType1
chartType2
chartType3
layoutManager
stateManager
utils
lib
d3?
backbone?
jquery?
... breaking out the data handling, some utility functions, state & layout manager etc.
But with a plethora of libraries out there, perhaps I should hold my horses and try a new approach?
Code organization?
- Like above or more MVC like?
- Any specific patterns that would be helpful?
(pseudocode is much appreciated)
State handling/Models?
- Backbone.js
- JavaScriptMVC
Views?
- Are there any good examples of JS vis applications using SVG libraries (D3, Raphaël etc.) together with an mvc framework?
Compiler/minifier?
- Google Closure Compiler
- Jammit
IDE?
- Aptana Studio 3
- Netbeans
- Other?
Desktop version? (criteria: data storage, updatable etc.)
- AIR
- Chromium Embedded
- XULrunner
- Titanium appcelerator
- other options?
I'm sorry that the scope of this question is rather wide, but I shall consider it answered if insight into any of these domains is gained. So please help me choose ...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您已经非常了解 MVC，那么您可以使用 Backbone 做得很好。关于如何组织前端 javascript 有很多未知数，我们选择了 JavascriptMVC，它为您做出了很多决定。
不知道为什么我会使用 IDE.. TextMate &控制台对我来说非常有用。当我使用 NetBeans 时，它看起来不错。 JetBrains RubyMine 是质量最高、迄今为止最好的 IDE，但它是商业的。
编辑
是的，JMVC 不值得为它所提供的功能而烦恼。 Backbone 优雅简洁。唯一的问题是，如果您对代码结构相当陌生，因为您必须定义代码的结构。如果您使用的是 Rails，只需复制 Rails 应用程序的组织即可：
路由器/
观点/
模板/
models/
当然，每个类都有一个单独的文件。然后使用一些东西来要求一切，如果您使用 Rails 3.1 或者真的喜欢它，则使用 Sprockets，或者如果您使用 3.0.x，则使用 Jammit。
如果您使用coffeescript，只需意识到您的代码可能包含在顶级闭包中，因此如果您必须将类添加到顶级散列中，或者将它们声明为window.Classname。
（实际上，“this”是顶层的“window”，因此您可以将其声明为：
类@类名
）
祝你好运！
If you already know MVC really well, you could do great with Backbone. There were just so many unknowns with how to organize frontend javascript, we went with JavascriptMVC, which makes a lot of the decisions for you.
Not sure why I would use an IDE.. TextMate & console work great for me. NetBeans looked good when I was playing with it. JetBrains RubyMine is the highest quality and by far the best IDE, but it is commercial.
EDIT
Yes, JMVC is not worth the trouble for what it provides. Backbone is elegant and simple. The only issue is if you are fairly new to code structuring, since you must define the structure of your code. If you are using rails, just copy the organization of your rails app:
routers/
views/
templates/
models/
And a separate file for each class, of course. Then use something to require everything, Sprockets if you're on Rails 3.1 or really like it, or Jammit if you're on 3.0.x.
If you use coffeescript, just realize that your code is probably wrapped in a top-level closure, so if you'll either have to add your classes into a top-level hash, or declare them as window.Classname.
(Actually, "this" is "window" at the top level, so you can declare it as:
class @Classname
)
Good luck!
代码组织？
- 我像在 Rails 中一样使用 MVC（应用程序/视图、助手、控制器、模型）
- 框架应归为一组 IMO
状态处理/模型？
- 当然是 Backbone.js。
意见？
- 我不知道 vis 库。对于一般的主干视图和模板，我构建了这个 https://github.com/juggy/backrub 来照顾根据模型/视图中的事件更新视图。它节省了大量的胶水代码。
编译器/压缩器？
- Google 闭包编译器
- Jammit
我使用带有闭包编译器的 Jammit 作为后端。 Jammit 可让您有效地对文件进行分组/分解。
IDE？
由你决定，越轻越好。
桌面版？ （标准：数据存储、可更新等）
通过一些配置，您现在可以在本地运行 Web 应用程序。我想你可以看看这个。
Code organization?
- I do MVC like in rails (app/views, helpers, controllers, model)
- framework should be grouped together IMO
State handling/Models?
- Backbone.js definitely.
Views?
- I don't know about vis library. For general backbone views and templating I built this https://github.com/juggy/backrub which takes care of updating the views based on events from your model/views. It saves a lot of glue code.
Compiler/minifier?
- Google Closure Compiler
- Jammit
I use Jammit with closure compiler as the backend. Jammit lets you group/break files efficiently.
IDE?
Up to you, the lighter the better.
Desktop version? (criteria: data storage, updatable etc.)
With some config you can now run web apps locally. I think you can have a look at that instead.