上一篇
#3 從零開(kāi)始制作在線(xiàn) 代碼編輯器

鍵盤(pán)事件

Enter 與 \n 與 \r

先從最終效果入手吧~ 見(jiàn)圖 4-1。

圖4-1

這里先說(shuō)明的是...當(dāng)使用 Enter（平時(shí)稱(chēng)作回車(chē)鍵）來(lái)進(jìn)行換行時(shí)，其實(shí)觸發(fā)了二個(gè)動(dòng)作：

1. 回到行首 = \r = 回車(chē)
2. 新增一行 = \n

在最開(kāi)始，我有點(diǎn)詫異，原來(lái)平時(shí)所說(shuō)的回車(chē)并不標(biāo)準(zhǔn)...?

回車(chē)的意思是回到行首，也就是 \r，也就是 return。
新增一行就同字面意思，也就是 \n，也就是 newline。
（這樣比較好理解..?）但是并不是每個(gè)操作系統(tǒng)都這么認(rèn)為的，所以不同的操作系統(tǒng)的換行符會(huì)有差異哦。

觀察圖 4-1，Enter 的邏輯還是比較明顯的：

1. 剪切并存儲(chǔ)光標(biāo)后的文字，如這里的jumps over a lazy dog
2. 新增一行，可以同時(shí)在這里插入光標(biāo)后的文字
3. 回車(chē)
4. 修正（重新校準(zhǔn)）行號(hào)，因?yàn)槿绻诙嘈形谋局虚g插入行，那么行號(hào)其實(shí)會(huì)亂序，之后的行，每一行的行號(hào)都需要修改

keydown keypress keyup

這里有三種較常用的鍵盤(pán)事件監(jiān)聽(tīng)器。
對(duì)于能直接輸出字母的按鍵，比如鍵盤(pán)上的A/a，事件順序是

1. keydown
2. keypress
3. keyup

而對(duì)于提供狀態(tài)的按鍵，比如Control/Ctrl，事件順序只有

1. keydown
2. keyup

而對(duì)于任何鍵，如果按住，keydown keypress會(huì)以一定的頻次一直觸發(fā)。

嘛，由于keypress不監(jiān)聽(tīng)提供狀態(tài)的按鍵，所以這里只使用 keydown和keyup監(jiān)聽(tīng)鍵盤(pán)事件。

獲取鍵位的方式也有二種，比如在火狐 / Chrome 中，見(jiàn)圖 4-2：

圖4-2

有 event.key 和 event.keyCode 兩種：

1. key 更直接，并且能區(qū)分大小寫(xiě)
2. keyCode 就是數(shù)字啦，并且不能區(qū)分大小寫(xiě)

由于大部分功能以及組合鍵功能都不需要也不能需要大小寫(xiě)，所以這里可以嘗試使用 event.keyCode。

code

文件位置 serval/script/harusame-serval.js
為了節(jié)約篇章，已經(jīng)做了簡(jiǎn)化處理哦！！！

/**
 * 綁定各種鍵盤(pán)事件
 */
Serval.prototype._bindKeyboardEvent: function () {
    var self = this

    addEventListener(self.$inputer, 'keydown', function (event) {
        console.info('keydown', event)
        var keyCode = event.keyCode + ''
        self.keydownHandler[keyCode].call(self, event)
    })

    addEventListener(self.$inputer, 'keyup', function (event) {
        console.info('keyup', event)
    })
}

/**
 * 所有 keydown 的事件
 */
Serval.prototype.keydownHandler: {
    /**
     * KEY_13: Enter
     * 1. 剪切并存儲(chǔ)光標(biāo)后的文字
     * 2. 新建一行，同時(shí)注（傳）入（參）文字
     * 3. 移動(dòng)光標(biāo)到下一行并且回車(chē)
     * 4. 修正行號(hào)
     */
    '13': function (event) {
        var self = this
        event.preventDefault() /* 阻止默認(rèn)事件 */
        self.allocTask(function (v_cursor) {
            var $line = v_cursor.line.$line_content
            var textContent = $line.textContent
            var logicalX = v_cursor.logicalX
            var left_content = textContent.substring(logicalX, textContent.length) /* 1 */
            $line.textContent = textContent.substring(0, logicalX) /* 1 */
            self._generateLine(left_content) /* 2 */
            v_cursor.logicalY += 1  /* 3 */
            v_cursor.logicalX = 0 /* 3 */
        })
        Line.fixLineNumber() /* 4 */
    }
},

首先，請(qǐng)務(wù)必加上注釋...!因?yàn)橐粋€(gè)叫'13'的方法名太不靠譜啦!太不靠譜啦!太不靠譜啦!...
當(dāng)然維護(hù)一個(gè)對(duì)象來(lái)映射 keyCode 與 鍵位名字 會(huì)更適合閱讀...而且應(yīng)該可以用來(lái)做自定義鍵位...這里暫時(shí)先不做，用注釋代替...
以及，修正行號(hào)可以先不理它，因?yàn)殡x最初的目的 換行 較遠(yuǎn)，雖然它被安排在邏輯之中。
先來(lái)看看寫(xiě)了什么效果（bug）~，見(jiàn)圖 4-3：

圖4-3.gif

可以看到問(wèn)題還算多：

1. 控制臺(tái)一直冒紅字，這沒(méi)什么可說(shuō)的，因?yàn)樗墟I都會(huì)觸發(fā)keydown監(jiān)聽(tīng)的事件，相當(dāng)于一直在觸發(fā)沒(méi)有定義的事件self.undefined，做個(gè)判斷就可以了
2. 可以看到每個(gè)空的行都會(huì)有一個(gè)隱藏的字符存在一樣，回憶calcX的算法，就知道，獲取行所在的DOM的文本字符肯定哪里出問(wèn)題了...
3. 第四行后來(lái)填了1234，但是鼠標(biāo)卻定位不上去，原理同2，因?yàn)楂@取到的文本字符不對(duì)了。

code && fix

對(duì)于第一個(gè)問(wèn)題，修改成這樣，先判斷再執(zhí)行：

文件位置 serval/script/harusame-serval.js
addEventListener(self.$inputer, 'keydown', function (event) {
    console.info('keydown', event)
    var keyCode = event.keyCode + ''
    var keyEvent = self.keydownHandler[keyCode]
    keyEvent && keyEvent.call(self, event)
})

對(duì)于第二個(gè)問(wèn)題，見(jiàn) 圖 4-4 可以看到，原來(lái)是calcPsysicalX 和 calcX 中的 Line.$ref忘記改了，替換成this.line.$line_content 就可以了

圖4-4.png

由于問(wèn)題三跟問(wèn)題二其實(shí)是一個(gè)原因引起的，解決了問(wèn)題二，問(wèn)題三也就沒(méi)了。

現(xiàn)在看似好像ok了，但是事實(shí)上，在糾錯(cuò)的時(shí)候，我一般會(huì)腦內(nèi)重新走一遍整個(gè)邏輯，于是發(fā)現(xiàn)又有個(gè)問(wèn)題：理論上來(lái)說(shuō)，換行的時(shí)候，Serval._generateLine 中利用的是 appendChild

但是生成的新行，希望她是接在下一行的，這個(gè)下一行可不一定是末尾。為了驗(yàn)證是否有這個(gè)問(wèn)題，來(lái)試試，見(jiàn)圖 4-6：

圖4-6

可以看到確實(shí)是這樣，當(dāng)456被突然換到第六行中，也說(shuō)明了問(wèn)題，因?yàn)?code>456作為光標(biāo)后的文字被剪切然后傳入了新建的行中，而新建的行是被追加到末尾的。

所以改寫(xiě)一下appendChild，使用insertBefore，但是使用她不能將行插入到最后，所以要自定義一個(gè)創(chuàng)建方法，做個(gè)判斷。

另外既然是自定義了，就把他放在Line中，但是由于insertBefore appendChild需要得到$line_container，Line中無(wú)法直接地獲得，然而在初始化的時(shí)候，是可以直接拿到的...把$line_container的生成放在Line中，似乎也更合理...

額...所以不管他...（哪來(lái)的所以..!）先直接用選擇器獲取...因?yàn)檫€在初期，暴力地推進(jìn)進(jìn)度...盡量避免處理復(fù)雜的邏輯..hmmm..嘗試一點(diǎn)點(diǎn)看透項(xiàng)目交雜的邏輯..(.編不下去了. 上代碼..

code

文件位置 serval/script/harusame-line.js
只顯示了要修改的部分

/**
 * 向后插入一行
 * @param v_line_number {number} 創(chuàng)建在該行后面
 * @param v_content {string} 初始內(nèi)容
 * 1. 判斷是否是最后一個(gè)元素
 *      1.1. 如果最后的節(jié)點(diǎn)是目標(biāo)元素，則直接添加。因?yàn)槟J(rèn)是最后
 * 2. 如果不是
 *      2.1. 則插入在目標(biāo)元素的下一個(gè)兄弟節(jié)點(diǎn)的前面。也就是目標(biāo)元素的后面
 */
Line.createLine = function (v_line_number, v_content) {
    var $line_container = document.querySelector('.line-container')
    var $line_content = self.getLineContentByLogicalY(v_line_number)
    var $line = $line_content.parentNode.parentNode
    var $new_line = self.generateLine(v_content)
    if ($line_container.lastChild == $line) { /* 1 */
        $line_container.appendChild($new_line)
    } else {
        $line_container.insertBefore($new_line, $line.nextSibling)
    }
 }

這樣就ok了！（心虛...
效果與 修正行號(hào)后 一起看

修正行號(hào)

行號(hào)的修正，其實(shí)有挺多種辦法...但是這里想嘗試一下新的..感覺(jué)好像不錯(cuò).

因?yàn)樾械牟迦牖蛘邷p少，都會(huì)需要對(duì)行號(hào)進(jìn)行修正（這里把添加/刪除末尾的行，看做沒(méi)有做修正的修正...），而且需要修正的行都在目標(biāo)行之后。所以對(duì)于新建的行，沒(méi)有必要給她進(jìn)行行號(hào)的分配，行號(hào)的分配與修正都通過(guò)一個(gè)方法。

要修正行號(hào)，首先得知道并拿到需要修正的那些行的DOM。
要知道的是，DOM的獲取不能使用document.getElementById，因?yàn)椴迦胄械臅r(shí)候，行已經(jīng)亂序了，這樣的話(huà)會(huì)出錯(cuò)~，比如圖 4-7這樣：

圖4-7.gif

所以明確一下：

1. 哪些行需要修正
   從需要進(jìn)行刪除/增加 的行之后所有，比如圖 4-7 中，在第2行開(kāi)始插入的時(shí)候，那么2之后的 5 3 4 需要更改為 3 4 5

2. 如何拿到

可以通過(guò)childNodes來(lái)獲取，所以需要$line_container，又用到他了，同樣地，暫時(shí)用選擇器解決一下..._(:3」∠)...

code

文件位置 serval/script/harusame-line.js
為了節(jié)約篇章，只顯示了部分代碼

 /**
  * 修正行號(hào)
  * 1. 從 v_start_line 行開(kāi)始檢測(cè)
  * 2. 在小于最大行前，一直修正行號(hào)
  */
Line.fixLineNumber = function (v_start_line) {
    var $line_container = document.querySelector('.line-container')
    var $lines = $line_container.childNodes // 這里不含有文本節(jié)點(diǎn)，不需要做獲取到的節(jié)點(diǎn)類(lèi)型判斷了
    var length = $lines.length

    for (var current_line_number = v_start_line; current_line_number < length; current_line_number++) {
        var $line = $lines[current_line_number]
        var $temp_children = $line.childNodes

        var $line_number = $temp_children[0].childNodes[0]
        $line_number.id = self.line_number_sign + current_line_number
        $line_number.textContent = current_line_number + self.start_line

        var $line_content = $temp_children[1].childNodes[0]
        $line_content.id = self.line_content_sign + current_line_number
    }
}

文件位置 serval/script/harusame-serval.js
為了節(jié)約篇章，只顯示了部分代碼

/**
 * KEY: Enter
 * 1. 為所有光標(biāo)分配任務(wù)
 * 2. 得到光標(biāo)后的字符
 * 3. 刪除光標(biāo)后的字符
 * 4. 插入新的行，傳入光標(biāo)后的字符
 * 5. 行號(hào)檢測(cè) -> 暫時(shí)地
 * 6. 光標(biāo)下移一格
 * 7. 回車(chē)
 */
'13': function (event) {
    var self = this
    event.preventDefault()
    /* 1 */
    self.allocTask(function (v_cursor) {
        var line_number_before = v_cursor.logicalY

        var $line = v_cursor.line.$line_content
        var textContent = $line.textContent
        var logicalX = v_cursor.logicalX
        var left_content = textContent.substring(logicalX, textContent.length) /* 2 */
        $line.textContent = textContent.substring(0, logicalX) /* 3 */
        Line.createLine(v_cursor.logicalY, left_content) /* 4 */

        Line.fixLineNumber(line_number_before) /* 5 */ // 測(cè)試用 測(cè)試用 測(cè)試用

        v_cursor.logicalY += 1 /* 6 */
        v_cursor.logicalX = 0 /* 7 */
    })
},

看看效果...

看上去還行...但是代碼很爛...

再多一點(diǎn)功能后，就需要做反思和調(diào)整了...~

下一篇可能是刪除，選區(qū)...

上一篇
#3 從零開(kāi)始制作在線(xiàn) 代碼編輯器

下一篇
#5 從零開(kāi)始制作在線(xiàn) 代碼編輯器