分析搜狗云输入法关键文件JS实现原理

本篇文章分析搜狗云输入法主要内容是：从前端开发的角度，剖析输入法的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':
'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(){..})()

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

Code [http://www.xueit.com]

 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 }