Question

尝试学习require.js - 我有一个main需要加载一个简单的函数来检索浏览器窗口大小。我收到了未捕获的错误：匿名的define（）模块不匹配：[object Object] http://requirejs.org/docs/errors.html#mismatch错误。

这里是main.js和helper \ getwindowsize.js - 我不知道我做错了什么。

main.js

//determine how much space is available within the browser window
var viewportWidth;
var viewportHeight;

require(["helper/getwindowsize"], function(GetBrowserWindowSize) { getwindowsize.GetBrowserWindowSize(); });

GetBrowserWindowSize(viewportWidth, viewportHeight);
document.write('<p>Your viewport width is '+viewportWidth+'x'+viewportHeight+'</p>');

辅助\ getwindowsize.js

define(function() 
{
  console.log("Function : GetBrowserWindowSize");

  return 
  {
    GetBrowserWindowSize: function(viewportWidth, viewportHeight)
    {
      // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
      if (typeof window.innerWidth != 'undefined')
      {
        viewportWidth = window.innerWidth, viewportHeight = window.innerHeight
      }

      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
      else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !=
               'undefined' && document.documentElement.clientWidth != 0)
      {
        viewportWidth = document.documentElement.clientWidth, viewportHeight = document.documentElement.clientHeight
      }

      // older versions of IE 
      else
      {
        viewportWidth = document.getElementsByTagName('body')[0].clientWidth, viewportHeight = document.getElementsByTagName('body')[0].clientHeight
      }
    }
  }
});

Answer 1

我无法重现您报告的错误。然而，还有其他一些问题，其中大多数都不是RequireJS问题：

您的getwindowsize.js文件出现语法错误。
您尝试通过修改传递给GetBrowserWindowSize的参数来返回值。 JavaScript是一种按值传递的语言。如果你这样做：
```
function foo(a) {
    a = ... something else ...;
}

var x = ... something ...;
foo(x);
```
x仍然会在调用foo之前评估它是什么。执行所需操作的正确方法是返回一个对象，并将字段设置为要返回的值。
在main.js中，您试图在没有正确浏览模块的情况下致电GetBrowserWindowSize。
[这是您代码中唯一的RequireJS问题。]在main.js中，您的代码依赖于正确加载的模块在之外传递的回调到require。这是错误的。 RequireJS的基本规则之一：依赖于正在加载的模块的所有必须从内部执行传递给require或{{1}的回调需要模块的函数。

以下是运行正常的文件版本。（免责声明：我没有评估用于获取视口大小的逻辑的有效性。）define：

main.js

require(["helper/getwindowsize"], function(getwindowsize) { //determine how much space is available within the browser window var size = getwindowsize.GetBrowserWindowSize(); document.write('<p>Your viewport width is ' + size.viewportWidth + 'x' + size.viewportHeight+'</p>'); });：

helper/getwindowsize.js

当您尝试这些文件时，请确保您的缓存不会干扰加载新版本。

编辑添加。这是我使用的define(function() { console.log("Function : GetBrowserWindowSize"); return { GetBrowserWindowSize: function () { // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != 'undefined') { return { viewportWidth: window.innerWidth, viewportHeight: window.innerHeight }; } // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { return { viewportWidth: document.documentElement.clientWidth, viewportHeight: document.documentElement.clientHeight }; } // older versions of IE else { return { viewportWidth: document.getElementsByTagName('body')[0].clientWidth, viewportHeight: document.getElementsByTagName('body')[0].clientHeight }; } } }; });文件：

index.html

这些是您需要的唯一文件：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
    <script type="text/javascript" data-main="main.js" src="js/require.js"></script>
  </head>
  <body>
  </body>
</html>

您从RequireJS's site获得./main.js ./helper/getwindowsize.js ./index.html ./js/require.js。

学习需要用javascript

1 个答案: