使用（新）Famo.us 引擎与 RequireJS 和 EJS 模板

Question

在 Famo.us 完全改变他们的架构之前，我正在使用 Famo.us、RequireJS、EJS 模板、Node 和其他一些东西开发一些应用程序。

但是现在当我用新的 Famo.us 'Engine' 替换旧的 Famo.us 架构时，我遇到了错误 - 这告诉我新方法的架构是错误的 -想知道你们是否可以帮助我。

背景

服务器是 Node.js、Express 4 和一些其他东西
客户端将是 Famo.us、EJS 模板和一些其他东西

目前的做法是“/”路由器调用一个'ejs'模板。

index.ejs:

  <!DOCTYPE HTML>
    <html>
      <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="/css/famous.css" />
        <link rel="stylesheet" type="text/css" href="/css/style.css" />
      </head>
      <body>
        <script data-main="/js/webmain.js" src="/js/vendor/requirejs/require.js"></script>
      </body>
    </html>

这适用于旧的 Famo.us 架构...并且会使用 RequireJS 调用 webmain.js 脚本。

webmain.js:

/* globals require */
require.config({
  baseUrl: "js",
  nodeRequire: require,
  paths: {
    "famous": "vendor/famous",
    "famous-flex": "vendor/famous-flex/src",
    json2: "vendor/json2",
    "requirejs": "vendor/requirejs/require",
    "socketcluster": "vendor/socketcluster",
    "ua-parser" : "vendor/ua-parser.min",
    "uuid": "vendor/uuid"
  }
});
require(["platform"]);

'platform.js' 脚本将包含以下内容：

define('platform', function(require, exports, module) {
  'use strict';
  var Engine = require("famous/core/Engine");
  var contentContext = Engine.createContext();
  var Widget = require('app/widgets/DefaultWidget');
  var mainView = new Widget();
  var contextSize = [undefined, undefined];

  contentContext.setPerspective(1);

  Engine.nextTick(function() {
    contextSize = contentContext.getSize();
    mainView.setOptions({size: [contextSize[0], contextSize[1]]});
    contentContext.add(mainView);
  });
  contentContext.on('resize', function(e) {
    contextSize = contentContext.getSize();
    if (mainView) mainView.setOptions({size: [contextSize[0]*1, contextSize[1]*1]});
  }.bind(this));


});

但是 Famo.us 的新版本将无法使用这种方法，我想问问你的想法，为什么，或者是否还有他们没有提到的另一种方法？

我更新了 'vendor/famous' 中的 Famou.us 源代码，以使用 github 中的 'Famo.us Engine' 代码。如果我用新的 Famo.us 代码替换 'platform.js' 脚本中的旧 Famo.us 代码——像这样：

define('platform', function(require, exports, module) {
  'use strict';

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');

FamousEngine.init();
var scene = FamousEngine.createScene();

var node = scene.addChild();
var domEl = new DOMElement(node, {
    content: 'Hello World',
    properties: {
        fontFamily: 'Arial'
    }
});

});

我收到以下错误：

Uncaught Error: Module name "Clock" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught Error: Module name "../utilities/CallbackStore" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught TypeError: Cannot read property 'init' of undefined platform.js:28

我想我想明白，当 RequireJS 框架几乎相同时，为什么它不起作用？为什么 Famo.us 是未定义的，为什么新的 Famo.us 架构可以打破这么多 - 'new' 集成 famo.us 的方式是什么？

我在他们的 'slack' IRC 上问过问题，但这似乎不是获得答案的方式，而且 'help'。

任何帮助将不胜感激，因为我现在真的无法前进。

再次感谢。

Answer 1

Famo.us 版本 0.3.5 及更早版本使用 RequireJS 使用 AMD.

新版本 0.5.0+ 使用 CommonJS 的 node.js 风格，并使用 Browserify 构建您的 javascript 包浏览器应用程序。

以下来自 an Answer in this question 的总结。更多关于他们在答案中的异同。

RequireJS implements the AMD API (source).

CommonJS is a way of defining modules with the help of an exports object, that defines the module contents.

使用（新）Famo.us 引擎与 RequireJS 和 EJS 模板

Using (NEW) Famo.us Engine with RequireJS and EJS Templates

ejs

requirejs

express

famo.us

famous-engine