基于Vue.js平臺的Markdown標(biāo)記語言插件的研究與實現(xiàn)

王辰 劉曉鑫 曹曉燕 王佳楠

摘 要：隨著Web技術(shù)的不斷革新，ECMAScript標(biāo)準(zhǔn)應(yīng)運而生，ECMAScript6版本通過加入模塊和類，從而使得JavaScript可以通過模塊化的開發(fā)方式開發(fā)各類插件?；赩ue.js技術(shù)，遵循插件化的原則，開發(fā)了符合Markdown標(biāo)記語言標(biāo)準(zhǔn)的Web插件，具備了結(jié)構(gòu)清晰、可移植性強、API（Application Programming Interface，應(yīng)用程序編程接口）簡明、與宿主程序低耦合。

關(guān)鍵詞：Vue.js；Markdown；插件化開發(fā)

近幾年Web前端技術(shù)飛速發(fā)展，前端技術(shù)從靜態(tài)到動態(tài)、從前端到全端。[1]2009年發(fā)布的Node.js，Node.js可以運行JavaScript的服務(wù)端，它基于V8引擎。其允許JavaScript運行在其之上，這也意味著JavaScript不僅僅是運行在瀏覽器上的腳本語言，更能夠作為服務(wù)端處理數(shù)據(jù)。NPM是Node的模塊管理器，開發(fā)者可以通過NPM開發(fā)者能夠模塊化引入或者導(dǎo)出代碼，大大增強了代碼的復(fù)用性。

隨著CMAScript標(biāo)準(zhǔn)的誕生，前端的框架也層出不窮，例如Google的Angular.js、Facebook的React.js、以及當(dāng)下發(fā)展最迅猛的Vue.js。Vue.js可以提供插件化編程方法，允許開發(fā)者在其基礎(chǔ)上構(gòu)建插件，提升代碼質(zhì)量，提高開發(fā)效率。

1 Markdown標(biāo)記語言

Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言，通過簡單的標(biāo)記語法，它可以使普通文本內(nèi)容具有一定的格式。[2]Markdown的語法簡潔明了、學(xué)習(xí)成本低，而且功能比純文本豐富。[3]目前，一些主流的大型的在線編輯類的Web平臺，例如一些大型博客以及大型CMS，都能夠很好的支持Markdown標(biāo)記語言。

2 相關(guān)技術(shù)

2.1 Vue.js框架

Vue.js（通常稱作Vue）是一個用于構(gòu)建用戶界面的開源漸進式JavaScript框架。與其他重量級框架不同的是，Vue遵循自底向頂增量開發(fā)的設(shè)計模式，Vue的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目進行整合。此外，Vue是一個功能強大的Web應(yīng)用程序框架，能夠為高級單頁應(yīng)用程序提供支持。[4]

2.2 響應(yīng)式設(shè)計

響應(yīng)式網(wǎng)頁自身會根據(jù)用戶行為和設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕方向等）進行相應(yīng)的響應(yīng)和調(diào)整，以達到最優(yōu)體驗。由各方面的具體實踐，從而總結(jié)出響應(yīng)式開發(fā)的基本要領(lǐng)，如彈性布局、響應(yīng)式媒體、CSS媒體查詢等，都能有效的提升用戶體驗度，無論用戶使用筆記本電腦或平板電腦，頁面會根據(jù)分辨率自動適應(yīng)展示最優(yōu)效果?？偠灾?，響應(yīng)式頁面應(yīng)該有自動響應(yīng)用戶的設(shè)備環(huán)境的能力。

響應(yīng)式網(wǎng)頁設(shè)計可以做到多終端兼容，而不是為每一個終端做一個特定版本，避免開發(fā)上的資源浪費，提高開發(fā)效率。

3 插件功能結(jié)構(gòu)圖

3.1 結(jié)構(gòu)分析

本插件主要擁有四大塊：

（1）Markdown文本渲染，拓展Markdown基礎(chǔ)語法，豐富編輯操作。

（2）快捷編輯工具欄開發(fā)，支持鍵盤快捷鍵與鼠標(biāo)點擊按鈕編輯操作

（3）功能性工具欄開發(fā)，支持閱讀模式、單欄編輯、標(biāo)題導(dǎo)航等個性化功能。

（4）插件響應(yīng)式，多終端自適應(yīng)。

其中上圖所示解析器采用Markdown-it，它在初始化的時候需要做一些個性化定制，并裝配語法拓展。遵循模塊化的思想，將Markdown-it的初始化單獨放入Markdown.js中，并利用export關(guān)鍵詞將其對外開放。

通過初始化與裝配Markdoen-it實現(xiàn)對Markdown文本的渲染以及語法的拓展，核心代碼如下：

var markdown = require（markdown-it）（{

html： true， // Enable HTML tags in source

xhtmlOut： true， // Use /

breaks： true， // Convert ＼＼n

langPrefix： language-markdown， // CSS

linkify： false， // 自動識別url

typographer： true，

quotes：“”‘

}）；

export default markdown

3.2 單欄實時編輯模式

傳統(tǒng)的Markdown編輯器都是采用左右分欄式設(shè)計，根據(jù)左側(cè)Markdown文本實時渲染右側(cè)Html樣式。但是不乏有些比較成熟的編輯器支持單欄目編輯，將Markdown與Html相結(jié)合，實時渲染Markdown文本，這樣雖然增加了邏輯復(fù)雜性，但提升的用戶體驗度，本設(shè)計采用此種設(shè)計方式，實現(xiàn)實時渲染模式。

單欄目實時編輯的核心在于需要把Html文本反編譯為Markdown文本，將相關(guān)邏輯處理放入to-Markdown.js中，當(dāng)用戶開啟單欄目編輯的時候，原始雙欄編輯框會被隱藏，取而代之的是一個可編輯的div，因為div能夠?qū)崟r渲染樣式，此時每次觸發(fā)TAB鍵編譯的時候，to-Markdown.js會將div中的Html代碼反編譯為Markdown文本。如下對上角標(biāo)的渲染示例：

// 上角標(biāo)

const coverterSup = {

filter：sup，

replacement：function（content）{

return ^ + content + ^；

}

}

4 API設(shè)計

4.1 插件引入方式

插件化的軟件要做到能夠方便開發(fā)者使用，擁有多元化接入方式、簡潔的接入步驟。本插件在詳細設(shè)計階段分析了多種接入方式，最終選擇借助webpack進行打包，通過NPM進行發(fā)布進行發(fā)布，這樣，最大限度的方便了開發(fā)者引入插件。

4.2 @event事件響應(yīng)

當(dāng)用戶觸發(fā)某些事件，如：輸入文本、點擊閱讀模式、點擊保存等，插件都會以回調(diào)函數(shù)的形式通知給開發(fā)者，方便開發(fā)者做進一步處理。預(yù)定義@event事件如下所示：

預(yù)定義@event事件：

name 方法名params 參數(shù)describe 描述

changeString：value，String：reder編輯區(qū)發(fā)生變化的回調(diào)事件

saveString：value，String：rederctrl + s 的回調(diào)事件

……

5 結(jié)語

本文基于Vue.js框架，遵循插件化開發(fā)原則，設(shè)計并實現(xiàn)了一套Markdown標(biāo)記語言的Web插件，具有結(jié)構(gòu)清晰、可移植性強、API簡明、與宿主程序低耦合等特點。并在普通文本編輯器功能的基礎(chǔ)上，拓展了Markdown的語法規(guī)則，支持表情、數(shù)學(xué)公式等，提供單雙欄編輯、實時預(yù)覽、沉浸式閱讀、標(biāo)題導(dǎo)航等個性化功能，且所有功能允許熱插拔式接入插件，實現(xiàn)插件內(nèi)部的解耦。

參考文獻：

[1]朱二華.基于Vue.js的Web前端應(yīng)用研究[J].科技與創(chuàng)新，2017（20）：119-121.

[2]王偉.標(biāo)記語言及HTML和XML的比較分析[J].現(xiàn)代圖書情報技術(shù)，2000，16（5）：22-24.

[3]胡亞明.基于標(biāo)記語言的論文寫作輔助系統(tǒng)[J].廣東化工，2017，44（4）：81.

[4]麥冬，陳濤，梁宗灣.輕量級響應(yīng)式框架Vue.js應(yīng)用分析[J].信息與電腦（理論版），2017（7）：58-59.

作者簡介：王辰（1988-），助教，研究方向：移動信息化。