fengdh 发表于 2015-8-5 11:05:40

纯JavaScript实现的MDict解析器,请大家提建议

本帖最后由 fengdh 于 2015-8-5 12:49 编辑

我并非MDict深度用户,不过因为想为自己开发的浏览器插件提供本地离线字典功能,结果用纯JavaScript实现了一个MDict解析器。这个开源项目现在仍然开发之中,大家可以去 http://fengdh.github.io/mdict-js/ 围观,欢迎提出建议。这仅是一个在线功能演示,还不是一个MDict在线字典的完全实现。它没有服务器端,仅仅通过网页形式提供所需的Javascript库。需要用户从本地选择mdx而且可以附加一个mdd资源文件,因为不会上传服务器完全在本地解析查询,所以几乎是瞬间得到结果。现在可以支持图像/语音/简单跳转/模糊查询/mdd内置样式文件等等。

我用手头的LDOCE/OALD/Webster/American Heritage/WordNet多个版本做过测试,字典和资源文件支持词条索引加密但不支持需要注”册-码的索引头加密,支持文件压缩(gzip/lzo都可以)、词条链接、语音(wav和spx,需要mp3支持吗)。暂不支持超大文件(>4G,离线维基?)。暂不支持Stylesheet替换(还没遭遇过使用这个功能的字典,哪位可以提供个实例就太感谢了)。只对英语和汉语词典测试过,不知道其他语言有没有大问题。

我打算用它来实现支持单词管理的在线阅读辅助插件,和WordNet可视化字典WebApp等等。将来可以考虑用nw.js/electron/NativeScript来实现跨平台支持,或集成到如多看等基于WebkitView的应用。凭借现代浏览器的功能和Javascript,比较容易开发和扩展很多有意思的功能。比如,复用其他字典的语音资源,甚至给任意字典加上语音或者替换不甚人意的版本。更容易定制字典式样等等。希望大家能提一些有意思的想法,希望和有能之士合作。

忘了一点,暂时不支持IE(9-11,因为缺乏TextDecoder支持,已经找到polyfill有空加上),想来Windows10的Edge浏览器(号称全面兼容Chrome)应该没问题。

谢谢。






bt4baidu 发表于 2015-9-3 15:44:29

如果做成chrome的插件,能在chrome页面里分成左右两栏来,左边显示浏览网页,右边是词典查询界面及查询结果就好了,那样的话goldendict也可以退休了。楼主加油{:4_105:}

peterdocter 发表于 2015-8-5 15:03:55

fengdh 发表于 2015-8-5 14:04
您回复中提到的《剑桥高阶学习词典英汉双解第3版【CALD 4风格重新排版】》我下载之后并没有发现其中有页 ...

可能此词典作者还没有公开过吧。。。

dog
<link rel="stylesheet" type="text/css" href="CALDEC.css" /><a name="C_topz"> <a><span class=C_ENT>dog</span C_ENT><blockmark><a href="entry://#C_hkz1" class=CP_OS>noun</a> | <a href="entry://#C_hkz2" class=CP_OS>noun</a> | <a href="entry://#C_hkz3" class=CP_OS>verb</a> | <a href="entry://#C_hkz4" class=CP_OS>verb</a></blockmark>
<hr class=C_HR1><a name="C_hkz1"></a><a href="entry://#C_topz" class=C_NOT> 1 </a><br />
<span class=CHW>dog</span CHW> <span class="di-info"><span class="posgram"><span class=C_POS>noun</span C_POS> <span class=C_GRE>C</span C_GRE> <span class="C_GW">ANIMAL</span C_GW><span class=CD_CH>动物</span CD_CH>
<span class="Spron-uk" data-src-mp3="C-A-Muk_pron/u/ukd/ukdoc/ukdocud022.mp3" data-src-ogg="C-A-Muk_pron_ogg/u/ukd/ukdoc/ukdocud022.ogg"></span Spron-uk>
<span class="Spron-us" data-src-mp3="C-A-Mus_pron/d/dog/dog__/dog.mp3" data-src-ogg="C-A-Mus_pron_ogg/d/dog/dog__/dog.ogg"></span Spron-us>
<span class="pron">/<span class=C_IPA>dɒɡ</span>/</span>
<span class=C_IMGUS>US</span><span class="pron">/<span class=C_IPA>dɑːɡ</span>/</span> </span>
<span class=C_BODY><span class="sense-block">
<span class="sense-body"><span class="def-block"><span class="def-head"><span class="def-info"><span class=C_SQU>■</span></span><span class="def">a common animal with four legs, especially kept by people as a pet or to hunt or guard things</span></span><span class="def-body">
<span class=C_DCH>(尤指当作宠物或用来打猎、看护东西的)狗,犬</span C_DCH>
<span class=C_EX><span class=C_RND>•</span><span class=C_EEX>my pet dog</span><span class=C_CEX>我的宠物狗</span C_CEX></span>
<span class=C_EX><span class=C_RND>•</span><span class=C_EEX>wild dogs</span><span class=C_CEX>野狗</span C_CEX></span>
<span class=C_EX><span class=C_RND>•</span><span class=C_EEX>dog food</span><span class=C_CEX>狗粮</span C_CEX></span>
<span class=C_EX><span class=C_RND>•</span><span class=C_EEX>We could hear dogs barking in the distance.</span><span class=C_CEX>我们可以听到远处的狗叫声。</span C_CEX></span>
<span class="smartt"><span class="mcat"><span code="REAFE" class="cat-xref">Canines (dogs)</span></span></span></span></span></span></span sense-block></span C_BODY>
<hr class=C_HR1><a name="C_hkz2"></a><a href="entry://#C_topz" class=C_NOT> 2 </a><br />
<span class=CHW>dog</span CHW> <span class="di-info"><span class="posgram"><span class=C_POS>noun</span C_POS> <span class=C_GRE>C</span C_GRE> <span class="C_GW">PERSON</span C_GW><span class=CD_CH>人</span CD_CH>
<span class="Spron-uk" data-src-mp3="C-A-Muk_pron/u/ukd/ukdoc/ukdocud022.mp3" data-src-ogg="C-A-Muk_pron_ogg/u/ukd/ukdoc/ukdocud022.ogg"></span Spron-uk>
<span class="Spron-us" data-src-mp3="C-A-Mus_pron/d/dog/dog__/dog.mp3" data-src-ogg="C-A-Mus_pron_ogg/d/dog/dog__/dog.ogg"></span Spron-us>
<span class="pron">/<span class=C_IPA>dɒɡ</span>/</span>
<span class=C_IMGUS>US</span><span class="pron">/<span class=C_IPA>dɑːɡ</span>/</span> </span>
<span class=C_BODY><span class="sense-block">
<span class="sense-body"><span class="def-block"><span class="def-head"><span class="def-info"><span class=C_SQU>■</span><span class=C_LAB><span class=C_USAG>slang</span></span></span> <span class="def">a man who is unpleasant or not to be trusted</span></span><span class="def-body">
<span class=C_DCH>讨厌的家伙,惹人烦的家伙;失信者</span C_DCH>
<span class=C_EX><span class=C_RND>•</span><span class=C_EEX>He tried to steal my money, the <span class=C_STR>dirty</span> dog.</span><span class=C_CEX>这个无赖,他想偷我的钱。</span C_CEX></span>
<span class="smartt"><span class="mcat"><span code="NLL" class="cat-xref">Kinds of men</span><span class="scat"><span code="NGFA" class="cat-xref">Men and women</span></span></span><span class="mcat"><span code="F1KB" class="cat-xref">Unpleasant men</span><span class="scat"><span code="F1KC" class="cat-xref">Unpleasant people in general</span></span></span></span></span></span> <span class="def-block"><span class="def-head"><span class="def-info"><span class=C_SQU>■</span><span class=C_LAB><span class=C_USAG>offensive</span></span></span> <span class="def">a woman who is not attractive</span></span><span class="def-body">
<span class=C_DCH>丑女</span C_DCH>
<span class="smartt"><span class="mcat"><span code="F1KA" class="cat-xref">Unpleasant women</span></span></span></span></span></span></span sense-block></span C_BODY>
<hr class=C_HR1><a name="C_hkz3"></a><a href="entry://#C_topz" class=C_NOT> 3 </a><br />
<span class=CHW>dog</span CHW> <span class="di-info"><span class="posgram"><span class=C_POS>verb</span C_POS> <span class=C_GRE>T</span C_GRE> <span class="C_GW">FOLLOW</span C_GW><span class=CD_CH>跟随</span CD_CH>
<span class="Spron-uk" data-src-mp3="C-A-Muk_pron/u/ukd/ukdoc/ukdocud022.mp3" data-src-ogg="C-A-Muk_pron_ogg/u/ukd/ukdoc/ukdocud022.ogg"></span Spron-uk>
<span class="Spron-us" data-src-mp3="C-A-Mus_pron/d/dog/dog__/dog.mp3" data-src-ogg="C-A-Mus_pron_ogg/d/dog/dog__/dog.ogg"></span Spron-us>
<span class="pron">/<span class=C_IPA>dɒɡ</span>/</span>
<span class=C_IMGUS>US</span><span class="pron">/<span class=C_IPA>dɑːɡ</span>/</span> <span class="irreg-infls">(<span class="inf-group"><span class=C_INF>-gg-</span></span>)</span></span>
<span class=C_BODY> <span class="sense-block">
<span class="sense-body"><span class="def-block"><span class="def-head"><span class="def-info"><span class=C_SQU>■</span></span><span class="def">to follow someone closely and continuously</span></span><span class="def-body">
<span class=C_DCH>跟随;跟踪</span C_DCH>
<span class=C_EX><span class=C_RND>•</span><span class=C_EEX>Reporters dogged him for answers.</span><span class=C_CEX>记者们跟着他让他回答问题。</span C_CEX></span>
<span type="See_also" class="entry-xref"><span class=C_ARR>⇒</span><span class=C_LAB>See also</span> <span class=C_x><a href="entry://dogged" class=C_REF>dogged</a></span></span><span class="smartt"><span class="mcat"><span code="DK" class="cat-xref">Pursuing</span></span></span></span></span></span></span sense-block></span C_BODY>
<hr class=C_HR1><a name="C_hkz4"></a><a href="entry://#C_topz" class=C_NOT> 4 </a><br />
<span class=CHW>dog</span CHW> <span class="di-info"><span class="posgram"><span class=C_POS>verb</span C_POS> <span class=C_GRE>T</span C_GRE> <span class="C_GW">PROBLEM</span C_GW><span class=CD_CH>问题</span CD_CH>
<span class="Spron-uk" data-src-mp3="C-A-Muk_pron/u/ukd/ukdoc/ukdocud022.mp3" data-src-ogg="C-A-Muk_pron_ogg/u/ukd/ukdoc/ukdocud022.ogg"></span Spron-uk>
<span class="Spron-us" data-src-mp3="C-A-Mus_pron/d/dog/dog__/dog.mp3" data-src-ogg="C-A-Mus_pron_ogg/d/dog/dog__/dog.ogg"></span Spron-us>
<span class="pron">/<span class=C_IPA>dɒɡ</span>/</span>
<span class=C_IMGUS>US</span><span class="pron">/<span class=C_IPA>dɑːɡ</span>/</span> <span class="irreg-infls">(<span class="inf-group"><span class=C_INF>-gg-</span></span>)</span></span>
<span class=C_BODY> <span class="sense-block">
<span class="sense-body"><span class="def-block"><span class="def-head"><span class="def-info"><span class=C_SQU>■</span></span><span class="def">to cause difficulties</span></span><span class="def-body">
<span class=C_DCH>困扰,阻碍</span C_DCH>
<span class=C_EX><span class=C_RND>•</span><span class=C_EEX>Technical problems dogged our trip from the outset.</span><span class=C_CEX>技术问题从旅行一开始就一直困扰着我们。</span C_CEX></span>
<span class="smartt"><span class="mcat"><span code="FeN" class="cat-xref">Inconvenience</span></span></span></span></span></span></span sense-block></span C_BODY>
</>
给你部分demo内容。。。

fengdh 发表于 2015-9-4 13:30:21

本帖最后由 fengdh 于 2015-9-4 16:32 编辑

bt4baidu 发表于 2015-9-3 15:36
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=12743&extra=page%3D1
里面的动态功能都是 ...

已经修改了online demo,加入了对内嵌JavaScript的支持。

关于插件,联系过ChaZD插件的作者,看他能不能加上对MDict的支持。
不知道你有没有兴趣一起开发?我想做成这样的
http://www.hi-pda.com/forum/viewthread.php?tid=1210672
http://www.hi-pda.com/forum/attachments/day_130624/1306241305eddec3df8b826a28.png

有一点建议,内嵌JavaScript(l.js)中直接用了很多全局变量/函数,对于模块化来说不是很好。建议用匿名函数即刻调用的形式来尽量避免污染全局空间。比如:

(function _my_code(window) {
   function u(c, n) {..}
   ..
   function w() {..}
   var F = 0;

   function i() {
   if (!F) {
       F = 1;
       w();
       if (!window.ActiveXObject && window.addEventListener) window.addEventListener("resize", w, false);
   }
   }
   if (window.addEventListener) window.addEventListener("load", i, false);
   else window.attachEvent("onload", i);
   
}) (this);/* In global scope, "this" is the window object. */


具体到你提供的 l.js, 只在window的onload事件中调用resize处理,以显示选中(或初始A)字母开头的单词项。而在我实现的查词界面只会部分更新单词定义的内容,不会每次重载页面以立即显示A开头的单词列表。无奈我之好延迟发送resize事件。不知道你可否修改的更好一点。

另外,现在JavaScript一般不用 with 语句以免降低程序性能。而大多数浏览器除了 document.getElementByTagName() 之外,还提供了 querySelectorAll()和 querySelector(),使用CSS同样的语法更容易选中特定HTML元素。

Oeasy 发表于 2015-8-5 11:12:55

本帖最后由 Oeasy 于 2015-8-5 11:18 编辑

{:4_105:}

2015年8月5日 11:17:33
换了浏览器可以了。如果词库文件含mdd,【选择文件】必须把mdd也选上,不然排版都没了,换言之,也就是目前不能自动识别、加载同名mdd文件噢。
<del>想法相当赞啊,不过刚试了,貌似还查不了词噢。</del>

fengdh 发表于 2015-8-5 11:17:38

Oeasy 发表于 2015-8-5 11:12
想法相当赞啊,不过刚试了,貌似还查不了词噢。

可以查字典。

1. 需要先选择本地字典文件。
2. github可能比较慢,多刷两次页面更新,等那个写着paddle的输入框变漂亮了就说明加载成功了。参考截图。
3. 写着paddle的输入框,点击一下,按回删键(backspace),就可以输入新词了。

fengdh 发表于 2015-8-5 11:20:10

本帖最后由 fengdh 于 2015-8-5 11:21 编辑

Oeasy 发表于 2015-8-5 11:12
2015年8月5日 11:17:33
换了浏览器可以了。如果词库文件含mdd,【选择文件】必须把mdd也选 ...

出于安全原因,浏览器是不能自动加载文件的。不过插件可以。

关于排版,正在考虑允许同时选择CSS文件。

IE是个坏孩子,暂时请忽视它。

peterdocter 发表于 2015-8-5 11:47:16

<span class="C_ENT">dog</span><blockmark></blockmark></a><a href="entry://#C_hkz1" class="CP_OS">noun</a> | <a href="entry://#C_hkz2" class="CP_OS">noun</a> | <a href="entry://#C_hkz3" class="CP_OS">verb</a> | <a href="entry://#C_hkz4" class="CP_OS">verb</a>
内跳还是有问题。。。
没有再分析或直接替换成#C_hkz4

fengdh 发表于 2015-8-5 12:13:37

本帖最后由 fengdh 于 2015-8-5 12:41 编辑

peterdocter 发表于 2015-8-5 11:47
dognoun | noun | verb | verb
内跳还是有问题。。。
没有再分析或直接替换成#C_hkz4

谢谢意见。

含 # 的页内跳转确实还没做好,可否问一下您用的是哪个字典文件我好参考一下。

我有一个LDOCE5字典有类似跳转,好象是用于不同词性之间的快速切换。我不清楚您所提的情况需要跳转到页内何处?可否说明一下。
我猜想这也许不是MDict普遍特性,而是一部分字典的特性,实现方法和策略各有不同,需要一个扩展机制来分别实现?

peterdocter 发表于 2015-8-5 12:51:47

fengdh 发表于 2015-8-5 12:13
谢谢意见。

含 # 的页内跳转确实还没做好,可否问一下您用的是哪个字典文件我好参考一下。


https://pdawiki.com/forum/forum.php?mod=viewthread&tid=13117

fengdh 发表于 2015-8-5 14:04:29

peterdocter 发表于 2015-8-5 12:51
https://pdawiki.com/forum/forum.php?mod=viewthread&tid=13117

您回复中提到的《剑桥高阶学习词典英汉双解第3版【CALD 4风格重新排版】》我下载之后并没有发现其中有页内跳转的项目。可否请您再确认一下,最好说明一下页内如何跳转的。

fengdh 发表于 2015-8-5 15:41:07

peterdocter 发表于 2015-8-5 15:03
可能此词典作者还没有公开过吧。。。

dog


谢谢您提供的信息,通过重写<a>的href,现在页内跳转已经可以正常工作了。

您可以在顶楼提到的MDict online demo页面确认。

chigre3 发表于 2015-8-5 17:09:33

wow!,测试了一下 真是激动

zheshijie 发表于 2015-8-5 17:41:06

神啊

cyborg423 发表于 2015-8-5 18:08:42

学习中

Oeasy 发表于 2015-8-6 08:09:24



感谢楼主辛苦工作。
反馈一个。
查询框不太方便,要输入新词的话,需要先光标删除旧词(字母),甚至不能用鼠标选中复制 OR 粘贴(进)查询框里(的内容)。
如图,我想复制查询框里的 faint ,貌似不可以。我想粘贴剪贴板里的东东进查询"框",貌似也不可以。
https://www.pdawiki.com/forum/data/attachment/album/201508/06/080910d00h9z9qu99wh9my.png


fengdh 发表于 2015-8-6 08:51:32

本帖最后由 fengdh 于 2015-8-7 14:12 编辑

Oeasy 发表于 2015-8-6 08:09
感谢楼主辛苦工作。
反馈一个。
查询框不太方便,要输入新词的话,需要先光标删除旧词(字母),甚至 ...

这只是个概念验证/功能演示版,离完工还远着呢。
现在专注修改核心,界面等有空慢慢改吧,
真希望有UI/UX经验的同道加入合作。

具体到这个输入问题,我会替换autocomplete部件。

ok927 发表于 2015-8-7 00:34:55

语音方面,建议支持mp3格式的mdd文件。

fengdh 发表于 2015-8-7 08:54:21

ok927 发表于 2015-8-7 00:34
语音方面,建议支持mp3格式的mdd文件。

已经修改了程序,应当可以支持MP3语音。同时改善了候选词条的显示速度,更加流畅。

不过我手头没有使用MP3语音的字典文件,可否提供一个用来测试。

peterdocter 发表于 2015-8-7 13:03:23

fengdh 发表于 2015-8-5 15:41
谢谢您提供的信息,通过重写的href,现在页内跳转已经可以正常工作了。

您可以在顶楼提到的MDict on ...

不错!不过还有一个bug
<a href="entry://dogged" class="C_REF">dogged</a></
没有进行entry://进行二次替符合你定制的查询格式

fengdh 发表于 2015-8-7 13:11:20

本帖最后由 fengdh 于 2015-8-7 13:32 编辑

peterdocter 发表于 2015-8-7 13:03
不错!不过还有一个bug
dogged

这个其实不是BUG,仓促修改有点前后做法不一,我以后会尽量修改。

当点击形如 entry:// 非页内跳转链接时,延后动态解析,如果字典中存在该项目仍然会跳转。

不过您给的 dog.mdx 里只有一个词条,自然无法跳转了。

已经把不论页内页外链接都改成延后解析再跳转。

peterdocter 发表于 2015-8-7 13:18:56

fengdh 发表于 2015-8-7 13:11
这个其实不是BUG,仓促修改有点前后做法不一,我以后会尽量修改。

当点击形如 entry:// 非页内跳转 ...

再给你demo调试,而且可以连跳了{:4_100:}

fengdh 发表于 2015-8-7 13:41:24

peterdocter 发表于 2015-8-7 13:18
再给你demo调试,而且可以连跳了

我已经把页内页外跳转都改成延后解析了。所以状态条仍然显示为entry://***。请确认一下。

另外看到您后来给的dogs.rar中出现了 mdxentry:// 这样的链接,应当也是字典内资源链接。除此之外还有类似的吗?

dogs.mdx语音似乎使用了mp3,能不能提供mdd文件我好测试一下mp3支持。

回复验证太麻烦,试了试发私信不知有没有看到?

STFU 发表于 2015-8-30 20:56:23

本帖最后由 STFU 于 2015-8-30 21:51 编辑

支持!
原來樓主就是因為Chrome插件而開發的
https://github.com/fengdh/ChaZD

今年度有可能融入到插件裡嗎?

bt4baidu 发表于 2015-9-1 17:51:28

词典里面有javascript脚本的话,似乎解析不出来

fengdh 发表于 2015-9-3 08:27:10

bt4baidu 发表于 2015-9-1 17:51
词典里面有javascript脚本的话,似乎解析不出来

原闻其详。如果能够提供含JavaScript的mdx实例来调试就更好了。

bt4baidu 发表于 2015-9-3 15:36:08

fengdh 发表于 2015-9-3 08:27
原闻其详。如果能够提供含JavaScript的mdx实例来调试就更好了。

https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=12743&extra=page%3D1
里面的动态功能都是js-AJAX实现的
页: [1] 2
查看完整版本: 纯JavaScript实现的MDict解析器,请大家提建议