我打造了一個簡歷在線生成應用
前言
半個月前，我寫了一篇文章如何書寫一份好的互聯網校招簡歷，目的是幫助即將開始投遞校招的同窗更好的完善本身的簡歷css
在文章中也立下了一個Flaghtml
看了一下Github的 commit記錄，截止目前大概花了一週的時間，把心中所設想的方案作了出來，也許不完美，但我想應該也能幫助到部分同窗前端
好東西固然展現三遍，O(∩_∩)O~~vue
對模板樣式(顏色，排版)不滿意的，懂前端魔法的同窗能夠clone倉庫,施展一下本身的魔法美化node
對項目感興趣的同窗也歡迎貢獻一下本身喜歡的簡歷模板（代碼），理論上不限制開發技術棧，固然也歡迎提issues或者建議react
本文主要講一下此項目的設計思路，技術方案以及遇到的一些問題與解決思路（用了很多hack技巧）,還有後續的規劃webpack
項目設計
佈局
整個應用的基本頁面結構git
<body>
<header>
<!-- 導航 -->
<nav></nav>
</header>
<div>
<!-- 展現簡歷 -->
<iframe></iframe>
<!-- 控制區域 -->
<div></div>
</div>
</body>
複製代碼
可能有朋友在這裏會疑惑爲何要用iframe？github
這裏先給你們簡單介紹一下，後面在講技術方案的時候會給你們解釋web
在個人設想中簡歷部分只有展現邏輯，能夠看做是一個獨立的純靜態頁面
既然是隻作展現，那麼不管什麼前端魔法均可以作這個工做，因而爲了方便各類魔法師施法，就把這一塊獨立了出來，簡歷模板貢獻者也只須要關心本身如何復原一個靜態頁面就行，其他的交互邏輯都交給父頁面統一處理
技術選型
Vanilla JS——世界上最輕量的JavaScript框架（沒有之一） ---- 原生js
整個應用的主體部分採用原生js實現
簡歷展現部分理論上能夠採用任意前端技術棧實現，與父頁面低耦合
通訊
- 經過導航欄切換各類簡歷模板
- 簡歷上的改動自動同步到控制區域中的頁面描述信息
- 控制區域中改動頁面描述信息，簡歷內容實時更新
描述簡歷
- 使用json 對簡歷的結構與內容進行描述
- 一個模板對應一個json
頁面描述信息展現
- 使用JSON描述簡歷上的各類信息
- 提供一個JSON編輯器
- 這裏json編輯器採用 jsoneditor
數據存取
- 整個數據流是單向的，外部負責更新，內部（簡歷展現部分）只負責讀取
- 數據存放在本地，所以不擔憂我的信息泄露
- 這裏採用
localStorage
初版效果
下面就介紹項目實現的關鍵部份內容
實現
項目目錄結構
./config webpack配置文件
├── webpack.base.js -- 公共配置
├── webpack.config.build.js -- 生產環境特有配置
├── webpack.config.dev.js -- 開發環境特有配置
├── webpack.config.js -- 引用的配置文件
│
./public 公共靜態資源
├── css
│ └── print.css 打印時用的樣式
│
./src 核心代碼
├── assets 靜態資源css/img
├── constants 常量
│ ├── index.js 存放導航的名稱映射信息
│ ├── schema 存放每一個簡歷模板的默認JSON數據,與pages中的模板一一對應
│ └────── demo1.js
├── pages 簡歷模板目錄
│ └── demo1 -- 其中的一個模板
│
├── utils 工具方法
├── app.js 項目的入口js
├── index.html 項目的入口頁面
複製代碼
約定優於配置
根據約定好的目錄結構，經過自動化的腳本
全部模板都統一在 src/pages/xxx 目錄下
頁面模板約定爲 index.html,該目錄下的全部js文件將被自動添加到webpack的entry中，自動注入到 當前 頁面模板中
例如
./src
├── pages
│ └── xxx
│ └───── index.html
│ └───── index.scss
│ └───── index.js
複製代碼
此處自動化生成entry/page配置代碼可移步至這裏查看
自動生成的結果以下
每一個HTMLWebpackPlugin的內容格式以下
自動生成導航欄
首頁頂部有一個導航欄用於切換簡歷模板的路由
這部分的連接內容若是手動填寫是很無趣的，如何實現自動生成的呢？
首先首頁模板的header nav 部份內容爲
<header>
<nav id="nav">
<%= htmlWebpackPlugin.options.pageNames %>
</nav>
</header>
複製代碼
htmlWebpackPlugin.options 表示 HTMLWebpackPlugin對象的的userOptions屬性
我們上面拿到了了全部Page的title，將全部title使用,鏈接拼接在一塊兒，而後綁定到userOptions.pageNames上，則頁面初次渲染結果就變成了
<header>
<nav id="nav">
abc,demo1,vue1,react1,introduce
</nav>
</header>
複製代碼
有了初次渲染結果，接下來我們寫一個方法把這些內容轉爲a標籤便可
const navTitle = {
'demo1': '模板1',
'react1': '模板2',
'vue1': '模板3',
'introduce': '使用文檔',
'abc': '開發示例'
}
function createLink(text, href, newTab = false) {
const a = document.createElement('a')
a.href = href
a.text = text
a.target = newTab ? '_blank' : 'page'
return a
}
/** * 初始化導航欄 */
function initNav(defaultPage = 'react1') {
const $nav = document.querySelector('header nav')
// 獲取全部模板的連接---處理原始內容
const links = $nav.innerText.split(',').map(pageName => {
const link = createLink(navTitle[pageName] || pageName, `./pages/${pageName}`)
// iframe中打開
return link
})
// 加入自定義的連接
links.push(createLink('Github', 'https://github.com/ATQQ/resume', true))
links.push(createLink('貢獻模板', 'https://github.com/ATQQ/resume/blob/main/README.md', true))
links.push(createLink('如何書寫一份好的互聯網校招簡歷', 'https://juejin.cn/post/6928390537946857479', true))
links.push(createLink('建議/反饋', 'https://www.wenjuan.com/s/MBryA3gI/', true))
// 渲染到頁面中
const t = document.createDocumentFragment()
links.forEach(link => {
t.appendChild(link)
})
$nav.innerHTML = ''
$nav.append(t)
}
initNav()
複製代碼
這樣導航欄就「自動「生成了
自動導出頁面描述
目錄
./src
├── constants
│ ├── index.js
│ ├── schema.js
│ ├── schema
│ ├────── demo1.js
│ ├────── react1.js
│ └────── vue1.js
複製代碼
每一個頁面的默認數據從./src/constants/schema.js中讀取
import abc from './schema/abc'
import demo1 from './schema/demo1'
import react1 from './schema/react1'
import vue1 from './schema/vue1'
export default{
abc,demo1,react1,vue1
}
複製代碼
而每一個模板的描述內容分佈在 schema目錄下，若是讓每一個開發者手動往schema.js添加本身模板，容易形成衝突，因此乾脆自動生成
工具方法移步至這裏查看
/** * 自動建立src/constants/schema.js 文件 */
function writeSchemaJS() {
const files = getDirFilesWithFullPath('src/constants/schema')
const { dir } = path.parse(files[0])
const targetFilePath = path.resolve(dir, '../', 'schema.js')
const names = files.map(file => path.parse(file).name)
const res = `${names.map(n => { return `import ${n} from './schema/${n}'` }).join('\n')} export default{ ${names.join(',')} }`
fs.writeFileSync(targetFilePath, res)
}
複製代碼
數據存取
數據的存取操做在父頁面和子頁面都會用到，抽離爲公共方法
數據存放於localStorage中,以每一個簡歷模板的路由做爲key
./src/utils/index.js
import defaultSchema from '../constants/schema'
export function getSchema(key = '') {
if (!key) {
// 默認key爲路由 如 origin.com/pages/react1
// key就爲 pages/react1
key = window.location.pathname.replace(/\/$/, '')
}
// 先從本地取
let data = localStorage.getItem(key)
// 若是沒有就設置一個默認的再取
if (!data) {
setSchema(getDefaultSchema(key), key)
return getSchema()
}
// 若是默認是空對象的則再取一次默認值
if (data === '{}') {
setSchema(getDefaultSchema(key), key)
data = localStorage.getItem(key)
}
return JSON.parse(data)
}
export function getDefaultSchema(key) {
const _key = key.slice(key.lastIndexOf('/') + 1)
return defaultSchema[_key] || {}
}
export function setSchema(data, key = '') {
if (!key) {
key = window.location.pathname.replace(/\/$/, '')
}
localStorage.setItem(key, JSON.stringify(data))
}
複製代碼
json描述的展現
須要在控制區域展現json的描述信息，展現部分採用 jsoneditor
固然jsoneditor也支持各類數據操做（CRUD）都支持，還提供了快捷操做按鈕
這裏採用cdn的方式引入jsoneditor
<link rel="stylesheet" href="https://img.cdn.sugarat.top/css/jsoneditor.min.css">
<script src="https://img.cdn.sugarat.top/js/jsoneditor.min.js"></script>
複製代碼
初始化
/** * 初始化JSON編輯器 * @param {string} id */
function initEditor(id) {
let timer = null
// 這裏作了一個簡單的防抖
const editor = new JSONEditor(document.getElementById(id), {
// json內容改動時觸發
onChangeJSON(data) {
if (timer) {
clearTimeout(timer)
}
// updatePage方法用於通知子頁面更新
setTimeout(updatePage, 200, data)
}
})
return editor
}
const editor = initEditor('jsonEditor')
複製代碼
展現效果
json數據展現/更新時機
- 由於每次切換路由都會觸發iframe的onload事件
- 因此將獲取editor更新json內容的時機放在這裏
function getPageKey() {
return document.getElementById('page').contentWindow.location.pathname.replace(/\/$/, '')
}
document.getElementById('page').onload = function (e) {
// 更新editor中顯示的內容
editor.set(getSchema(getPageKey()))
}
複製代碼
編寫模板頁面
下面提供了4種方式實現同一頁面
指望的效果
描述文件
在schema目錄下建立頁面的json描述文件,如abc.js
./src
├── constants
│ └── schema
│ └────── abc.js
複製代碼
abc.js
export default {
name: '王五',
position: '求職目標： Web前端工程師',
infos: [
'1:不少文字',
'2:不少文字',
'3:不少文字',
]
}
複製代碼
指望的渲染結構
<div id="resume">
<div id="app">
<header>
<h1>王五</h1>
<h2>求職目標： Web前端工程師</h2>
</header>
<ul class="infos">
<li>1:不少文字<li>
<li>2:不少文字<li>
<li>3:不少文字<li>
</ul>
</div>
</div>
複製代碼
下面開始子編寫代碼
與父頁面惟一相關的邏輯就是須要在子頁面的window上掛載一個refresh方法，用於父頁面主動調用更新
原生js
import { getSchema } from "../../utils"
window.refresh = function () {
const schema = getSchema()
const { name, position, infos } = schema
// ... render邏輯
}
複製代碼
vue
<script>
import { getSchema } from '../../utils';
export default {
data() {
return {
schema: getSchema(),
};
},
mounted() {
window.refresh = this.refresh;
},
methods: {
refresh() {
this.schema = getSchema();
},
},
};
</script>
複製代碼
react
import React, { useEffect, useState } from 'react'
import { getSchema } from '../../utils'
export default function App() {
const [schema, updateSchema] = useState(getSchema())
const { name, position, infos = [] } = schema
useEffect(() => {
window.refresh = function () {
updateSchema(getSchema())
}
}, [])
return (
<div> { /* 渲染dom的邏輯 */ } </div>
)
}
複製代碼
爲方便閱讀，代碼進行了摺疊
首先是樣式，這裏選擇sass預處理語言，固然也能夠用原生css
index.scss
@import './../../assets/css/base.scss';
html,
body,
#resume {
height: 100%;
overflow: hidden;
}
// 上面部分是推薦引入的通用樣式
// 下面書寫咱們的樣式
$themeColor: red;
#app {
padding: 1rem;
}
header {
h1 {
color: $themeColor;
}
h2 {
font-weight: lighter;
}
}
.infos {
list-style: none;
li {
color: $themeColor;
}
}
複製代碼
其次是頁面描述文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="resume">
<div id="app">
</div>
</div>
</body>
</html>
複製代碼
下面就開始使用各類技術棧進行邏輯代碼編寫
原生js
目錄結構
./src
├── pages
│ └── abc
│ └───── index.html
│ └───── index.scss
│ └───── index.js
複製代碼
index.js
import { getSchema } from "../../utils"
import './index.scss'
window.refresh = function () {
const schema = getSchema()
const { name, position, infos } = schema
clearPage()
renderHeader(name, position)
renderInfos(infos)
}
function clearPage() {
document.getElementById('app').innerHTML = ''
}
function renderHeader(name, position) {
const html = ` <header> <h1>${name}</h1> <h2>${position}</h2> </header>`
document.getElementById('app').innerHTML += html
}
function renderInfos(infos = []) {
if (infos?.length === 0) {
return
}
const html = ` <ul class="infos"> ${infos.map(info => { return `<li>${info}</li>` }).join('')} </ul>`
document.getElementById('app').innerHTML += html
}
window.onload = function () {
refresh()
}
複製代碼
Vue
目錄結構
./src
├── pages
│ └── abc
│ └───── index.html
│ └───── index.scss
│ └───── index.js
│ └───── App.vue
複製代碼
index.js
import Vue from 'vue'
import App from './App.vue'
import './index.scss'
Vue.config.productionTip = process.env.NODE_ENV === 'development'
new Vue({
render: h => h(App)
}).$mount('#app')
複製代碼
App.vue
<template>
<div id="app">
<header>
<h1>{{ schema.name }}</h1>
<h2>{{ schema.position }}</h2>
</header>
<div class="infos">
<p
v-for="(info,
i) in schema.infos"
:key="i"
>
{{ info }}
</p>
</div>
</div>
</template>
<script>
import { getSchema } from '../../utils';
export default {
data() {
return {
schema: getSchema(),
};
},
mounted() {
window.refresh = this.refresh;
},
methods: {
refresh() {
this.schema = getSchema();
},
},
};
</script>
複製代碼
React
目錄結構
./src
├── pages
│ └── abc
│ └───── index.html
│ └───── index.scss
│ └───── index.js
│ └───── App.jsx
複製代碼
index.js
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx'
import './index.scss'
ReactDOM.render(
<React.StrictMode> <App /> </React.StrictMode>,
document.getElementById('app')
)
複製代碼
App.jsx
import React, { useEffect, useState } from 'react'
import { getSchema } from '../../utils'
export default function App() {
const [schema, updateSchema] = useState(getSchema())
const { name, position, infos = [] } = schema
useEffect(() => {
window.refresh = function () {
updateSchema(getSchema())
}
}, [])
return (
<div> <header> <h1>{name}</h1> <h2>{position}</h2> </header> <div className="infos"> { infos.map((info, i) => { return <p key={i}>{info}</p> }) } </div> </div>
)
}
複製代碼
jQuery
目錄結構
./src
├── pages
│ └── abc
│ └───── index.html
│ └───── index.scss
│ └───── index.js
複製代碼
index.js
import { getSchema } from "../../utils"
import './index.scss'
window.refresh = function () {
const schema = getSchema()
const { name, position, infos } = schema
clearPage()
renderHeader(name, position)
renderInfos(infos)
}
function clearPage() {
$('#app').empty()
}
function renderHeader(name, position) {
const html = ` <header> <h1>${name}</h1> <h2>${position}</h2> </header>`
$('#app').append(html)
}
function renderInfos(infos = []) {
if (infos?.length === 0) {
return
}
const html = ` <ul class="infos"> ${infos.map(info => { return `<li>${info}</li>` }).join('')} </ul>`
$('#app').append(html)
}
window.onload = function () {
refresh()
}
複製代碼
若是以爲導航欄展現abc不友好，固然也能夠更改
./src
├── constants
│ ├── index.js 存放路徑與中文title的映射
複製代碼
./src/constants/index.js 中加入別名
export const navTitle = {
'abc': '開發示例'
}
複製代碼
子頁面更新
前面在實例化editor的時候有一個 updatePage 方法
若是子頁面有refresh方法則直接 調用其進行頁面的更新，固然在更新以前父頁面會把最新的數據存入到localStorage中
這樣頁面之間實際沒有直接交換數據，一個負責寫，一個負責讀，即便寫入失敗也不影響子頁面讀取原有的數據
function refreshIframePage(isReload = false) {
const page = document.getElementById('page')
if (isReload) {
page.contentWindow.location.reload()
return
}
if (page.contentWindow.refresh) {
page.contentWindow.refresh()
return
}
page.contentWindow.location.reload()
}
function updatePage(data) {
setSchema(data, getPageKey())
refreshIframePage()
}
/** * 初始化JSON編輯器 * @param {string} id */
function initEditor(id) {
let timer = null
// 這裏作了一個簡單的防抖
const editor = new JSONEditor(document.getElementById(id), {
// json內容改動時觸發
onChangeJSON(data) {
if (timer) {
clearTimeout(timer)
}
// updatePage方法用於通知子頁面更新
setTimeout(updatePage, 200, data)
}
})
return editor
}
const editor = initEditor('jsonEditor')
複製代碼
導出pdf
PC端
首先PC端瀏覽器支持打印導出pdf
如何觸發打印呢？
- 鼠標右鍵選擇打印
- 快捷鍵 Ctrl + P
window.print()
我們這裏代碼裏使用第三種方案
如何確保打印的內容只有簡歷部分?
這個就要用到媒體查詢
方式一
@media print {
/* 此部分書寫的樣式還在打印時生效 */
}
複製代碼
方式二
<!-- 引入的css資源只在打印時生效 -->
<link rel="stylesheet" href="./css/print.css" media="print">
複製代碼
只須要在打印樣式中將無關內容進行隱藏便可
基本能作到1比1的還原
移動端
採用jsPDF + html2canvas
- html2canvas 負責將頁面轉爲圖片
- jsPDF負責將圖片轉爲PDF
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
// 導出pdf
// 固然這裏確保圖片資源被轉爲了base64，不然導出的簡歷沒法展現圖片
html2canvas(document.getElementById('page').contentDocument.body).then(canvas => {
//返回圖片dataURL，參數：圖片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默認豎直，尺寸ponits，格式a4[595.28,841.89]
var doc = new jsPDF('', 'pt', 'a4');
//addImage後兩個參數控制添加圖片的尺寸，此處將頁面高度按照a4紙寬高比列進行壓縮
// doc.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
doc.addImage(pageData, 'JPEG', 0, 0, 595.28, 841.89);
doc.save(`${Date.now()}.pdf`);
});
複製代碼
但目前此種導出方式還存在一些問題還沒有解決，後續換用其它方案進行處理
- 不支持超連接
- 不支持iconfont
- 字體的留白部分會被剔除
小結
到這裏整個項目的雛形算完成了
- 導航欄切換簡歷模板
- 在JSON編輯器中改動
json-> 頁面數據更新 - 導出pdf
- 移動端 - jspdf
- 電腦 - 打印
高能操做
高亮變更的內容
訴求：在json編輯器中進行了內容的更新，指望能在簡歷中高亮展現出變更的內容
轉爲技術需求就是指望能監聽到變更的dom，而後高亮
這個地方就用到 MutationObserver了
它提供了監視對DOM樹所作更改的能力
/** * 高亮變化的Dom */
function initObserver() {
// 包含子孫節點
// 將監視範圍擴展至目標節點整個節點樹中的全部節點
// 監視指定目標節點或子節點樹中節點所包含的字符數據的變化
const config = { childList: true, subtree: true, characterData: true };
// 實例化監聽器對象
const observer = new MutationObserver(debounce(function (mutationsList, observer) {
for (const e of mutationsList) {
let target = e.target
if (e.type === 'characterData') {
target = e.target.parentElement
}
// 高亮
highLightDom(target)
}
}, 100))
// 監聽子頁面的body
observer.observe(document.getElementById('page').contentDocument.body, config);
// 由於 MutationObserver 是微任務，微任務後面緊接着就是頁面渲染
// 中止觀察變更
// 這裏使用宏任務，確保此輪Event loop結束
setTimeout(() => {
observer.disconnect()
}, 0)
}
function highLightDom(dom, time = 500, color = '#fff566') {
if (!dom?.style) return
if (time === 0) {
dom.style.backgroundColor = ''
return
}
dom.style.backgroundColor = '#fff566'
setTimeout(() => {
dom.style.backgroundColor = ''
}, time)
}
複製代碼
什麼時候調用 initObserver
固然是在更新頁面以前的時候註冊事件，頁面完成變更渲染後中止監聽
function updatePage(data) {
// 異步的微任務，本輪event loop結束中止觀察
initObserver()
// 同步
setSchema(data, getPageKey())
// 同步 + 渲染頁面
refreshIframePage()
}
複製代碼
效果
點哪改哪
指望效果
訴求：
- 點擊須要修改的部分,就能進行修改操做
- 修改結果在簡歷上與json編輯器中進行內容同步
下面闡述一下實現
1. 獲取點擊的Dom
document.getElementById('page').contentDocument.body.addEventListener('click', function (e) {
const $target = e.target
})
複製代碼
2. 獲取dom內容在頁面中出現的次數與相對位置
- 子頁面只包含展現邏輯，因此須要父頁面作hack操做才能在定位點擊內容在json中對應位置
- 擁有相同內容的dom不止一個，因此須要所有找出來
/** * 遍歷目標Dom樹，找出文本內容與目標一致的dom組 */
function traverseDomTreeMatchStr(dom, str, res = []) {
// 若是有子節點則繼續遍歷子節點
if (dom?.children?.length > 0) {
for (const d of dom.children) {
traverseDomTreeMatchStr(d, str, res)
}
// 相等則記錄下來
} else if (dom?.textContent?.trim() === str) {
res.push(dom)
}
return res
}
// 監聽簡歷頁的點擊事件
document.getElementById('page').contentDocument.body.addEventListener('click', function (e) {
const $target = e.target
// 點擊的內容
const clickText = $target.textContent.trim()
// 只包含點擊內容的節點
const matchDoms = traverseDomTreeMatchStr(document.getElementById('page').contentDocument.body, clickText)
// 點擊的節點在 匹配的 節點中的相對位置
const mathIndex = matchDoms.findIndex(v => v === $target)
// 不包含則不作處理
if (mathIndex < 0) {
return
}
})
複製代碼
3. 獲取jsoneditor中對應的節點
- 與上面邏輯相似
- 先過濾出只包含此節點內容的幾個節點
- 而後根據點擊dom在同內容節點列表中的相對位置進行匹配
// 監聽簡歷頁的點擊事件
document.getElementById('page').contentDocument.body.addEventListener('click', function (e) {
// ...省略上述列出的代碼
// 解除上次點擊的dom高亮
highLightDom($textarea.clickDom, 0)
// 高亮此次的10s
highLightDom($target, 10000)
// 更新jsoneditor中的search內容
editor.searchBox.dom.search.value = clickText
// 主動觸發搜索
editor.searchBox.dom.search.dispatchEvent(new Event('change'))
// 將點擊內容顯示在textarea中
$textarea.value = clickText
// 自動聚焦輸入框
if (document.getElementById('focus').checked) {
$textarea.focus()
}
// 記錄點擊的dom,掛載$textarea上
$textarea.clickDom = e.target
// jsoneditor 搜索過濾的內容爲模糊匹配,好比搜索 a 會匹配 ba,baba,a,aa,aaa
// 根據上面獲得的matchIndex,進行精確匹配全等的json節點
let i = -1
for (const r of editor.searchBox.results) {
// 全等得時候下標才變更
if (r.node.value === clickText) {
i++
// 匹配到json中的節點
if (i === mathIndex) {
// 高亮一下$textarea
$textarea.style.boxShadow = '0 0 1rem yellow'
setTimeout(() => {
$textarea.style.boxShadow = ''
}, 200)
return
}
}
// 手動觸發jsoneditor的next search match 按鈕, 切換jsoneditor中active的節點
editor.searchBox.dom.input.querySelector('.jsoneditor-next').dispatchEvent(new Event('click'))
// active的節點能夠經過下面方式獲取
// editor.searchBox.activeResult.node
}
})
複製代碼
4. 更新節點內容
- 上面兩個步驟將簡歷中的dom與jsoneditor的dom都獲取到了
- 經過textarea輸入的內容
- 將輸入的內容分別更新到這兩個dom上,並把最新的json寫入的localStorage中
// 監聽輸入事件,並作一個簡單的防抖
$textarea.addEventListener('input', debounce(function () {
if (!editor.searchBox?.activeResult?.node) {
return
}
// 激活dom變更事件
initObserver()
// 更新點擊dom
$textarea.clickDom.textContent = this.value
// 更新editor的dom
editor.searchBox.activeResult.node.value = this.value
editor.refresh()
// 更新到本地
setSchema(editor.get(), getPageKey())
}, 100))
複製代碼
這樣就完成了兩側(簡歷/jsoneditor)數據的更新
後續規劃
- 接入更多的框架支持
- 優化pdf的導出
- 超連接
- 字體圖標
- 優化用戶體驗
- 下降jsoneditor的存在感,當前的新增與刪除操做依賴jsoneditor,對不懂前端魔法的同窗不友好
- 優化移動端的交互
- 美化界面
- 加入自動生成代碼模板指令
- 搬運更多的簡歷模板
感謝你能堅持讀到這裏,謝謝捧場,若是你也感興趣歡迎貢獻代碼(簡歷/功能)
相關連接
招聘
筆者在到店事業羣-平臺技術部,歡迎你們加入
相關文章
- 1. 我的簡歷生成器
- 2. VUE2.0+Echarts+Element-ui打造我的簡歷
- 3. 用js生成專業我的簡歷
- 4. 個人在線簡歷
- 5. 我用 Redis 幹掉了一摞簡歷
- 6. 我用 Spring 幹掉了一摞簡歷
- 7. 使用Vue技術棧開發簡歷在線生成器
- 8. 個人我的簡歷線上版
- 9. 打造一個window桌面應用：在線聊天對話機器人
- 10. 從零打造在線版H5頁面生成器
- 更多相關文章...
- • Eclipse 生成jar包 - Eclipse 教程
- • Redis在Java Web中的應用 - Redis教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 我的簡歷生成器
- 2. VUE2.0+Echarts+Element-ui打造我的簡歷
- 3. 用js生成專業我的簡歷
- 4. 個人在線簡歷
- 5. 我用 Redis 幹掉了一摞簡歷
- 6. 我用 Spring 幹掉了一摞簡歷
- 7. 使用Vue技術棧開發簡歷在線生成器
- 8. 個人我的簡歷線上版
- 9. 打造一個window桌面應用：在線聊天對話機器人
- 10. 從零打造在線版H5頁面生成器