javascript - 使用 requirejs 从不同文件(模块)访问变量

Question

我正在尝试在canjs中制作应用程序的MVC结构。为此，我使用 requireJS 将代码分隔在不同的文件中。

我在谷歌中搜索过，我正在关注这个tutorial但在那个教程中我没有找到访问不同模块中的模块变量。因此我关注this方法来做到这一点。

但我无法实现这一点。这是我的代码:

requirejsconfig.js 文件:

  requirejs.config({
   paths :{
    enforceDefine: true,
    waitSeconds : 0,
    jquery      : "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min", 
    main        : "view/main",
    player      : "view/player",
    PlayerModel : "/models/PlayerModel",
    hbs         : "/models/view/js/handlebars",
    fixture     : "/models/view/js/can.fixture", 
    can         : "/models/view/js/can.jquery"

 }
});

main.js:

require(["player"],function(player){
    player.PlayerModel();
 });

我想在我的 Controller 中使用该模型方法。

player.js:

 define(['PlayerModel'],function(){

     function PlayerModel(){   
        var Player = PlayerModel.Player;
         Players =can.Control({ defaults :{view:view/players.hbs' }},{
            init: function(){
                this.element.html(can.view(this.options.view, {
                    players: this.options.players
                }));
            }
      $(document).ready(function(){
        $.when(Player.findAll()).then(
         function(playersResponse){
            var players = playersResponse[0];      

            new Players('.players', {
                players: players
             });
         });
    });
  }
});

PlayerModel.js:

   define(function(){

        var Player = can.Model({
            findAll: 'GET /models/players.json',
            findOne: 'GET /players.json/{id}'
        });
        return {
            Player:Player
        }
    });

正在加载每个文件(在网络选项卡-chrome devtools中看到)，但输出中没有填充任何内容。

有人可以帮助我吗？提前致谢!

Answer 1

继续@ekuusela所说的，按以下格式重构Player.js中的代码:

define(['PlayerModel'],function(){
  function PlayerModel(){ ... }
  return {
    PlayerModel: PlayerModel
  }
});

<小时/>

发生了什么

在内部，定义模块时遵循两个约定。这些涉及:

1. 模块的名称(其标签)
2. 此标签代表什么。

标签模块

文件名被视为模块的名称(除非像您一样使用了shim)。换句话说，我通常读取该行的 define(['Module_Name'] ...) 可以更准确地读取为 define(['Module_Path_Or_Shim_Symbol_Name' ...)

这个“模块”到底是什么

模块并不神奇——它只是一个带有特殊标签的函数映射。该 map 由 RequireJS 维护，可能看起来与此类似:

var ModuleMap = {
  'Player' : function (...) { ... },
  'PlayerModel' : function (...) { ... }
};

每次访问模块时，通过 require 或 define 调用，都会访问此映射并找到相关函数。然而，这还不够 - 我们想要的是在函数内定义的东西 - 模块的基本概念是它们内部的所有内容都有模块函数作用域，并且不暴露在外面。因此，为了获得对这个“东西”的访问权，RequireJS 大脑会执行它可以对函数执行的唯一操作 - 执行它。

var playerReference = require('Player');

请注意，我使用了需要模块的 CommonJS 表示法，这对于我们当前的目的而言更具可读性。

因此，在您发布的代码中，模块函数已定义并声明了 PlayerModel 作为函数，但尚未公开它。由于 player.PlayerModel() 行期望模块返回一个具有名为 PlayerModel 的属性的对象，该属性引用您的函数，因此该模块的逻辑返回值为:

var exposedModuleReference = { PlayerModel: PlayerModel };
return exposedModuleReference;

请注意，这意味着公开函数的名称可以与函数名称本身不同。例如，以下代码也无需任何其他地方的更改即可工作:

define(['PlayerModel'],function(){
  function PlayerModelConstructor(){ ... }
  return {
    PlayerModel: PlayerModelConstructor
  }
});

有趣的补充

因此，执行模块函数并将返回值分配给引用是 RequireJS 大脑工作的一部分。另一部分是，它然后更新此 map ，使其现在看起来像这样:

var ModuleMap = {
  'Player' : { PlayerModel: PlayerModelConstructor },
  'PlayerModel' : function (...) { ... }
};

这意味着模块函数中编写的代码最多执行一次。