[英]How to create a javascript library using a closure
I have written some javascript that I would to encapsulate in a closure so I can use it elsewhere. 我写了一些javascript,我将封装在一个闭包中,所以我可以在其他地方使用它。 I would like do do this similar to the way jQuery has done it.
我想这样做类似于jQuery的方式。 I would like to be able to pass in an id to my closure and invoke some functions on it, while setting some options.
我希望能够将id传递给我的闭包并在其上调用一些函数,同时设置一些选项。 Similar to this:
与此类似:
<script type="text/javascript">
_snr("#canvas").draw({
imageSrc : someImage.png
});
</script>
I have read a lot of different posts on how to use a closure to do this but am still struggling with the concept. 我已经阅读了很多关于如何使用闭包来做这个的不同帖子,但我仍在努力解决这个问题。 Here is where I left off:
这是我离开的地方:
_snr = {};
(function (_snr) {
function merge(root){
for ( var i = 1; i < arguments.length; i++ )
for ( var key in arguments[i] )
root[key] = arguments[i][key];
return root;
}
_snr.draw = function (options) {
var defaults = {
canvasId : 'canvas',
imageSrc : 'images/someimage.png'
}
var options = merge(defaults, options)
return this.each(function() {
//More functions here
});
};
_snr.erase = function () {};
})(_snr);
When ever I try to call the draw function like the first code section above, I get the following error, '_snr is not a function'. 当我尝试像上面的第一个代码部分一样调用draw函数时,我得到以下错误,'_snr不是函数'。 Where am I going wrong here?
我在哪里错了?
EDIT Here is what I ended up doing: 编辑这是我最终做的事情:
function _snr(id) {
// About object is returned if there is no 'id' parameter
var about = {
Version: 0.2,
Author: "ferics2",
Created: "Summer 2011",
Updated: "3 September 2012"
};
if (id) {
if (window === this) {
return new _snr(id);
}
this.e = document.getElementById(id);
return this;
} else {
// No 'id' parameter was given, return the 'about' object
return about;
}
};
_snr.prototype = (function(){
var merge = function(root) {
for ( var i = 1; i < arguments.length; i++) {
for ( var key in arguments[i] ) {
root[key] = arguments[i][key];
}
}
return root;
};
return {
draw: function(options) {
var defaults = {
canvasId : 'canvas',
imageSrc : 'images/someimage.png'
};
options = merge(defaults, options);
return this;
},
erase: function() {
return this;
}
};
})();
I can now call: 我现在可以打电话给:
<script type="text/javascript">
_snr("#canvas").draw({
imageSrc : someImage.png
});
</script>
Because you declared _snr as an object and not a function. 因为您将_snr声明为对象而不是函数。 Functions can have properties and methods, so there's various ways to achieve what you want, for example one of them would be say...
函数可以有属性和方法,因此有多种方法可以实现你想要的东西,例如其中一个就是说......
_snr = function(tag) {
this.tag = tag;
}
_snr.foo = function() {
//Code goes here
}
You can also pass the outer context into a closure to hide your variables from accidentally polluting the global namespace, so like... 您还可以将外部上下文传递给闭包以隐藏变量,使其不会意外地污染全局命名空间,所以就像......
(function(global) {
var _snr = function(tag) {
this.tag = tag;
}
_snr.foo = function() {
//Code goes here
}
//export the function to the window context:
global._snr = _snr;
})(window);
window._snr('#tag').foo('wat');
Happy coding. 快乐的编码。
Because your _snr
is an object, not a function. 因为
_snr
是一个对象,而不是一个函数。 You have to call it like this: 你必须这样称呼它:
_snr.draw({
canvasId: '#canvas',
imageSrc: 'someImage.png'
});
When you do _snr('#canvas')
that is a function call which is why you're getting that error. 当你执行函数调用的
_snr('#canvas')
,这就是你得到错误的原因。 _snr
is an object with some methods attached to it such as draw()
and erase()
. _snr
是一个附加了一些方法的对象,例如draw()
和erase()
。 The reason jQuery is able to pass arguments into the $
is because they return the $
as a function object which is why we're able to pass it various selectors as arguments. jQuery能够将参数传递给
$
的原因是因为它们将$
作为函数对象返回,这就是为什么我们能够将各种选择器作为参数传递。
You are going wrong at the first line _snr = {}
你出错了第一行
_snr = {}
It needs to be 它需要
_snr = function(){
selector = arguments[0]||false;
//snr init on dom object code
return _snrChild;
}
Im on a mobile phone but when im on a pc I will maybe fix the whole code c: 我在手机上,但当我在电脑上,我可能会修复整个代码c:
Here you have a snr object and that has erase and draw methods. 这里有一个snr对象,它有擦除和绘制方法。 What you intend to do is to write a _snr function which will get an id and return a wrapper object.
你打算做的是写一个_snr函数,它将得到一个id并返回一个包装器对象。 That returned object should have erase and draw methods.
返回的对象应该有擦除和绘制方法。 so you can do var returnedObject = _snr("my_id");
所以你可以做var returnedObject = _snr(“my_id”); returnedObject.draw("image.png");
returnedObject.draw( “image.png”);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.