JavaScript库模式
我试图找出创建JavaScript库(类)的基本模式。我希望这样做,它不会用一堆垃圾来污染全局名称空间,而是允许类具有修改这些实例变量的实例变量和公共方法 考虑下面的玩具示例。我想制作一个类JavaScript库模式,javascript,design-patterns,Javascript,Design Patterns,我试图找出创建JavaScript库(类)的基本模式。我希望这样做,它不会用一堆垃圾来污染全局名称空间,而是允许类具有修改这些实例变量的实例变量和公共方法 考虑下面的玩具示例。我想制作一个类Foo。它应该包含一个实例成员,bar,它是一个数字。应该有一个Foo的构造函数,它接受一个数字并用该数字初始化其实例bar。应该有一个实例方法,我可以调用Foo对象来修改bar。可能使用库的代码如下所示: var foo1 = new Foo(1); var foo2 = new Foo(2); conso
Foo
。它应该包含一个实例成员,bar
,它是一个数字。应该有一个Foo
的构造函数,它接受一个数字并用该数字初始化其实例bar
。应该有一个实例方法,我可以调用Foo
对象来修改bar
。可能使用库的代码如下所示:
var foo1 = new Foo(1);
var foo2 = new Foo(2);
console.log(foo1.bar); // should print "1"
console.log(foo2.bar); // should print "2"
foo2.changeBar(42);
console.log(foo1.bar); // should print "1"
console.log(foo2.bar); // should print "42"
生成的foo.js
将由Web应用程序使用,因此通过HTML中的脚本标记包含
我已经用Google做了一些搜索,但是我还没有找到一个关于如何设计JavaScript类(用作库)的简洁、通用的大纲
这是最简单的方法。您不需要在闭包中包含定义,更像是一种样式。可能是当今最流行的模式
var Foo = (function() {
var _thisIsAPrivateVar;
function thisIsAPrivateMethod() {
}
return {
thisIsAPublicMethod : function() {
// can still access the "private" variable and method
}
};
})();
以埃文的回答为基础,展示更多的可能性。不过,大多数正常情况下只使用其中的一部分
(function() {
//When we create variables inside a function they can only be seen by other
// inner functions. Wraping all our code here makes sure noone gets to see
// the private stuff.
//The first opening parenthesis is required for Javascript to parse it
//correctly though
//this is the constructor function
//Note how we set a global variable (Foo) to make it available outside.
Foo = function(num, another_num) {
this.changeBar(num);
//sometimes you will want to make a method that modifies a variable
//that can't be acessed via this.xxx. You can use a closure here for that
//(there are some performance considerations though)
this.baz = function(){
console.log(another_num);
}
//Setting methods "by hand" like this is also useful if you want to
//do multiple inheritance, since you can just set all methods of the
//second class by hand here if you want.
}
//Things on Foo.prototype will be available for all Foo objects,
// via prototypal inheritance magic.
Foo.prototype.changeBar = function(num) {
this.bar = num;
}
var a_secret_variable = 42;
function my_private_function(){
console.log(a_secret_variable);
}
//All private variables can be normaly used (by functions that can see them).
Foo.prototype.use_magic = function(){
my_private_function();
}
}());
//The "fake" function is imediatelly called,
//so in the end all it does is create a inner scope.
+1也是。关闭有一些微妙的优势。您可以在闭包内定义“private”函数,原型函数和成员函数可以调用该闭包。@selbie如何定义这样的私有函数,以及如何调用它?我已经编辑了Evan上面的答案,以包含私有方法。“privateMethod”函数只能由闭包中的其他函数调用。@selbie和Evan,事实上,现在我已经尝试过了,privateMethod不起作用。“this”被绑定到DOMWindow(我相信是因为它正在形成一个闭包?)可能是因为您的DOM事件没有绑定到正确的功能。执行某些操作单击“e.onclick=function(){foo.changeBar();};}”或使用“bind”关键字在回调之前显式设置this point apriorit。
(function() {
//When we create variables inside a function they can only be seen by other
// inner functions. Wraping all our code here makes sure noone gets to see
// the private stuff.
//The first opening parenthesis is required for Javascript to parse it
//correctly though
//this is the constructor function
//Note how we set a global variable (Foo) to make it available outside.
Foo = function(num, another_num) {
this.changeBar(num);
//sometimes you will want to make a method that modifies a variable
//that can't be acessed via this.xxx. You can use a closure here for that
//(there are some performance considerations though)
this.baz = function(){
console.log(another_num);
}
//Setting methods "by hand" like this is also useful if you want to
//do multiple inheritance, since you can just set all methods of the
//second class by hand here if you want.
}
//Things on Foo.prototype will be available for all Foo objects,
// via prototypal inheritance magic.
Foo.prototype.changeBar = function(num) {
this.bar = num;
}
var a_secret_variable = 42;
function my_private_function(){
console.log(a_secret_variable);
}
//All private variables can be normaly used (by functions that can see them).
Foo.prototype.use_magic = function(){
my_private_function();
}
}());
//The "fake" function is imediatelly called,
//so in the end all it does is create a inner scope.