国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jscript > 搜狗云输入法JS文件剖析(一)

搜狗云输入法JS文件剖析(一)

来源:程序员人生   发布时间:2014-05-17 22:17:42 阅读次数:2714次

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

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

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

那么,接下来,先分析一下安装:

<a onclick="leftclick(event);" href="javascript:void((function(){var n=navigator.userAgent.toLowerCase();ie=n.indexOf('msie')!=-1?1:0;if(document.documentMode)ie=0;charset='';if(ie)charset=document.charset;src=ie&&charset=='utf-8'?'http://web.pinyin.sogou.com/web_ime/init2_utf8.php': title="liehuo.net"
'http://web.pinyin.sogou.com/web_ime/init2.php';element=document.createElement('script');element.setAttribute('src',src);document.body.appendChild(element);})())" class="btn1">

首先是左键点击时出发的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编码,这样是否会存在问题呢?

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

image

- 这个倒是需要相当的经验积累啊~~

最后,函数的最后三句是挺经典的动态载入脚本代码,可以封装成一个函数日后备用(缺点是不支持回调函数)。

转自:http://www.cnblogs.com/wslcn/

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生