摘要：概述最近心血來(lái)潮，想仿造一下易企秀，做一個(gè)新的編輯器。選擇易企秀，而不是互動(dòng)大師，主要是因?yàn)橐灼笮愕募夹g(shù)難度比較低，編輯器的核心部分，如果全職開(kāi)發(fā)，估計(jì)一個(gè)月就做完了。

最近心血來(lái)潮，想仿造一下易企秀，做一個(gè)新的編輯器。主要是3年前那個(gè)編輯器有些自動(dòng)化方面和動(dòng)畫(huà)性能方面的缺陷吧，人生不能有遺憾就早早動(dòng)手吧。選擇易企秀，而不是互動(dòng)大師，主要是因?yàn)橐灼笮愕募夹g(shù)難度比較低，編輯器的核心部分，如果全職開(kāi)發(fā)，估計(jì)一個(gè)月就做完了。如果是互動(dòng)大師，業(yè)余時(shí)間開(kāi)發(fā)根本估計(jì)核心部分都?jí)騿?。核心部分包括拖拉拽，組件生命周期，場(chǎng)景增刪改，工程增刪改，完善的組件事件通信機(jī)制，撤銷(xiāo)恢復(fù)還有動(dòng)畫(huà)編輯。

有興趣的朋友可以進(jìn) github 看看。里面有在線(xiàn)演示的地址。該項(xiàng)目還在持續(xù)開(kāi)發(fā)中，輕拍，別打臉。

不同的編輯器，不管怎么樣，拖拉拽的業(yè)務(wù)邏輯一定要自己寫(xiě)，這是血的教訓(xùn)。兩年前，接手一家公司的編輯器，那個(gè)編輯器的核心部分是用某個(gè)開(kāi)源項(xiàng)目的，性能有問(wèn)題，核心元數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)也有問(wèn)題。重構(gòu)了幾次，才契合當(dāng)時(shí)公司的業(yè)務(wù)。

拖拉拽，其實(shí)難的是性能處理，尤其是移動(dòng)端。要是一個(gè)場(chǎng)景里面幾百個(gè)組件，移動(dòng)端就很痛苦了。

首先必須使用事件委托，因?yàn)槭录哂忻芭輽C(jī)制，因此我們可以利用冒泡的原理，把事件加到父級(jí)上，觸發(fā)執(zhí)行效果。這樣做的好處當(dāng)然就是提高性能了。

假如沒(méi)有使用事件委托，那么100個(gè)組件，每個(gè)組件1個(gè)旋轉(zhuǎn)點(diǎn)，8個(gè)縮放點(diǎn)，1個(gè)移動(dòng)點(diǎn)，那么就要添加800個(gè)mousedown事件。如果使用事件委托，就只要一個(gè)mousedown事件就好。

原理是用戶(hù)點(diǎn)擊頁(yè)面的時(shí)候，事件里有個(gè)target屬性，也就是用戶(hù)所點(diǎn)擊的元素，通過(guò)元素的class判斷是不是觸發(fā)點(diǎn)（觸發(fā)點(diǎn)就是移動(dòng)點(diǎn)，旋轉(zhuǎn)點(diǎn)，縮放點(diǎn)的統(tǒng)稱(chēng)），如果不是，就找元素的父節(jié)點(diǎn)，繼續(xù)判斷是不是觸發(fā)點(diǎn)，以此類(lèi)推。一直找到document，如果沒(méi)找到觸發(fā)點(diǎn)，那么就是點(diǎn)擊了空白處，找到觸發(fā)點(diǎn)好辦了，就找觸發(fā)點(diǎn)所屬的組件。有觸發(fā)點(diǎn)的類(lèi)型和所按下的組件，mousemove的時(shí)候就可以根據(jù)分支進(jìn)行不同的處理。

晚點(diǎn)我在補(bǔ)張示意圖。

弄完事件委托，就弄函數(shù)節(jié)流了。主要是mousemove是高頻率的事件，頻率不要那么高就好了。

偽代碼如下：

private _debounce:Debounce = new Debounce(50,true);

。。。

this._mouseMoveRecycle = Renderer.addEventListener(document, "mousemove", (event: MouseEvent) => {
        if (!isMouseDown) {
          return;
        }
        this._debounce.handle(()=>{
            //處理mousemove的內(nèi)容了
        }）;
});

搞完功能就是兼容性了，大前端最蛋疼的就是這個(gè)了。

要兼容移動(dòng)端，那么就是touchstart，touchmove，touchend三個(gè)事件了，這個(gè)網(wǎng)上大把教程，就不細(xì)說(shuō)了。有一點(diǎn)要小心的，就是touchend返回的event里面，有些瀏覽器是沒(méi)有event.pageX的，如果要用到，那么就在touchmove實(shí)時(shí)記錄，touchend的時(shí)候拿來(lái)用就好了。

假如有一天你的領(lǐng)導(dǎo)說(shuō)，手機(jī)移動(dòng)端是能旋轉(zhuǎn)的，旋轉(zhuǎn)了之后，編輯器的組件的位置就錯(cuò)亂，因?yàn)榻M件的位置是使用absolute沒(méi)有自適應(yīng)。

示意圖如下（紅色框表示手機(jī)屏幕）：

既然看不到，我們就把編輯器根據(jù)orientation進(jìn)行旋轉(zhuǎn)。變成下面的樣子，用戶(hù)不就可以繼續(xù)編輯了。

666，問(wèn)題來(lái)了，而且是很大的問(wèn)題。旋轉(zhuǎn)之后，整個(gè)世界的坐標(biāo)系都換了。

其實(shí)只要把event.pageX和event.pageY根據(jù)window.orientation進(jìn)行轉(zhuǎn)換就好。這部分當(dāng)我做到移動(dòng)端的時(shí)候，會(huì)補(bǔ)上去。

到這里就差不多了。差不多？因?yàn)橛行┦謾C(jī)瀏覽器不支持window.orientation，所以還差一步兼容處理。沒(méi)事，其實(shí)移動(dòng)端屏幕旋轉(zhuǎn)的時(shí)候，會(huì)觸發(fā)resize事件，然后根據(jù)屏幕的寬高計(jì)算orientation?；蛘適ousedown的時(shí)候，根據(jù)屏幕的寬高進(jìn)行獲取。

下面是偽代碼:

//判斷瀏覽器支持window.orientation否，不支持就通過(guò)事件去獲取
window.onresize = function(){
window.orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";  
}

github地址:https://github.com/qq38623289...

大功告成，有什么遺漏的，希望搞過(guò)這方面的大牛一起來(lái)探討。

下一篇文章，寫(xiě)下這個(gè)編輯器用到的設(shè)計(jì)模式吧。