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 回答