搜狗云输入法JS文件剖析（一）

最新推荐文章于 2020-12-21 12:38:37 发布

weixin_30496431

最新推荐文章于 2020-12-21 12:38:37 发布

阅读量148

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wslcn/archive/2009/11/29/1613121.html

版权

先简单介绍一下这款输入法。（如果还没有用过的，建议先用一下，因为太概念性了，不是我几句话能说清的）
最大的优点莫过于词库的存储与运算均放在服务端上，降低本机资源开销（比如不需要更新本地词库），只要能上网就能使用这款输入法（比如网吧）
而其缺点也是很明显的：过于依赖网速；每次仅能用于一个网页（区分于多页面浏览器）；不支持个性化（cookie安全限制）
即使如此，作为一款概念性的云输入法，还是挺值得一试的，毕竟云在天上飘了那么久，这款产品也算是一个实实在在的雨滴了，^_^

好了，开始进入主题吧。
本篇文章的主要内容是：从前端开发的角度，剖析输入法的JS文件，从而达到学习的目的。
（暂时这么理解吧，从我个人角度讲，就是想看看别人怎么做的，不一定符合广大观众的兴趣）

首先来大概理解一下输入法的执行流程。
安装：通过右键添加一个链接到收藏夹，而这个链接不是普通的http链接，而是一个JavaScript语句
执行：点击收藏夹，执行JavaScript语句，对当前页面进行输入监控
关闭：既然是通过JavaScript来启动界面的，那么关闭的原理也是一样。
删除:直接删除收藏夹链接即可，

那么，接下来，先分析一下安装：

首先是左键点击时出发的leftclick是提醒用户正确的安装方法是右键，然后添加到收藏夹（这个用户体验还是挺好的，毕竟用户都习惯左键点击了）
接着就是href属性了，也就是添加到收藏夹的执行代码，这里唯一值得关注的是为什么执行函数要用void函数包起来呢？
查看一下文档，看看void的用处：
void 运算符对表达式求值，并返回 undefined。在希望求表达式的值，但又不希望脚本的剩余部分看见这个结果时，该运算符最有用。

写一个测试代码：
<a href="javascript:(function(){alert('test1');return 'wslcn.cnblogs.com';})()">Test1</a>
<a href="javascript:void((function(){alert('test2');return 'wslcn.cnblogs.com';})())">Test2</a>

从全局来看，加入这个void来达到忽略返回值的目的是挺有意思的，毕竟不能保证代码里面不产生返回值，要是你在看一个网页，然后你启动输入法，输入法却把你的页面给跳转了，这个用户体验是很不好滴（比如说你在写博，突然页面跳转了，当你返回去的时候，发现你写的东东全不见）。
从我个人角度来看，使用这小小的void函数也就意味着增加了代码的容错能力，提高用户体验。

接着还有一个可以学习的地方，就是一个匿名函数写完了之后需要马上执行，格式是：(function(){..})()

下面来分析主要的启动代码：

代码

1 function () {
2      var n = navigator.userAgent.toLowerCase();
3     ie = n.indexOf( ' msie ' ) != - 1 ? 1 : 0 ;
4      if (document.documentMode) ie = 0 ;
5     charset = '' ;
6      if (ie) charset = document.charset;
7     src = ie && charset == ' utf-8 ' ? ' http://web.pinyin.sogou.com/web_ime/init2_utf8.php ' : ' http://web.pinyin.sogou.com/web_ime/init2.php ' ;
8     element = document.createElement( ' script ' );
9     element.setAttribute( ' src ' , src);
10     document.body.appendChild(element);
11 }

判断的逻辑有点复杂，但如果把这两个文件下载进行分析便得知，这两个文件内容是一样的，只是编码不同而已（一个是UTF-8，一个是GBK）
主要作用是根据网页编码来选择，避免乱码，但是这里的代码逻辑为何这么复杂呢（先判断是否为IE，然后判断IE8特有的document.documentMode属性，最后判断IE6+特有的document.charset）？
简单地说，IE6/IE7&&utf-8编码的采用utf-8编码的文件，其它的采用GBK编码文件，这样不禁就会联想到：在FF/chrome/IE8中，网页采用utf-8编码，下载脚本却是GBK编码，这样是否会存在问题呢？

实际测试的时候，当然没有问题了，但是浏览器怎么判断文件编码的呢，这里我没有查阅相关资料，但能猜到原理：