Javascript-动态更改函数的内容

我有此功能(在页面加载时)使用“ 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”.替换字符串后,如何动态更改此函数？还是这只是一个坏主意？

解决方法:

在您的示例中,我会说这是一个糟糕的主意.为什么不简单地定义一个可以同时执行这两个功能的函数,并相应地使用它：

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;

它会设置动画,而不是使用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

试一试,找到最适合您需求的方法(这很可能是我在此答案中讨论的内容的组合)