4. 一次性代码放在主循环以外
这一条很重要,但是常常被忽略。简单的讲,如果你有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都实例化,你应该把这段代码放在插件方法的外面。这样可以让你的插件运行的更高效,节省内存。我们将会在后面讨论prototype的时候,看这个方法在实际中的运用。
var defaultSettings = {
mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2'
};
$.fn.wPaint = function(settings)
{
settings = $.extend({}, defaultSettings, settings || {});
return this.each(function()
{
var elem = $(this);
//run some code here
}
}
mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2'
};
$.fn.wPaint = function(settings)
{
settings = $.extend({}, defaultSettings, settings || {});
return this.each(function()
{
var elem = $(this);
//run some code here
}
}
你可以注意到,上面代码中的“defaultSettings”是完全在插件方法外面的,由于这些代码是在闭包里面,我们不用担心这些变量被重写。
5. 为什么要设置Class Prototyping
作为你代码的血与肉,方法和函数应该放在prototype函数内。有两个原因:
• 它可以节省很多内存,因为可以不用重复创建这些方法。
• 引用一个现成的方法比重新创建一个好快很多。
简单的说,prototype就是扩展了一个对象,为它提供方法,而不用在每一个对象中实例化这些方法。这也让你的代码更有条理和高效。一旦你习惯这种开发方式,你会发现它在你将来的项目中为你节省了很多时间。
6. 如何设置Class Prototyping
设置一个prototype方法有两个部分。首先我们需要创建我们最初的类定义,在多数情况下这就意味着创建一个对象。这个定义包含了每一个对象实例都不同的部分。在我的 Paint jQuery Plugin插件中,我是这么写的:
function Canvas(settings)
{
this.settings = settings;
this.draw = false;
this.canvas = null;
this.ctx = null;
return this;
}
{
this.settings = settings;
this.draw = false;
this.canvas = null;
this.ctx = null;
return this;
}
下面来添加全局的方法:
Canvas.prototype =
{
generate: function()
{
//generate code
}
}
{
generate: function()
{
//generate code
}
}
这里的关键是要让prototype的方法是通用的,但是数据是每个实例自己的,可以用“this”引用。