【新手向】自用的tooltip小插件，前端插件知识科普~

上面的tooltip就是成品图，为了和自己站点的风格保持一致所以自己写的。

第一部分：你绝对碰到过的匿名函数闭包问题

第二部分：写个tooltip demo

第三部分：源码地址

---

第一部分 你绝对碰到过的匿名函数闭包问题

　　之所以写这个是因为我之前不知道文章可以发在首页的时候，我都是把博客当作备忘录一样记录自己的问题和收获，看的人也很少（现在依旧很少），但是我稍微翻译了一篇+function ($) { "use strict";}(window.jQuery);的文章，浏览量大概有我自己学习备忘录的十倍，所以我觉得虽然这个问题很基础，但是肯定很多人都会踩这个坑。

　　今天打算简单说一下各种库里的匿名函数调用写法

(function(x,y){
    alert(x+y);
    return x+y;
})(3,4);

 

 上面算是一个很典型的匿名函数调用方法（参考资料JS高级程序设计P184-P186）

　   　问:为什么需要这样写成这样？有啥用？

　　答：JS中没有块级作用域的概念，这种写法就是在模仿块级作用域，这种写法定义并立刻调用匿名函数，将函数声明包含在一对圆括号内，表示它是一个函数表达式。随后的另一对圆括号会立刻调用这个函数！

---

 

　   　问:那函数声明为什么要装成函数表达式？

　　答：因为函数声明后面不能跟圆括号哦！

---

 

　   　问:这样写好处有哪些？

　　答：这种技术可以限制向全局作用域中添加过多的变量和函数。以免很多开发人员一同参与的项目发生全局变量和函数命名冲突！

　　下面的链接是更多匿名函数调用的方式！以供大家参考！

　　Javascript中匿名函数的多种调用方式

---

 

 第二部分：写个tooltip demo

+function ($) {

    function easytooltip(target,content) {
        
        target.mouseover(function(e){
            var html = "<div class='card' style='display:block;'>"+content+"</div>";    
            $("body").append(html);
            $(".card").css("left",e.pageX+10);
            $(".card").css("top",e.pageY+10);
        })
        target.mousemove(function(e){
            $(".card").css("left",e.pageX+10);
            $(".card").css("top",e.pageY+10);
        })
        target.mouseout(function(e){
            $(".card").remove();
        })
    
    }
         window.easytooltip = easytooltip;

}(jQuery);

 ：上面就是插件的JS文件了，是不是很短？实际上大牛写的框架也大概都是这样的结构，比如下面Bootstrap里自带的插件

/* ========================================================================
 * Bootstrap: transition.js v3.3.5
 * http://getbootstrap.com/javascript/#transitions
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false
    var $el = this
    $(this).one('bsTransitionEnd', function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

}(jQuery);

我这个其实就是一个简单的函数，只是写成了闭包，注意最后要将函数暴露出去！否则无法正确触发哦！下面是API！

.easytooltip( target, content );
  target
  类型: Jquery选择器如$("body");
  content
  类型: String等

调用例子：
easytooltip($("body"),"咕咕咕");

---

 第三部分：源码地址

https://coding.net/u/Flynoddle/p/easytooltip/git