技术开发 频道

10条建议让你创建更好的jQuery插件

  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
    }
}

  你可以注意到,上面代码中的“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;
}

  下面来添加全局的方法:

Canvas.prototype =
{
    generate:
function()
    {
        
//generate code
    }
}

  这里的关键是要让prototype的方法是通用的,但是数据是每个实例自己的,可以用“this”引用。

0
相关文章