开启多部词库时如何从根本上避免CSS,JS脚本渲染冲突？

starmars · 发表于 2020-5-5 02:20:05

本帖最后由 starmars 于 2020-5-20 21:59 编辑

大家可能都有这种经历：词典软件如果只打开一部词典都显示得好好的，但如果同时打开了多部词库，或者以前打开多部词库没问题但软件升级后，某些词典显示就会发生混乱。

本文讨论这种混乱的原因及解决方案。

词典软件的一个重要功能和任务便是将同时打开的多部词库的某一个单词在每部词库中的HTML最后拼接组合在同一个HTML中，且相互不发生渲染显示的冲突。如果词库未变化，仅因软件升级而显示混乱，那可能是因为软件升级后使用了和旧版不相同的冲突避免算法，而新的算法可能正好不适合某部词典而旧算法反而对路。

如果不同的词库的CSS代码selector选上了两个词库HTML中同标签名同类名的元素，就可能发生渲染冲突。解决方案是词典软件修改CSS代码，每个selector加上一个名字每个词库唯一的前缀，将词库HTML代码放到它的前缀标签中去。欧路电脑版启动之后去看目录：C:\Users\Administrator\AppData\Roaming\Francochinois\eudic\tmp\_mdx_X_XXXXXXXXX 这些里面就是经过欧路改造的CSS。但即使这样做，还是不能完全100%保证无冲突，那么什么时候这样做还有问题呢？有高人知道吗？

除了CSS冲突，JS也可能冲突。如果两个词库的JS程序使用了同名顶级层次的函数，变量，就可能出问题。解决方案是编程时尽量少用顶层元素，而是利用JS的函数独立的作用域将所有代码包裹在一个名字每个词库唯一的顶层立即执行函数中。但仍旧有几个JS冲突问题待解决：

（1）程序员自己的JS程序中在使用JS库中提供的selector语法时，因为两个MDX词库有相同或类似的HTML代码导致两个JS程序中有相同的selector。显然词典软件可以如前所述扫描修改CSS加前缀，这很简单，但如果还要扫描分析JS来自动为程序员JS中写的selector加上前缀，难度太大了！没有雄厚的技术实力的大公司团队协作，小作坊公司的技术人员是不大可能做到的。但是这个问题也可以解决：在使用selector时尽量多使用多余的父标签，这些父标签本可不用就可以选择出需要的HTML元素，纯粹是为了让selector长度尽可能长，从而减少和其他词库HTML的selector冲突的概率。另一个更为彻底的解决方案是：在MDX中词头HTML最顶层或最前面加入类名或标签名词库唯一的空标签作为标记，CSS和JS中所有selector都以这个标签作为父标签或者兄弟标签。

（2）两个JS都引入同一种但版本不同的JS库

如果有多部MDX词库都有JS代码且都引入了jQuery库，如两部MDX词库A和词库B的JS代码都有：<script src="jQueryMini.js"></script>这样引入。我猜测如果两个JS程序引入的jquery文件名相同这本身不会有什么问题，因为词典软件会去读取硬盘中jQuery库代码然后准确无误地插入到引入它的那个特定的JS程序中。但如果两个jQuery库有版本差异，且程序A和B正好都用到了在两个jquery库中有版本差异的某同名函数，那么是否有逻辑混乱的冲突的可能？有人遇到过这个问题吗？

引入两次jQuery库，相当于定义了两次同名的对象，函数等元素，前面先引入的定义是否会覆盖后引入的定义？

使用jQuery的JS代码都要用到美元符号$, 怎么保证词库A的JS代码运行时用到的$一定是A引入的那个版本jquery库中定义的，而不是B引入的jquery库中定义的?

这个问题似乎不好解决，因为库的代码不是我们自己写的，JS库代码总有顶级的变量或函数供使用的。现有的HTML语法有何机制可以将JS库代码引入到自己定义的函数作用域中去吗？貌似没有？！解决方案是：别忘记词典软件是个桌面软件，它什么都可以干，为什么它不可以预处理读出JS库代码插入到一个名字每个词库唯一的顶级立即执行函数中？要么将此函数仅放在内存中，要么在硬盘上保存成一个文件都可以啊。那么，欧路，深蓝，goldendict这些软件是这么做的吗？貌似没有啊？! 为什么不去做呢？这个没啥难度而且从根本上解决问题？探讨一下？
—— 今天，上面“两个JS都引入同一种但版本不同的JS库 ”这个问题终于有办法解决了！—— 很简单，不要在HTML中象<script src="jQueryMini.js"></script>这样引入jQuery库，而是将jQueryMini.js代码复制粘贴到自己的JS文件的前面，把自己的代码和jQuery库的代码包裹在一个匿名（或不与其他词库JS重名的）立即执行函数中。这样就圆满解决了。

这里有一篇文章探讨这个问题： https://www.cnblogs.com/starof/p/6855186.html

———— 最后一个更重要的问题：在现有的词典软件的条件下，除了这里讨论的，还有什么其他值得程序员注意的地方尽量避免冲突的？

希望加入讨论贡献您的力量！

EarthWorm · 发表于 2020-5-5 03:14:33

可以将现有的多部词典竖向依次排列的方式改为横向多页, 就像浏览器的多个标签页, 即可从根本上上解决问题, 但对于词典达人, 一个软件里要装 10 几本或几十本词典的, 横向也是灾难...

喬治兄 · 发表于 2020-5-5 08:53:31

本帖最后由喬治兄于 2020-5-5 09:19 编辑

EarthWorm 发表于 2020-5-5 03:14
可以将现有的多部词典竖向依次排列的方式改为横向多页, 就像浏览器的多个标签页, 即可从根本上上解决问题, ...

EarthWorm 兄:
請教一下
1. 您說的概念是否是如同 spoiltbrat 大工具Mdict Editor Tool v2.0.35 所處裡的方式
因我看合併辭典的格式是從 <title> 標籤來處理分開的....如此就如同分開的網頁
但這是綁同一個詞頭 <head> 標籤的處理方法....
2. 請賜教 : 非同步畫面的詞頭顯示 https://www.pdawiki.com/forum/thread-40145-1-1.html
若想達此非同步查詢....該如何實現
A, B 畫面各查各的 <head>標籤不限定卻又能在同一畫面上
是否可透過個單詞輸入框去呼叫各自 <title> 標籤下的 <head> 標籤
怎麼實現呢.......???

Thanks a lot

喬治兄 · 发表于 2020-5-5 09:08:28

本帖最后由喬治兄于 2020-5-5 09:14 编辑

starmars 兄:
不是很理解您問題的核心...只是對你描述的問題建議
或許下列工具會有所幫助
[工具] Mdict Editor Tool v2.0.35 -- 多功能个性化词典制作工具
https://www.pdawiki.com/forum/thread-18986-1-1.html

EarthWorm · 发表于 2020-5-5 14:38:09

喬治兄发表于 2020-5-5 08:53
EarthWorm 兄:
請教一下
1. 您說的概念是否是如同 spoiltbrat 大工具Mdict Editor Tool v2.0.35 所處裡的 ...

乔治兄:

不用那么客气啊...

1. 这个帖子里我回复描述的东西是希望词典软件的作者从编写词典软件的角度来实现这个功能, 我觉得词库本身是做不出这种效果的, 词库能做到的最多就是实现类似浏览器的标签页, 不同的词典放在不同的标签, 可以点击切换, 但是这种用 css 实现的标签页需要改词库源文件, 而且拼合应该不容易, 且还是不能避免楼主所说的干扰问题的产生.
2. 第二个我去你原贴里回复了, 就是不知道我有没有理解对你的需求...

孤影 · 发表于 2020-5-5 14:42:06

喬治兄发表于 2020-5-5 00:08
starmars 兄:
不是很理解您問題的核心...只是對你描述的問題建議
或許下列工具會有所幫助

刚刚发现作者低调的更新了

孤影 · 发表于 2020-5-5 14:43:36

CSS可以比较方便的处理,加个关键字,可以很方便的替换
wystjxsc_

孤影 · 发表于 2020-5-5 14:51:48

还有,还有一个很好的办法可以解决冲突,就是打包css,js文件为MDD
多数情况下的冲突是由外置css,js导致的

喬治兄 · 发表于 2020-5-5 17:26:54

孤影发表于 2020-5-5 14:51
还有,还有一个很好的办法可以解决冲突,就是打包css,js文件为MDD
多数情况下的冲突是由外置css,js导致的

孤影兄指導一下如何實現
[求助] 請賜教 : 非同步畫面的詞頭顯示
https://www.pdawiki.com/forum/fo ... ;tid=40145#lastpost
Thanks a lot

喬治兄 · 发表于 2020-5-5 17:49:40

孤影发表于 2020-5-5 14:42
刚刚发现作者低调的更新了

孤影兄:
小弟已驗証多時 spoiltbrat 大工具Mdict Editor Tool v2.0.35
基本上沒什大問題....

starmars · 发表于 2020-5-5 23:26:06

孤影发表于 2020-5-5 14:51
还有,还有一个很好的办法可以解决冲突,就是打包css,js文件为MDD
多数情况下的冲突是由外置css,js导致的

我不理解打包CSS和JS到MDD对解决冲突有何作用？JS最后还是得解压读出来嵌入到HTML中，CSS也得解压出来供引擎渲染，这和不打包直接外置不是一样的吗？

孤影 · 发表于 2020-5-5 23:30:23

starmars 发表于 2020-5-5 14:26
我不理解打包CSS和JS到MDD对解决冲突有何作用？JS最后还是得解压读出来嵌入到HTML中，CSS也得解压出来供 ...

软件对这两种存储方式的CSS处理方式不一样吧.
我电脑上的The little dict就是用这个方法解决的冲突

starmars · 发表于 2020-5-6 14:41:22

孤影发表于 2020-5-5 23:30
软件对这两种存储方式的CSS处理方式不一样吧.
我电脑上的The little dict就是用这个方法解决的 ...

请问您用的哪个软件，电脑版还是手机版，哪个版本，哪部词典出现了这种情况呢？

孤影 · 发表于 2020-5-6 14:46:33

starmars 发表于 2020-5-6 05:41
请问您用的哪个软件，电脑版还是手机版，哪个版本，哪部词典出现了这种情况呢？ ...

[2019.3.13]多功能百宝箱词典 - The little dict
https://www.pdawiki.com/forum/thread-30146-1-1.html
(出处: 掌上百科 - PDAWIKI)

[讨论] 开启多部词库时如何从根本上避免CSS,JS脚本渲染冲突？