最近一直在做網(wǎng)頁版的公式編輯器，現(xiàn)在進(jìn)度過半，我來總結(jié)一下這段時(shí)間開發(fā)網(wǎng)頁公式編輯器的經(jīng)驗(yàn)。
開始開發(fā)之前，我在網(wǎng)上搜集了大量網(wǎng)頁公式方面的資料，現(xiàn)在比較流行的網(wǎng)頁公式都是用MathML：數(shù)學(xué)置標(biāo)語言（Mathematical Markup Language，MathML），是一種基于XML的標(biāo)準(zhǔn)，用來在互聯(lián)網(wǎng)上書寫數(shù)學(xué)符號(hào)和公式的置標(biāo)語言。JsMath：是一種在網(wǎng)頁中顯示數(shù)學(xué)公式的方法，通過解析 TeX 代碼，結(jié)合 JavaScript 和 CSS 以及 unicode 字體 來顯示數(shù)學(xué)公式，支持多瀏覽器和平臺(tái)，無需 MathML 支持。諸如此類的技術(shù)還有，在此就不一一列舉。
經(jīng)過分析這些公式方法，發(fā)現(xiàn)他們各有優(yōu)缺點(diǎn)，譬如有的方法最后公式生成為一張圖片，雖然圖片不大可以忽略網(wǎng)絡(luò)傳輸?shù)膲毫?，但是一張?shù)學(xué)試卷上面得有多少這樣的小圖片，而且修改也不方便。雖然有的方法可以加載一個(gè)第三方的CSS來達(dá)到網(wǎng)頁顯示編輯的目的，但是跨瀏覽器的表現(xiàn)也不盡如人意。有的還需要安裝插件才能正常顯示。
Html+Css+ JavaScript實(shí)現(xiàn)非圖片的、在線網(wǎng)頁編輯器理念應(yīng)運(yùn)而生。這樣實(shí)現(xiàn)的網(wǎng)頁編輯器屏蔽的圖片實(shí)現(xiàn)的缺點(diǎn)，方便修改。于是，便開始分析《運(yùn)籌學(xué)》此書中用到的公式以及特點(diǎn)。
以下摘取同事在開發(fā)公式編輯器的時(shí)候的總結(jié)：“公式輸入或者書寫，都是由左向右由下向上的。整體結(jié)構(gòu)在閱讀時(shí)也是遵循這樣的規(guī)律的。.但是對(duì)于特殊的字符還要區(qū)分手寫和大寫，在公式前面可能會(huì)有屬性限定例如:Max Min …雖然不涉及運(yùn)算但是不能缺少的一個(gè)前綴。不同運(yùn)算符各個(gè)項(xiàng)的比例不一樣。括號(hào)輸入的同時(shí)也需要獨(dú)立一個(gè)項(xiàng)可以在括號(hào)外附加上下標(biāo)。.為了不影響輸入希望有插入設(shè)定能不在對(duì)整體改動(dòng)的情況下對(duì)細(xì)節(jié)進(jìn)行修改，方便輸入答案的時(shí)候不因?yàn)樾薷募?xì)節(jié)而影響過多時(shí)間。”
吸取這位仁兄的總結(jié)，以及項(xiàng)目經(jīng)理的建議，我把數(shù)學(xué)公式中分?jǐn)?shù)、幾次方、根號(hào)、積分等方法歸為一個(gè)。
如圖這九個(gè)方塊就可以滿足大部分的公式要求。我們把1號(hào)位置，叫做操作符，公式方法根據(jù)1號(hào)位置的符號(hào)來進(jìn)行位置移動(dòng)。例如：分?jǐn)?shù)，1號(hào)位置為分?jǐn)?shù)線，2號(hào)位置為分子，4號(hào)位置為分母。這樣分?jǐn)?shù)的大致形態(tài)就出來了，然后在進(jìn)行位置的微調(diào)便可達(dá)到。積分：1號(hào)位置為積分符號(hào)，3、6、7分別為數(shù)值，這樣實(shí)現(xiàn)了積分。
在html中，我們選用了span來表示方塊。我們參考了MathML中的語法：
如：MathML中顯示一個(gè)的代碼如下：
1 <math> 2 <mrow> 3 <mi>x</mi> 4 <mo>=</mo> 5 <mfrac> 6 <mrow> 7 <mrow> 8 <mo>-</mo> 9 <mi>b</mi>10 </mrow>11 <mo>±</mo>12 <msqrt>13 <mrow>14 <msup>15 <mi>b</mi>16 <mn>2</mn>17 </msup>18 <mo>-</mo>19 <mrow>20 <mn>4</mn>21 <mo>⁢</mo>22 <mi>a</mi>23 <mo>⁢</mo>24 <mi>c</mi>25 </mrow>26 </mrow>27 </msqrt>28 </mrow>29 <mrow>30 <mn>2</mn>31 <mo>⁢</mo>32 <mi>a</mi>33 </mrow>34 </mfrac>35 </mrow>36 </math>
我們實(shí)現(xiàn)剛才那個(gè)分?jǐn)?shù)和積分的代碼如下：
1 分?jǐn)?shù)： 2 <span math='frac' mathroot='true'> 3 <span></span> 4 <span>2</span> 5 <span>4</span> 6 </span> 7 8 積分： 9 <span math='integral3' mathroot="true">10 <span></span>11 <span>3</span>12 <span>6</span>13 <span>7</span>14 </span>
由此可以發(fā)現(xiàn)，我們的html代碼十分簡(jiǎn)潔，只有開頭span中表示它是一個(gè)數(shù)學(xué)公式和它是一個(gè)什么公式，瀏覽器便可以識(shí)別出它來。
下面是這兩個(gè)方法在瀏覽器中的樣子（比例有所放大）：
分別在IE8，Chrome19，Safari5.1.7測(cè)試…
今天稀里糊涂說了一大堆，各位看官可能發(fā)現(xiàn)最重點(diǎn)的JS實(shí)現(xiàn)沒有說出來，說實(shí)話，鄙人的JS知識(shí)淺薄，需要整理一下思路，欲知后文如何，各位看官且聽下回分解...
PS：自己看了一遍，發(fā)現(xiàn)這一篇廢話連篇，就是一個(gè)設(shè)計(jì)思路，重點(diǎn)如何實(shí)現(xiàn)思路大體說出來了，但是在具體一些還未涉及，后面如何寫還有待深思熟慮啊...小生今年剛剛畢業(yè)參加工作，是一個(gè)90后的程序員，還需要前輩們多多拍磚啊...
聯(lián)系客服
