1.HTML布局规则

  默认情况下,所有的插件都可以通过设置特定的HTML代码和相应的属性来实现。也就是说,在网页加载的时候,JavaScript代码会自动检测这些标记,并自动绑定相应的事件,而无需添加额外的JavaScript代码。示例如下:

<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>警告!</strong> 你输入的项目不合法!
</div>

  上述代码是警告框组件的HTML布局,只要在button元素上添加一个data-dismiss="alert"属性,那么在单击该button的时候就会关闭该警告框。类似如easyui框架的data-options属性。

<select id="selectDealerAdd" name="selectDealerAdd" class="easyui-combobox" style="width:150px; height:32px;"
data-options="onSelect: function (record) {$('#hiddenDealerAdd').val(record.value);}">
<% foreach (var i in models)
{%>
<option value="<%=i.EmpId.Trim()%>"><%=i.Name.Trim()%></option>
<% } %>
</select>
<asp:HiddenField ID="hiddenDealerAdd" runat="server" Value=""/>

  同理,如下代码是下拉菜单的HTML布局,只要保证所单击的button按钮添加了data-toggle="dropdown"属性,在单击按钮的时候,默认隐藏的下拉菜单就会显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li class=""><a data-toggle="tab" href="#profile">个人资料</a></li>
<li class="dropdown">
<!-- 单击"我的书籍"时,弹出下拉菜单 -->
<a data-toggle="dropdown" href="#" class="dropdown-toggle">我的书籍 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown1">JavaScript编程精解</a></li>
<li><a data-toggle="tab" href="#dropdown2">JavaScript设计模式</a></li>
<li><a data-toggle="tab" href="#dropdown3">JavaScript启示录</a></li>
<li><a data-toggle="tab" href="#dropdown4">深入理解Bootstrap</a></li>
</ul>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="home" class="tab-pane fade active in">
<p>单击"首页"时显示该区域</p>
</div>
<div id="profile" class="tab-pane fade">
<p>单击"个人资料"时显示该区域</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<p>单击"JavaScript编程精解"时显示该区域</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<p>单击"JavaScript设计模式"时显示该区域</p>
</div>
<div id="dropdown3" class="tab-pane fade">
<p>单击"JavaScript启示录"时显示该区域</p>
</div>
<div id="dropdown4" class="tab-pane fade">
<p>单击"深入理解Bootstrap3"时显示该区域</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

2.JavaScript实现步骤

  Bootstrap里提供的所有JavaScript插件都统一遵循了下面这样的5个实现步骤。

  下面以alert插件为例(alert.js)讲述一下如何实现标准的插件。

步骤1定义一个立即调用的函数声明。在参数里传入jQuery对象,通过参数$引入变量。这样的做法,有以下两个好处:

  • 函数内部的$符号变量代表了局部变量,而不是全局变量里代表jQuery的$符变量,以达到防止变量污染的目的。
  • 内部的代码全部都是私有代码,外部代码无法访问,只有通过第三步,在$.fn设置了插件(比如$.fn.alert=)的形式,通过$符变量才能将整个插件通过唯一的接口$.fn.alert暴露出去,从而保护了其内部代码。
+function ($) {
"use strict";
// 1.使用严格模式ES5支持
// 2.alert插件类及原型方法的定义
// 3.在jQuery上定义alert插件,并重设插件构造器重设插件构造器,可以通过该属性获取插件的真实类函数
// 4. 防冲突处理
// 5. 绑定触发事件
}(window.jQuery);

步骤2定义该插件的核心代码,也就是在触发特定行为后要进行处理的代码。

// alert插件类及原型方法的定义
// 定义选择器,所有符合该自定义属性的元素都可以触发下面的事件
var dismiss = '[data-dismiss="alert"]'
var Alert = function (el) {
// 传入元素,如果元素内部有dismiss上设置的自定义属性,则click事件会触发原型上的close方法
$(el).on('click', dismiss, this.close)
}
Alert.prototype.close = function (e) {
// 关闭警告框的主要代码设置
}

  通过上述代码可以看出,主要是先定义了插件的类函数Alert,然后再定义需要用到的一些原型函数,比如close函数方法。Alert函数接收el参数,el参数表示DOM元素,一个BOM如果绑定了data-dismiss="alert"自定义属性,则在单击的时候就会触发close函数方法,从而达到关闭的目的。

步骤3在jQuery上定义插件,以便通过jQuery.[插件名称]()的方式,也能够使用该插件。

// 在jQuery上定义alert插件,并重设插件构造器
var old = $.fn.alert
// 保留其他插件的$.fn.alert代码(如果定义),以便在noConflict之后,可以继续使用该旧代码
$.fn.alert = function (option) {
return this.each(function () {
// 根据选择器,遍历所有符合规则的元素,然后在元素上绑定插件的实例,以监控用户的事件行为
})
}
$.fn.alert.Constructor = Alert;// 并重设插件构造器,可以通过该属性获取插件的真实类函数

jQuery插件的定义使用了标准的方法,在fn上进行扩展。在附加扩展之前,首先“备份”之前的插件(或别的框架提供的同名插件)的旧代码,以方便在后面防冲突的时候使用。在附加扩展之后,重新设置插件的构造器(即Constructor属性)为内部定义的插件类函数自身,这样就可以通过Constructor属性查询到插件的真实类函数,使用new操作符实例化$.alert的时候也不会出错。

步骤4防冲突处理,目的是让Bootstrap插件和其他UI库的同名插件共存。

// 防冲突处理
$.fn.alert.noConflict = function () {
$.fn.alert = old // 恢复以前的旧代码
return this // 将$.fn.alert.noConflict()设置为Bootstrap的alert插件
}

这样一旦有了一个同名的插件,比如A库里又个同名$.fn.alert插件,则Bootstrap在执行之前就通过old先备份了,然后通过var alert=$.fn.alert.noConflict()的形式,将Bootstrap的alert插件专业到另外一个变量上,从而进行使用。

步骤5在一切都就绪之后,绑定默认的触发事件。这里的第五步主要是申明式的HTML触发事件,即在HTML文档里已经按照布局规则声明了相关的自定义属性(比如data-dismiss="alert"),然后公共这里的代码初始化默认的单击事件行为。绑定触发事件的源代码如下:

// 绑定触发事件
// 为声明式的HTML绑定单击事件
// 在整个document对象上,检测是否有自定义属性data-dismiss="alert"
// 如果有,则设置:单击的时候,关闭指定的警告框元素
$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

  上述代码在整个document文档上减仓自定义属性data-dismiss="alert",如果有,则绑定click单击事件(在命名空间bs.alert.data-api上),事件回到函数这是原型方法Alert.prototype.close。这样,一旦单击了相应的元素,就会关闭特定的警告框。

JavaScript插件架构的更多相关文章

  1. 大型 JavaScript 应用架构中的模式

    原文:Patterns For Large-Scale JavaScript Application Architecture by @Addy Osmani 今天我们要讨论大型 JavaScript ...

  2. [转]大型 JavaScript 应用架构中的模式

    目录 1.我是谁,以及我为什么写这个主题 2.可以用140个字概述这篇文章吗? 3.究竟什么是“大型”JavaScript应用程序? 4.让我们回顾一下当前的架构 5.想得长远一些 6.头脑风暴 7. ...

  3. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  4. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  5. 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  6. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  7. ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...

  8. 在C#程序中实现插件架构

    阅读提示:这篇文章将讲述如何利用C#奇妙的特性,实现插件架构,用插件(plug-ins)机制建立可扩展的解决方案. 在.NET框架下的C#语言,和其他.NET语言一样提供了很多强大的特性和机制.其中一 ...

  9. Bootstrap3.0学习教程十七:JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

随机推荐

  1. uva 818 (位运算 + 判环)

     Cutting Chains  What a find! Anna Locke has just bought several links of chain some of which may be ...

  2. SSM框架学习之高并发秒杀业务--笔记1-- 项目的创建和依赖

    在慕课网上看了Java高并发秒杀API视屏后,觉得这个案例真的让我学到了很多,现在重新自己实现一遍,博客记下,顺便分析其中的要点. 第一步是项目的创建和依赖 利用Maven去创建工程然后导入Idea中 ...

  3. row_number()函数

    row_number()over( partition by a order by b desc ) rn 根据[字段a]分组,分组内根据[字段b]排序,次函数返回的是每组内部排序后的序列号(分组内唯 ...

  4. sql server 子找父和父找子

    父找子 with RTD1 as( select Id,pid from Sys_XCode ), RTD2 as( select * from RTD1 where id=1 union all s ...

  5. eclipse快捷键用不了

    ctrl+shift+R是eclipse最常用的快捷键之一,用于打开资源,输入文件名或文件名中的前几个字母,就可以打开工作区中任意文件 今天在打开eclipse,使用该快捷键时,提示“该快捷方式所指向 ...

  6. android基础(四)service

    Service的两种启动方式:startService()与bindService()   statService:生命周期:[onCreate()-  >onStartCommand()-&g ...

  7. UIkit框架之UITabBarController

    1.继承链:UIviewController:uiresponder:NSObject 2.访问tab bar控制器的属性 (1)@property(nonatomic, weak) id< U ...

  8. 图片过大导致OOM

    原文:http://www.codeceo.com/article/android-load-image-oom.html 一.分析 在加载图片过程中出现的OOM的几种情况: 1. 加载的图片过大 2 ...

  9. OD调试2

    通过视频学习,实现了一下简单的traceme爆破.这不是把它的序列号破译出来,只是识别了自己的号码,不算真正的爆破.(与期望有点差异) 先来看一下这款软件的逻辑结构. 先输入用户名  以及序列号 然后 ...

  10. Linux常用命令大全(share)

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...