鍵盤事件
Enter 與 \n 與 \r
先從最終效果入手吧~ 見圖 4-1。
這里先說明的是...當使用 Enter（平時稱作回車鍵）來進行換行時，其實觸發(fā)了二個動作：
- 回到行首
=\r=回車 - 新增一行
=\n
在最開始，我有點詫異，原來平時所說的回車并不標準...?
回車的意思是回到行首，也就是 \r，也就是 return。
新增一行就同字面意思，也就是 \n，也就是 newline。
（這樣比較好理解..?）但是并不是每個操作系統(tǒng)都這么認為的，所以不同的操作系統(tǒng)的換行符會有差異哦。
觀察圖 4-1，Enter 的邏輯還是比較明顯的：
- 剪切并存儲光標后的文字，如這里的
jumps over a lazy dog - 新增一行，可以同時在這里插入光標后的文字
- 回車
- 修正（重新校準）行號，因為如果在多行文本中間插入行，那么行號其實會亂序，之后的行，每一行的行號都需要修改
keydown keypress keyup
這里有三種較常用的鍵盤事件監(jiān)聽器。
對于能直接輸出字母的按鍵，比如鍵盤上的A/a，事件順序是
- keydown
- keypress
- keyup
而對于提供狀態(tài)的按鍵，比如Control/Ctrl，事件順序只有
- keydown
- keyup
而對于任何鍵，如果按住，keydown keypress會以一定的頻次一直觸發(fā)。
嘛，由于keypress不監(jiān)聽提供狀態(tài)的按鍵，所以這里只使用 keydown和keyup監(jiān)聽鍵盤事件。
獲取鍵位的方式也有二種，比如在火狐 / Chrome 中，見圖 4-2：
有 event.key 和 event.keyCode 兩種：
-
key更直接，并且能區(qū)分大小寫 -
keyCode就是數(shù)字啦，并且不能區(qū)分大小寫
由于大部分功能以及組合鍵功能都不需要也不能需要大小寫，所以這里可以嘗試使用 event.keyCode。
code
文件位置 serval/script/harusame-serval.js
為了節(jié)約篇章，已經做了簡化處理哦?。?！
/**
* 綁定各種鍵盤事件
*/
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. 剪切并存儲光標后的文字
* 2. 新建一行，同時注（傳）入（參）文字
* 3. 移動光標到下一行并且回車
* 4. 修正行號
*/
'13': function (event) {
var self = this
event.preventDefault() /* 阻止默認事件 */
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 */
}
},
首先，請務必加上注釋...!因為一個叫'13'的方法名太不靠譜啦!太不靠譜啦!太不靠譜啦!...
當然維護一個對象來映射 keyCode 與 鍵位名字 會更適合閱讀...而且應該可以用來做自定義鍵位...這里暫時先不做，用注釋代替...
以及，修正行號可以先不理它，因為離最初的目的 換行 較遠，雖然它被安排在邏輯之中。
先來看看寫了什么效果（bug）~，見圖 4-3：
可以看到問題還算多：
- 控制臺一直冒紅字，這沒什么可說的，因為所有鍵都會觸發(fā)
keydown監(jiān)聽的事件，相當于一直在觸發(fā)沒有定義的事件self.undefined，做個判斷就可以了 - 可以看到每個空的行都會有一個隱藏的字符存在一樣，回憶
calcX的算法，就知道，獲取行所在的DOM的文本字符肯定哪里出問題了... - 第四行后來填了
1234，但是鼠標卻定位不上去，原理同2，因為獲取到的文本字符不對了。
code && fix
對于第一個問題，修改成這樣，先判斷再執(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)
})
對于第二個問題，見 圖 4-4 可以看到，原來是calcPsysicalX 和 calcX 中的 Line.$ref忘記改了，替換成this.line.$line_content 就可以了
由于問題三跟問題二其實是一個原因引起的，解決了問題二，問題三也就沒了。
現(xiàn)在看似好像ok了，但是事實上，在糾錯的時候，我一般會腦內重新走一遍整個邏輯，于是發(fā)現(xiàn)又有個問題：理論上來說，換行的時候，Serval._generateLine 中利用的是 appendChild
但是生成的新行，希望她是接在下一行的，這個下一行可不一定是末尾。為了驗證是否有這個問題，來試試，見圖 4-6：
可以看到確實是這樣，當456被突然換到第六行中，也說明了問題，因為456作為光標后的文字被剪切然后傳入了新建的行中，而新建的行是被追加到末尾的。
所以改寫一下appendChild，使用insertBefore，但是使用她不能將行插入到最后，所以要自定義一個創(chuàng)建方法，做個判斷。
另外既然是自定義了，就把他放在Line中，但是由于insertBefore appendChild需要得到$line_container，Line中無法直接地獲得，然而在初始化的時候，是可以直接拿到的...把$line_container的生成放在Line中，似乎也更合理...
額...所以不管他...（哪來的所以..!）先直接用選擇器獲取...因為還在初期，暴力地推進進度...盡量避免處理復雜的邏輯..hmmm..嘗試一點點看透項目交雜的邏輯..(.編不下去了. 上代碼..
code
文件位置 serval/script/harusame-line.js
只顯示了要修改的部分
/**
* 向后插入一行
* @param v_line_number {number} 創(chuàng)建在該行后面
* @param v_content {string} 初始內容
* 1. 判斷是否是最后一個元素
* 1.1. 如果最后的節(jié)點是目標元素，則直接添加。因為默認是最后
* 2. 如果不是
* 2.1. 則插入在目標元素的下一個兄弟節(jié)點的前面。也就是目標元素的后面
*/
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了?。ㄐ奶?..
效果與 修正行號后 一起看
修正行號
行號的修正，其實有挺多種辦法...但是這里想嘗試一下新的..感覺好像不錯.
因為行的插入或者減少，都會需要對行號進行修正（這里把添加/刪除末尾的行，看做沒有做修正的修正...），而且需要修正的行都在目標行之后。所以對于新建的行，沒有必要給她進行行號的分配，行號的分配與修正都通過一個方法。
要修正行號，首先得知道并拿到需要修正的那些行的DOM。
要知道的是，DOM的獲取不能使用document.getElementById，因為插入行的時候，行已經亂序了，這樣的話會出錯~，比如圖 4-7這樣：
所以明確一下：
哪些行需要修正
從需要進行刪除/增加 的行之后所有，比如圖 4-7 中，在第2行開始插入的時候，那么2之后的534需要更改為345如何拿到
可以通過childNodes來獲取，所以需要$line_container，又用到他了，同樣地，暫時用選擇器解決一下..._(:3」∠)...
code
文件位置 serval/script/harusame-line.js
為了節(jié)約篇章，只顯示了部分代碼
/**
* 修正行號
* 1. 從 v_start_line 行開始檢測
* 2. 在小于最大行前，一直修正行號
*/
Line.fixLineNumber = function (v_start_line) {
var $line_container = document.querySelector('.line-container')
var $lines = $line_container.childNodes // 這里不含有文本節(jié)點，不需要做獲取到的節(jié)點類型判斷了
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. 為所有光標分配任務
* 2. 得到光標后的字符
* 3. 刪除光標后的字符
* 4. 插入新的行，傳入光標后的字符
* 5. 行號檢測 -> 暫時地
* 6. 光標下移一格
* 7. 回車
*/
'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 */ // 測試用 測試用 測試用
v_cursor.logicalY += 1 /* 6 */
v_cursor.logicalX = 0 /* 7 */
})
},
看看效果...
看上去還行...但是代碼很爛...
再多一點功能后，就需要做反思和調整了...~
下一篇可能是刪除，選區(qū)...
