技术的发展真的是日新月异，AJAX开始风生水起的时候，prototype是AJAX基础库的标准，很多AJAX库都是基于它的，而现在，jQuery很可能会或者已经取代prototype成为AJAX基础库了。不知道是我太后知后觉还是技术发展实在太快，短短几个月的时间，我已经又不熟悉最新的AJAX动态了。
Ruby语言的特性（以$为标志）向JavaScript转移的风气愈演愈烈，本来我是对这种风格不太认同的，但是感觉必须接受了，在简单和可读性之间，我们是得做一些牺牲了，毕竟一个东西变成大家都熟悉并引以为标准后，它的可读性无形上就提高了很多，因为你读不懂，只能说明你落后了，或者变成新“文盲”了。
解惑
解己之惑，解人之惑
分类：JavaScript (第1页共2页)
这个是同事今天遇到的问题，有一个Form，里面有几个下拉列表Select和一个输入框Input，点击按钮进入下一个页面，在下一个页面有一个后退按钮，点击后退按钮（调用的就是history.back()）返回前面的页面，页面上根据Form的内容拼接的一个字符串的内容不太对，那个Input输入框的部分的内容不正确，其它的下拉列表的内容是正确的，看了下他的代码，发现是使用document.write在页面加载过程中直接输出的，这个问题以前遇到过，但是我只是猜测浏览器的工作原理，没有找到权威的论据：
Input输入框是有一个defaultValue属性的，就是页面最开始的时候的值，如果用户修改输入框的值，那么变化的是value值，而如果进入下一个页面，然后使用浏览器的回退功能返回，那么页面加载的时候还是先加载的那个defaultValue的值，用户修改的那些值在页面完成加载后才会变化。所以同事遇到的那个问题可以通过页面的onLoad解决或者window.setTimeout解决。
明天到公司验证下，加些JavaScript应该可以确定这个过程。
我们产品中有一个动态添加内容的组件，但是实现方式比较差，是把全部的行都输出，一共输出50行，删除的行不能重用，也就是页面上只能一共增减50次，这样的功能其实应该是使用Javascript动态增减，上次我试验了一下，发现在IE下不行，我是保存一行的空白内容，然后对table使用insertRow，再设置innerHTML，结果IE总是报运行时异常，在FF下没有问题，搜索了下，发现是IE的限制。解决方法只能是使用标准的DOM方式一个TD一个TD的加，对TD可以设置innerHTML。
不知道其它的项目的页面上的字符串是怎么显示的，我们的产品中，有些字符串很长，但是显示他们的地方可能没有那么宽，换行又不美感，我们的解决方案是显示部分文章后面放一个放大镜，用户把鼠标移到放大镜上的时候显示全部的内容，但是这个方法有个缺点，就是字符的宽度都是不一样的，我们输出的时候选择输出固定个数的字符，这样很多时候就有一些空白的地方可以多显示一些字符的（要照顾全部是M或者W的情况，不考虑中文），然后美国那边要求研究一下有没有好一些的解决方法，可以根据宽度自动显示相应的字符串，如果某些部分的宽度调整了也自动的多显示或者少显示一些字符。
本来我找到一个使用CSS的方法，可以较好的满足上面的需求：
<style type=’text/css’>
.smartStringExpander {
word-break : break-all;
overflow:hidden;
width:200px;
}
</style>
<div class="smartStringExpander"><nobr>abcdefghi jklmnabcdefghi jklmnabcdefghij klmn111111111</nobr></div>
但是我怎么也不能再在后面加一个放大镜的图片了，如果把overflow那个属性移掉就可以在后面加了，但是又失去意义了。
郁闷
更新：
在郁闷的时候突然想到自己很傻，为什么把那两个部分丢到一个table里面呢，呵呵。
最终的例子：
阅读全文
今天又遇到一个浏览器兼容的问题，IE和FF的时间添加机制不一样，FF是addEventListener，IE是attachEvent，但是这个还不是全部，如果添加多个，这个顺序依然是不一样的，FF按照添加的顺序执行，而IE按照添加的倒序执行！
为了修正这个问题，只能使用变态的setTimeout避免这个，将对前面的结果有依赖的那个函数的调用放到setTimeout里面延迟执行。
一般我们都是直接设定一个事件处理函数，或者在事件处理字符串里面写一串连续调用的，但是在写一些通用的东西时就不好办了，这个时候就要动态添加多个事件处理函数了，样例代码为：
var ie = /msie/ig.test(navigator.userAgent);
if(ie) {
element.attachEvent("onfocus", focusSubmit);
} else {
element.addEventListener("focus", focusSubmit, false);
}
注意除了方法名不一样外，事件的名字也不一样，其它的事件类似。IE是带on的，而Mozilla系列（包括FF）是不带on的。
本来这个应该不是什么难事，但是我们是在一个受限的情况下写代码，我们有一个RadioSelectEntry类帮助我们生成RadioButton元素，但是又没有提供设置onclick事件的方法，只能在onload里面做，但是可能有多个，我不愿意写几个一样的方法，想根据参数动态设置，这就遇到问题了，因为一般都是这样：
element.onclick=functionName;
这里的functionName就是事件处理函数，但是我的是带参数的，怎么办？呵呵，一个小技巧就可以解决：匿名函数：
element.onclick=function() {
functionName(param);
};
很早就收到一个Bug说修改了某个元素的值以后，点击Next提交然后使用浏览器的Back按钮返回，结果那个元素的值是提交以前的值。
这个应该是浏览器的History功能的限制，它不能记录你的Javascript代码对Form元素的值的修改。在完成向导之类的功能的时候不要使用自定义的表单元素，或者不要用JavaScript去修改其它的需要提交的元素的值，这些修改都不会被浏览器的History功能记录。当用户点击浏览器的后退时，他可能看到不是他期望的结果。
一般要解决这个问题，要么禁用浏览器的后退功能（很多MIS系统可能都是这么干的），自己另外提供一个后退功能重新从后台取数据并刷新页面。
要么使用Cookie记录那些操作并在页面的onload事件里面从Cookie提取那些记录。
无论是那种方法都不是很方便。
不知道有没有完美的解决方案。另外这个问题对IE和FF都是有效的。
其实这个本来是我为了修正公司产品中的Tooltip实现想使用的东西，可惜架构师不太同意这样做，因为原来的产品中已经有相关的实现，引入第三方的东西不太好。
这个东西的功能很强大，我在一个兼职的项目中使用过，效果非常不错。
除了强大外，浏览器兼容也是没有问题的，如果你的页面上需要显示提示信息，这个是一个不错的选择。
产品的主页：http://www.bosrup.com/web/overlib/
这个是我们的产品中宽度可以调整的Frame和Table的原型代码，可以给大家参考下。关键点就是对鼠标事件的处理，这个方案有个不太好的地方就是修改的是document的鼠标事件，如果以后有更多的类似特性要支持，代码要修改的地方比较多，以后有时间再考虑有没有更好的方案，有经验的请告知。
© 2024 解惑
本主题由Anders Noren提供 — 向上 ↑