bootstrap之noConflict的详解
翻开推特框架，不经发现，几乎所有的插件都会出现noConflict的写法来防止和其他的插件冲突！我们以button.js为例子，打开其源代码发现 如下：
var old = $.fn.button
$.fn.button = Plugin
$.fn.button.Constructor = Button // BUTTON NO CONFLICT
// ================== $.fn.button.noConflict = function () {
$.fn.button = old
return this
}
那这段代码的作用呢？一看都知道是防止冲突，但是如何防止冲突呢？对于前置插件或者是后置的重名插件又是如何的呢？下面我们就来翻一翻，期望让自己不再那么困惑！
例子1:前置的重名插件
根据js在页面的执行顺序显然可以知道，后面的$.fn.button会覆盖前面的同名插件，所以这个时候如果如果要调用的是bootstrap的插件，其实是不需要进行冲突的处理的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryPlugin</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
(function($){
$.fn.button=function(){
alert("自定义button插件");
}
})(jQuery);
(function($){
function Button(element,loption){
this.name="bootstrap的button插件";
this.init();
}
Button.prototype.init=function(){
alert(this.name)
}
function Plugin(option) {
return this.each(function(){
var $this = $(this),
data= $this.data("cui.button"),
options=typeof option =='object' && option;
if(!data){
$this.data("cui.button",data=new Button(this,options));
}
//对于复选框的时候，对于单选框的时候
if(option=="toggle"){
data.toggle()
}else if(option){
data.setState(option)
}
})
}
var old = $.fn.button;
$.fn.button = Plugin
$.fn.button.Constructor = Button
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
})(jQuery);
$(function(){
$("#btn1").button();//bootstrap的button插件
}) </script> </body>
</html>
问题来了，假如我们要调用前置的$.fn.button插件(自定义button插件)的时候,该怎么办呢？只要在上面的调用时候做点修改就可以了：在调用button之前调用$.fn.button.noConflict();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryPlugin</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
(function($){
$.fn.button=function(){
alert("自定义button插件");
}
})(jQuery);
(function($){
function Button(element,loption){
this.name="bootsrtap的button插件";
this.init();
}
Button.prototype.init=function(){
alert(this.name)
}
function Plugin(option) {
return this.each(function(){
var $this = $(this),
data= $this.data("cui.button"),
options=typeof option =='object' && option;
if(!data){
$this.data("cui.button",data=new Button(this,options));
}
//对于复选框的时候，对于单选框的时候
if(option=="toggle"){
data.toggle()
}else if(option){
data.setState(option)
}
})
}
var old = $.fn.button;
$.fn.button = Plugin
$.fn.button.Constructor = Button
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
})(jQuery);
$(function(){
$.fn.button.noConflict();
//你也可以用 var button=$.fn.button.noConflict();
$("#btn1").button();//自定义button插件
}) </script> </body> </html>
例子2:后置的重名插件
根据后置覆盖前置插件的原理，这个例子当然是弹出文字和你想象是一样的，弹出"自定义button插件"，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryPlugin</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
(function($){
function Button(element,loption){
this.name="bootstrap的button插件";
this.init();
}
Button.prototype.init=function(){
alert(this.name)
}
function Plugin(option) {
return this.each(function(){
var $this = $(this),
data= $this.data("cui.button"),
options=typeof option =='object' && option;
if(!data){
$this.data("cui.button",data=new Button(this,options));
}
//对于复选框的时候，对于单选框的时候
if(option=="toggle"){
data.toggle()
}else if(option){
data.setState(option)
}
})
}
var old = $.fn.button;
$.fn.button = Plugin
$.fn.button.Constructor = Button
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
})(jQuery);
(function($){
$.fn.button=function(){
alert("自定义button插件");
}
})(jQuery);
$(function(){
$("#btn1").button();//自定义button插件
})
</script>
</body>
</html>
这个时候我们想调用bootstrap的button插件，以为来个$.fn.button.noConflict(),是不是就可以调用了，事实呢？浏览器跟你了一巴掌，提示你$.fn.button.noConflict()不是一个函数，为什么？不要忘记了，后置的同名插件已经覆盖了前面的同名插件，而后置的插件没有$.fn.button.noConflict()这个函数，所以你当然找不到这个函数了！举个例子来测试一下就知道
这个例子就是典型的重写原型，所以调用say的时候就取不到值了！！！
function Person(){
this.name="丑男孩";
}
Person.prototype.say=function(){
alert(this.name)
}
//Person.prototype在这里被重写了
Person.prototype={
run:function(){
alert("我可以跑！")
}
}
var person1=new Person();
person1.say();//提示未定义
言归正传，那如果调用前置插件(也就是bootstrap的button插件呢)，这个时候我们有必要对于自定义的button的插件进行一定的修改（怎么修改取决于你的插件的写法），本例中的修改如下，在自定义的button插件中添加$.fn.button.noConflict() 方法，如下(注意自定义button的插件中代码的修改)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryPlugin</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
(function($){
function Button(element,loption){
this.name="bootstrap的button插件";
this.init();
}
Button.prototype.init=function(){
alert(this.name)
}
function Plugin(option) {
return this.each(function(){
var $this = $(this),
data= $this.data("cui.button"),
options=typeof option =='object' && option;
if(!data){
$this.data("cui.button",data=new Button(this,options));
}
//对于复选框的时候，对于单选框的时候
if(option=="toggle"){
data.toggle()
}else if(option){
data.setState(option)
}
})
}
var old = $.fn.button;
$.fn.button = Plugin
$.fn.button.Constructor = Button
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
})(jQuery);
(function($){
var old=$.fn.button;
$.fn.button=function(){
alert("自定义button插件");
}
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
})(jQuery);
$(function(){
$.fn.button.noConflict();
$("#btn1").button();//bootstrap的button插件
})
</script>
</body>
</html>
到这里，其实已经很清楚了，bootstrap的noConflict 怎么样？如何用？对于自定义插件如何避免冲突，如果调用！妈妈再不担心自己的代码和别人冲突了
bootstrap之noConflict的详解的更多相关文章
- 转载 JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- Bootstrap transition.js 插件详解
Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单 ...
- Bootstrap Table 表格参数详解
表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...
- Bootstrap系列 -- 22. 按钮详解
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格.默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色 ...
- jQuery.noConflict() 函数详解
jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权. 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQue ...
- Bootstrap 各种进度条详解
一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...
- Bootstrap Table的使用详解
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能.接下来我们来介绍B ...
- Bootstrap如何实现导航条？导航条实例详解
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...
随机推荐
- shonc项目中的设计资讯模块 php 字符串操作与正则表达式 strip_tags preg_match
问题:当description 内容要求description的值选用资讯内容的前50个汉字.资讯内容可能有图片. 此时需要对输出的内容进行处理 php 正则表达式处理,编辑器输出的内容 只取图片: ...
- chapter 1 Number/Adventurous Person
part1: 1- Which would be easier to remember a munber or a name? Well, I am better at remembering num ...
- break语句的使用
先举一个简单点的例子 #include<stdio.h> #include<stdlib.h> int main() { float a,b; char c; printf(& ...
- 【原创】QT5-卸载精灵v1.0-卸载windows软件-简易版
由于项目需求,需要实现卸载windows上的普通软件的小功能,实现起来还是比较简单的. 先发个图: 思路: 1.根据注册表的信息去打开应用程序,卸载也一样: 2.读桌面的快捷方式,根据快捷方式的指向路 ...
- JS面向对象编程之：封装、继承、多态
最近在实习公司写代码,被隔壁的哥们吐槽说,代码写的没有一点艺术.为了让我的代码多点艺术,我就重新温故了<javascript高级程序设计>(其中几章),然后又看了<javascrip ...
- Nginx 配置指令的执行顺序（六）
前面我们在 (五) 中提到,在一个 location 中使用 content 阶段指令时,通常情况下就是对应的 Nginx 模块注册该 location 中的“内容处理程序”.那么当一个 locati ...
- JAVA中synchronized和lock详解
目前在Java中存在两种锁机制:synchronized和Lock,Lock接口及其实现类是JDK5增加的内容,其作者是大名鼎鼎的并发专家Doug Lea.本文并不比较synchronize ...
- ZigBee技术简介
Zigbee的由来 在蓝牙技术的使用过程中,人们发现蓝牙技术尽管有许多优点,但仍存在许多缺陷.对工业,家庭自动化控制和遥测遥控领域而言,蓝牙技术显得太复杂,功耗大,距离近,组网规模太小等,……而工业自 ...
- Android Studio中获取sha1证书指纹数据的方法
高德地图开发申请KEY的时候需要开发者提供SHA1证书指纹数据,在eclipse很容易就找到了,但是Android Studio很久也没找到,只能使用在网上看到的方法了,在Android Studio ...
- linux下维护服务器之常用命令
linux下维护服务器之常用命令! 第1套如下: 正则表达式: 1.如何不要文件中的空白行和注释语句: [root@localhost ~]# grep -v '^$' 文件名 |grep -v '^ ...