本文主要是介绍【新手向】自用的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 = falsevar $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小插件，前端插件知识科普~的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
