学习需要用javascript答案

【问题标题】：learning require with javascript学习需要用javascript
【发布时间】：2013-11-26 03:47:10
【问题描述】：

尝试学习 require.js - 我有一个 main，需要加载一个简单的函数来检索浏览器窗口大小。我收到未捕获的错误：不匹配的匿名定义（）模块：[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>');

helper\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
      }
    }
  }
});

【问题讨论】：

标签： javascript requirejs

【解决方案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 中，您的代码依赖于您的模块是否被正确加载，该模块位于在传递给 @ 的回调之外987654331@。这是完全错误的。 RequireJS 的基本规则之一：依赖于正在加载的模块的一切必须从内部执行传递给需要的require 或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>

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

./main.js
./helper/getwindowsize.js
./index.html
./js/require.js

您从RequireJS's site 获得require.js。

【讨论】：

hrmmm.. 现在我有 2 个错误.. 除了未定义 getwindowsize 之外，仍然收到常规的 requirejs.org/docs/errors.html#mismatch 错误，我简化了两个脚本只是为了看看我是否可以得到任何工作，仍然失败
main.jsrequire(["helper/getwindowsize"], function(GetBrowserWindowSize) { var size = new GetBrowserWindowSize(); console.log(size); });
getwindowsize.js define(function() { return { GetBrowserWindowSize: function() { var size= 100; return size; } } });
更新了我的答案以列出index.html 和我使用的所有文件。请在您身边复制附加信息。