JavaScript 命名空间、类和继承的简单示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5875277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple example of JavaScript namespaces, classes and inheritance
提问by wpearse
I've been asked to port some of our PHP code across to JavaScript, so that more of our logic runs client-side. What'd I'd like is a simple example that shows:
我被要求将我们的一些 PHP 代码移植到 JavaScript，以便我们的更多逻辑在客户端运行。我想要的是一个简单的例子，它显示：
- a namespace ("Package") containing two classes ("Master" and "Slave")
- the "Master" class has a property "p", a function "m" and a constructor that takes a single argument to set the initial value of "p"
- the "Slave" class inherits both "p", the constructor and "m" from the "Master" class
- 包含两个类（“Master”和“Slave”）的命名空间（“Package”）
- “Master”类有一个属性“p”、一个函数“m”和一个构造函数，它接受一个参数来设置“p”的初始值
- “Slave”类从“Master”类继承了“p”、构造函数和“m”
I don't mind using some sort of existing framework, but it must be lightweight -- ideally no more than 200 LOC (un-minified).
我不介意使用某种现有的框架，但它必须是轻量级的——理想情况下不超过 200 LOC（未缩小）。
Here's my attempt, FWIW:
这是我的尝试，FWIW：
var Package = {};
Package.Master = function(pValue) {
this.p = pValue;
this.m = function() {
alert("mmmmm");
}
}
Package.Slave = function(pValue) {
// this will inherit from Package.Master
}
// one of the many online examples:
// http://kevlindev.com/tutorials/javascript/inheritance/index.htm
KevLinDev.extend = function(subClass, baseClass) {
function inheritance() {}
inheritance.prototype = baseClass.prototype;
subClass.prototype = new inheritance();
subClass.prototype.constructor = subClass;
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
}
KevLinDev.extend(Package.Slave, Package.Master);
回答by Matthew Abbott
I'm quite a fan of John Resig's Simple Javascript Inheritance.
我非常喜欢 John Resig 的Simple Javascript Inheritance。
E.g.:
例如：
var Package = {};
Package.Master = Class.extend({
init: function(pValue) {
this.p = pValue;
},
m: function() {
alert("mmmmm");
}
});
Package.Slave = Package.Master.extend({
init: function(pValue) {
this._super(pValue);
}
});
var slave = new Package.Slave(10);
slave.m();
回答by Eric
I think this is one way to do it:
我认为这是一种方法：
var Package = {};
Package.Master = function(pValue) {
this.p = pValue;
this.m = function() {
alert("mmmmm");
}
}
Package.Slave = function(pValue) {
//Call constructor of super class
Package.Master.call(this, pValue);
}
Package.Slave.prototype = new Package.Master;
回答by Alex Wayne
CoffeeScript is pretty awesome, and has a killer class system that is far far easier to deal with than vanilla prototypes.
CoffeeScript 非常棒，并且有一个杀手级系统，比普通原型更容易处理。
This does about the same thing as what you posted.
这与您发布的内容大致相同。
Package = {}
class Package.Master
constructor: (@p) ->
m: -> alert 'mmmmm'
class Package.Slave extends Package.Master
someSlaveMethod: -> foo 'bar'
Which generates the JS here: https://gist.github.com/954177
在这里生成 JS：https: //gist.github.com/954177
回答by Venus Ang
I'm at a point where I am going to try my hand at placing my global JavaScript functions into a Namespace for a project I'm currently working on (I feel like I'm one step closer to recovery having openly admitted this) and I found this article that seems to do a pretty good job at explaining the different ways to apply Namespacing:
我正准备尝试将我的全局 JavaScript 函数放入我目前正在进行的项目的命名空间中（我觉得我已经公开承认这一点，我离恢复又近了一步）并且我发现这篇文章似乎很好地解释了应用命名空间的不同方法：
http://addyosmani.com/blog/essential-js-namespacing/
http://addyosmani.com/blog/essential-js-namespacing/
He talks about five options and goes on to recommend which he feels are the best approaches.
他谈到了五种选择，并继续推荐他认为最好的方法。
Of course, the article leads to additional informative and helpful Namespace articles to take you down a lovely Namespacing rabbit hole journey!
当然，这篇文章会引出更多信息丰富且有用的 Namespace 文章，带您踏上一段可爱的 Namespacing 兔子洞之旅！
Anyway, hope this helps.
无论如何，希望这会有所帮助。
