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。這樣，一旦單擊了相應的元素，就會關閉特定的警告框。