以下先說下個人思路，屬于個人想法，還未實現(xiàn)

暫時不考慮性能，假設(shè)瀏覽器的性能無限強大

先給定一個模塊div，用來讓用戶編輯，假設(shè)第一條給定一個input框，用戶輸入n個字符點擊回車，創(chuàng)建n個span元素，span元素里面的內(nèi)容就是input里面對應(yīng)的value值，原來的input被刪除，在結(jié)尾處創(chuàng)建br元素，并且在第二行在創(chuàng)建一個input重復以上內(nèi)容。

下面思路改進

限定input中value的長度為1，當用戶輸入超過一個字符就立馬創(chuàng)建一個span，span內(nèi)容就是input中的value值，當用戶點擊回車時br元素，第二行重復以上操作。當用戶點擊tab時，創(chuàng)建四個span，span里的值為一個空格，當用戶點擊退格鍵時，則刪除前一個span元素。

以上均無鼠標操作

下面解決鼠標光標位置問題

給定div一個寬度為n，高度為n的一個盒子，鼠標光標默認是一條寬度1px高度5px的長方體可以用i標簽表示，初始位置在第一個input前面，第二次位置在第一個span元素后面，當用戶編輯時候，換句話說總是在最后一個span后面，最后一個input前面。給定所有的span默認位置，當用戶點擊div區(qū)域，可以先給所有的span元素后方增加一個標簽，(第一個span元素前方也加)用來接收點擊事件(等等，span與span之間是文本區(qū)域，也就是空格，不過這里為了保險起見還是采用此方法)用來接收鼠標的點擊事件，點擊后，找到該位置的元素，并建立input供用戶編輯。然后重復以上所有的套路

其實這里應(yīng)該不需要input，div有一個方法(加啥名字忘記了)，可以讓用戶編輯div里面的內(nèi)容，然后對應(yīng)的判斷用戶的操作類似的重復以上內(nèi)容。

下面實現(xiàn)的是一個代碼高亮功能，可以根據(jù)空格再重新把幾個span元素外面增加一個標簽，通過正則匹配來匹配標簽里的內(nèi)容是否符合正則里特定的字符串(好長，好長的正則)如果匹配成功，則給該標簽特定的顏色 (我去，我不應(yīng)該用正則，用個對象多好)。

由此再拓展出代碼提升功能來方便用戶更加快捷的輸入。

我去，剛才忘記個事，鼠標應(yīng)該還有選中功能，選中復制，選中刪除，點擊，這里具體功能大家應(yīng)該可以明白，無法就是進行各種一系列的操作，突然間還是比較復雜的，不過不懼，慢慢來。

下面來考慮性能問題，不得不說以上操作不是耗費性能，已經(jīng)快(無法用語言描述，里面各種dom操作，各種增刪該查，想想還是及其可怕，更加可怕的是每一次都會引起頁面重繪)，于是接下來就是優(yōu)化性能

必須采用面向?qū)ο蟮姆绞?，每一個dom都有自己的屬性，把方法全部放在原型上

二，提前就把一些自己指定的dom放在頁面上，盡可能減少dom操作(能少多少)

三，利用樹形圖的模式，看看能不能把每次dom刷新，只刷新單條線上的dom，而不是全部(參考angular里面的單向數(shù)據(jù)流與domtree)

文章寫到這里已經(jīng)1點半，當然這篇文章只是自己個人的想法和思路，我打算明天以這樣的思路去一步一步填坑(當然肯定會有大量的bug出現(xiàn)，我已經(jīng)做好了不是特充足的心理準備)

ok，我目前還是前端小白，好多知識點不是特扎實，希望各位大牛請勿看文章(看也沒關(guān)系，我已經(jīng)做好被嘲笑加鄙視的準備)

我是吳昊，一個野生程序猿，goodbye。you have a good dream。