大家好，歡迎來到程式視點！我是小二哥！
每當我們的新產品上線或大版本迭代後，產品使用步驟或功能介紹是必不可少的。
今天就給大家介紹一款可以快速實現新手引導和互動效果的工具庫: Driver.js
關於 Driver.js
Driver.js 是一個可以輕鬆實現新手指引互動的 JavaScript 工具庫，主要的作用是為剛接觸應用的新手使用者快速瞭解產品，幫助使用者把注意力聚焦到某項功能，從而快速熟悉我們的開發的產品。
自帶動畫，體驗十分優秀。
Driver.js 的技術特性
Driver.js 是一個功能強大且高度可定製的基於原生JavaScript開發的新使用者引導庫。它沒有依賴項，支援所有主要瀏覽器。
🔆 高亮頁面上的任意元素 ✋ 暫停使用者互動，方便引導流程 📣 為web應用程式建立強大的功能介紹 👓 支援動畫過渡，體驗流暢舒服 🛠️ 高度可定製：具有豐富強大的 API，可以用於突出顯示任何內容 ⌨️ 使用者友好：可透過鍵盤控制引導流程 🆓 MIT宣告：免費用於個人和商業用途 🕊️ 簡單輕量：使用很簡單，獨立無依賴，只有 4kb 大小 🌀 所有主流瀏覽器(包括著名的IE)都可以使用
實踐使用
安裝
Driver.js 支援透過 npm 或 yarn 來安裝，比如：
yarn add driver.js npm install driver.js
也可以線上或本地直接引入，需要注意:要同時引入 CSS 檔案。
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
使用方法
最簡單的使用方法是高亮突出一個元素，只要給一個 CSS 選擇器即可。
const driver = new Driver(); driver.highlight('#create-post');
調整彈出框的位置：
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', // 位置支援設定為 left, left-center, left-bottom, top, // top-center, top-right, right, right-center, right-bottom, // bottom, bottom-center, bottom-right, mid-center position: 'left', } });
上面這些都是小打小鬧，新手引導互動裡最常用的就是包含多個步驟引導。 使用者可以一步一步地瞭解功能，實現這樣的效果也很簡單：
const driver = new Driver(); // 定義步驟 driver.defineSteps([ { element: '#first-element-introduction', popover: { className: 'first-step-popover-class', title: 'Title on Popover', description: 'Body of the popover', position: 'left' } }, { element: '#second-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'top' } }, { element: '#third-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'right' } }, ]); // 開始引導 driver.start();
體驗和建議
無論是開發 APP 還是 web 應用，新手引導都是一個很常見的需求，一般在這2個方面需要新手引導：
1)使用者第一次開啟應用，對介面不夠熟悉，或者作為一個創新型的產品，大部分使用者沒有類似的使用經驗; 2)相對成熟的應用進行一次較大的版本改動，UI 佈局有比較大的改變，需要引導來告知使用者
官網的文件裡還有更多強大的功能特性，感興趣的開發者可以去細細閱讀。
Driver.js官方文件 https://kamranahmed.info/driver.js/
寫在最後
【程式視點】助力打工人減負，從來不是說說而已！
後續小二哥會繼續詳細分享更多實用的工具和功能。持續關注，這樣就不會錯過之後的精彩內容啦！
如果這篇文章對你有幫助的話，別忘了【點贊】【分享】支援下哦~