0

私はいくつかのオブジェクトリテラルが定義されているプロジェクトを採用しました-主にコードを構造化するためだけです。ところで、フルタイムのフロントエンド開発者ではありません。問題は、それらのいくつかはjQuery onreadyイベントで定義されており、いくつかは外部にあることです。これは控えめに言っても本当に問題があるようです。これは悪いデザインと見なされますか？私はそう思います。いくつかの問題、特にobj2内のfrom_inside関数を示すコードスニペットを含めました。

<script>
$(document).ready(function(){
  alert('here i am' + obj2.handlers2.background2);  // can access the obj2 value as expected
  alert('make this up: ' + obj2.handlers2.tell_me2());
  var obj={};
  obj.handlers={
    background: 'blue',
    foreground: 'green'
  }
});

var obj2={};
obj2.handlers2={
  background2: 'here i am jt',
  foreground2: 'there you are',
  tell_me2: function(){
    return "these are things";
  }
  ,
  from_inside: function(){
    alert('color from inside jQuery: ' + obj.handlers.background); // problem here! could I get a reference to obj here?
  }
};

obj2.handlers2.from_inside();

</script>

現在どのようにそれを持っているかを考えると、好ましい回避策は何でしょうか？上記のobj2にjQueryオブジェクトの参照を渡すことができるように見えますが、可能であれば、jQueryの外部にあるすべてのオブジェクトを準備完了時にプルする方が簡単かもしれません。

アドバイスがあれば事前にthx

編集＃1

$(document).ready(function(){
  $(document).on('click','#pairing-comment-submit', function(){
    arc.event_handler.submit_pairing_comment.call(this);
  });
  ... about 50 more of these
});

arc={};
arc.event_handler={
  submit_pairing_comment: function(){
     var id=$(this).data('the-id');
     ....
  },
  ....
}
4

1 に答える 1

2

変数の割り当てを準備完了関数の外に移動できます。簡単なリファクタリングを次に示します。

var obj={};
obj.handlers={
  background: 'blue',
  foreground: 'green'
};

var obj2={};
obj2.handlers2={
  background2: 'here i am jt',
  foreground2: 'there you are',
  tell_me2: function(){
    return "these are things";
  },
  from_inside: function(){
    alert('color from inside jQuery: ' + obj.handlers.background); // problem here! could I get a reference to obj here?
  }
};

$(document).ready(function(){
  alert('here i am' + obj2.handlers2.background2);  // can access the obj2 value as expected
  alert('make this up: ' + obj2.handlers2.tell_me2());
  obj2.handlers2.from_inside();
});

作業例: http://jsfiddle.net/JxS7v/

あなたが直面していた問題は、可変スコープが原因でした。一般的に言えば、変数はそれらが存在する関数にスコープされます。この記事をご覧ください: http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this

于 2012-11-02T03:48:35.953 に答える