JavaScript插件架构

时间 2019-11-19

原文原文链接

1.HTML布局规则

　　默认状况下，全部的插件均可以经过设置特定的HTML代码和相应的属性来实现。也就是说，在网页加载的时候，JavaScript代码会自动检测这些标记，并自动绑定相应的事件，而无需添加额外的JavaScript代码。示例以下：css

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

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

<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"属性，在单击按钮的时候，默认隐藏的下拉菜单就会显示出来。html5

<!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>

View Code

2.JavaScript实现步骤

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

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

步骤1定义一个当即调用的函数声明。在参数里传入jQuery对象，经过参数$引入变量。这样的作法，有如下两个好处：bootstrap

函数内部的$符号变量表明了局部变量，而不是全局变量里表明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函数方法，从而达到关闭的目的。api

步骤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的时候也不会出错。ide

步骤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。这样，一旦单击了相应的元素，就会关闭特定的警告框。