javascript – Requirejs shim：想要将骨干插件直接注册到核心骨干网

2019-07-23 07:33:20 阅读：347 来源： 互联网

标签：javascript module backbone-js requirejs shim

我有两个小的Backbone插件,看起来像这样：

(function($, _, Backbone) {

var ListView = Backbone.View.extend({
// blablabla
});

Backbone.ListView = ListView;

})($, _, Backbone);

和

(function($, _, Backbone) {

var Repository = Backbone.Model.extend({
// blablabla
});

Backbone.Repository = Repository;

})($, _, Backbone);

我现在已经设置了require.config：

require.config({

    baseUrl: "javascripts",

    shim: {
        "jquery": {
            exports: "$"
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            deps: ['jquery', 'underscore'],
            exports: "Backbone"
        },
        "ListView": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.ListView"
        },
        "Repository": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.Repository"
        }        

    },

    paths: {
        "jquery": "Vendors/jquery",
        "underscore": "Vendors/underscore",
        "backbone": "Vendors/backbone",
        "ListView": "Extensions/ListView",
        "Repository": "Extensions/Repository"
    }

});

现在我们来解决这个问题.如果我想使用这两个插件,这就是我目前必须处理模块依赖的方法：

require(['jquery', 'underscore', 'ListView', 'Repository'], function($, _, Backbone1, Backbone2) {

    // this is backbone + list view
    console.log(Backbone1);
    // this is backbone + repository
    console.log(Backbone2);       

});

但是我希望插件已经注册到主干：

require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {

    // this now is backbone + listView + repository
    console.log(Backbone);

});

我该怎么做呢？
我需要改变什么？

最好的祝福,
博多

解决方法:

我建议首先为ListView和Repository创建模块,使它们(以及希望Backbone)保持在全局命名空间之外,如下所示：

list_view.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.ListView = Backbone.View.extend({
    ... ListView code here ...
  }
  return Backbone.ListView
});

repository.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.Repository = Backbone.View.extend({
    ... Repository code here ...
  }
  return Backbone.Repository
});

然后,您可以使用require.js’map config将依赖项映射到包含两个模块的适配器,然后撤消list_view和存储库模块本身的映射以避免循环依赖：

requirejs.config({
  map: {
    '*': {
      'backbone': 'backbone-adapter'
    },
    'list_view': {
      'backbone': 'backbone'
    },
    'repository': {
      'backbone': 'backbone'
    },
});

然后创建一个文件backbone-adapter.js来将插件与Backbone捆绑在一起：

骨干-adapter.js

define(['backbone', 'list_view', 'repository'], function (Backbone) {
  return Backbone;
});

然后在您的模块中,当您将’backbone’作为依赖项时,requirejs会将其映射到backbone-adapter,后者又将包含您的插件,以便它们可用作Backbone.ListView和Backbone.Repository.

我实际上没有测试过上面的代码,但我使用类似的策略将供应商模块与我自己的插件捆绑在一起,它对我来说很好. (这个想法取自this discussion.)

标签：javascript,module,backbone-js,requirejs,shim
来源： https://codeday.me/bug/20190723/1511296.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Requirejs shim：想要将骨干插件直接注册到核心骨干网