在前端世界里，我們經(jīng)常會聽說某某引擎，某某框架，那么到底什么樣子的東西可以稱之為引擎呢?如果我們自己希望編寫引擎應(yīng)該如何做呢?在編寫引擎的時候，我們至少需要注意哪些方面呢?引擎技術(shù)到底能給我們帶來什么呢?

本文皆旨在平時的學(xué)習(xí)交流中遇見很多值得討論的問題，抽取部分有價值的觀點，和大家一起談?wù)搶W(xué)習(xí)。

作者簡介

曲毅，51 CTO WOT峰會特邀嘉賓，曾為第七屆WOT移動互聯(lián)網(wǎng)開發(fā)者大會的特約講師。從事互聯(lián)網(wǎng)研發(fā)工作11年。曾在高陽，空中網(wǎng)，樂蜂網(wǎng)等互聯(lián)網(wǎng)公司擔(dān)任構(gòu)架師，高級技術(shù)經(jīng)理，技術(shù)總監(jiān)等職位。近4年專注移動互聯(lián)網(wǎng)，是國內(nèi)資深HTML 5專家和研究者，對HTML 5技術(shù)有非常深刻的認(rèn)識和理解，有著豐富的實踐經(jīng)驗，是HTML 5引擎Crow 5的創(chuàng)造者。多次受邀在中關(guān)村在線，iweb峰會和GITC全球互聯(lián)網(wǎng)大會上擔(dān)任嘉賓和專家。

七樂康高級技術(shù)總監(jiān)

一、到底什么是引擎?什么是輕量級框架?什么是重量級框架?

其實引擎并沒有我們想的那么神奇，可以理解成封裝的更方便用的框架。引擎技術(shù)其實也是框架技術(shù)。兩者沒有本質(zhì)上的區(qū)別。前端我們適用的框架，大家熟知的有jquery，zepto，sea，Kissy等都是優(yōu)秀的框架。這些框架使用簡單，輕量，學(xué)習(xí)門檻很低。這些都是優(yōu)點。這些框架就像小積木一樣，每一種框架都有自己的特點，針對具體的使用場景，解決開發(fā)中遇見的痛點問題。例如jquery封裝了大量的Javascript的方法，解放工程師的重復(fù)編碼，瀏覽器兼容，動畫特效處理。但是我們在做移動方面的項目的時候會發(fā)現(xiàn)Jquery這樣的庫，不太實用，很顯然Jquery解決了很多PC瀏覽器兼容方便的事情，相對移動設(shè)備來說體積太大，很多兼容問題不復(fù)存在。那么就出現(xiàn)了zepto框架。zepto定位就是移動設(shè)備，這樣它的體積就小了很多。在例如我們處理javascript模塊加載問題的時候可以使用Sea.js。sea是一個遵循CommonJS規(guī)范的javascript模塊加載框架，可以實現(xiàn)javascript的模塊開發(fā)及加載框架。

每一種框架都有自給的一種設(shè)計理念和針對痛點給出的解決方法。盡可能的用少的代碼量，去解決更多的問題，同時給出一個方便使用的API。這些都是輕量級框架的優(yōu)點。但是這樣對于我們開發(fā)工程師來說，就面臨一個問題。我們在做一個項目的時候，會遇見很多很多問題，除了要模塊開發(fā)，還要動態(tài)加載，還要有模版技術(shù)，還有動畫處理。還有緩存處理，如果做的功能復(fù)雜點，還需要調(diào)用地理位置，重力感應(yīng)。需要許許多多的的小框架。如果不使用庫，自己去寫那么就要萬丈高樓從地起，一個一個的坑自己填。使用庫就像玩卡牌游戲一樣各種拼湊才能搞定。那么有沒有一個什么好的框架能一下搞定我們所有呢?

這個世界就是很奇妙，只要你有需要，就會有人解決你的需求。答案是有的，在前端的世界，在開源的世界里，想要什么都有現(xiàn)成的東西。說的優(yōu)點絕對了，但是我們從來不缺少工具。那么就出現(xiàn)了很多重量級框架，例如YUI，EXT，Anglar.js，Bootstrap等等。這些都屬于重量級框架，使用他們的好處是，大一統(tǒng)車同軌，書同文，統(tǒng)一度量衡。除了你要加載他們的核心庫以外，你想要什么，這些重量級框架還給你提供了很多很多插件，讓你用的爽歪歪。但是問題來了，首先這么重的東西，我們真的能用多少功能?而且重量級框架都有一個通病就是綁架了碼農(nóng)，碼農(nóng)的思維被束縛住了。只能按照他們的方式去編寫代碼。需要什么功能就是機械的去找插件，沒有完全匹配的就得擴展插件，一個不小心一個小問題搞半天。運氣再差點，出現(xiàn)個什么坑，還很難解決。很多靈活性就這樣的被吞噬了，現(xiàn)在我們都知道，開發(fā)速度意味著什么。還有就是重量級框架的學(xué)習(xí)無疑像學(xué)了一門語言一樣，對于團隊的學(xué)習(xí)成本也是很高的。出于種種原因，重量框架在實際中使用情況并不是特別的多。反正還是拼拼湊湊，不好用了自己換換來的實際。程序員寧愿自己拼湊，也不太想弄個套餐。所以才有了包括YUI這樣的重量級框架已經(jīng)不在更新的事情。

時代和觀念一直在改變和修正，重量級框架有太多的優(yōu)點但是不能真正的占據(jù)絕對份額，除了使用也還受限網(wǎng)絡(luò)等諸多原因。

簡言之，重量級框架集成了很多輕量級框架的特點，提供了統(tǒng)一的編碼規(guī)則。集成了很多小框架，避免了拼湊。但是它失去了靈活，綁架了開發(fā)，阻礙了擴展。增加了學(xué)習(xí)成本。

那么引擎到底是什么呢?首先引擎是框架。然后引擎要具備輕量級的優(yōu)點小，快，是個插件，是個模式。還要具備重量級框架的思想，可以給出統(tǒng)一的方法論，避免拼湊。同時引擎不應(yīng)該像重量級框架一樣去綁架開發(fā)，應(yīng)該可以提供靈活的方式去讓開發(fā)人員去使用。

二、引擎技術(shù)是怎么誕生的?

引擎技術(shù)要發(fā)揚輕量級框架的優(yōu)勢。插件開發(fā)而且是不侵入式開發(fā)，是面向切面的，在愿意使用的時候使用，不愿意的時候也能較為方便的抽離，引擎要繼續(xù)向重量級框架學(xué)習(xí)統(tǒng)一的思想，能給出完整的解決方案去盡可能的解決問題。

我們在編碼的時候，最常用的一個思想就是封裝，這也是框架和引擎技術(shù)的重要思想。我們把操作類的，動畫類的，渲染類的，業(yè)務(wù)類的都封裝完，然后看看是否還能再抽取一些更小的粒度，最后把這些封裝成一個一個類庫，最后按照一個良好的目錄和命名規(guī)則存放。方便引用，然后再給出一個合適的加載和調(diào)度的方式，去組合代碼。程序員在開放的時候，會不斷的擴充各種粒度庫。以后的開發(fā)就有點像搭積木了。那么，一個簡單的適用于我們項目的小框架就已經(jīng)有了雛形。

但是有這些遠(yuǎn)遠(yuǎn)不夠，因為還至少缺失一個重要的東西，就是規(guī)則。雖然編寫代碼的時候可以按照搭積木的方式去壘代碼，已經(jīng)少了很多硬生生的編寫。但是還是有壘代碼的操作。最后，我們會發(fā)現(xiàn)，在做一個功能的時候，大體上總是會有加載模版資源，請求數(shù)據(jù)，渲染處理，事件處理等等看上去不太一樣，但是方法論無數(shù)遍重復(fù)的工作。試想一下，如果我們能把這些重復(fù)的方式也變成了規(guī)則，讓代碼可以自動按照某種關(guān)系去自動執(zhí)行這些重復(fù)，我們就可以省去很多機械的重復(fù)的壘代碼的過程。

基于這個思想，我設(shè)計了規(guī)則引擎。Crow5就是在這樣的指導(dǎo)思想下誕生的。雖然不能完全實現(xiàn)代碼自動去生成代碼，但是應(yīng)該盡可能的讓代碼趨近于生成更多的代碼。那么代碼憑什么可以自己按照某種邏輯去生成代碼呢?很簡單，我寫了一個內(nèi)核，這個內(nèi)核啥也不干，就是去讀取我下達的指令，通過我下達的指令去完成壘代碼的過程。那么，指令是什么呢?就是我給這個內(nèi)核的一個配置文件。在這樣的一個思索過程中就有了以下的設(shè)計。

按照模塊開發(fā)，我們以前是control，service，module，dao分層去處理功能，最后模式發(fā)生了改變。分層最后是由內(nèi)核去拼裝代碼，最后我們只要給出指令就好了。

可以看到上圖，我們在編寫代碼的時候，方式發(fā)生了改變，以前需要寫邏輯控制代碼，功能代碼等。現(xiàn)在只需要提供一個叫做配置文件的指令。