TA的每日心情 | 擦汗
2020-7-3 13:51 |
|---|
签到天数: 19 天 [LV.4]偶尔看看III
|
本帖最后由 starmars 于 2020-5-20 21:59 编辑
# @# d. U$ R3 m: w- @1 r6 a2 r6 F0 G, V* f( S) e9 _% `0 t
大家可能都有这种经历：词典软件如果只打开一部词典都显示得好好的，但如果同时打开了多部词库，或者以前打开多部词库没问题但软件升级后，某些词典显示就会发生混乱。) R& @0 J, M- O- @: P
: e7 H4 {0 t+ w! [' j6 S' k本文讨论这种混乱的原因及解决方案。/ g0 |- t( |5 j& y, M. \' R
/ l1 `. C4 Y7 j' {0 _" X8 @2 h词典软件的一个重要功能和任务便是将同时打开的多部词库的某一个单词在每部词库中的HTML最后拼接组合在同一个HTML中，且相互不发生渲染显示的冲突。如果词库未变化，仅因软件升级而显示混乱，那可能是因为软件升级后使用了和旧版不相同的冲突避免算法，而新的算法可能正好不适合某部词典而旧算法反而对路。. f& G/ S+ `: ?; s+ G5 t
3 z t1 P! h) T2 b如果不同的词库的CSS代码selector选上了两个词库HTML中同标签名同类名的元素，就可能发生渲染冲突。解决方案是词典软件修改CSS代码，每个selector加上一个名字每个词库唯一的前缀，将词库HTML代码放到它的前缀标签中去。欧路电脑版启动之后去看目录：C:\Users\Administrator\AppData\Roaming\Francochinois\eudic\tmp\_mdx_X_XXXXXXXXX 这些里面就是经过欧路改造的CSS。但即使这样做，还是不能完全100%保证无冲突，那么什么时候这样做还有问题呢？有高人知道吗？+ r) B0 K7 Y. U3 D2 d- x( e% W
) i/ Q0 @/ @: j) _
除了CSS冲突，JS也可能冲突。如果两个词库的JS程序使用了同名顶级层次的函数，变量，就可能出问题。解决方案是编程时尽量少用顶层元素，而是利用JS的函数独立的作用域将所有代码包裹在一个名字每个词库唯一的顶层立即执行函数中。但仍旧有几个JS冲突问题待解决：
) x# v" w( o' O# O& }: }' H3 r- @2 X' w/ m4 Z
（1）程序员自己的JS程序中在使用JS库中提供的selector语法时，因为两个MDX词库有相同或类似的HTML代码导致两个JS程序中有相同的selector。显然词典软件可以如前所述扫描修改CSS加前缀，这很简单，但如果还要扫描分析JS来自动为程序员JS中写的selector加上前缀，难度太大了！没有雄厚的技术实力的大公司团队协作，小作坊公司的技术人员是不大可能做到的。但是这个问题也可以解决：在使用selector时尽量多使用多余的父标签，这些父标签本可不用就可以选择出需要的HTML元素，纯粹是为了让selector长度尽可能长，从而减少和其他词库HTML的selector冲突的概率。另一个更为彻底的解决方案是：在MDX中词头HTML最顶层或最前面加入类名或标签名词库唯一的空标签作为标记，CSS和JS中所有selector都以这个标签作为父标签或者兄弟标签。
9 F- w, }9 E" Q( G& F P3 G- a3 T6 Q! r5 l- ^
（2）两个JS都引入同一种但版本不同的JS库 , f0 M4 v! @% A! Y( t( V. ?9 I5 `' C' n
/ x/ a7 X* P8 P- u
如果有多部MDX词库都有JS代码且都引入了jQuery库，如两部MDX词库A和词库B的JS代码都有：<script src="jQueryMini.js"></script>这样引入。我猜测如果两个JS程序引入的jquery文件名相同这本身不会有什么问题，因为词典软件会去读取硬盘中jQuery库代码然后准确无误地插入到引入它的那个特定的JS程序中。 但如果两个jQuery库有版本差异，且程序A和B正好都用到了在两个jquery库中有版本差异的某同名函数，那么是否有逻辑混乱的冲突的可能？ 有人遇到过这个问题吗？
: V( s! j7 U5 t; l7 @$ b
) X' @" T) r, R. _引入两次jQuery库，相当于定义了两次同名的对象，函数等元素，前面先引入的定义是否会覆盖后引入的定义？) W9 e$ c; o; A. G9 g3 \
! M! h3 w& A x, |! H/ T使用jQuery的JS代码都要用到美元符号$, 怎么保证词库A的JS代码运行时用到的$一定是A引入的那个版本jquery库中定义的，而不是B引入的jquery库中定义的?6 K( ]# h9 W$ b2 ~. [, c ~6 u& ~
; Z# L, ?' \$ Y. I( d% v! v7 Z3 m这个问题似乎不好解决，因为库的代码不是我们自己写的，JS库代码总有顶级的变量或函数供使用的。现有的HTML语法有何机制可以将JS库代码引入到自己定义的函数作用域中去吗？貌似没有？！解决方案是：别忘记词典软件是个桌面软件，它什么都可以干，为什么它不可以预处理读出JS库代码插入到一个名字每个词库唯一的顶级立即执行函数中？要么将此函数仅放在内存中，要么在硬盘上保存成一个文件都可以啊。那么，欧路，深蓝，goldendict这些软件是这么做的吗？貌似没有啊？! 为什么不去做呢？这个没啥难度而且从根本上解决问题？探讨一下？5 X* Y( [; h- y1 ~5 m7 d
—— 今天，上面“两个JS都引入同一种但版本不同的JS库 ”这个问题终于有办法解决了！—— 很简单，不要在HTML中象<script src="jQueryMini.js"></script>这样引入jQuery库，而是将jQueryMini.js代码复制粘贴到自己的JS文件的前面，把自己的代码和jQuery库的代码包裹在一个匿名（或不与其他词库JS重名的）立即执行函数中。这样就圆满解决了。
3 d P6 j2 V9 k) W% k, \) |" j+ ~* _& p. ~
这里有一篇文章探讨这个问题： https://www.cnblogs.com/starof/p/6855186.html# v) F& i7 F) I9 S4 A8 V3 K
: W* A9 F# t2 i* T( n
———— 最后一个更重要的问题：在现有的词典软件的条件下，除了这里讨论的，还有什么其他值得程序员注意的地方尽量避免冲突的？3 Y7 O8 v l1 y, o" L
% f/ R; A) N G' b v. m9 i希望加入讨论贡献您的力量！
6 O$ C( j$ J1 S! o4 L7 @7 ?3 H1 W* G4 s- s% Z
# w, [0 C1 M: H" s( U6 ?5 V0 I! D C; B
|
|
发表于 2020-5-5 02:20:05
! y9 O% `' l3 Z% U
( b& K& R0 J6 J, g+ `# G
发表于 2020-5-5 14:42:06
0 |3 f: s7 R6 [
楼主
软件对这两种存储方式的CSS处理方式不一样吧.& }, a i. I) D. j6 R. q
" ~0 I: [; f/ n! [1 s3 ~! ?7 f0 k