jQuery définit le plug-in method_jquery-js tutoriel-php.cn

jQuery définit le plug-in method_jquery

WBOY

Libérer： 2016-05-16 15:24:54

original

1379 Les gens l'ont consulté

Certains développeurs WEB référenceront une bibliothèque de classes JQuery, puis écriront $("#"), $(".") sur la page Web. Après avoir écrit pendant quelques années, ils diront aux autres qu'ils sont très familiers. avec JQuery. J'étais une telle personne, mais ce n'est que lors d'un échange technique au sein de l'entreprise que j'ai changé ma vision de moi-même.

Lors de l'extension de jquery. Les méthodes de base sont les deux suivantes :

$.extend(object) peut être compris comme l'ajout d'une méthode statique à jquery

$.fn.extend(object) peut être compris comme l'ajout d'une méthode à l'instance jquery

$.extend(objet)

Exemple :

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("执行方法一"); } });//定义
$.fun();//调用
$.fn.extentd(object)
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("执行方法"); } });
$(this).fun();
//等同于
$.fn.fun = function () { alert("执行方法三"); }
$(this).fun();

Copier après la connexion

Définir la structure de base du plug-in jquery

1． Définir la portée :

Définissez une portée privée pour le plugin. Le code externe ne peut pas accéder directement à l’intérieur du plug-in. Le code interne du plug-in n'est pas soumis à des interférences externes et ne pollue pas les variables globales.

  //step 定义JQuery的作用域
(function ($) {
})(jQuery);

Copier après la connexion

2. Ajoutez des méthodes d'extension au plug-in :

//step01 定义JQuery的作用域
(function ($) {
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    
  }
})(jQuery);

Copier après la connexion

3. Définir la valeur par défaut :

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
  }
})(jQuery);

Copier après la connexion

Parmi eux : var options = $.extend(defaults, options) signifie. Indique que les options remplacent la valeur par défaut et attribuent la valeur aux options.
Dans l'environnement du plug-in, cela signifie que la valeur définie par l'utilisateur remplace la valeur par défaut du plug-in ; si l'utilisateur ne définit pas l'attribut avec une valeur par défaut, la valeur par défaut du plug-in est toujours conservée ; .

4. Prise en charge du sélecteur jquery :

 //step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    this.each(function () {
    });
  }
})(jQuery);

Copier après la connexion

5. Appel de lien JQuery de support :

Afin d'obtenir l'effet d'appel de lien, chaque élément de la boucle doit être renvoyé

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    //step 支持链式调用
    return this.each(function () {
    });
  }
})(jQuery);

Copier après la connexion

6. Méthodes dans le plug-in :

Les méthodes définies dans le plug-in ne peuvent pas être directement appelées par le monde extérieur. Les méthodes que j'ai définies dans le plug-in ne polluent pas l'environnement extérieur.

//step01 定义JQuery的作用域
(function ($) {
  //step03-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step06-a 在插件里定义方法
  var showLink = function (obj) {
    $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  }
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step03-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step4 支持JQuery选择器
    //step5 支持链式调用
    return this.each(function () {
      //step06-b 在插件里定义方法
      showLink(this);
    });
  }
})(jQuery);

Copier après la connexion

Le contenu ci-dessus vous présente la méthode de définition de plug-ins avec jQuery. J'espère qu'il vous plaira.