Categories: S60 3rd Edition, Feature Pack 2 | Web Runtime (WRT) | Lang-CN

This page was last modified 00:29, 24 April 2008.

From Forum Nokia Wiki

简介

总所周知，Prototype是一个著名的跨浏览器JavaScript库， 它支持几乎所有当前流行的浏览器，比如： FireFox, Safari, IE, Opera, 等等。 Prototype最新版(1.6.0)，甚至更早版本，也支持AppleWebKit。AppleWebKit是一个有Apple公司开源的Web引擎。（它也是Safari的核心引擎。）

Nokia Web浏览器建立在S60WebKit上，S60WebKit是开源的WebKit项目在S60平台上的移植。Nokia WRT(Web-RunTime)也基于此。

在这个主题，我们将看到如何使用prototype.js库定义类及子类。

安装prototype.js

如何安装prototype.js库，请到这里。

对象创建

类和子类可以用新语法与旧语法来定义，我们将使用两种定义以便比较。我们也将学习如何添加实例方法与类方法。

定义类（使用新语法）

定义一个类，比如，Animal类，我们可以调用Class.create方法并将一些属性传入这个方法，如下：

// properties are directly passed to `create` method
var Animal = Class.create({
  initialize: function(name) {
    this.name = name;
  },
  eat: function(food) {
    return this.name + ' is eating ' + food;
  }
});

从Animal类派生一个子类Cat，我们再次调用Class.create函数，并将Animal类作为第一个参数，以及一个新类的方法集合作为第二个参数。注： Class.create可以接受任意数量的参数。

// when subclassing, specify the class you want to inherit from
var Cat = Class.create(Animal, {
  // redefine the eat method
  eat: function($super, food) {
    return $super(food) + ' or sth.!';
  }
});

在Cat类中，eat方法覆盖了父类中的同样的方法。

“新语法”测试用例的源代码如下：

function testNewSyntax()
{
  var cat1 = new Cat('Mimi');
  alert(cat1.eat('fish'));
  // ->; "Mini is eating fish or sth!"
}

定义类（使用旧语法）

定义类——Aninal0类。(在全局名字空间中，我们必须使用一个不同的类。)

/** obsolete syntax **/
var Animal0 = Class.create();
Animal0.prototype = {
  initialize: function(name) {
    this.name = name;
  },
  eat: function(food) {
    return this.name + ' is eating ' + food;
  }
};

定义子类——Cat0类。 (再次，我们使用一个不同的名称。)

var Cat0 = Class.create();
// inherit from Person class:
Cat0.prototype = Object.extend(new Animal0(), {
  // redefine the eat method
  eat: function(food) {
    return this.name + ' is eating ' + food + ' or sth.!';
  }
});

“旧语法”测试用例的源代码如下：

function testOldSyntax()
{
  var cat1 = new Cat0('Mimi');
  alert(cat1.eat('fish'));
  // -> "Mini is eating fish and sth.!"
}

为现存class临时添加新方法

给Animal类添加一个新方法，这样，派生类的实例也能调用那个方法。

function testAddMethods()
{
  var cat1 = new Cat('Mimi');
  
  // every animal should be able to drink. But here we just let it "eat water"
  Animal.addMethods({
    drink: function() {
      return this.eat('water');
    }
  });
 
  alert(cat1.drink()); // -> "Mimi is eating water or sth.!"
}

定义新类时使用mixin模块

首先，定义一个mixin模块——Tunnable。

// define a module
var Tunable = {
  down: function(hp) {
    this.volume -= hp;
    if (this.volume < 0) this.mute();
  },
  mute: function() {
    this.isMute = true;
  }
};

其次，创建一个基于这个mixin的类。

var Tuner = Class.create(Tunable, {
  initialize: function() {
    this.volume = 100;
    this.isMute = false;
  }
});

接着测试这个类。下面是测试用例的源代码：

function testMixin()
{
  var tuner = new Tuner;
  tuner.down(30);
  alert(tuner.volume); //-> 70
}

添加类方法

这里我们定义一个名叫“allEatSth”的类方法。这样，你就能直接调用Cat.allEatSth()函数了。

function testClassMethods()
{
  Cat.allEatSth = function(n) {
    var items = [];
    n.times(function(i) {
      items.push(new Cat('Teddy').eat( i + 1));
    });
    return items;
  }
 
  alert(Cat.allEatSth(3));
  // -> ["Teddy is eating 1 or sth.!", "Teddy is eating 2 or sth.!", "Teddy is eating 3 or sth.!"]
}

另外，还有一些其他的途径定义新方法。请浏览下面参考内容获得更多信息。

下载样例应用

下载本主题样例Widget： Image:PrototypeObject.zip. 安装时，将后缀.zip更改为.wgz。

对于最新版本，请浏览： http://code.google.com/p/prototypewrt/downloads/list

相关主题

• 使用Prototype JavaScript库: 在WRT应用中概要说明
• 使用Prototype JavaScript库: 在WRT应用中使用基本操作（工具类函数）
• 使用Prototype JavaScript库: 在WRT应用中进行字符串操作
• 使用Prototype JavaScript库: 在WRT应用中创建对象
• 使用Prototype JavaScript库: 在WRT应用中使用Prototype UI库
• 使用Prototype JavaScript库: 在WRT应用中使用表单与AJAX(JSON)

参考

• Prototype主页 [1]
• 样例WRT应用下载[2]