gpt4 book ai didi

javascript - 使用 TimelineJS 和 AMD

转载 作者:行者123 更新时间:2023-11-30 10:24:32 25 4
gpt4 key购买 nike

我正在寻找一种将 TimelineJS 与 RequireJS 的 AMD 实现结合使用的方法。我可以让事情部分工作,例如

define(["storyjs", "timelinejs", ...], function(storyjs, timelinejs, ...) {
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: { ... }, // sample JSON
embed_id: 'timeline-embed'
});
});

上面生成了一个时间线,但是 storyjs(在我的 RequireJS 配置中导出 VMM)总是尝试执行它自己的 TimelineJS 库加载,这总是会产生错误在 Firebug/开发人员工具控制台中。

我正在寻找一种以编程方式构建 TimelineJS 对象的方法(我找不到任何示例),告诉 StoryJS 不要费心使用它的机制加载库(因为我已经提供了它们)并在一般将 TimelineJS 与 AMD 解决方案集成。

有什么建议吗?

更新:

下面使用了 RequireJS 配置。对于我自己的个人使用,我倾向于重命名 JS 库并附加它们的版本号。

var require = {
waitSeconds: 5,
paths: {
"app": "../js/app"

// ** Libraries
,"backbone": "../js/lib/backbone-1.1.0.min"
,"bootstrap": "../js/lib/bootstrap-3.0.2.min"
,"jquery": "../js/lib/jquery-1.10.2.min"
,"jquery-ui": "../js/lib/jquery-ui-1.10.3.min"
,"json2": "../js/lib/json2"
,"underscore": "../js/lib/underscore-1.5.2.min"

// ** TimelineJS
,"storyjs": "../js/lib/storyjs-embed-2.0.3.min"
,"timelinejs": "../js/lib/timeline-2.26.3.min"

// ** RequireJS Plugins
,"domready": "../js/lib/plugins/requirejs/requirejs-plugin-domready-2.0.1"
,"i18n": "../js/lib/plugins/requirejs/requirejs-plugin-i18n-2.0.4"
,"text": "../js/lib/plugins/requirejs/requirejs-plugin-text-2.0.10"
},

shim: {
'backbone': { deps: ['underscore'], exports: 'Backbone' }
,'bootstrap': { deps: ['jquery'] }
,'jquery': { exports: '$' }
,'json2': { exports: 'JSON' }
,'storyjs': { exports: 'VMM' }
,'timelinejs': { deps: ['storyjs'] }
,'underscore': { exports: '_' }
}
};

最佳答案

我深入研究了 TimelineJS 源代码以了解 createStoryJS 到底在做什么,然后查看了一些其他源代码,但我终于回答了我自己的问题。事实上,它相对简单,并且与我在将上面的问题发布到 StackOverflow 之前所做的早期尝试非常相似。

RequireJS 配置:

// RequireJS config
var require = {
waitSeconds: 5,
paths: {
...

// ** TimelineJS
,"storyjs": "../js/lib/plugins/jquery/storyjs-embed-2.0.3.min"
,"timelinejs": "../js/lib/plugins/jquery/timeline-2.26.3.min"

...
},
shim: {
...
,'storyjs': { deps: ['jquery'], exports: 'VMM' }
,'timelinejs': { deps: ['jquery', 'storyjs'] }
...
}
};

模块实例化 TimelineJS 对象:

define([ "json2", "timelinejs"], function(JSON, timelinejs) {
var js_version = "2.24",
config = {
version: "2.24", // DEFAULT: 2.x
debug: true,
type: 'timeline',
source: {...} // Sample JSON
};
var timeline = new VMM.Timeline("timeline-embed", 800, 600);
timeline.init(config);
});

这至少是一个使用 RequireJS/AMD 处理 TimelineJS 实例化的例子;这也是我决定解决原始问题的方式。

关于javascript - 使用 TimelineJS 和 AMD,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20123131/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com