Jquery plugins 什么'；jquery插件模式中的错误是什么？_Jquery Plugins

Jquery plugins 什么'；jquery插件模式中的错误是什么？

jquery-plugins

Jquery plugins 什么'；jquery插件模式中的错误是什么？,jquery-plugins,Jquery Plugins,最近我偶然发现了一些jquery滑块，我实际上成功地将其中一个重构为更现代的外观！因此，我决定在为我的模块创建的每个实例中进一步探索私有变量的唯一性。这里有一个抽象的例子： <!doctype html> <html> <head> <meta charset=utf-8> <title>Namespaces</title> <style> h1 { color: #808080; } h

最近我偶然发现了一些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>


名称空间
h1{
颜色：#808080；
}
h1：悬停{
颜色：#000000；
文字装饰：无；
光标：指针；
}
多特先生{
边框样式：虚线；
}
点击我
第一个模块的属性附在这里。

附加在此处的第二个模块的属性（由hasOwnProperty（）过滤）。

////////////////////////模块定义////////////////////////
;（函数（$，窗口，文档，未定义）{
var expMod=（函数（）{
/* ****************
*私人成员
* ****************/
var默认值={
道具：“你好！”，
say:function（）{
警惕（this.prop）；
}
};
/* ***************
*公众成员
* ***************/
返回{
pluginName:'expModule'，
初始化：函数（元素、选项）{
该元素=元素；
此.$元素=$（元素）；
this.options=$.extend（{}，默认值，选项）；
},
say:function（）{
默认值；
}
};
})();
if（type of Object.create！=“函数”）{
Object.create=函数（obj）{
“严格使用”；
函数F（）{}
F.原型=obj；
返回新的F（）；
};
};
//扩展jquery
$.fn.expMod=函数（选项）{
返回此值。每个（函数（）{
var mod=Object.create（expMod）；
mod.init（此选项）；
//$.data（此'expModule'，mod）；
$（this）.data（'expModule'，mod）；
});
};
}（jQuery、窗口、文档）；
$（'h1'）。在（'click'，函数（evt）上{
var temp={prop:'Hej（丹麦语）！'}；
$（“#first”）.expMod（这个，temp）；
$（“#秒”）.expMod（本）；
////////////////////////
//获取第一个插件//
////////////////////////
var first=$（“#first”）.data（'expModule'）；
var text=''；
//迭代它的属性并打印
用于（第一个选项）
//如果（首先，hasOwnProperty（选项））
文本+=选项+'='+第一个[选项]+'，'；
//说！
$（“#first”）.addClass（'dot'）.text（text）.data（'expModule'）.say（）；
/////////////////////////
//获取第二个插件//
/////////////////////////
秒=$（“#秒”）.data（'expModule'）；
文本=''；
//迭代它的属性并打印
for（第二个选项）
if（第二个hasOwnProperty（选项））
文本+=选项+'='+第二个[选项]+'，'；
//说！
$（“#秒”）.addClass（'dot'）.text（text）.data（'expModule'）.say（）；
});

问题 1）当我点击

h1

text时，我可以看到两条消息“你好！”但是在构建第一个模块的过程中，我传递了object

{prop:'Hej（丹麦语）！'}

，但问题是什么

2）又有一次，

这个

变成了一个巨大的失望：当我们迭代模块属性函数时，

hasOwnProperty（）

无法识别文字符号形式的一切，除了我们用

这个

设置的那些！我们能强迫javascript在这里很好地发挥作用吗

3）一位开发人员希望跟踪动画变量，因此他只在插件的

私有成员部分中填充了约1000行代码：许多函数获取和设置它们依赖的一组私有变量；到目前为止还可以，但是，我们有没有替代这种方法的方法？我的意思是，如果我们有两个滑块，是否保证每个人都能看到它自己的私有变量空间
谢谢
 两个错误：

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

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