摘要：概述最近心血來潮，想仿造一下易企秀，做一個新的編輯器。選擇易企秀，而不是互動大師，主要是因為易企秀的技術(shù)難度比較低，編輯器的核心部分，如果全職開發(fā)，估計一個月就做完了。

最近心血來潮，想仿造一下易企秀，做一個新的編輯器。主要是3年前那個編輯器有些自動化方面和動畫性能方面的缺陷吧，人生不能有遺憾就早早動手吧。選擇易企秀，而不是互動大師，主要是因為易企秀的技術(shù)難度比較低，編輯器的核心部分，如果全職開發(fā)，估計一個月就做完了。如果是互動大師，業(yè)余時間開發(fā)根本估計核心部分都夠嗆。核心部分包括拖拉拽，組件生命周期，場景增刪改，工程增刪改，完善的組件事件通信機制，撤銷恢復(fù)還有動畫編輯。

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

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

拖拉拽，其實難的是性能處理，尤其是移動端。要是一個場景里面幾百個組件，移動端就很痛苦了。

首先必須使用事件委托，因為事件具有冒泡機制，因此我們可以利用冒泡的原理，把事件加到父級上，觸發(fā)執(zhí)行效果。這樣做的好處當(dāng)然就是提高性能了。

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

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

晚點我在補張示意圖。

弄完事件委托，就弄函數(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)容了
        }）;
});

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

要兼容移動端，那么就是touchstart，touchmove，touchend三個事件了，這個網(wǎng)上大把教程，就不細說了。有一點要小心的，就是touchend返回的event里面，有些瀏覽器是沒有event.pageX的，如果要用到，那么就在touchmove實時記錄，touchend的時候拿來用就好了。

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

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

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

666，問題來了，而且是很大的問題。旋轉(zhuǎn)之后，整個世界的坐標系都換了。

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

到這里就差不多了。差不多？因為有些手機瀏覽器不支持window.orientation，所以還差一步兼容處理。沒事，其實移動端屏幕旋轉(zhuǎn)的時候，會觸發(fā)resize事件，然后根據(jù)屏幕的寬高計算orientation?；蛘適ousedown的時候，根據(jù)屏幕的寬高進行獲取。

下面是偽代碼:

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

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

大功告成，有什么遺漏的，希望搞過這方面的大牛一起來探討。

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