Javascript-动态更改函数的内容 [英] Javascript - Dynamically change the contents of a function

问题描述

我具有此功能(在页面加载时)使用"css" jQuery方法更改边距...

I have this function that (on page load) changes my margin using the "css" jQuery method...

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()更改现有功能(而不是编写另一个冗余功能)，就像这样:

...but after the page is loaded, I'd like to animate the change instead. I was thinking I could alter the existing function using replace() (rather than writing another redundant function), like so:

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

这在我的page_change()函数中成功将"css"的所有实例更改为动画".替换字符串后，如何动态更改此函数?还是这只是一个坏主意?

This successfully changes all instances of "css" to "animate" in my page_change() function. How do I get this function to change dynamically once I've replaced the strings? Or is this just a bad idea?

推荐答案

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

In your example, I'd say this is a terrible idea. Why not simply define 1 function that can do both, and use it accordingly:

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，如下所示使用它:

call this function directly, and it'll set the css, use it like so:

window.onhaschange = page_change;

，它将变为animate，而不是使用css方法.容易

and it'll animate instead of use the css method. Easy

如果要轻松测试，可以尝试以下方法:

If you want to test this easily, you could try this:

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 引用)的另一个好处是，您可以轻松地将新函数分配给相同的变量:

That's, basically, how this works.
The added benefit of defining a function like this (anonymous function, assigned to a variable or referenced by a var) is that you can easily assign a new function to that same variable:

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

这当然也可以为您服务.您甚至可以存储旧功能:

This might work for you, too... of course. You can even store the old function:

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

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

Play around with this for a while, to find the approach that fits your needs best (it could well be a combination of the things I talked about in this answer)

这篇关于Javascript-动态更改函数的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！