前端每日實(shí)戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)查詢 github 用戶的應(yīng)用（內(nèi)含 2

OnlyLing 發(fā)布于2019-08-29 17:18 / 3387人閱讀

摘要：令下半部分的子元素豎向排列橫向排列三組數(shù)據(jù)，每項(xiàng)之間加入細(xì)分隔線設(shè)置跳轉(zhuǎn)到的鏈接樣式和懸停效果至此，下半部分布局完成。接下來用偽元素把頭像圖片作為整體背景到這里，整體的靜態(tài)布局就完成了。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/oQGqaG

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

第 1 部分：
https://scrimba.com/p/pEgDAM/cEPkVUg

第 2 部分：
https://scrimba.com/p/pEgDAM/crp63TR

（因?yàn)?scrimba 不支持 web animation api，第 2 部分末尾的動(dòng)畫效果在視頻中看不到，請(qǐng)參考 codepen）

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

這是一個(gè)讀取 github 用戶的應(yīng)用，在搜索框內(nèi)輸入用戶名，點(diǎn)擊搜索后，就會(huì)通過 github 的 open api 取得用戶信息，填寫到下方的卡片中。

整個(gè)應(yīng)用分成 3 個(gè)步驟開發(fā)：靜態(tài)的頁面布局、從 open api 讀取數(shù)據(jù)并綁定到頁面中、增加動(dòng)畫效果。

一、頁面布局

定義 dom，整體結(jié)構(gòu)分成上部的表單和下部的用戶卡片：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #383838;
}

定義應(yīng)用容器的尺寸：

.app {
    width: 320px;
    height: 630px;
    font-family: sans-serif;
    position: relative;
}

這是表單的 dom 結(jié)構(gòu)，2 個(gè)表單控件分別是文本輸入框 #username 和搜索按鈕 #search，因?yàn)楹竺娴哪_本要引用這 2 個(gè)控件，所以為它們定義了 id 屬性，接下來在 css 中也使用 id 選擇器：

令 2 個(gè)表單控件橫向排列：

form {
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
}

分別設(shè)置 2 個(gè)表單控件的樣式：

input {
    border: none;
    font-size: 14px;
    outline: none;
    border-radius: inherit;
    padding: 0 8px;
}
  
#username {
    flex-grow: 1;
    background-color: rgba(255, 255, 255, 0.9);
    color: #42454e;
}
  
#search {
    background-color: rgba(0, 97, 145, 0.75);
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    margin-left: 8px;
    cursor: pointer;
}

為按鈕增加懸停和點(diǎn)擊的交互效果：

#search:hover {
    background-color: rgba(0, 97, 145, 0.45);
}

#search:active {
    transform: scale(0.98);
    background-color: rgba(0, 97, 145, 0.75);
}

至此，表單布局完成，接下來做用戶卡片布局。
用戶卡片的 dom 結(jié)構(gòu)如下，卡片分成上半部分 .header 和下半部分 .footer，上半部分包括頭像 .avatar、名字 .name 和位置 .location，下半部分包括一組詳細(xì)的數(shù)據(jù) .details 和一個(gè)跳到 github 的鏈接 .to-github：


    
        
        Octocat
        San Francisco
    
    
        
            Repositories111
            Followers
222
            Following
333
        
        go to github

令卡片的上半部分和下半部分豎向排列，并分別設(shè)置兩部分的高度，大約是上半部分占卡片高度的三分之二，下半部分占卡片高度的三分之一，此時(shí)可以看出卡片的輪廓了：

.profile {
    width: 320px;
    position: absolute;
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}

.header {
    height: 380px;
    background-color: rgba(0, 97, 145, 0.45);
}

.footer {
    height: 180px;
    background-color: rgba(0, 97, 145, 0.75);
}

令卡片上半部分的子元素豎向排列：

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

設(shè)置頭像圖片，樣式為描邊的圓形，因?yàn)轭^像圖片在后面還會(huì)用到，所以把它存儲(chǔ)到變量 --avatar 中：

.profile {
    --avatar: url("https://avatars3.githubusercontent.com/u/583231?v=4");
}

.avatar {
    width: 140px;
    height: 140px;
    background-image: var(--avatar);
    margin: 70px 0 0 0;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 
        0 0 0 0.8em rgba(0, 0, 0, 0.2),
        0 0 0 1em rgba(161, 220, 255, 0.35);
}

設(shè)置名字和位置信息的樣式，文字為白色：

.name {
    margin: 50px 0 0 0;
    color: white;
    font-size: 28px;
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.location {
    margin: 5px 0 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-weight: normal;
}

至此，上半部分的布局完成，接下來布局下半部分。
令下半部分的子元素豎向排列：

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

橫向排列三組數(shù)據(jù)，每項(xiàng)之間加入細(xì)分隔線：

.details {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin: 40px 0 0 0;
}

.details li {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 0 6px;
}

.details li span {
    display: block;
    color: rgba(255, 255, 255, 0.8);
}

.details li:not(:first-child) {
    border-left: 2px solid rgba(255, 255, 255, 0.15);
}

設(shè)置跳轉(zhuǎn)到 github 的鏈接樣式和懸停效果：

.to-github {
    width: 200px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 20px;
    transition: 0.3s;
}

.to-github:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

至此，下半部分布局完成。
接下來用偽元素把頭像圖片作為整體背景：

.profile {
    position: relative;
    overflow: hidden;
}

.profile::before {
    content: "";
    position: absolute;
    width: calc(100% + 20px * 2);
    height: calc(100% + 20px * 2);
    background-image: var(--avatar);
    background-size: cover;
    z-index: -1;
    margin: -20px;
    filter: blur(10px);
}

到這里，整體的靜態(tài)布局就完成了。

二、綁定數(shù)據(jù)

為了綁定數(shù)據(jù)，我們引入一個(gè)羽量級(jí)的模板庫：

把卡片 .profile 包含的 dom 結(jié)構(gòu)改寫為 html 模板 #template，其中的 o 代表綁定的數(shù)據(jù)數(shù)據(jù)對(duì)象：

聲明一個(gè)假數(shù)據(jù)對(duì)象 mockData，它的數(shù)據(jù)結(jié)構(gòu)與 github open api 的數(shù)據(jù)結(jié)構(gòu)是一致的：

let mockData = {
    "avatar_url": "https://avatars3.githubusercontent.com/u/583231?v=4",
    "name": "The Octocat",
    "location": "San Francisco",
    "public_repos": 111,
    "followers": 222,
    "following": 333,
    "html_url": "https://github.com/octocat",
}

定義一個(gè)把數(shù)據(jù)綁定到 html 模板的函數(shù) render(container, data)，第 1 個(gè)參數(shù) container 表示 dom 容器，模板內(nèi)容將填充在此容器中；第 2 個(gè)參數(shù)是數(shù)據(jù)對(duì)象。在頁面載入時(shí)調(diào)用 render() 方法，把 mockData 作為參數(shù)傳入，此時(shí)看到的效果和純靜態(tài)的效果一致，但用戶卡片已經(jīng)改為動(dòng)態(tài)創(chuàng)建了：

window.onload = render(document.getElementsByClassName("profile")[0], mockData)

function render(container, data) {
    container.innerHTML = tmpl("template", data)
    container.style.setProperty("--avatar", `url(${data.avatar_url})`)
}

定義一個(gè)從 github open api 讀取用戶信息的方法 getData(username)，然后調(diào)用 render() 方法把用戶信息綁定到 html 模板。同時(shí)，把 window.onload 綁定的事件改為調(diào)用 getData() 方法，此時(shí)看到的效果仍和純靜態(tài)的效果一致，但數(shù)據(jù)已經(jīng)變成動(dòng)態(tài)讀取了：

window.onload = getData("octocat")

function getData(username) {
    let apiUrl = `https://api.github.com/users/${username}`
    fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => render(document.getElementsByClassName("profile")[0], data))
}

為表單的 search 按鈕綁定點(diǎn)擊事件，實(shí)現(xiàn)搜索功能。可以查一下自己的 github 帳號(hào)試試看：

document.getElementById("search").addEventListener("click", () => {
    let username = document.getElementById("username").value.replace(/[ ]/g, "")
    if (username == "") {
        return
    }
    getData(username)
})

三、增加動(dòng)畫效果

為了能讓用戶感受到每次搜索后數(shù)據(jù)的變化過程，我們?cè)黾右稽c(diǎn)動(dòng)畫效果。創(chuàng)建一個(gè) update(data) 函數(shù)來處理動(dòng)畫和渲染邏輯，同時(shí)把 getData() 函數(shù)的最后一步改為調(diào)用 update() 函數(shù)：

function getData(username) {
    let apiUrl = `https://api.github.com/users/${username}`
    fetch(apiUrl)
        .then((response) => response.json())
        // .then((data) => render(document.getElementsByClassName("profile")[0], data))
        .then(update)
}

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    render(current, data)
}

當(dāng)頁面首次載入時(shí)，不需要?jiǎng)赢嫞苯愉秩灸J(rèn)的用戶信息即可。變量 isInitial 表示本次調(diào)用是否是在初始化頁面時(shí)調(diào)用的，若是，就直接渲染。若不是，下面會(huì)執(zhí)行動(dòng)畫效果。

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }
}

動(dòng)畫的過程是：創(chuàng)建一張新卡片，把數(shù)據(jù)綁定到新卡片上，然后把當(dāng)前卡片移出視圖，再把新卡片移入視圖。下面的變量 next 代表新創(chuàng)建的卡片，把它定位到當(dāng)前卡片的右側(cè)：

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }

    let next = document.createElement("div")
    next.className = "profile"
    next.style.left = "100%"
    render(next, data)
    current.after(next)
}

因?yàn)閯?dòng)畫分成 2 個(gè)動(dòng)作——當(dāng)前卡片移出和新卡片移入，所以我們定義 2 個(gè)動(dòng)畫效果，變量 animationOut 代表移出動(dòng)畫的參數(shù)，變量 animationIn 代表移入動(dòng)畫的參數(shù)。其中，keyframes 屬性值相當(dāng)于寫 css 動(dòng)畫時(shí)用 @keyframes 定義的關(guān)鍵幀，options 屬性值相當(dāng)于寫 css 動(dòng)畫時(shí) animation 語句后面的參數(shù)，新卡片移入動(dòng)畫有半秒鐘的延時(shí)。

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }

    let next = document.createElement("div")
    next.className = "profile"
    next.style.left = "100%"
    render(next, data)
    current.after(next)

    let animationOut = {
        keyframes: [
            {left: "0", opacity: 1, offset: 0},
            {left: "-100%", opacity: 0, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards"
        }
    }

    let animationIn = {
        keyframes: [
            {left: "100%", opacity: 0, offset: 0},
            {left: "0", opacity: 1, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards",
            delay: 500
        }
    }
}

因?yàn)閯?dòng)畫需異步執(zhí)行，即在當(dāng)前卡片移出的動(dòng)畫結(jié)束后再執(zhí)行新卡片移入的動(dòng)畫，所以我們令當(dāng)前卡片移出的動(dòng)畫結(jié)束后觸發(fā) onfinish 事件，然后再執(zhí)行新卡片移入的動(dòng)畫，同時(shí)把舊卡片刪除掉：

function update(data) {
    let current = document.getElementsByClassName("profile")[0]
    let isInitial = (current.innerHTML == "")

    if (isInitial) {
        render(current, data)
        return
    }

    let next = document.createElement("div")
    next.className = "profile"
    next.style.left = "100%"
    render(next, data)
    current.after(next)

    let animationOut = {
        keyframes: [
            {left: "0", opacity: 1, offset: 0},
            {left: "-100%", opacity: 0, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards"
        }
    }

    let animationIn = {
        keyframes: [
            {left: "100%", opacity: 0, offset: 0},
            {left: "0", opacity: 1, offset: 1}
        ],
        options: {
            duration: 500,
            fill: "forwards",
            delay: 500
        }
    }

    let animate = current.animate(animationOut.keyframes, animationOut.options)
    animate.onfinish = function() {
        current.remove()
        next.animate(animationIn.keyframes, animationIn.options)
    }
}

最后，限定動(dòng)畫效果僅在 .app 容器中展現(xiàn)：

.app {
    overflow: hidden;
}

大功告成！

云服務(wù)器 GPU云服務(wù)器 jstl1.2如何用如何用云服務(wù)器做一個(gè)個(gè)人網(wǎng)站如何用js判斷密碼 js中如何用數(shù)組

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114234.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

OnlyLing

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow.org

閱讀 2547·2023-04-25 19:47
前端每日實(shí)戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)查詢 github 用戶的應(yīng)用（內(nèi)含 2

閱讀 3388·2019-08-29 17:18
vue配置多頁面

閱讀 858·2019-08-29 15:26
微信小程序?qū)崿F(xiàn)連接藍(lán)牙設(shè)備跑步APP

閱讀 3364·2019-08-29 14:17
使用FormData對(duì)象上傳文件

閱讀 1127·2019-08-26 13:49
styled-components 中文文檔翻譯及不完全指北

閱讀 3342·2019-08-26 13:22
JS語句后加不加分號(hào)

閱讀 3027·2019-08-26 10:44
angular2 NgModel` 模塊

閱讀 2698·2019-08-23 16:51

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端每日實(shí)戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)查詢 github 用戶的應(yīng)用（內(nèi)含 2

Octocat

San Francisco

相關(guān)文章

**前端每日實(shí)戰(zhàn) 2018年10月至2019年6月項(xiàng)目匯總（共 20 個(gè)項(xiàng)目）**