學習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的要求

回答

相關問題