正文

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

IP云
IP云V管理员/2 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

上面的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

相关阅读

目录[+]