0

最近我偶然发现了一些 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）那里的一位开发人员想要跟踪动画变量，所以他只填充了大约 1000 行插件的一部分：许多函数获取和设置他们依赖Private Members的一堆私有变量；到目前为止还可以，但是，我们有替代这种方法的方法吗？我的意思是，如果我们有 2 个滑块，是否可以保证每个人都能看到它自己的私有变量空间？

谢谢！

4

1 回答 1

0

两个错误：

  • 首先，当我在this作为参数传递的 onclick 事件处理程序中创建插件时，我不应该这样做

  • 其次，我的say()函数被定义并从我的插件中以错误的方式调用；我们不应该this在私有对象上使用，而我们的意思是this从自调用函数返回的构造对象。实际上，this在使用此模式时，最好从我们的私有部分中完全删除，并将其仅保留在返回对象（公共部分）中！因此，defaults.say(arg)接受一个论点，公众say()定义为：say: function() { defaults.say(this.options.prop); }

于 2013-11-09T09:47:56.470 回答