的Javascript定製庫

Question

我無法弄清楚爲什麼下面不工作：

我定製JS庫

(function ($, undefined) { 

var expenses = expenses || {}; 

expenses.report = function() { 

    var deleteReport = function() { 
     alert('test'); 
    }; 

    return { 
     deleteReport: deleteReport 
    }; 
}; 

window.expenses = expenses; 

})(jQuery); 

我如何打電話到頁面上：

$(function() { expenses.report.deleteReport() }; 

錯誤：

Uncaught TypeError: Object function() { 



     var deleteReport = function() { 

      alert('test'); 

     }; 



     return { 

      deleteReport: deleteReport 

     }; 

    } has no method 'deleteReport' 

我仍然熟悉javascript和jquery，所以我確信在設計中有一些簡單的東西可以省略。我無法弄清楚它是什麼。

Answer 1

expenses.report 

是一個函數。

expenses.report() 

是功能，這是你在這裏所定義的對象的返回值：

{ 
    deleteReport: deleteReport 
}; 

所以，如果你想打電話給deleteReport，你需要這樣的：

expenses.report().deleteReport() 

Answer 2

expenses.report是在執行時返回對象的函數。由於它從不執行，因此包含deleteReport的對象不存在。我會讓你expenses.report功能自調用，即：

expenses.report = (function() { 

    var deleteReport = function() { 
     alert('test'); 
    }; 

    return { 
     deleteReport: deleteReport 
    }; 
})(); 

現在你就可以調用expenses.report.deleteReport()

Answer 3

目前，expenses.report是一個函數，它有deleteReport方法返回一個對象：

expenses.report().deleteReport(); 

如果您改爲想要expenses.report.deleteReport()，您有幾個選擇：

1）將函數更改爲自動執行並立即返回對象。

expenses.report = (function() { 
    var deleteReport = function() { 
     alert('test'); 
    }; 

    return { 
     deleteReport: deleteReport 
    }; 
})(); 

2）直接設置對象和功能，如果你不真的需要關閉或deleteReport作爲一個獨立的變量。

expenses.report = { 
    deleteReport: function() { 
     alert('test'); 
    } 
};