JavaScript - 动态更改函数的内容

Question

JavaScript - 动态更改函数的内容

3

我有一个函数，它在页面加载时使用 "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”。一旦我替换了这些字符串，如何使这个函数动态改变呢？或者这只是一个坏主意吗？

- Adam

如果您正在使用PHP，我建议使用带有PHP变量的CSS，例如myFile.css?var=value，或者用新内容替换该函数。 - radu florescu

3个回答

0

为反映页面的加载状态（命名为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.....
  }
}

- KooiInc

0

您仍需要创建一个 new Function()，其主体为已替换 css 的主体，因此只需编写另一个函数，在该函数中，您可以使用 animate() 进行延迟、回调和其他所需的一切。

- Konstantin Dinev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elias Van Ootegem · Accepted Answer

在您的例子中，我认为这是一个糟糕的想法。为什么不简单地定义一个可以同时完成两项任务的函数，并相应地使用它呢？

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

多试用一下，找到最适合你需求的方法（可能是我在这个回答中谈到的几种方法的组合）。