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

时间:2022-02-25 19:15:12

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

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

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

第二部分:写个tooltip demo

第三部分:源码地址


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

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

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

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

 

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

    【新手向】自用的tooltip小插件,前端插件知识科普~ 问:为什么需要这样写成这样?有啥用?

  【新手向】自用的tooltip小插件,前端插件知识科普~答:JS中没有块级作用域的概念,这种写法就是在模仿块级作用域,这种写法定义并立刻调用匿名函数,将函数声明包含在一对圆括号内,表示它是一个函数表达式。随后的另一对圆括号会立刻调用这个函数!


 

    【新手向】自用的tooltip小插件,前端插件知识科普~ 问:那函数声明为什么要装成函数表达式?

  【新手向】自用的tooltip小插件,前端插件知识科普~答:因为函数声明后面不能跟圆括号哦!


 

    【新手向】自用的tooltip小插件,前端插件知识科普~ 问:这样写好处有哪些?

  【新手向】自用的tooltip小插件,前端插件知识科普~答:这种技术可以限制向全局作用域中添加过多的变量和函数。以免很多开发人员一同参与的项目发生全局变量和函数命名冲突!

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

  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);

【新手向】自用的tooltip小插件,前端插件知识科普~ :上面就是插件的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

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