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.....
  }
}