最近我偶然发现了一些 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 个滑块,是否可以保证每个人都能看到它自己的私有变量空间?
谢谢!