我正着手开发一个用于可视化的JavaScript Web应用程序,其中包含带注释的各种图形的书签等
.典型的例子是:给定一个url状态,显示两个SVG图形和一个用于操作的时间滑块以及一些信息性注释在这里和那里.
传统上(并且有一段时间没有编写JS),我会尝试某种模块化的JS方法:
src
data
chart
chartType1
chartType2
chartType3
layoutManager
stateManager
utils
lib
d3?
backbone?
jquery?
Run Code Online (Sandbox Code Playgroud)
...打破数据处理,一些实用功能,状态和布局管理器等.
但是由于那里有大量的图书馆,或许我应该抓住我的马并尝试一种新方法?
代码组织?
- 像上面或更多的MVC一样吗?
- 任何有用的特定模式?
(伪代码非常感谢)
国家处理/模型?
- Backbone.js
- JavaScriptMVC
看法?
- 有没有使用SVG库(D3,Raphaël等)和mvc框架的JS vis应用程序的好例子?
编译/ minifier?
- Google Closure编译器
- Jammit
IDE?
- Aptana Studio 3
- Netbeans
- 其他?
桌面版?(标准:数据存储,可更新等)
- AIR
- Chromium Embedded
- XULrunner
- Titanium appcelerator
- 其他选项?
对不起,这个问题的范围相当广泛,但如果能够深入了解这些领域,我会考虑回答.所以请帮我选择......
javascript web-applications code-organization javascript-framework backbone.js
我无法在Underscore模板中运行嵌套JavaScript来运行.
<script type="text/template" id="myTemplate">
<h3><%= heading %></h3>
<div class="container"></div>
//THIS DOES NOT WORK --->
<script type="text/javascript" charset="utf-8">
$(".container").html("Test")
</script>
//END
</script>
Run Code Online (Sandbox Code Playgroud)
这是完全可能的,或者我如何解决这个问题?谢谢.
我是After Effects脚本的新手,但在浏览器中有很多JavaScript经验.
我正在使用jQuery BBQ插件将状态推送到location.hash.
为了防止反馈循环,我想在以编程方式设置状态时暂时禁用hashchange侦听器.
我见过这个解决方案: 更改哈希而不触发hashchange事件
不幸的是,它似乎并不完美,因为它有时会触发,即使我这样做:
updateURL(obj){
$(window).unbind( 'hashchange');
$.bbq.pushState(obj);
setTimeout( function() { bindHashChange()}, 500);
}
Run Code Online (Sandbox Code Playgroud)
现在是否有更好的方法以编程方式推送状态?也许是另一个JS库?
我想将修订控制 - 使用git - 应用于基于WordPress的网站开发.
根据我的疑虑,我该怎么办?
关注1:推动"细粒度变化"
在这种特定情况下,很难在本地模仿网络服务器环境.因此,我想经常推动变革.我可以将"子提交级别"的更改推送到Web服务器以避免"无关"提交吗?(我是否必须在我的远程网络服务器上设置一个git repo?)
关注2:插件和媒体处理
以前,我和我的同事一直在安装/更新插件并从WordPress的管理界面上传媒体.如果我还想保持媒体和插件同步,这将如何实现?
我将非常感谢任何有关如何设置工作流程的资源,这些工作流程允许我在本地保存我的所有文件(WordPress +插件,媒体,主题等),同时允许我将"粒度更改"推送到我的网络服务器和对Github的"真实承诺".
好吧,所以我昨天为办公室买了一个46英寸的屏幕,并且即将被指控设置"精心制作的世界杯拖延计划"的风险,我最好向同事们展示它的意义;)
看看我简单的草图,以及我受到启发的这些伟大的 项目,我想得到以下的一些意见:
骨架的伪代码:由于某些方法应该每24小时调用一次("今天的标题日期"),其他方法每隔60秒("Twitter结果"),使用JavaScript(jQuery)和PHP的好方法是什么?
编辑:Alsciende:我同意#1和#8太模糊了.因此,我删除#8并尝试澄清#1:使用"伪代码为骨架",我基本上意味着这可以完全使用JavaScript定时器完成,你将如何设置各种定时器?
Google Analytics图书馆:哪些图书馆支持Google AnalyticsAPI,可以生成整齐的图表.最好是HTML5,基于JavaScript的Protovis.
推特图书馆:您建议哪些图书馆可以从个人资料中获取推特搜索结果和最新推文.
排版/ CSS/HTML5的图书馆:尝试在此过程中学习一些HTML5等,请咨询任何其他可能相关的排版/ CSS库.
刮痧/解析?我将举一个具体的例子:试着从这家餐厅的网站上获取今天的菜单,你会怎么做?(这是瑞典语 - 但你明白了 - 对不起;))
实时统计?我正在使用WordPress的WassUp插件来跟踪我们网站上的实时访问者.其他日志记录软件(AWStats等)可能也安装在网络服务器上.有关如何从这些信息中提取信息并在仪表板上实时显示的任何想法?
浏览器选择?你会选择哪种浏览器和操作系统?稳定,全屏,HTML5.
alt text http://www.freeimagehosting.net/uploads/cb7af2ef28.png
这些是我的JavaScript应用程序中的一些类:
myApp.mode.model Handles the state
myApp.mode.controller Instantiates and updates components based on the model
myApp.data.dataManager Does operations on the dataSource
myApp.data.dataSource A big singleton with structured data
myApp.chart.grid A grid component
myApp.chart.scatter A scatter gram renderer
myApp.chart.tooltip A tooltip renderer
Run Code Online (Sandbox Code Playgroud)
下面简要介绍了这些组件之间的相互作用:(抱歉,这是一种不好的幻想.技能...;))
我正在寻找的是一种将必要的参数(依赖关系管理)传递给Visualization控制器的子组件的简洁方法:
假设用户更改了可视化显示中的指示器.该模型要求数据管理器加载必要的数据.
加载数据后,Visualization控制器将了解模型更改并更新其各自的组件:Grid,Scatter,Tooltips等.
Grid需要知道诸如xMin,xMax,width,height之类的东西......
"Scatter渲染器"也需要xMin,xMax,width,height.此外,它需要访问大数据单例,它需要找出要绘制的数据的哪些部分.
三个问题:
如何将dataSource传递给Scatter渲染器?我是宣布还是通过它?
许多组件对可用的数据感兴趣.数据管理器可以回答此查询.应该将"dataAvailability"传递给Scatter渲染器还是应该将整个数据管理器作为依赖项?
查看示意图,您将如何布置对象,以便新状态(新指标,年份,选择,宽度,高度)可以轻松传播到所有子对象中?
谢谢 :)
我有这个收入数据集:
Income Number of people 0 245981 8.8 150444 30 126063 49.9 123519 70 115029 90.7 277149 109.1 355768 130 324246 150.3 353239 170.2 396008 190 396725 210 398640 230.1 401932 250 416079 270 412727 289.8 385192 309.7 343178 329.7 293707 349.6 239982 369.7 201557 389.3 165132 442.3 442075 543.4 196526 679.9 146784 883.9 48600 1555 44644
(如您所见,收入水平之间的宽度在结束时变得更大.)
我有一个Web应用程序,它广泛使用片段标识符来处理"状态".
examplesite.com/#$mode=direct$aa;map=t;time=2003;vid=4;vid=7
Run Code Online (Sandbox Code Playgroud)
一些问题:
1)将各种"location.hash name value-pairs"分配给变量以跟踪状态的好方法是什么?
1a)我应该创建一个跟踪js状态的对象,还是为每个名称值对声明全局变量?
1b)是否有任何好的jquery插件来简化这个?
1c)如果我想跟踪一个叫做"颜色"的东西 - 它是否应该随时附加到片段(#)上,以及检查它是否被定义的正确方法是什么; 以下代码可以改进吗?
var color;
var hashString = location.hash;
var nvPairs = hashString.split(";");
var nvPair = new Array();
for (i = 0; i < nvPairs.length; i++)
{
var keyValuePair = nvPairs[i].split("=");
nvPair[keyValuePair[0]] = keyValuePair[1];
}
if (nvPair['color']) color = nvPair['color'];
Run Code Online (Sandbox Code Playgroud)
1d)由于一些名称被使用了两次(上例中的"vid") - 我怎样才能轻松存储它们是单独的变量?
2)我想要特别注意4种不同的"哈希":
examplesite.com/ (无哈希)
examplesite.com/#example=5 (包含"example")
examplesite.com/#time=2003;vid=4;vid=7;modified=5 (包含"已修改")
examplesite. com/#time = 2003; vid = 4; vid = 7 (不包含"modified"或"example")
如何在应用程序加载并检查上述条件时编写一个从哈希中提取变量的控制结构?
3)如何存储先前的状态以及如何在按下后退按钮时触发状态改变?
当我的"chartModel"发生变化时,我想更新"globalModel".
chartModel.bind("change", updateGlobalModel);
updateGlobalModel(){
globalModel.set(obj)
}
Run Code Online (Sandbox Code Playgroud)
反之亦然,我希望我的chartModel在globalModel更改时更新.
globalModel.bind("change", updateChartModel);
updateChartModel(){
chartModel.set(obj)
}
Run Code Online (Sandbox Code Playgroud)
这会在设置globalModel时产生反馈循环.我可以通过设置{silent:true}来防止这种情况.
但问题来了.我有另一个依赖于change事件的Model:
globalModel.bind("change", updateOtherModel);
Run Code Online (Sandbox Code Playgroud)
如何警告此模型的变化而不是前者(避免反馈循环)?
更新:
目前,我决定为每个集合调用生成一个特定的ID:
set : function(attrs, options) {
if(!("setID" in attrs)){
attrs.setID = myApp.utils.uniqueID(); //newDate.getTime();
}
Backbone.Model.prototype.set.call(this, attrs, options);
},
Run Code Online (Sandbox Code Playgroud)
这样,我总是可以从我的应用程序中的任何位置生成"setID"属性.如果从模型中提取东西时setID仍然相同,我知道可能存在反馈循环的风险.
javascript ×8
jquery ×3
backbone.js ×2
url ×2
d3.js ×1
dashboard ×1
extendscript ×1
git ×1
github ×1
html5 ×1
jquery-bbq ×1
jstat ×1
jsx ×1
oop ×1
php ×1
statistics ×1
templates ×1
wordpress ×1