学习JavaScript的要求

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

这里是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 
     } 
    } 
    } 
});

来源

2013-11-26 Bixel

我无法重现您报告的错误。有，然而，不少其他问题，其中大部分是没有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或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 siterequire.js。

来源

2013-11-26 11:10:38 Louis

hrmmm ..现在我有2个错误..除了没有定义getwindowsize之外，仍然收到常规http://requirejs.org/docs/errors.html#mismatch错误，我简化了这两个脚本以查看是否我可以得到任何东西，但仍然失败 – Bixel

'main.js''require（[“helper/getwindowsize”]，function（GetBrowserWindowSize） { var size = new GetBrowserWindowSize（）; console.log（size）; }）;'' – Bixel

'getwindowsize.js'定义（函数（） { 返回 { GetBrowserWindowSize：功能（） { 变种大小= 100; 退货尺寸; } } }）;' – Bixel

学习JavaScript的要求

回答

相关问题