Question

我被要求将一些PHP代码移植到JavaScript中，以便我们的更多逻辑运行在客户端。我想要的是一个简单的例子：

包含两个类（“Master”和“Slave”）
“Master”类有一个属性“p”，一个函数“m”和一个构造函数，它接受一个参数来设置“p”的初始值
“Slave”类继承“p”，构造函数和“Master”类中的“m”

我不介意使用某种现有的框架，但它必须是轻量级的 - 理想情况下不超过200 LOC（未缩小）。

这是我的尝试，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);

Answer 1

我非常喜欢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();

Answer 2

我认为这是一种方法：

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;

Answer 3

CoffeeScript非常棒，并且拥有一个比香草原型更容易处理的杀手级系统。

这与您发布的内容大致相同。

Package = {}
class Package.Master
  constructor: (@p) ->
  m: -> alert 'mmmmm'

class Package.Slave extends Package.Master
  someSlaveMethod: -> foo 'bar'

在这里生成JS：https://gist.github.com/954177

Answer 4

我正处于尝试将我的全局JavaScript函数放入我正在进行的项目的命名空间中的一点（我觉得我已经公开承认我离恢复更近了一步）我发现这篇文章似乎在解释应用命名空间的不同方法方面做得很好：

http://addyosmani.com/blog/essential-js-namespacing/

他谈到五个选项，然后继续推荐他认为最好的方法。

当然，这篇文章带来了额外的信息性和有用的Namespace文章，带你进入一个可爱的Namespacing兔子洞之旅！

无论如何，希望这有帮助。

JavaScript命名空间，类和继承的简单示例

4 个答案: