2020欧洲杯冠军竞猜官方网站:10条提出让你创制

时间:2019-08-15 13:45来源:2020欧洲杯冠军竞猜官方网站
10条建议让你成立越来越好的jQuery插件,10条jquery 在付出过非常多 jQuery插件以往,作者渐渐的检索出了一套开采jQuery插件比较正规的组织和情势。那样作者就足以copy 在开辟过众多 jQu

10条建议让你成立越来越好的jQuery插件,10条jquery

  在付出过非常多 jQuery 插件以往,作者渐渐的检索出了一套开采jQuery插件比较正规的组织和情势。那样作者就足以 copy & paste 超过一半的代码结构,只要注意最注重的逻辑代码就行了。使用同样的设计形式和架构也让修复bug或然一遍开垦更易于。一套经过验证的架构能够确定保障小编的插件不出大的难题,不论插件轻松如故复杂。小编在那边享受10条小编总括的经验。

2020欧洲杯冠军竞猜官方网站 1

1. 把您的代码全体放在闭包里面

那是自家用的最多的一条。不过临时在闭包外面包车型客车方式会不能够调用。
而是你的插件的代码只为你和谐的插件服务,所以不设有这些主题素材,你能够把全体的代码都投身闭包里面。
而艺术或然应该献身Prototype方法内部。

(function($)  {
//code here
})(jQuery);

在开辟过众多 jQuery 插件今后,小编慢慢的查寻觅了一套开垦jQuery插件相比较专门的学业的结构和情势。那样自个儿就足以复制并粘贴抢先二分一的代码结构,只要注意最关键的逻辑代码就行了。 使用同样的设计情势和架构也让修复bug也许一遍开拓更易于。一套经过认证的架构可以确定保证本身的插件不出大的主题材料,不论插件轻巧依然复杂。笔者在这里享用10条我总计的阅历。

  1. 把你的代码全体坐落闭包里面

  这是自己用的最多的一条。不过不时在闭包外面包车型大巴办法会无法调用。

  可是你的插件的代码只为你自个儿的插件服务,所以不真实那个主题素材,你能够把持有的代码都坐落闭包里面。

  而艺术大概应该放在Prototype方法内部,。

1 2 3 (function($)  {      //code here  })(jQuery);

2. 提供插件的默许选项

您的插件应该会有局地精选是能够让开拓者设置的,所以提供过来私下认可选项是以有不能缺少的。 你能够通过jQuery的extend功用来安装那几个选择:

var defaultSettings = {      mode            : 'Pencil',
lineWidthMin    : '0',
lineWidthMax    : '10',
lineWidth       : '2' };
settings = $.extend({}, defaultSettings, settings || {});

1. 把您的代码全部放在闭包里面

  2. 提供插件的暗中同意选项

  你的插件应该会有点增选是能够让开拓者设置的,所以提供过来暗许选项是以有须要的。 你可以通过jQuery的extend作用来设置这几个采用:

1 2 3 4 5 var defaultSettings = {      mode            : 'Pencil',                                  lineWidthMin    : '0',                                  lineWidthMax    : '10',                                   lineWidth       : '2' };   settings = $.extend({}, defaultSettings, settings || {});

3. 使用重回三个因素

JavaScript/jQuery有三个很好的特色正是能够举行艺术级联,所以大家不应有破坏那些特点,始终在章程中回到三个因素。笔者在自家的每八个jQuery插件中都遵从这一条。

$.fn.wPaint = function(settings)  {
return this.each(function()  {
var elem = $(this);
//run some code here
}
}

那是自家用的最多的一条。可是有的时候在闭包外面包车型大巴方法会不可能调用。然则你的插件的代码只为你协和的插件服务,所以不设有那几个问题,你能够把富有的代码都放在闭包里面。而艺术大概应该放在Prototype方法内部,大家前边会讲到这一点。

  3. 行使重回多个因素

  JavaScript/jQuery有二个很好的性状正是能够开始展览格局级联,所以咱们不应有破坏那几个特点,始终在点子中回到三个要素。作者在自家的每一个jQuery插件中都服从这一条。

1 2 3 4 5 6 $.fn.wPaint = function(settings)  {      return this.each(function()  {          var elem = $(this);           //run some code here      }  }

4. 贰回性代码放在主循环以外

这一条相当重要,不过平日被忽略。简来讲之,假设您有一段代码是一群暗中同意值,只必要被实例化二遍,并不是历次调用你插件功用的时候都实例化,你应有把这段代码放在插件方法的外面。那样能够让您的插件运转的更急忙,节省里部存储器。

var defaultSettings = {
mode            : 'Pencil',
lineWidthMin    : '0',
lineWidthMax    : '10',
lineWidth       : '2' };
settings = $.extend({}, defaultSettings, settings || {});

$.fn.wPaint = function(settings)  {
return this.each(function()  {
var elem = $(this);
//run some code here
}
}

您能够小心到,下边代码中的“defaultSettings”是截然在插件方法外面包车型地铁,由于这几个代码是在闭包里面,大家绝不思量那一个变量被重写。

/* 何问起 hovertree.com */
(function($)   
 {   
 //code here   
 })(jQuery);   

  4. 贰次性代码放在主循环以外

  这一条很器重,可是经常被忽略。简单来讲,如若你有一段代码是一批暗中同意值,只必要被实例化壹回,实际不是历次调用你插件成效的时候都实例化,你应该把这段代码放在插件方法的外围。那样能够让你的插件运营的更急忙,节省外存。

1 2 3 4 5 6 7 8 9 10 11 12 13 var defaultSettings = {                                 mode            : 'Pencil',                                  lineWidthMin    : '0',                                  lineWidthMax    : '10',                                   lineWidth       : '2' };   settings = $.extend({}, defaultSettings, settings || {});   $.fn.wPaint = function(settings)  {      return this.each(function()  {          var elem = $(this);           //run some code here      }  }

  你能够小心到,下边代码中的“defaultSettings”是一心在插件方法外面包车型客车,由于这一个代码是在闭包里面,大家毫不操心这几个变量被重写。

5. 为什么要设置 Class Prototyping

作为你代码的血与肉,方法和函数应该放在prototype函数内。有四个原因:

  •  它能够节省不计其数内部存款和储蓄器,因为能够毫无再行制造这一个主意。

  •  引用多个现有的形式比重新创立一个好快很多。

简轻易单的说,prototype便是扩充了贰个目的,为它提供方式,而不用在每三个对象中实例化这几个方式。那也让您的代码更有系统和快捷。一旦你习贯这种开采方式,你会意识它在您未来的类型中为你节省了重重日子。

2. 提供插件的默许选项

  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”引用。

你的插件应该会有一部分精选是足以让开荒者设置的,所以提供过来暗许选项是以有须求的。你能够因此jQuery的extend功用来设置这一个选拔:

  6. 怎样设置 Class Prototyping

  设置叁个 prototype 方法有多个部分。首先大家要求创立大家初期的类定义,在相当多动静下那就象征创造多少个目的。这么些概念包含了每贰个对象实例都不可同日而语的一对。在自己的Paint jQuery Plugin 插件中,我是那般写的:

1 2 3 4 5 6 function Canvas(settings)  {      this.settings = settings;      this.draw = false;      this.canvas = null;             this.ctx = null;       return this;  }

  上面来增加全局的章程:

1 2 3 4 5 Canvas.prototype =  {      generate: function() {          //generate code       }

  这里的尤为重假使要让prototype的格局是通用的,不过数量是各种实例本人的,能够用“this”援用。

7. 使用 “this” 对象

经过行使“$this”,我们得以向别的闭包传递精确的引用。大家也或者要求向别的格局传入 $this 引用。必要专注的是, $this 这么些名字是能够改的,放肆的变量名都能够。

Canvas.prototype =  {
generate: function()   {
//some code
var $this = this;
var buton = //...some code
button.click(function(){
//using this will not be found since it has it's own this
//use $this instead.
$this.someFunc($this);
});
},

someFunc: function($this)      {
//won't know what "this" is.
//use $this instead passed from the click event
}
}
/* 何问起 hovertree.com */
var defaultSettings = {   
   mode            : 'Pencil',   
   lineWidthMin    : '0',   
   lineWidthMax    : '10',   
   lineWidth       : '2'  
};   

settings = $.extend({}, defaultSettings, settings || {});   

  7. 使用 “this” 对象

  通过行使“$this”,我们得以向其余闭包传递正确的引用。大家也说不定须求向别的情势传入 $this 援用。供给专注的是, $this 那几个名字是能够改的,任意的变量名都能够。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Canvas.prototype =  {      generate: function()   {          //some code           var $this = this;           var buton = //...some code           button.click(function(){          //using this will not be found since it has it's own this               //use $this instead.               $this.someFunc($this);          });      },      someFunc: function($this)      {          //won't know what "this" is.          //use $this instead passed from the click event       }

8. 在每二个对象中保存设置

本身直接在每贰个对象中保留自身的装置,然后操作它协和的设置。那样你就无须在不一致的法门中传送比非常多参数。把这个变量放在对象中,也可能有助于你在另内地点调用那个变量。

function Canvas(settings)  {
this.settings = settings;
return this;
}

3. 运用重回四个成分

  8. 在每多个对象中保存设置

  笔者直接在每三个指标中保留本身的安装,然后操作它协和的装置。那样你就无须在差异的艺术中传送非常多参数。把这么些变量放在对象中,也可能有益你在另各地点调用那一个变量。

1 2 3 4 function Canvas(settings)  {      this.settings = settings;       return this }

9. 分手你的Prototype方法逻辑

那可能是叁个着力的原则。当您在徘徊是还是不是须求提供三个方式的时候,你能够问你协和“假如其别人要重写那一个格局的话,你的代码是或不是能满意她的供给?”可能“外人来写那么些法子有多费劲?”。当然这是三个世故拿捏的标题。这里列出了笔者的Color Picker jQuery Plugin 的主意,你能够参见一下:

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

JavaScript/jQuery有一个很好的特征就是能够张开艺术级联,所以大家不应该破坏这几个脾气,始终在艺术中回到一个成分。小编在自己的每多个jQuery插件中都遵从这一条。

  9. 分别你的Prototype方法逻辑

  这也许是三个着力的尺度。当你在徘徊是还是不是须求提供二个措施的时候,你能够问您和谐“假诺别的人要重写那个办法的话,你的代码是或不是能知足他的供给?”大概“别人来写那个主意有多辛劳?”。当然那是贰个借坡下驴拿捏的难题。这里列出了本身的Color Picker jQuery Plugin 的情势,你能够参见一下:

1 2 3 4 5 6 7 8 generate()  appendColors()  colorSelect()  colorHoverOn()  colorHoverOff() appendToElement() showPalette() hidePalette()

10. 提供 Setter/Getter 选项

这一条不是必须的,不过自个儿发觉本人抱有的插件都包用到了这一条。因为它只须求一丢丢代码,就可认为人家提供贰个她大概需求的功用。

大约,咱们如若让开垦者能够设置只怕获得成分已经存在的值:

var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");

小结:以上十条基本上覆盖了jQuery插件开采的着力,而且可以作为支出的模版。有一套基本的代码可以一点都不小的缩水你的支付时间,何况能够让您设计插件架构的时候更自信。2020欧洲杯冠军竞猜官方网站 2

$.fn.wPaint = function(settings)   
  {   
    return this.each(function()   
    {   
        var elem = $(this);   

        //run some code here    何问起 hovertree.com
    }   
}   

  10. 提供 Setter/Getter 选项

  这一条不是必须的,可是本身开掘自家具有的插件都包用到了这一条。因为它只必要一丝丝代码,就能够为外人提供三个她大概须要的作用。

  基本上,大家只要让开荒者能够设置只怕获得成分已经存在的值:

1 var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");

  计算:以上十条基本上覆盖了jQuery插件开垦的主干,并且能够当做开辟的模版。有一套基本的代码能够大幅度的浓缩你的开销时间,并且能够让您设计插件框架结构的时候更自信。

在付出过无数 jQuery 插件未来,笔者稳步的搜索出了一套开采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 何问起 hovertree.com 
     }   
}   

您能够小心到,上边代码中的“defaultSettings”是全然在插件方法外面包车型客车,由于那一个代码是在闭包里面,大家决不顾虑那么些变量被重写。

 

5. 为什么要安装 Class Prototyping

用作你代码的血与肉,方法和函数应该投身prototype函数内。有五个原因:

▲它能够省去成千上万内部存储器,因为能够不要再行创设这个主意。

▲援用三个现存的法子比重新创制八个好快非常多。

粗略的说,prototype就是扩充了三个对象,为它提供情势,而不用在每贰个目的中实例化那些方法。那也令你的代码更有系统和高速。一旦您习认为常这种开荒方式,你会开采它在您未来的等级次序中为你节省了成都百货上千时间。

 

6. 如何设置 Class Prototyping

安装四个 prototype 方法有五个部分。首先大家须求创造我们前期的类定义,在大大多情状下那就代表成立一个目的。这几个概念包括了每多少个对象实例都不可同日而语的部分。在本身的 Paint jQuery Plugin 插件中,作者是这么写的:

/* 何问起 hovertree.com */
function Canvas(settings)   
{   
    this.settings = settings;   
    this.draw = false;   
    this.canvas = null;         
    this.ctx = null;   

    return this;   
}   

下边来增添全局的措施:

/* 何问起 hovertree.com */
Canvas.prototype =   
{   
  generate: function()   
 {   
        //generate code   
  }   
}   

此间的显假若要让prototype的方法是通用的,不过多少是每一个实例本人的,能够用“this”援引。

 

7. 使用 “this” 对象

透过动用“$this”,我们得以向其余闭包传递正确的引用。大家也大概供给向别的方法传入 $this 引用。须求留心的是, $this 这么些名字是足以改的,任性的变量名都能够。

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

        var $this = this;   

        var buton = //...some code   

       button.click(function(){   
            //using this will not be found since it has it's own this   

            //use $this instead.   

           $this.someFunc($this);   
        });   
    },   

    someFunc: function($this)   
    {   
        //won't know what "this" is.   
        //use $this instead passed from the click event   
    }   
}   /* 何问起 hovertree.com */

8. 在每一个指标中保留设置

自个儿从来在每二个指标中保存本人的装置,然后操作它本人的设置。那样您就毫无在不一样的艺术中传递比非常多参数。把这个变量放在对象中,也会有益于你在其他地方调用那一个变量。

function Canvas(settings)   
{   
    this.settings = settings;   

    return this;   
}   
/* 何问起 hovertree.com */

9. 别离你的Prototype方法逻辑

那说不定是八个基本的尺度。当你在犹豫是或不是须求提供叁个办法的时候,你能够问你协和“假设别的人要重写那些点子的话,你的代码是还是不是能满意她的须要?”大概“旁人来写这些措施有多辛勤?”。当然那是二个世故拿捏的主题材料。这里列出了自家的 Color Picker jQuery Plugin  的秘诀,你能够参谋一下:

generate()   
appendColors()   
colorSelect()   
colorHoverOn()   
colorHoverOff()   
appendToElement()   
showPalette()   
hidePalette()   

10. 提供 Setter/Getter 选项

这一条不是必须的,不过小编意识小编抱有的插件都包用到了这一条。因为它只须要一丝丝代码,就会为别人提供一个她可能必要的作用。

相当多,大家假如让开荒者能够设置大概取得成分已经存在的值:

1
2
 varlineWidth = $("#container").wPaint("lineWidth");
$("#container").wPaint("lineWidth","5");

首先我们要把成分和目的关系起来,然后大家就能够引用它。大家在回到元素此前做如下操作:

return this.each(function()   
{   
    var elem = $(this);   

   var canvas = new Canvas(settings);   

    //run some code here   

   elem.data("_wPaint_canvas", canvas);   
}   
//下面的代码明确了我们究竟要做什么:   
$.fn.wPaint = function(option, settings)   
{   
   if(typeof option === 'object')   
    {   
        settings = option;   
    }   
    else if(typeof option === 'string')   
    {   
        if(   
            this.data('_wPaint_canvas') &&   
            defaultSettings[option] !== undefined   
        ){   
            var canvas = this.data('_wPaint_canvas');   

            if(settings)   
            {   
                canvas.settings[option] = settings;   
              return true;   
            }   
            else  
            {   
                return canvas.settings[option];   
           }   
        }   
        else  
            return false;   
    }   

    return this.each(function()   
    {   
        //run some code here   
    }   
}   /* 何问起 hovertree.com */

如上十条基本上覆盖了jQuery插件开垦的主干,并且能够当做开荒的模板。有一套基本的代码能够相当大的浓缩你的开销时间,何况能够让您设计插件架构的时候更自信。

推荐:

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:2020欧洲杯冠军竞猜官方网站:10条提出让你创制

关键词: 欧洲杯竞猜