0

最近、いくつかのjqueryスライダーに出くわし、実際に1つをよりモダンな外観にリファクタリングして成功しました! そこで、モジュール用に作成されたすべてのインスタンスで、プライベート変数の一意性をさらに調査することにしました。ここに抽象的な例があります：

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Namespaces</title>
<style>
  h1 {
     color: #808080;
  }
  h1:hover {
     color: #000000;
     text-decoration: none;
     cursor: pointer;
  }
  .dot {
     border-style: dotted;
  }
</style>
</head>
<body>

<h1>Click Me</h1>

<h3>Properties of first module attached here.</h3>
<p id="first"></p>
<h3>Properties of second module attached here (filtered by hasOwnProperty()).</h3>
<p id="second"></p>

<script src="../jquery-1.7.1.js"></script>

<script>
////////////////////////Module Definition////////////////////////
;(function($, window, document, undefined){
   var expMod = (function(){
   /* ****************
    * private members
    * ****************/
   var defaults = {
      prop: 'Hello!',
      say: function(){
         alert(this.prop);
      }
   };
   /* ***************
    * public members
    * ***************/
   return {
      pluginName: 'expModule',
      init: function(elem, options) {
         this.element = elem;
         this.$element = $(elem);
         this.options = $.extend({}, defaults, options);
      },
      say: function() {
         defaults.say();
      }
   };
})();

if (typeof Object.create !== 'function') {
   Object.create = function(obj) {
      "use strict";
      function F() {}
      F.prototype = obj;
      return new F();
   };
};

//extend jquery
$.fn.expMod = function(options) {
   return this.each(function() {
      var mod = Object.create(expMod);
      mod.init(this, options);
      //$.data(this, 'expModule', mod);
      $(this).data('expModule', mod);
   });
};

}(jQuery, window, document));

$('h1').on('click', function(evt){
   var temp = {prop: 'Hej (Danish)!'};
   $( "#first" ).expMod(this, temp);
   $( "#second" ).expMod(this);
   ////////////////////////
   //get the first plugin//
   ////////////////////////
   var first = $( "#first" ).data('expModule');
   var text = '';
   //iterate over it's properties & print
   for(option in first)
      //if(first.hasOwnProperty(option))
         text += option+'='+first[option]+', ';
   //say!
   $( "#first" ).addClass('dot').text(text).data('expModule').say();
   /////////////////////////
   //get the second plugin//
   /////////////////////////
   second = $( "#second" ).data('expModule');
   text = '';
   //iterate over it's properties & print
   for(option in second)
      if(second.hasOwnProperty(option))
         text += option+'='+second[option]+', ';
   //say!
   $( "#second" ).addClass('dot').text(text).data('expModule').say();
});

</script>

</body>
</html>

質問 1)h1テキストをクリックすると、'Hello!' のメッセージが 2 つ表示されます。{prop: 'Hej (Danish)!'}しかし、最初のモジュールの構築中にオブジェクトを渡しましたが、何が問題なのですか?

2) もう 1 度thisは大きな失望に変わります: モジュールのプロパティ関数を反復処理すると、 !で設定したものを除いて、すべてhasOwnProperty()をリテラル表記形式で認識できません ここで JavaScript を強制的に正常に動作させることはできますか?this

3) ある開発者は、アニメーション変数を追跡したかったので、プラグインの一部を約 1000 行で埋めました。多くの関数は、依存するPrivate Members一連のプライベート変数を取得および設定します。今まではわかりましたが、このアプローチに代わるものはありますか? つまり、スライダーが 2 つある場合、誰もがそれ自身のプライベート変数の空間を見ることが保証されるのでしょうか?

ありがとう！

4

1 に答える 1

0

2 つのエラー:

  • thisまず、引数として渡した onclick イベント ハンドラでプラグインを作成している間は、そうすべきではありません。

  • 第二に、say()プラグインから間違った方法で関数が定義され、呼び出されます。私たちが意味していたのは、自己呼び出し関数から返される構築されたオブジェクトのthisことでしたが、プライベートオブジェクトで使用するべきではありません。this実際、thisこのパターンを使用するときはプライベート セクションから完全に削除し、リターン オブジェクト (パブリック オブジェクト) 内にのみ保持することをお勧めします。したがって、defaults.say(arg)引数を受け入れ、パブリックsay()は次のように定義されます。say: function() { defaults.say(this.options.prop); }

于 2013-11-09T09:47:56.470 に答える