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”。替换字符串后,如何使此函数动态更改?或者这只是一个坏主意?

4

3 回答 3

4

在你的例子中,我会说这是一个糟糕的主意。为什么不简单地定义一个可以同时做这两个的函数,并相应地使用它:

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

玩一会儿,找到最适合您需求的方法(这很可能是我在这个答案中谈到的事情的组合)

于 2013-02-05T06:57:24.860 回答
0

您仍然需要创建一个new Function()带有被替换的主体的主体css,因此只需编写另一个函数,您可以在其中放置延迟和回调以及您需要的所有其他内容animate()

于 2013-02-05T06:51:56.040 回答
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.....
  }
}
于 2013-02-05T06:55:39.377 回答