概述
上面的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
最后
以上就是清爽薯片为你收集整理的【新手向】自用的tooltip小插件，前端插件知识科普~的全部内容，希望文章能够帮你解决【新手向】自用的tooltip小插件，前端插件知识科普~所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复