前言

全新重構(gòu)升級(jí)的項(xiàng)目vue-bytedanceJob 2.0終于完成了，特此寫一篇文章總結(jié)一下抬探，也是文章Vue全棧技術(shù)重構(gòu)字節(jié)跳動(dòng)招聘網(wǎng)站(上)
的續(xù)篇语婴。本篇文章會(huì)重點(diǎn)介紹網(wǎng)站新版本添加的主要功能，并會(huì)對(duì)有意思的地方詳細(xì)分析，還有就是對(duì)于整個(gè)項(xiàng)目的重新概括（技術(shù)棧）以及項(xiàng)目中一些典型業(yè)務(wù)邏輯的實(shí)現(xiàn)剖析砰左。同時(shí)匿醒，2.0版本的項(xiàng)目還增加了幾個(gè)API類型的自定義組件，比如缠导，進(jìn)度條彈窗廉羔，消息通知，數(shù)據(jù)加載loading等組件僻造，這些組件的功能特點(diǎn)和開發(fā)過程我也會(huì)進(jìn)行解析憋他。所以下面的介紹是干貨滿滿，看完了別忘記點(diǎn)贊留言額髓削！

新增加的需求

已實(shí)現(xiàn)

• 用戶通過郵箱登錄賬號(hào)
• 選擇本地簡歷文件上傳
• 解析本地上傳的簡歷文件
• 保存新編寫的簡歷
• 預(yù)覽最新的簡歷
• 簡歷文件下載到本地
• 各個(gè)頁面數(shù)據(jù)加載loading提示
• 職位搜索框的動(dòng)態(tài)吸頂
• 簡歷保存取消操作欄動(dòng)態(tài)吸底
• 添加部分頁面切換時(shí)的動(dòng)畫效果
• 項(xiàng)目整體的優(yōu)化

未實(shí)現(xiàn)

• 郵箱注冊(cè)賬號(hào)
• 手機(jī)號(hào)登錄
• 簡歷投遞
• 項(xiàng)目進(jìn)一步的優(yōu)化

部分屏幕截圖

簡歷預(yù)覽頁面

image

簡歷編輯頁面

image

除了以上列出來的需求已全部實(shí)現(xiàn)之外竹挡，針對(duì)于一些功能的重構(gòu)也有很多。包括幾個(gè)可以使用API方式調(diào)用的組件也是通過自己手動(dòng)開發(fā)封裝實(shí)現(xiàn)的立膛，并且替換了在上一個(gè)版本中使用第三方組件庫引入的組件揪罕。項(xiàng)目最后的展示效果實(shí)際測試下來，在業(yè)務(wù)的整體結(jié)合和組件基礎(chǔ)功能的定制性上有了很大的改善宝泵，不僅是沉余的代碼變少了好啰，而且在業(yè)務(wù)邏輯上也更吻合了。

有了很多改進(jìn)的地方儿奶，也有不足的地方框往，相比于第三方成熟的類庫在測試用例上不夠全面，部分地方還需要進(jìn)一步的測試改進(jìn)闯捎。其次如果你需要引入到自己的項(xiàng)目中使用這些組件是需要進(jìn)行二次開發(fā)的椰弊，因?yàn)檫@些都是業(yè)務(wù)組件而不是通用組件。如果你在使用的過程中有問題或者好的建議瓤鼻，歡迎提issues!

新增加的三個(gè)API組件

以下的組件均支持API的方式調(diào)用秉版，本項(xiàng)目各組件的調(diào)用方法掛載到了Vue實(shí)例的原型對(duì)象上，根據(jù)具體用例你也可以單獨(dú)引入到特定文件內(nèi)使用 娱仔，各組件詳細(xì)介紹如下

數(shù)據(jù)加載組件Loading

image

Loading組件基本的使用方式同大多數(shù)類庫是一樣的沐飘，我也是參考了它們的API設(shè)計(jì)方式和參數(shù)傳遞方式實(shí)現(xiàn)的。圖上顯示的loading有兩種調(diào)用狀態(tài)牲迫，一個(gè)是局部調(diào)用（通過指令的方式）耐朴，還有就是方法調(diào)用，這里以簡化版代碼做一個(gè)演示盹憎。

統(tǒng)一說明：代碼演示中this均為Vue實(shí)例

API方式使用

/*
@params `position`是全屏`loading`具體的定位信息筛峭，默認(rèn)為`0`，可以根據(jù)需求適當(dāng)調(diào)整其位置
*/ 

const  loading = this.$loading({ position: { top: 0, left: 0, right: 0, bottom: 0 } });

// 在適當(dāng)?shù)膶?shí)際關(guān)閉
loading.close()

以指令的方式調(diào)用

<template>
  <div v-loading.scrollFixed="true"></div>
</template>

指令的綁定值可以用一個(gè)組件狀態(tài)變量代替陪每，以便靈活控制loading狀態(tài)影晓，這里以簡化版代碼代替
scrollFixed是支持傳遞的指令修飾符镰吵，其作用是當(dāng)被綁定loading的DOM元素滾動(dòng)到頁面視口之外時(shí)，loading圖標(biāo)永遠(yuǎn)居中顯示疤祭，小伙伴們不用考慮元素滾動(dòng)帶來loading一起滾動(dòng)并消失在視口內(nèi)的煩惱了饵婆，想想是不是很酸爽呢！

查看組件代碼點(diǎn)這里

進(jìn)度條彈窗組件popup-progress

image

popup-progress組件可以認(rèn)為是彈出式進(jìn)度條組件侨核，由于沒有想到更好的名字暫且先這樣命名吧草穆。使用過一些類庫組件的同學(xué)很容易能想到他就是結(jié)合了彈窗alert和進(jìn)度條progress設(shè)計(jì)的搓译。由于屬于是全屏組件,這里又引出了js眾多設(shè)計(jì)模式之一的單例模式的概念。這個(gè)組件設(shè)計(jì)的時(shí)候也是運(yùn)用了此模式些己，跟大多數(shù)彈框類的組件一樣也算是一個(gè)比較經(jīng)典的實(shí)現(xiàn)方式吧豌鸡。那么它跟其他模態(tài)框組件不同的一點(diǎn)是什么呢?

由于彈框中的滾動(dòng)條是一個(gè)不斷變化的狀態(tài)，調(diào)用此組件的時(shí)候跟別的返回Promise的一些組件就不一樣了轴总，比如alert,confirm,prompt這類組件等等怀樟。這些組件之所以可以返回promise是組件掛載后需要等待用戶操作狀態(tài)盆佣，不經(jīng)過用戶手動(dòng)操作狀態(tài)組件自身的狀態(tài)是固定不變的，這跟js中的promise頗為相像共耍。所以組件調(diào)用返回值為promise也就不足為奇了。但是本文中的popup-progress就不一樣了穆咐，為了符合業(yè)務(wù)需要字旭，組件在掛載之后，進(jìn)度條的進(jìn)度是一個(gè)需要變化的值拍柒。顯然通過向組件傳遞固定狀態(tài)值屬性的方式就不行了屈暗，所以組件創(chuàng)建后返回實(shí)例自身更合適脂男。這樣的處理在組件被調(diào)用的上線文環(huán)境中返回了組件實(shí)例自身种呐，而不是通過組件初始化的時(shí)候傳遞函數(shù)等復(fù)雜的數(shù)據(jù)類型參數(shù)以便在組件內(nèi)部處理。這種設(shè)計(jì)方式讓組件注冊(cè)監(jiān)聽自定義事件也頗為方便堕油，不僅可以鏈?zhǔn)降恼{(diào)用API肮之，而且我個(gè)人認(rèn)為這比向組件傳遞監(jiān)聽器函數(shù)的參數(shù)的方式更優(yōu)雅掉缺。說了這么多，唯有代碼演示才更直觀戈擒。

// 創(chuàng)建進(jìn)度條彈窗
const popPro = this.$popupProgress();

//在具體的使用用例中更新`popPro`的進(jìn)度值， 這里用`setInterval`模擬演示

const timer = setInterval(() => {
  //控制進(jìn)度條的進(jìn)度的值這里為`value`搜囱，值需要是`1-100`之間的數(shù)
  popPro.value += 10;
}, 300);

// 監(jiān)聽上傳終止事件（點(diǎn)擊`取消`按鈕后觸發(fā)）
popPro.$on("abort", () => {
  //終止上傳過程后的操作柑土， 關(guān)閉彈窗進(jìn)度條
    popPro.close()
});
//當(dāng)進(jìn)度條進(jìn)度為`100%`的裝態(tài)時(shí)觸發(fā)`success`事件
popPro.$on("success", () => {
  clearInterval(timer);
  // 關(guān)閉彈窗進(jìn)度條
    popPro.close()
});

上面注冊(cè)事件的代碼可以簡寫為

this.$popupProgress()
  .$on("abort", () => {
     
  })
  .$on("success", () => {
    
  });

至此有關(guān)popup-progress組件的全部分析就到這了稽屏，如果您有好的建議或問題歡迎提issue

查看代碼點(diǎn) https://github.com/konglingwen94/vue-bytedanceJob/tree/2.0/src/components/popup-progress

消息通知組件message

image

引言

message組件是日常業(yè)務(wù)開發(fā)中使用比較多的狐榔，可能追求快捷開發(fā)的同學(xué)直接就引入通用的類庫了（我之前就是這么做的）。通用類庫的組件有一個(gè)特點(diǎn)薄腻，它之所以通用是因?yàn)樵诠δ茉O(shè)計(jì)上考慮了很多的業(yè)務(wù)場景和用例庵楷，自然包含的功能就很豐富。但是對(duì)于需要長期維護(hù)更新的項(xiàng)目來說就會(huì)帶來很多問題咐蚯，首先通用組件的UI風(fēng)格和自身業(yè)務(wù)的需求并不恰好一致蜓斧，其次代碼量會(huì)有沉余，這些都是不可規(guī)避的問題看疙。所以當(dāng)我們?cè)谟龅筋愃频臉I(yè)務(wù)需求時(shí)，自己動(dòng)手實(shí)現(xiàn)往往是更好的選擇施禾，這樣不僅會(huì)使項(xiàng)目整體的代碼更聚合搁胆，與此同時(shí)我們自身的技術(shù)水平也會(huì)有很大提高。

基本介紹

message組件有三種消息狀態(tài)分別為成功攀例、失敗顾腊、警告杂靶，對(duì)于一般復(fù)雜度的項(xiàng)目應(yīng)該夠用了。麻雀雖小吗垮，五臟俱全烁登，消息通知類組件應(yīng)該有的功能本組件都有，雖不如通過的輪子可傳遞的參數(shù)多樣防泵。僅以本項(xiàng)目的用例說的話足夠用了捷泞，有興趣的同學(xué)可以基于此二次開發(fā)寿谴。歡迎提PR和issue。組件API的使用方式也保持了通用的設(shè)計(jì)方式咏瑟。具體演示如下

// 這里以成功的消息狀態(tài)舉例痪署，其他兩種同理
this.$message({message:"成功",type:"success"})

// 支持使用消息類型的別名直接調(diào)用
this.$message.success('成功')

// 支持傳遞消息關(guān)閉的時(shí)間參數(shù)狼犯，默認(rèn)為`3000ms`

this.$message({message:"成功",duration:2000})

message組件和上面介紹的popup-progress組件相反领铐，API底層的設(shè)計(jì)模式是工廠模式宋舷。所有已創(chuàng)建的組件實(shí)例在銷毀前都存放到一個(gè)隊(duì)列中。像代碼中創(chuàng)建組件的方法每調(diào)用一次都會(huì)在視圖上添加一個(gè)新消息音诈。顯示效果就如圖上那樣依次排列绎狭。所以在使用的時(shí)候可以多次的調(diào)用儡嘶。

查看代碼點(diǎn) https://github.com/konglingwen94/vue-bytedanceJob/tree/2.0/src/components/message

遞歸思想在業(yè)務(wù)中的運(yùn)用

image

image

看到這兩個(gè)典型用例的演示社付，好像跟標(biāo)題中要說的遞歸沒有聯(lián)系，其實(shí)這里面的一個(gè)函數(shù)的實(shí)現(xiàn)方式正是用了遞歸的思想燕鸽√淅保回到圖片中的功能本身，頁面在滾動(dòng)過程中某一部分動(dòng)態(tài)吸底或吸頂并不復(fù)雜党远，這里要說的是其中的一個(gè)細(xì)節(jié)實(shí)現(xiàn)富弦。

我們知道DOM元素的一個(gè)屬性值offsetTop。它代表的是相對(duì)最近的定位父級(jí)元素頂部的距離偏移济似，那么這里又印出來了另外一個(gè)屬性offsetParent,它代表的就是元素最近的父級(jí)定位元素盏缤。有了這兩個(gè)屬性唉铜，我們可以輕松的獲取元素各個(gè)方向距離父元素的偏移距離。那如果我們要獲取元素距離頁面最頂部的距離應(yīng)該怎么拿到潭流？如果元素的offsetParent屬性是根元素html的話，直接獲取元素的offsetTop屬性就行了碰声。對(duì)于有多個(gè)父級(jí)定位元素的話胰挑，我們就需要手動(dòng)逐級(jí)的查找元素的offsetParent元素的offsetTop進(jìn)行累加計(jì)算。這種方式最終也可以正確的獲取到結(jié)果豺谈。問題是在頁面布局復(fù)雜的場景下這個(gè)方法就不好使了贡这。如果要計(jì)算的元素層級(jí)嵌套很深，父級(jí)定位元素又多的話計(jì)算量是非常大而且容易出錯(cuò)丽惭。我把逐級(jí)向上查找父級(jí)元素的offsetTop值看成是一個(gè)手動(dòng)的遞歸過程辈双，既然可以用程序解決的問題湃望，最終都將用程序來解決。直接放代碼出來吧

function getOffsetTop(node, targetOffsetParentNode, offsetTopSum = 0) {
  offsetTopSum += node.offsetTop;

  if (node.offsetParent !== targetOffsetParentNode) {
    return getOffsetTop(node.offsetParent, targetOffsetParentNode, offsetTopSum);
  }
  return offsetTopSum;
}

//用例：獲取元素`$0`距離根元素頂部的距離`offsetTop`

const offsetTop = getOffsetTop($0,document.documentElement)

有了這個(gè)相對(duì)于根元素的頂部距離跟實(shí)現(xiàn)圖中的效果有什么關(guān)聯(lián)瞳浦？通過比較這個(gè)值和滾動(dòng)容器的滾動(dòng)坐標(biāo)就可以實(shí)現(xiàn)滾動(dòng)切換定位元素的功能了废士，這里就不具體分析了。

功能實(shí)現(xiàn)源代碼

職位搜索欄滾動(dòng)吸頂 這里

簡歷編輯操作欄動(dòng)態(tài)吸底 https://github.com/konglingwen94/vue-bytedanceJob/blob/2.0/src/views/ResumeEditor.vue#L974

查看本項(xiàng)目更多工具函數(shù)點(diǎn) 這里

服務(wù)端接口抓取

關(guān)于服務(wù)端接口是如何抓取的诅挑，這里我也簡單談一下項(xiàng)目整個(gè)后端接口代理的整個(gè)過程泛源。從最開始在瀏覽器開發(fā)者工具提供的Network面板里面逐個(gè)查找达箍，接著就是用Postman一個(gè)一個(gè)的實(shí)際調(diào)試铺厨。說到這我想說一下自己爬數(shù)據(jù)接口的一點(diǎn)心得硬纤，用工具調(diào)試接口和用代碼模擬調(diào)試真的是兩回事筝家。由于運(yùn)行環(huán)境的不一致邻辉，往往會(huì)出現(xiàn)一些意料之外的問題。這里我就拿登錄類強(qiáng)依賴接口狀態(tài)的接口請(qǐng)求舉例子莹菱，這類的接口由于需要身份驗(yàn)證需要很多私密字段攜帶到請(qǐng)求頭里面發(fā)送到服務(wù)端吱瘩，有一些請(qǐng)求頭字段是瀏覽器默認(rèn)不允許攜帶的使碾，比如referer,origin等字段，所以需要攜帶這類信息發(fā)送請(qǐng)求的接口在瀏覽器是無法實(shí)現(xiàn)的票摇，所以我們往往需要一個(gè)代理服務(wù)器去轉(zhuǎn)發(fā)這些接口兄朋，其實(shí)本項(xiàng)目也是這么做的，而且代理轉(zhuǎn)發(fā)請(qǐng)求的方式是用一個(gè)第三方中間件實(shí)現(xiàn)的傅事，有興趣的同學(xué)可以點(diǎn)這里查看具體實(shí)現(xiàn)方式峡扩。

除了上面說的這些，讓我采坑比較深的就是token驗(yàn)證類型的請(qǐng)求接口了响鹃，且本項(xiàng)目就是靠驗(yàn)證token的方式實(shí)現(xiàn)的案训，有興趣查看具體實(shí)現(xiàn)過程的同學(xué)在這里

持續(xù)集成

對(duì)于一個(gè)完整上線的項(xiàng)目是離不開持續(xù)集成這道步驟的强霎。本項(xiàng)目使用的是一個(gè)簡化版的持續(xù)集成配置，首先上線的服務(wù)器是購買某電商的轩触，項(xiàng)目自身用到持續(xù)部署插件借鑒了知名開源項(xiàng)目Vue的使用方式yorkie。package.json文件的配置為

{
  "gitHooks": {
    "pre-push": "sh deploy.sh"
  }
}

前提是需要編寫一個(gè)部署腳本deploy.sh伐弹，當(dāng)項(xiàng)目每次提交到遠(yuǎn)程倉庫的時(shí)候就會(huì)觸發(fā)gitHooks配置好的腳本命令榨为，然后就靜靜等待程序自動(dòng)部署就ok了柠逞。

腳本部署文件內(nèi)容可以按如下配置,需要添加更多步驟的話直接編寫即可。

!/usr/

npm run build  # 需要構(gòu)建到`server`目錄

scp -r server user@192.168.1.1:/var/www/projectname

項(xiàng)目構(gòu)建發(fā)布后逗鸣，還需要登錄云服務(wù)器開啟服務(wù)绰精，本項(xiàng)目使用的是pm2，在終端運(yùn)行以下命令開啟服務(wù)

cd /var/www/projectname 

pm2 start app.js

總結(jié)

通過全新重構(gòu)升級(jí)的基于Vue的單頁面應(yīng)用卿樱，自己除了對(duì)Vue的理解和認(rèn)識(shí)提高了一個(gè)層次之外硫椰，對(duì)于項(xiàng)目重構(gòu)靶草，升級(jí)這一系列要做的工作又熟練了一遍。從開始的API接口分析爬取裕寨，接著是對(duì)需求的整理分析派继，再到代碼的最終編寫完成，最后就是一遍又一遍的測試和持續(xù)集成庆猫。從而我對(duì)項(xiàng)目的開發(fā)步驟流程也有了更好的梳理和把握纫普，同時(shí)自己也有很多不足的地方需要持續(xù)的補(bǔ)充和學(xué)習(xí)好渠。

另外也希望對(duì)看過本篇文章的你在學(xué)習(xí)上有所幫助，共勉一下假栓，一起加油哇匾荆！

支持

如果您讀完文章感覺還不錯(cuò)的話歡迎點(diǎn)贊，謝謝简卧！

如果您有好的想法和建議歡迎在評(píng)論區(qū)留言烤芦！

文章中有錯(cuò)誤的地方歡迎指出，謝謝铜涉！

查看

項(xiàng)目倉庫地址：https://github.com/konglingwen94/vue-bytedanceJob

項(xiàng)目線上預(yù)覽：http://123.56.124.33:3000