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

あなたの例では、これはひどい考えだと思います。両方を実行できる 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

しばらくこれを試して、ニーズに最適なアプローチを見つけてください (この回答で説明したことの組み合わせである可能性があります)。

于 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 に答える