Question

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

的index.html

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

MY-plugin.js

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

app.js

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

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

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

newproject.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>

MY-plugin.js

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

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

更新

我尝试过一些东西。将my-plugin.js我的主应用模型添加到窗口对象中，如下所示：

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

    global = window;
    global.myPlugin = app;

});

当我尝试在我的html文件myPlugin.init()中启动时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>

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

Answer 1

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

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

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

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

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

Answer 2

好的我找到了解决方案：我没有使用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>

将我的Backbone / Requirejs应用程序设置为可重用的独立插件

2 个答案: