像bootstrap一样的去做web编程
1: 闭包
boot的闭包方式有点特别,普通的闭包是这样的:
(function ($) {
})(jQuery)
这种写法是怕全局污染,把$封闭在自己的空间里,暴露在外面的只有jQuery,这样,如果用了别的也用$的控件,就可以避免冲突。
而boot的闭包又有一些不同:
+function ($) {
}(jQuery)
这样写除了之前的好处,还有一点就是简洁,以及更重要的一点,避免之前的括号没有闭合,导致的冲突。这样,更加的独立,之前的包没有闭合也不会影响到这里。就好像保守的程序员,喜欢在个别的语句前,多家一个";",为的就是怕之前的语句与现在的语句合在了一起。
2:冲突的避免
除了控制jQuery中$的冲突,还要避免插件重名所带来的冲突。
jQuery 有自己的避免$全局污染的方法,就是noConflict。他可以把变量过渡到别的符号上,或者只是把$收回,只暴露出jQuery来。
而boot自己也有类似的冲突解决方法。
下面是所有boot插件的格式,以alert为例:
+function($){
var old = $.fn.alert;
$.fn.alert = function (option) {}
$.fn.alert.Constructor = Alert;
$.fn.alert.noConflict = function () {
$.fn.alert = old;
return this;
}
}(jQuery)
这样接入有一个别的alert控件,也叫做alert。那么我们就会把他储存到old里。然后在把他重新生命为自己的alert控件。
如果在接下来,我们需要用之前的alert,那么就noConflict一下,这样,alert就又付给了之前的alert控件,也就是old。
再把咱们自己写的alert返回出来。我们可以再给他付给别的空间名,这样两个就都可以用了。
而且我们也可以用Constructor来查看现在alert究竟是哪个控件。
3:on的使用
boot很方便,有些控件是自动的绑定在了特定的元素上的。还是以alert为例。
var dismiss = '[data-dismiss="alert"]'
$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close);
这里就是on的用法,他可以监听整个document,然后在根据参数,冒泡到特定的元素上去,这样做的好处是,可以再元素未被渲染的情况下,就把事件绑定到上面去,这样做,不用ready,也可以对新生成的元素执行同样的事件。所以boot的空间,除了特定的一些(比如tooltip),都可以在写出来的同时,就可以应用,只需要给元素特定的属性。
4:css3的兼容解决方案
有时候,我们需要在动画效果结束后在来去调用一些函数,在我们用jquery的动画时,animate的done参数可以帮我们很好地解决这方面的事情,可是当我们的大部分动画,都应用了css3的时候,要怎么办呢。所以boot'用了 一下这个方法:
+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 =