Question

最近我偶然发现了一些jquery滑块，我实际上重构了一个更成熟的外观！因此，我决定在为我的模块创建的每个实例中探索更多私有变量的唯一性。这是一个抽象的例子：

<!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文本时，我可以看到2条“你好！”的消息但是我在构建第一个模块时传递了对象{prop: 'Hej (Danish)!'}，但问题是什么？

2）另一次this变成了一个巨大的失望：当我们迭代模块属性时，函数hasOwnProperty()无法识别文字符号形式的所有内容，除了我们用this设置的那些！我们可以强制javascript在这里玩得很好吗？

3）一位开发人员希望跟踪动画变量，因此他只填充了插件的Private Members部分~1000行：许多函数获取并设置了一堆私有变量 他们依赖 ;好到现在但是，我们有替代这种方法吗？我的意思是如果我们有2个滑块，是否保证每个人都看到它自己的私有变量空间？

谢谢！

Answer 1

两个错误：

首先，当我在onclick事件处理程序中创建我的插件时，我传递了this作为参数，我不应该和
其次，我的say()函数被定义并从我的插件中调用错误的方式;我们不应该在私有对象上使用this而我们的意思是从自调用函数返回的构造对象的this。实际上，在使用此模式时从我们的私有部分完全删除this并将其保留在返回对象（公共对象）内是个好主意！因此，defaults.say(arg)接受参数，公众say()定义为：say: function() { defaults.say(this.options.prop); }

这个jquery插件模式中的错误是什么？

1 个答案: