1

我开发了一个应用程序，Backbone 为了避免在 index.html 中声明多个 js 文件，我曾经RequireJS加载 js 文件。一切正常。我的应用程序看起来像这样。

索引.html

<body>
<div id="#plugin-container"></div>
<script data-main="my-plugin" src="assets/js/require.js"></script>   
</body>

我的插件.js

define([
'src/app'
], function(app){
    app.init(); 
});

应用程序.js

define([
'jquery',
'underscore',
'backbone',
'src/models/main'
], function($, _, Backbone, Main){

   var init = function () {....}
});

Everyting 工作正常，但现在我想让它成为一个插件，您可以在所有 html 项目中使用它（如jQuery插件）。而且我不知道如何继续......最好的最终用途可能看起来像：

新项目.html

<div id="#plugin-container"></div>
<!-- Just load plugin. Do nothing. -->
<script data-main="my-plugin" src="assets/js/require.js"></script>
<script>
     // Just an example that I would do but is sure not working....
     myPlugin.init({
         param1: true,
         param2: '/url',
         onSubmitSomething : myMethod
     })
</script>
</body>

我的插件.js

define([
'src/app'
], function(app){
    var myPlugin = app;
    return myPlugin;
});

我的问题：如何在 requirejs 加载（myPlugin）后获取我的应用程序实例并在 html 文件中启动他的方法（如上面的代码）？也许这不是一个好方法......谢谢。

更新

我已经尝试了一些东西。像这样将我的主应用程序模型添加my-plugin.js到窗口对象：

// Loading main application file
define([
'src/app'
], function(app){

    global = window;
    global.myPlugin = app;

});

当我尝试myPlugin.init()在我的 html 文件myPlugin中启动时，无法再次访问：

<script data-main="mvo-thumbnail-plugin" src="assets/js/require.js"></script>

<script>
    // Not working...
    myPlugin.init({
       "wrapper" : $("#thumbnailsManager"),
       "url_images" : "assets/",
    })
</script>

但是当我使用一个 setTimeout 来等待 requireJS 初始化时，它工作正常：

<script data-main="mvo-thumbnail-plugin" src="assets/js/require.js"></script>

<script>
    // If I wait 500ms requireJS has done and my window.myPlugin 
    // object is available
    setTimeout(function(){
        myPlugin.init({
            "wrapper" : $("#thumbnailsManager"),
            "url_images" : "assets/"
        })
    },500)
</script>

这对我来说不是一个真正的解决方案。但我也许有一种新的反思方式……

4

2 回答 2

0

好的，我找到了解决方案：我不使用我替换的 RequireJS 的自动主 js 初始化：

<script data-main="mvo-thumbnail-plugin" src="assets/js/require.js"></script>

经过

<script src="assets/js/require.js"></script>
<script src="mvo-thumbnail-plugin.js"></script>

我在我的主插件文件（mvo-thumbnail-plugin.js）中使用了 require 函数，就像这样

(function (global) {
   global.myPlugin = global.myPlugin || {};

   myPlugin.init = init;

   function init(arr) {

    // paths and dependencies list
       require.config({
         shim: {
            .....
         },
         paths: {
            .....
         }
       });

    // Main require function
       require([
                'jquery',
                'underscore',
                'backbone',
                'src/models/main'
               ], function($, _, Backbone, Main){

                    app = new Main(arr);

       });
  }

}(window));

然后我可以初始化我的插件

<script>
  myPlugin.init({ .... });
</script>
于 2013-05-08T11:17:01.163 回答
0

我正在研究类似但更先进的东西。但是，您的代码并不清楚您要构建或集成到另一个应用程序的插件类型。

我建议您将my-plugin.js文件包含在项目目录中。然后将文件路径包含在您正在使用的主配置文件中app.js或config.js任何主配置文件中，只需包含。

您唯一需要做的就是制作自定义模型及其视图。请记住，如果您需要来自远程服务器的一些值作为 Collection（如果不需要，则不需要 Collection）。然后创建一个运行插件的 HTML 实例。

<div>在要包含插件的目标源中调用方法并render明智地使用方法来获取代码。

如果您可以指定更多代码，我可以相应地建议您更多。

于 2013-04-26T15:32:28.100 回答