2012-01-07 67 views
1

對不起,我不能再具體與標題。Javascript範圍問題,在一個匿名函數

我正在構建一個網站(個人),它根據url中使用的查詢字符串向用戶顯示不同的內容。

例如page=home.html將顯示home.html

該網站的JavaScript被包裝對象內,包含不同的數據每個值,一些僞代碼:

(function(){ 
    var wrapper = { 
     init: function(){ 
      //Runs on document ready 
      this.foo(); 
      this.nav.render(); 
     }, 
     foo: function(){ 
      //Some functionality goes here for the website, e.g. Display something from an API 
     }, 
     nav: { 
      //Functionality to handle the navigation, has different properties 
      config: { 
       //Contains the config for nav, e.g. page names + locations 
       dir: '/directory/to/content/', 
       pages: { 
        page_name: wrapper.nav.config.dir + 'page_value' 
       } 
      }, 
      render: function(){ 
       //some code 
      }, 
      routes: function(){ 
       //some code} 
      } 
     } 
    }; 

    $(function(){ 
     wrapper.init(); 
    }); 
})(); 

我的問題是,我想前面加上dir值每page值(在頁面被定義的對象內部),期望得到directory/to/content/page_value的輸出(在這個僞代碼的情況下),但是dir是未定義的,當我試圖訪問它時,我試過了以下達到我想要的:

  • wrapper.nav.config.dir +「page_value」

我一直在最後30分鐘試圖找出什麼我做錯了,甚至還想過玩弄硬編碼每個頁面的URL。

想要做到這一點的原因是我的本地開發服務器和Web主機有不同的目錄結構,所以我不想每次我想要開發+發佈時重寫URL。至於爲什麼一切都被包裹在一個物體中,我認爲這樣保持容易。

希望答案很簡單,這只是一個業餘的錯誤/缺乏理解。

+2

哪裏是代碼'wrapper.nav.config.dir +「page_value''行?這不在你上面​​的例子中。 – jfriend00 2012-01-07 21:33:45

+0

這是我用來嘗試和訪問目錄屬性,沒有成功 – Daniel 2012-01-07 21:47:09

+0

我也編輯了問題,我試圖使用它。 – Daniel 2012-01-07 21:53:35

回答

2

問題是,您無法引用正在定義的變量。

因此,在wrapper的定義中,您不能參考wrapper。而且,在config的定義中,您不能參考config等等。

解決此問題的常用設計模式是儘可能多地初始化您的數據結構的聲明,然後在.init()中執行其餘的操作,當您可以自由訪問所有數據結構時。

+0

是的,只是一個錯字 – Daniel 2012-01-07 21:46:25

+0

好吧,假設你不想知道語法錯別字(還有更多的問題),我已經更新了我的答案。 – jfriend00 2012-01-07 22:37:56

+0

感謝您的更新,至於語法錯別字,在實際的來源我沒有在控制檯中得到任何錯誤,所以我認爲它是按預期工作。 – Daniel 2012-01-07 23:14:09

1

更改前兩行:

var wrapper = null; 
(function(){ 
    wrapper = { 

否則,包裝是一個局部變量的匿名函數。

+0

將所有東西封裝在一個匿名函數中的原因是我認爲定義全局變量是不好的,但仍然做出更改,但仍然沒有定義「包裝器」。 – Daniel 2012-01-07 21:55:21

+0

這與問題無關。如果OP需要訪問匿名函數之外的包裝,這可能是一個解決方案,但這根本不是問題的一部分。 – jfriend00 2012-01-07 22:38:51

+0

@ jfriend00:「但是,當我嘗試訪問它時,dir未定義,我嘗試了以下來實現我想要的操作」我認爲這是因爲包裝在鏈接或其他方面實際上未定義。 – Krizz 2012-01-07 22:47:59

1

問題在於,當您詢問其值時,仍然忙於定義包裝器,這就是爲什麼它仍未定義。

下面的代碼也會失敗:

var x = { 
    y:"1", 
    z:x.y 
} 
0

爲什麼不:

//... 
init: function(){ 
    //Runs on document ready 
    this.foo(); 
    var config = this.nav.config; 
    for (var page in config.pages) { 
     config.pages[page] = config.dir + config.pages[page]; 
    } 
}, 
//...