Javascript - 動態更改函數的內容

Question

我有這個函數（在頁面加載時）使用“css”jQuery方法改變我的邊距...

function page_change() {
  var h = window.location.hash;

  switch (h) {
    case 'home':
      $('.page-slide-box').css({marginLeft: 0});
      break;
    case 'history':
      $('.page-slide-box').css({marginLeft: '-820px'});
      break;
    // more cases here.....
  }
}

...但是在加載頁面之后，我想改為對更改進行動畫處理。 我以為我可以使用replace（）改變現有的函數（而不是編寫另一個冗余函數），如下所示：

window.onhashchange = function() {
  var get = page_change.toString();
  var change = get.replace(/css/g, 'animate');
  page_change();
}

這在我的page_change（）函數中成功地將“css”的所有實例更改為“animate”。 更換字符串后如何動態更改此功能？ 或者這只是一個壞主意？

Answer 1

在你的例子中，我會說這是一個糟糕的主意。 為什么不簡單地定義可以同時執行這兩個操作的1個函數，並相應地使

var page_change = function(e)
{
    var method = e instanceof Event ? 'animate' : 'css';
    switch (location.hash)
    {
        case 'home':
            $('.page-slide-box')[method]({marginLeft: 0});
        break;
        //and so on...
    }
};

直接調用此函數，它將設置css，使用它如下：

window.onhaschange = page_change;

並且它將animate而不是使用css方法。 簡單

如果您想輕松測試，可以試試這個：

var page_change = function(e)
{
    var method = e instanceof Event ? 'animate' : 'css';
    console.log(method);
};
document.body.onclick = page_change;
page_change();//logs css
//click the body and... 
//animate will be logged

基本上，這是如何工作的。
定義像這樣的函數（匿名函數，分配給變量或由var 引用 ）的額外好處是您可以輕松地將新函數分配給同一個變量：

var myFunc = function(){ console.log('foo');};
myFunc();//logs foo
myFunc = function(){console.log('bar')};
myFunc();//logs bar

這也可能對你有用......當然。 你甚至可以存儲舊功能：

var myFunc = function(){ console.log('foo');};
myFunc();//logs foo
var oldMyFunc = myFunc;
myFunc = function(){console.log('bar')};
myFunc();//logs bar
oldMyFunc();//logs foo

玩這個有一段時間，找到最符合你需求的方法（它可能是我在這個答案中談到的事情的組合）

Answer 2

你仍然需要創建一個new Function() ，主體是被替換的css的主體，所以只需編寫另一個函數，你可以在其中放置延遲和回調以及animate()所需的一切。

Answer 3

分配一個布爾值以反映頁面加載狀態（比如loadstatus ），並使用它來確定操作。 您可以使用括號表示法來觸發正確的操作：

function page_change() {
  var h = window.location.hash,
      action = loadstatus ? 'animate' : 'css';
  //           ^ set loadstatus to true after page load.
  switch (h) {
    case 'home':
      $('.page-slide-box')[action]({marginLeft: 0});
  //                       ^ action used here
      break;
    case 'history':
      $('.page-slide-box')[action]({marginLeft: '-820px'});
      break;
    // more cases here.....
  }
}