语言►JavaScript►库►prototype

什么是Prototype

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/19/%E4%BB%80%E4%B9%88%E6%98%AFPrototype/

摘要

本文主要讲述了：

  1. 什么是 Prototype
  2. 查看版本
  3. $()
  4. $F()
  5. $$()
  6. $A()
  7. $H()
  8. $R()
  9. $w()
  10. 处理事件
  11. Ajax

正文

Prototype 是一个 JavaScript 库。

Prototype 的初始版由 Sam Stephenson 于 2005 年 2 月发布。

Prototype 在String.prototype、Array.prototype、Number.prototype等原型对象上扩充了新的方法同时封装了多个函数用于简化 Web 前端开发。

实际上，为原型对象新增方法是存在隐患的。一旦未来的 JavaScript 原生实现了同名方法且和库方法存在差异，必然导致库开发者和库用户不得不重新修改自己的代码。最好的方法是创建一个自己的对象，就像 jQuery 做的那样。

查看版本

1
console.log(Prototype.Version);

$()

$()用于获取 id 对应的元素，类似document.getElementById()。

示例：

1
document.getElementById('foo').style.color = '#ffffff';

相当于

1
2
3
$('foo').setStyle({
  color: '#ffffff',
});

$F()

$F()用于获取表单元素的值。

示例：

1
2
3
4
<input id="foo" type="text" />
<script>
  console.log($F('foo'));
</script>

$$()

$$()用于获取元素集合，其返回值类型为数组。

示例：

1
2
3
4
5
6
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<script>
  console.log($$('.foo'));
</script>

$A()

$A()用于将类数组对象转换为数组，类似Array.from()。

示例：

1
2
3
4
5
6
var foo = {
  0: 'foo',
  1: 'bar',
  length: 2,
};
console.log($A(foo));

$H()

$H()用于创建Hash对象。

Hash对象类似 JavaScript 对象，只是 Prototype 在Hash对象上扩充了新的方法。

示例：

1
2
3
4
5
6
var foo = $H({
  name: 'John',
  age: 26,
  country: 'Australia',
});
console.log(foo.get('name'));

$R()

$R()用于创建范围对象。

示例：

1
2
var foo = $R(0, 10);
console.lolg(foo.include(10));

$w()

$w()用于创建数组。

示例：

1
2
3
4
var foo = $w('apples bananas kiwis');
foo.each(function (item, index, this) {
    console.log(item);
});

处理事件

示例：监听window的load事件

1
2
3
Event.on(window, 'load', function (event) {
  console.log(event);
});

示例：监听 id 为foo的元素的click事件

1
2
3
Event.on('foo', 'click', function (event) {
  console.log(event);
});

Ajax

示例：GET方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Ajax.Request('/demo.json', {
  method: 'GET',
  requestHeaders: {
    foo: 'bar',
  },
  parameters: {
    foo: 'bar',
  },
  onSuccess: function (res) {
    console.log(res);
  },
  onFailure: function (error) {
    console.log(error);
  },
});

示例：POST方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Ajax.Request('/demo.json', {
  method: 'POST',
  requestHeaders: {
    'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
  parameters: {
    foo: 'bar',
  },
  onSuccess: function (res) {
    console.log(res);
  },
  onFailure: function (error) {
    console.log(error);
  },
});

示例 3：POST方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Ajax.Request('/demo.json', {
  method: 'POST',
  requestHeaders: {
    'Content-type': 'application/json; charset=utf-8',
  },
  parameters: JSON.stringify({
    foo: 'bar',
  }),
  onSuccess: function (res) {
    console.log(res);
  },
  onFailure: function (error) {
    console.log(error);
  },
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/19/%E4%BB%80%E4%B9%88%E6%98%AFPrototype/

本文对你有帮助？请支持我

支付宝
微信