像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 = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
}) }(jQuery);
他首先去问浏览器,是否支持transitionend这个属性,如果支持,那么我们在来做后续的操作,同样以alert为例:
$.support.transition && $parent.hasClass('fade') ?
$parent
.one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(Alert.TRANSITION_DURATION) :
removeElement()
首
先$.support.transition,调用transitionEnd方法,看看是否支持这个属性,如果支持,那么就用one注册一次
transitionend,然后在用emulateTransitionEnd去调用一下,参数为这个css3动画的时间duration。这个时间之
后去调用这次事件,就可以达成callback的形式。当然如果不支持这个属性,那么我们就直接执行callback,就ok了。
5:trigger的应用
trigger可以手动的触发事件,以modal控件为例,在之前的版本的控件中,当modal框弹出来的时候,底部主窗口的滚动条没有取消,所以在后续的控件中(大概3.0.3左右),用了自身的注册事件来避免这部分的小bug。代码如下:
$(document)
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
他在每次点开modal框之前,也就是show事件中,给body添加class:modal-open,这个样式把overflow给hidden掉。再在关闭modal框之后,也就是hidden事件中,再把这个class给remove掉。
这里注册了时间,那么哪里去触发呢?这就用到了trigger方法,在特定的地方
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
that.$element.trigger(e)
这样就触发了事件。大部分的外部接口就是这样给出的。
6:事件注销的技巧
boot在事件注册的时候给了很多的后缀。比如 click.bs.alert,show.bs.modal。这样做事为了什么呢。
加入我想取消掉alert的click事件。可是我不能把所有的click事件都取消掉,所以我们在off事件的时候,就要这样写:
$(document).off('click.bs.alert')
如果我想注销掉全部的alert的事件,那么就要:
$(document).off('.bs.alert')
同理,要是想注销掉全部的boot注册的时间 那么就要:
$(document).off('.bs')
所以在注册时间时候,才要麻烦的加后缀,是为了我们之后的行为做准备的。这样写非常的有道理。
7:api的使用
boot给了我们简单的接口,但是没有给我们全部,可是其实我们是可以拿到的。
boot把方法给了data。如下面:
$.fn.alert = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.alert') if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}
在alert的时候,首先检查元素中用没有alert这个data,有的话,则直接调用,没有的话才生成新的。
那么其实我们可以这样做:
$('.alert').alert();
var api = $('.alert').data('bs.alert');
api.hide();
这是和$('.alert').alert('hide');一样用的。
8:proxy的应用
proxy调用一个方法,切用参数取代方法中的this,好像我自己写的控件form就有这么一段:
this.$element.on('click','[data-formtype="reset"]',$.proxy(function () {
this.reset();
}, this));
我 用了$element冒泡到的data-formtype=reset的元素,那么this自然指向了它,它的click事件是调用方法本身的 reset()事件,可是里面的this不是这个方法,那么我们就用proxy来指向当前方法的this。这个方法灵活运用,对于封装控件有很大作用。
如果哪里写的不对,希望得到指正,大家一起交流。
像bootstrap一样的去做web编程的更多相关文章
- 全部编程皆为Web编程
原文作者:Jeff Atwood 原文链接:http://blog.codinghorror.com/all-programming-is-web-programming Michael Brau ...
- PHP求职宝典系列——PHP Web 编程篇
PHP Web 编程篇 form表单 1.简述 POST 和 GET 传输的最大容量分别是多少? GET 方法提交的表单数据被附加到 URL 上,并作为URL 的一部分发送到服务器端. URL 的长度 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- Java Web 编程
Java Web 编程 21天学通JAVA-WEB开发:http://files.cnblogs.com/files/maven-chao/Java_Web.zip
- python web编程-概念预热篇
互联网正在引发一场革命??不喜欢看概念的跳过,注意这里仅仅是一些从python核心编程一书的摘抄 这正是最激动人心的一部分了,web编程 Web 客户端和服务器端交互使用的“语言”,Web 交互的标准 ...
- 物联网网络编程、Web编程综述
本文是基于嵌入式物联网研发工程师的视觉对网络编程和web编程进行阐述.对于专注J2EE后端服务开发的童鞋们来说,这篇文章可能稍显简单.但是网络编程和web编程对于绝大部分嵌入式物联网工程师来说是一块真 ...
- 《Web编程入门经典》
在我还不知道网页的基础结构的时候,我找过很多本介绍Web基础的书籍,其中这本<Web编程入门经典>,我认为是最好的. 这本书内容很全面.逻辑很严谨.结构很清晰.语言文字浅显易懂. 看这本书 ...
- MVC 5 Web编程2 -- URL映射
ASP.NET MVC 5 Web编程2 -- URL映射(路由原理) 2015-02-12 08:50 by hangwei, 704 阅读, 5 评论, 收藏, 编辑 本章将讲述ASP.NET M ...
- bootstrap + angularjs + seajs构建Web Form前端2
bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...
随机推荐
- shell 例子
shell编程入门 http://www.runoob.com/linux/linux-shell-variable.html http://c.biancheng.net/cpp/shell/ .查 ...
- 快速求1~n的k!,k的逆元
1.求1~n的k! 2.求inv(k!) 3.inv((k-1)!)=inv(k!)*k%mod 4.inv(k)=inv(k!)*((k-1)!)%mod 如 https://www.cnblogs ...
- vue组件间函数调用
vue父子组件间函数调用 <Child ref="myChild"></Child> // 父组件 // 引入子组件 import Child from ' ...
- mui框架开发aop的跨页面传值
mui开发跨平台app,其实不乏会涉及到跨页面传值,今天给大家简单介绍一种常用也是简单的传值方法 咱在这里设置一个场景,就是两个页面进入到同一页面展示不同的元素,此时需要在这两个页面各自设置一个区别的 ...
- ETL工具-Kattle:查询 HTTP/WebService
发送HTTP POST请求,获取返回内容. 发送HTTP GET请求,获取返回内容,可以从前面获取URL.参数名.参数值 通过Restful获取数据 通过webService获取数据 HTTP ...
- 暑期集训日志(Day6~Day17)
章·十七:2019-07-28:为谁辛苦为谁甜 ·昨日小结 颓爆了QAQ,昨天又垫底了. 最简单一道题弃疗的我直接被甩倒了总榜垫底…… 我……不想说啥…… 我是渣比. 我不能颓废了. 醒来啊麦克白! ...
- NX二次开发-UF_MODL_ask_point_containment获取一个点是在体(面,边)的边界内部,外部,还是边界上
NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_curve.h> #include < ...
- 网页重构应该避免的10大CSS糟糕用法
对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始 ...
- 20-MySQL-Ubuntu-数据表的查询-子查询(九)
子查询(嵌套查询) select * from students where height=(select max(height) from students);
- 22个Photoshop网页设计教程网站推荐
这些网站都会经常更新一些优秀且高质量的Web界面设计教程.如果你热爱网页设计并且经常搜集各种界面设计教程,那么你一定要把下面这些网站收藏起来. 您还可以参考以下网页设计相关教程及资源:<Web ...