黃金春 杜娟嬌

摘要：當(dāng)前常需要在web2.0網(wǎng)站設(shè)計(jì)中使用多個(gè)在線編輯器，一般設(shè)計(jì)模式使網(wǎng)頁(yè)較為臃腫。為此該文介紹一種基于類(lèi)的多在線編輯器設(shè)計(jì)思路，并提供了相關(guān)的主要代碼，實(shí)踐證明該方法不但能較好的解決網(wǎng)頁(yè)臃腫問(wèn)題還可以加快網(wǎng)頁(yè)加載速度。其代碼均JavaScript程序設(shè)計(jì)，讀者也可根據(jù)此思路用于其他方面。

關(guān)鍵詞：多在線編輯器;類(lèi)設(shè)計(jì);JavaScript

中圖分類(lèi)號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）16-0089-02

1 前言

在進(jìn)行web2.0網(wǎng)站設(shè)計(jì)時(shí)，在線編輯器作為一種實(shí)用的內(nèi)容輸入平臺(tái)常常在網(wǎng)頁(yè)里進(jìn)行使用，而在某些特殊的場(chǎng)合一個(gè)網(wǎng)頁(yè)里甚至?xí)褂玫蕉鄠€(gè)在線編輯器（比如在進(jìn)行網(wǎng)絡(luò)教學(xué)平臺(tái)設(shè)計(jì)的時(shí)候，在設(shè)計(jì)題目輸入方面，題干部分需要用到在線編輯器，題目里的每個(gè)選擇也需要用到在線編輯器）。這種情況下，必將涉及多在線編輯器設(shè)計(jì)問(wèn)題。比較常用的方法是，為每個(gè)需要的編輯器都設(shè)計(jì)html代碼，并且為了區(qū)分不同在線編輯器內(nèi)容或操作，引入大量的id，這樣不但使網(wǎng)頁(yè)非常龐大，也會(huì)產(chǎn)生非常多的id，使得網(wǎng)頁(yè)的加載非常緩慢，影響用戶的體驗(yàn)。在此介紹一種基于JavaScript類(lèi)的多在線編輯器的設(shè)計(jì)，實(shí)踐證明該設(shè)計(jì)不但可以大大減少網(wǎng)頁(yè)的代碼量，同時(shí)也減少id的使用。

2 JavaScript類(lèi)的定義及使用

JavaScript是web前端最為常用的一種應(yīng)用程序，也是進(jìn)行在線編輯器設(shè)計(jì)的程序。JavaScript1.5 版本后提供了很多新的特征[1]，其中最為吸引人的就是引入了類(lèi)的概念。只是在JavaScript里類(lèi)和java里的類(lèi)定義并不一樣。

在JavaScript中沒(méi)有明確的類(lèi)定義語(yǔ)法，它是一種以對(duì)象為主的設(shè)計(jì)方式，主要語(yǔ)法為：

3 基于類(lèi)設(shè)計(jì)的在線編輯器原理

4 基于類(lèi)設(shè)計(jì)的在線編輯器的實(shí)現(xiàn)

4.1 在線編輯器類(lèi)的工作流程

4.2 在線編輯器類(lèi)的外觀設(shè)計(jì)

在線編輯器的外觀設(shè)計(jì)并不復(fù)雜，可以使用現(xiàn)在常用的html和css進(jìn)行設(shè)計(jì)，這不是本文關(guān)鍵點(diǎn)，在此不做詳細(xì)說(shuō)明。這里僅說(shuō)明需要注意的問(wèn)題，編輯器的html文檔僅是部分的html代碼。之所以是部分html代碼主要是因?yàn)?，在線編輯器并不作為原來(lái)網(wǎng)頁(yè)的一個(gè)內(nèi)容，而是單獨(dú)作為一個(gè)模塊。當(dāng)需要它時(shí)才在原來(lái)網(wǎng)頁(yè)里加載。

4.3 在線編輯器類(lèi)設(shè)計(jì)

4.3.1 類(lèi)的屬性設(shè)計(jì)

類(lèi)的設(shè)計(jì)是整個(gè)設(shè)計(jì)的核心，因?yàn)橐M(jìn)行區(qū)分多個(gè)對(duì)象實(shí)例，所以設(shè)計(jì)編輯器構(gòu)造函數(shù)時(shí)，需要增加記錄是第幾個(gè)對(duì)象作為屬性參數(shù)，此外還需要有存儲(chǔ)其寬度、對(duì)應(yīng)的浮動(dòng)編輯框等等屬性。類(lèi)設(shè)計(jì)核心代碼示例如下：

4.3.2 類(lèi)的方法設(shè)計(jì)

編輯器類(lèi)還要包括一些必要的方法，這些方法分兩種類(lèi)型，一種是修改編輯器的某些屬性的方法，如寬度等。

另一種是實(shí)現(xiàn)編輯器功能的方法，這是編輯器類(lèi)的重要方法，具體功能設(shè)計(jì)是JavaScript程序編寫(xiě)，功能方面內(nèi)容在很多文章里都介紹有，例如：讓瀏覽器執(zhí)行命令使用execCommand方法[2]。在此僅說(shuō)明類(lèi)方面的設(shè)計(jì)部分，這個(gè)部分設(shè)計(jì)關(guān)鍵有兩點(diǎn)，首先是語(yǔ)法必須按照J(rèn)avaScript類(lèi)方法來(lái)設(shè)計(jì)，其次在進(jìn)行對(duì)象操作時(shí)，必需使用this引用。其主要代碼如下所示：

4.4 在線編輯器類(lèi)的共有方法設(shè)計(jì)

編輯器除了自已的方法外，還需要一些共用的方法，例如，當(dāng)需要進(jìn)行某些對(duì)話操作時(shí)，要先對(duì)網(wǎng)頁(yè)進(jìn)行層遮蓋，這些方法并不需要區(qū)分是哪個(gè)編輯器操作的，因此設(shè)計(jì)為共有的方法，其實(shí)就是原JavaScript的函數(shù)語(yǔ)法，類(lèi)似代碼如下：

4.5 編輯器類(lèi)的使用

4.5.1 在網(wǎng)頁(yè)里設(shè)置定位

4.5.2 使用JavaScript進(jìn)行加載編輯器代碼

在JavaScript里使用共有函數(shù)進(jìn)行查找所有class，并加載對(duì)應(yīng)的在線編輯器代碼。主要代碼如下：

4.5.3 實(shí)現(xiàn)在線編輯器的功能按鈕單擊

編輯器里的功能按鈕，主要指那些工具欄里的按鈕，其可以使用onclick事件進(jìn)行，示例代碼如下：

在JavaScript里設(shè)置對(duì)應(yīng)函數(shù)實(shí)現(xiàn)單擊功能，該函數(shù)首先使用JavaScript的Event對(duì)象[3]獲取單擊事件的源，即獲得是什么單擊，然后獲得事件源對(duì)應(yīng)的編輯器編號(hào)（就是產(chǎn)生實(shí)例的那個(gè)參數(shù)），即是哪個(gè)編輯器進(jìn)行了單擊，然后調(diào)用對(duì)應(yīng)的編輯器對(duì)象完成操作，主要代碼如下：

5 小結(jié)

在web2.0模式下，網(wǎng)頁(yè)設(shè)計(jì)中都包括有在線編輯器的需求，而對(duì)于那些需進(jìn)行多輸入的情況，往往會(huì)在一個(gè)網(wǎng)頁(yè)里需要多個(gè)文本編輯器。在自行設(shè)計(jì)時(shí)，筆者采用了類(lèi)設(shè)計(jì)的模式，實(shí)踐證明它是一種可以縮小程序規(guī)模，加快頁(yè)面加載速度的辦法。本文沒(méi)有介紹如何實(shí)現(xiàn)在線編輯器各種功能，有興趣的讀者可在網(wǎng)上查閱，這方面的內(nèi)容很多。

參考文獻(xiàn)：

[1] Cody Lindley.JavaScript啟示錄[M].徐濤，譯.北京：人民郵電出版社，2016.

[2] Mozilla and individual contributors Document.execCommand（）[EB/OL].[2019-12-20].https：//developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.

[3] w3school HTML DOM Event 對(duì)象[EB/OL].[2019-12-20].https：//www.w3school.com.cn/jsref/dom_obj_event.asp.

【通聯(lián)編輯】謝媛媛