一、整体架构学习
总的来说prototype.js主要给js原生的类扩展了各的方法,通过两种方式扩展,主要用到下面这个函数扩展。
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
第一种就是直接扩展,这样就直接扩展进了某个类的方法中,可以直接调用。
Object.extend(String.prototype, {
/*
* 将Html转换为纯文本,例如:
* var s="<font color='red'>hello</font>";
* s.stripTags()将得到“hello”。
*/
stripTags: function() {
return this.replace(/<//?[^>]+>/gi, '');
}
});
第二种就是现在源码中定义一个类,然后直接扩展进去比如定义的Enumerable类可以扩展进Array 和 Hash 等,方式如下:
var YourObject = Class.create();
Object.extend(YourObject.prototype, Enumerable);
Object.extend(YourObject.prototype, {
initialize: function() {
// 构造函数
},
_each: function(iterator) {
// 迭代代码,每次循环时调用 iterator
},
// 其它自定义方法,包括需要重写的 Enumerable 方法
}); 要用到Enumerable 必须添加进 _each方法。 prototype.js 就是通过这种方式扩展的方法,这个源码都遵循这两个规则。
二 方法学习
最常用的就是this.each(function(value, index)这样进行迭代,相比下面总是省下了很多代码。
for (var index = 0; index < myArray.length; ++index) {
var value = myArray[index];
// 你的代码...
};
方法一个个也说不完,总的来说就是掌握好源码内部定义的工具类和方法 然后再掌握好JS里原生方法,再掌握好一些判断的知识就能很好的学习Prototype.js ,有很多方法仅仅对原生方法进行简单的封装使之更容易调用。学习的时候代码中如何进行变量名命名,注意代码的格式等。