写jQuery插件时的注意点

下面是写jQuery插件时的注意点：

1. 设计清晰的API

设定良好的API是设计插件时最重要的一步。优秀的API可以使插件更好地适应用户需求，也可以帮助其他开发者更容易地集成插件。

一般来说，良好的API应该包含以下几个方面：

• 默认配置
• 方法和事件
• 命名空间
• 回调函数

例如下面的代码：

$.fn.myPlugin = function(options){
  var defaults = {
    speed: 'fast'
  };
  var settings = $.extend({}, defaults, options);

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

这段代码中，我们为插件设计了默认配置、jQuery插件主体函数以及返回函数。同时，由于可能会遇到多个插件同存的问题，我们为插件命名空间加了一个前缀。

2. 避免全局变量

避免全局变量是一个重要的原则，也是适用于jQuery插件开发的。全局变量会产生诸多问题，尤其是在多个插件同时存在的时候。因此，最好把代码封装起来，防止产生全局变量。

以下是示例代码：

(function($){
  var myVar = 'hello';

  $.fn.myPlugin = function(options){
    // ...
  };
})(jQuery);

在这个示例代码中，我们把插件封装在一个自执行的函数中，使得插件不会产生全局变量。

示例一：计时器插件

$.fn.timer = function(options) {
  var defaults = {
    delay: 1000
  };
  var settings = $.extend({}, defaults, options);
  var $this = this;
  var timerInterval;

  function init() {
    timerInterval = setInterval(function() {
      $this.text(parseInt($this.text()) + 1);
    }, settings.delay);
  }

  function stop() {
    clearInterval(timerInterval);
  }

  this.each(init);

  return {
    stop: stop
  };
};

在这个计时器插件中，我们为插件设计了默认配置（每秒钟加1），jQuery插件主体函数以及停止计时器函数。为了避免产生全局变量，在主体函数中设置了计时器。同时，为了适应开发者需求，我们提供了停止计时器的选项。

示例二：轮播图插件

$.fn.carousel = function(options) {
  var defaults = {
    delay: 3000,
    nav: true
  };
  var settings = $.extend({}, defaults, options);
  var $this = this;
  var $nav;

  function navDot() {
    $nav = $("<div class='nav'></div>");
    for (var i = 0; i < $this.children().length; i++) {
      $nav.append("<span></span>");
    }
    $nav.find("span").on("click", function() {
      var index = $(this).index();
      showImage(index);
    });
    $this.after($nav);
  }

  function showImage(index) {
    $this.children().eq(index).show().siblings().hide();
    $nav.find("span").eq(index).addClass("active").siblings().removeClass("active");
  }

  function init() {
    var index = 0;
    var timerInterval = setInterval(function() {
      if (index >= $this.children().length - 1) {
        index = 0;
      } else {
        index++;
      }
      showImage(index);
    }, settings.delay);
    if (settings.nav) {
      navDot();
    }
  }

  this.each(init);

  return {
    showImage: showImage
  };
};

在这个轮播图插件中，我们为插件设计了默认配置（每3秒钟切换一张图片，需要导航点），jQuery插件主体函数以及切换图片函数。同样的，为了适应开发者需求，我们提供了切换图片的选项。同时，我们在导航点函数中再次展示了设计清晰的API。