這是Flask Mega-Tutorial系列的第二十部分，我將新增一個功能，當你將滑鼠懸停在使用者的暱稱上時，會彈出一個漂亮的視窗。

現在，構建一個Web應用而不使用JavaScript是不可能的。 你一定知道，JavaScript是Web瀏覽器中可本地執行的唯一語言。 在第十四章中，你看到我在Flask模板中添加了一個簡單的JavaScript的啟用連結，以提供實時的使用者動態的語言翻譯。 而在本章中，我將深入探討該主題，並向你展示另一個有用的JavaScript技巧，給應用程式增添趣味來吸引使用者。

社交網站的常見使用者互動模式是，當你將滑鼠懸停在使用者的名稱上時，可以在彈出視窗中顯示使用者的主要資訊。 如果你從未注意到這一點，請訪問Twitter，Facebook，LinkedIn或任何其他主要社交網站，當你看到使用者名稱時，只需將滑鼠指標放在上面幾秒鐘即可看到彈出視窗。 本章將致力於為Microblog實現該功能，你可以在下面看到預覽效果：

本章的GitHub連結為：Browse, Zip, Diff.

服務端的支援

在深入研究客戶端之前，讓我們先了解一下支援這些使用者彈窗所需的伺服器端的工作。 使用者彈窗的內容將由新路由返回，它是現有個人主頁路由的簡化版本。 檢視函式如下：

app/main/routes.py：使用者彈窗檢視函式。

@bp.route('/user/<username>/popup')
@login_required
def user_popup(username):
    user = User.query.filter_by(username=username).first_or_404()
    return
 
 render_template('user_popup.html', user=user)

該路由將被附加到/user//popup URL，並且將簡單地載入所請求的使用者，然後渲染到模板中。 該模板是個人主頁的簡化版本：

app/templates/user_popup.html：使用者彈窗模板。

<table class="table">
    <tr>
        <td width="64" style="border: 0px;"><img src="{{ user.avatar(64) }}"></td>
        <td
 
 style="border: 0px;">
            <p>
                <a href="{{ url_for('main.user', username=user.username) }}">
                    {{ user.username }}
                </a>
            </p>
            <small>
                {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}
                {% if user.last_seen %}
                <p>{{ _('Last seen on') }}: 
                   {{ moment(user.last_seen).format('lll') }}</p>
                {% endif %}
                <p>{{ _('%(count)d followers', count=user.followers.count()) }},
                   {{ _('%(count)d following', count=user.followed.count()) }}</p>
                {% if user != current_user %}
                    {% if not current_user.is_following(user) %}
                    <a href="{{ url_for('main.follow', username=user.username) }}">
                        {{ _('Follow') }}
                    </a>
                    {% else %}
                    <a href="{{ url_for('main.unfollow', username=user.username) }}">
                        {{ _('Unfollow') }}
                    </a>
                    {% endif %}
                {% endif %}
            </small>
        </td>
    </tr>
</table>

當用戶將滑鼠指標懸停在使用者名稱上時，隨後小節中編寫的JavaScript程式碼將會呼叫此路由。客戶端將伺服器端返回的響應中的html內容顯示在彈出視窗中。 當用戶移開滑鼠時，彈出視窗將被刪除。 聽起來很簡單，對吧？

如果你想了解彈窗像什麼樣，現在可以執行應用，跳轉到任何使用者的個人主頁，然後在位址列的URL中追加/popup以檢視全屏版本的彈出視窗內容。

Bootstrap Popover元件簡介

在第十一章中，我向你介紹了可便捷地建立精美網頁的Bootstrap框架。 到目前為止，我只使用了這個框架的一小部分。 Bootstrap捆綁了許多常見的UI元素，所有這些元素都在地址為的Bootstrap文件中有demo和示例。 其中一個元件是Popover（彈窗），在文件中將其描述為“用於容納輔助資訊的小的覆蓋視窗”。 這正是我需要的！
　
大多數bootstrap元件都是通過HTML標記定義的，該標記引用Bootstrap CSS的定義內容來新增漂亮的樣式。 一些高階的元件還需要JavaScript。 應用程式在網頁中包含這些元件的標準方式是在適當的位置新增HTML，然後為需要指令碼支援的元件呼叫JavaScript函式，以便初始化或啟用它。 popover元件確實需要JavaScript的支援。

要做彈窗的HTML部分非常簡單，你只需要定義將觸發彈窗的元素。 就我而言，就是處理每條使用者動態中出現的可點選的使用者名稱。
app/templates/_post.html子模板具有已定義的使用者名稱：

            <a href="{{ url_for('main.user', username=post.author.username) }}">
                {{ post.author.username }}
            </a>

現在根據popover文件，我需要呼叫每個連結上的popover() JavaScript函式，就像上面出現在頁面上的連結一樣，這才能初始化彈出視窗。 初始化呼叫接受許多配置彈出視窗的選項，包括傳遞想要在彈出視窗中顯示的內容，以及使用什麼方法觸發彈出窗口出現或消失（單擊，懸停在元素上等），如果內容是純文字或HTML，那麼在文件中可以找到更多的選項。不幸的是，在閱讀完這些資訊之後，我的疑惑更多了，因為這個元件看起來並沒有按照我需要的方式工作。 以下是我實現此功能需要解決的問題列表：

• 在頁面中會有很多使用者名稱連結，每條使用者動態都會顯示一個。我需要有一種方法可以在頁面渲染後用JavaScript中找到所有這些連結，以便我可以將它們初始化為彈出視窗。
• Bootstrap文件中的popover示例都將目標HTML元素的data-content屬性設定為popover的內容，因此當觸發懸停事件時，Bootstrap需要做的只是顯示彈出視窗。這對我來說要做的就不止這些了，因為我想對伺服器進行Ajax呼叫以獲取內容，並且只有當收到伺服器的響應時，我才希望彈出窗口出現。
• 使用“懸停”模式時，只要你將滑鼠指標放在目標元素中，彈出視窗就會保持可見狀態。當你移開滑鼠時，彈出視窗將消失。這具有糟糕的副作用，即如果使用者想要將滑鼠指標移動到彈出視窗中，彈出視窗將消失。我需要找出一種方法來將懸停行為擴充套件為包含彈出視窗，以便使用者可以移動到彈出視窗中，例如，單擊那裡的連結。

在開發基於瀏覽器的應用程式時，事情變得越來越複雜的情況，實際上並不罕見。 你必須非常仔細地考慮DOM元素如何相互作用，並使其行為方式提供良好的使用者體驗。

在頁面載入完成後執行函式

很明顯，我將需要在每個頁面載入後立即執行一些JavaScript程式碼。 我要執行的函式將搜尋頁面中使用者名稱的所有連結，並使用Bootstrap中的彈出視窗元件配置它們。

jQuery JavaScript庫作為Bootstrap的依賴項載入，因此我將利用它。 當使用jQuery時，你可以用$(...)封裝來註冊一個函式，函式將會在頁面載入完畢後執行。 我可以將它新增到app/templates/base.html模板中，以便它可以在應用程式的每個頁面上執行：

app/templates/base.html：頁面載入完畢後執行函式。

...
<script>
    // ...

    $(function() {
        // write start up code here
    });
</script>

正如你所看到的，我已經在<script>元素中添加了我的啟動函式，而在第十四章中，我已在該元素中定義了中的translate()函式。

使用選擇器查詢DOM元素

第一個要解決的問題是建立一個JavaScript函式來查詢頁面中的所有使用者連結。 這個函式將在頁面載入完成時執行，並且當完成時，將為所有頁面配置懸停和彈出行為。 現在我要集中精力來尋找連結。

回顧第十四章，在實時翻譯中被呼叫的HTML元素具有唯一的ID。 例如，ID = 123的使用者動態中具有id="post123"屬性。 然後使用jQuery，在JavaScript中使用表示式$('#post123')在DOM中定位此元素。 $()函式功能非常強大，並且具有相當複雜的查詢語言來搜尋DOM元素，可以參考CSS Selectors。

我用於翻譯功能的選擇器旨在使用id屬性查詢一個具有唯一識別符號的特定元素。 識別元素的另一種方法是使用class屬性，它可以分配給頁面中的多個元素。 例如，我可以用class="user_popup"標記所有的使用者連結，然後我可以通過$('.user_popup')獲取這些元素的列表（CSS選擇器中，#字首代表查詢id屬性，’.’字首代表查詢class屬性）。 在本處，返回值將是具有該類的所有元素的集合。

彈窗和DOM元素

通過使用Bootstrap文件中的彈出視窗示例並在瀏覽器的偵錯程式中檢查DOM，我確定Bootstrap將彈出視窗元件建立為DOM中目標元素的同級元素。 正如我上面提到的，這會影響懸停事件的行為，只要使用者將滑鼠從<a>連結移動到彈出視窗本身，就會觸發“滑鼠移出”事件。

我可以擴充套件懸停事件以包含彈出視窗，就是將彈出視窗作為目標元素的子元素，這樣懸停事件就會繼承。 通過檢視文件中的彈出選項，可以通過在container選項中傳遞父元素來完成此操作。

將popover作為懸停元素的子元素可以很好地用於按鈕或一般的<div>或<span>元素，但在我的情況下，popover的target將是顯示使用者名稱的可點選連結的<a>元素。 使popover成為<a>元素的子元素的問題是，彈出視窗將獲得<a>父元素的連結行為。 最終的結果是這樣的：

        <a href="..." class="user_popup">
            username
            <div> ... popover elements here ... </div>
        </a>

為了避免彈出窗口出現在<a>元素中，我要使用的是另一個技巧。 我要將<a>元素封裝在<span>元素中，然後將懸停事件和彈出視窗與<span>相關聯。 由此產生的結構將是：

        <span class="user_popup">
            <a href="...">
                username
            </a>
            <div> ... popover elements here ... </div>
        </span>

<div>和<span>元素是不可見的，因此它們是用於幫助組織和構建DOM的重要元素。 div元素是塊元素，有點像HTML文件中的段落，而<span>元素是行內元素，它可以用於字詞級別。 本處，我決定使用<span>元素，因為我要包裝的<a>元素也是行內元素。

因此，我將繼續並重構我的app/templates/_post.html子模板以包含<span>元素：

...
                {% set user_link %}
                    <span class="user_popup">
                        <a href="url_for('main.user', username=post.author.username)">
                            {{ post.author.username }}
                        </a>
                    </span>
                {% endset %}
...

如果你想知道彈出式HTML元素在哪裡，好訊息是我不必操心這一點。 當我在剛剛建立的<span>元素上呼叫popover()初始化函式時，Bootstrap框架會為我動態地插入彈出元件。

懸停事件

正如我上面提到的，Bootstrap中的popover元件使用的懸停行為不夠靈活，無法滿足我的需求，但如果你檢視trigger選項的文件，則hover只是其中一個可能的值。 一個引起我注意的是manual模式，在這種模式下，可以通過JavaScript呼叫手動顯示或刪除彈出視窗，這種模式可以讓我自由地實現懸停邏輯，所以我將使用該選項並實現我自己的懸停事件處理程式，並以我需要的方式工作。

所以我的下一步是將一個“hover”事件附加到頁面中的所有連結。 使用jQuery，可以通過呼叫element.hover(handlerIn, handlerOut)將懸停事件附加到任何HTML元素。 如果在元素集合上呼叫這個函式，jQuery方便地將事件附加到所有元素上。 這兩個引數是兩個函式，分別在使用者將滑鼠指標移入和移出目標元素時呼叫對應的函式。

app/templates/base.html：懸停事件。

    $(function() {
        $('.user_popup').hover(
            function(event) {
                // mouse in event handler
                var elem = event.currentTarget;
            },
            function(event) {
                // mouse out event handler
                var elem = event.currentTarget;
            }
        )
    });

事件引數是一個事件物件，它包含了一些有用的資訊。 在本處，我使用event.currentTarget來提取事件的目標元素。

瀏覽器在滑鼠進入受影響的元素後立即排程懸停事件。 針對彈出行為，你只想滑鼠停留在元素上一段時間才能啟用，以防當滑鼠指標短暫通過元素但不停留在元素上時出現彈出閃爍。 由於該事件不支援延遲，因此這是我需要自己實現的另一件事情。 所以我打算在“滑鼠進入”事件處理程式中新增一秒計時器：

app/templates/base.html：懸停延遲。

    $(function() {
        var timer = null;
        $('.user_popup').hover(
            function(event) {
                // mouse in event handler
                var elem = event.currentTarget;
                timer = setTimeout(function() {
                    timer = null;
                    // popup logic goes here
                }, 1000);
            },
            function(event) {
                // mouse out event handler
                var elem = event.currentTarget;
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
            }
        )
    });

setTimeout()函式在瀏覽器環境中才可用。 它需要兩個引數，函式和毫秒單位的時間。 setTimeout()的效果是函式在給定的延遲後被呼叫。 所以我添加了一個函式（現在是空的），將在懸停事件的一秒鐘後被呼叫。 由於JavaScript語言中的閉包機制，此函式可以訪問在外部作用域中定義的變數，例如elem。

我將timer物件儲存在hover()呼叫之外定義的timer變數中，以使timer物件也可以被“mouse out”處理程式訪問。 我需要這麼做的原因是為了獲得良好的使用者體驗。 如果使用者將滑鼠指標移動到其中一個使用者連結中，並在移動它之前停留了半秒鐘，我不希望該timer繼續執行並呼叫顯示彈出視窗的函式。 所以我的滑鼠移出事件處理程式檢查是否有一個活動的timer物件，如果有，就取消它。

Ajax請求

Ajax請求不是一個新話題了，因為我已經在第十四章中已介紹過這個主題，來作為實時語言翻譯功能。 當使用jQuery時，$.ajax()函式向伺服器傳送一個非同步請求。

我要傳送到伺服器的請求將具有類似/user//popup模式的URL，在本章開始時我已經將該URL新增到應用程式中。 這個請求的響應將包含我需要在彈出視窗中插入的HTML。

關於這個請求的直接問題是我需要知道包含在URL中的“username”的值是什麼。 滑鼠進入的事件處理函式是通用的，它將在頁面中找到的所有使用者連結，所以該函式需要從其上下文中確定使用者名稱。

elem變數包含懸停事件中的目標元素，它是包裹<a>元素的<span>元素。 為了提取使用者名稱，我可以從<span>開始瀏覽DOM，移至第一個子元素，即<a>元素，然後從中提取文字，這就是在網址中要使用的使用者名稱 。 使用jQuery的DOM遍歷函式，可以很簡單地做到：

elem.first().text().trim()

應用於DOM節點的first()函式返回其第一個子節點。 text()函式返回節點的文字內容。 該函式不會對文字進行任何修剪，例如，如果在一行中有<a>，在下一行中有文字，在另一行中有</a>，text()將返回文本週圍的所有空白。 為了消除所有空白並只留下文字，我使用了名為trim()的JavaScript函式。

這就是我需要向伺服器發出請求的所有資訊：

app/templates/base.html：XHR請求。

    $(function() {
        var timer = null;
        var xhr = null;
        $('.user_popup').hover(
            function(event) {
                // mouse in event handler
                var elem = $(event.currentTarget);
                timer = setTimeout(function() {
                    timer = null;
                    xhr = $.ajax(
                        '/user/' + elem.first().text().trim() + '/popup').done(
                            function(data) {
                                xhr = null
                                // create and display popup here
                            }
                        );
                }, 1000);
            },
            function(event) {
                // mouse out event handler
                var elem = $(event.currentTarget);
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                else if (xhr) {
                    xhr.abort();
                    xhr = null;
                }
                else {
                    // destroy popup here
                }
            }
        )
    });

程式碼中，我在外部範圍中定義了一個新變數xhr。 這個變數將儲存我通過呼叫$ .ajax()來初始化的非同步請求物件。 不幸的是，當直接在JavaScript端構建URL時，我無法使用Flask中的url_for()，所以在這種情況下，我必須顯式連線URL的各個部分。

$ .ajax()呼叫返回一個promise，這是一個代表非同步操作的特殊JavaScript物件。 我可以通過新增.done(function)來附加一個完成回撥函式，所以一旦請求完成，我的回撥函式就會被呼叫。 回撥函式將接收到的響應作為引數，你可以在上面的程式碼中看到，我將其命名為data。 這將是我要放入popover的HTML內容。

但在我們獲得彈窗之前，還有一個細節需要處理，以便給予使用者一個良好的體驗。 回想一下之前新增的邏輯，如果使用者在觸發滑鼠進入事件之後的一秒內將滑鼠指標移出<span>，將觸發取消彈窗的邏輯。 同樣的邏輯也需要應用於非同步請求，所以我添加了第二個子句來放棄我的xhr請求物件（如果存在）。

彈窗的建立和銷燬

最後我使用在Ajax回撥函式中傳遞給我的data引數來建立我的彈窗元件：

app/templates/base.html：顯示彈窗。

                                function(data) {
                                    xhr = null;
                                    elem.popover({
                                        trigger: 'manual',
                                        html: true,
                                        animation: false,
                                        container: elem,
                                        content: data
                                    }).popover('show');
                                    flask_moment_render_all();
                                }

彈出視窗的實際建立非常簡單，Bootstrap的popover()函式完成設定所需的所有工作。 彈出視窗的選項作為引數給出。 我已經用manual觸發模式，HTML內容，沒有淡入淡出的動畫（這樣它就會更快地出現和消失）配置了這個彈出視窗，並且我已經將父元素設定為<span>元素本身，所以懸停行為通過繼承擴充套件到彈出視窗。 最後，我將Ajax回撥函式的data引數作為content引數的值。

popover()呼叫建立了一個彈窗元件，該元件也具有一個名為popover()的方法來顯示彈窗。因此我不得不新增第二個popover('show')呼叫來將彈窗顯示到頁面中。

彈出視窗的內容包括第十二章中通過Flask-Moment外掛生成的“最後訪問”日期。 文件中提到，當通過Ajax新增新的Flask-Moment元素時，需要呼叫flask_moment_render_all()函式來適當地渲染這些元素。

現在剩下的就是完善滑鼠移出事件處理程式上的刪除彈出視窗邏輯。 如果使用者將滑鼠移出目標元素，該處理程式已經具有中止彈出操作的邏輯。 如果這些條件都不適用，那麼這意味著彈出視窗當前顯示並且使用者正在離開target區域，所以在這種情況下，對目標元素的popover('destroy')呼叫將正確地執行移除和清理。

app/templates/base.html：銷燬彈窗。

                function(event) {
                    // mouse out event handler
                    var elem = $(event.currentTarget);
                    if (timer) {
                        clearTimeout(timer);
                        timer = null;
                    }
                    else if (xhr) {
                        xhr.abort();
                        xhr = null;
                    }
                    else {
                        elem.popover('destroy');
                    }
                }