Analysis of sogou cloud Input Method JS files (1)

This input method is briefly introduced. (If it has not been used, we recommend that you use it first, because it is too conceptual, not something I can say clearly.) The biggest advantage is that the storage and computation of word libraries are on the server, reduce local resource overhead (for example, you do not need to update the local dictionary). You can use this input method (for example, Internet cafes) as long as you can access the internet. The disadvantage is obvious: too dependent on network speed; it can only be used for one web page (differentiated from multiple Web browsers) at a time, and does not support personalization (cookie security restrictions). Even so, as a conceptual cloud input method, it is worth a try, after all, the cloud has been floating on the sky for so long, and this product is actually a raindrops, ^_^

Now, let's start with the topic.
The main content of this article is: From the Perspective of front-end development, analyze the JS file of the input method to achieve the purpose of learning.
(For the time being, from my personal point of view, I want to see how others do it. It is not necessarily in line with the interests of the audience)

First, let's take a rough look at the execution process of the input method.
Install: Right-click to add a link to favorites, which is not a common http link, but a JavaScript statement.
Run: Click favorites and execute JavaScript statements to monitor input on the current page.
Close: Since the interface is started through JavaScript, the same is true.
Delete: directly Delete the favorites link,

Next, analyze the installation:

Copy to ClipboardReference: [www.bkjia.com] <a onclick = "leftclick (event);" href = "javascript: void (function () {var n = navigator. userAgent. toLowerCase (); ie = n. indexOf ('msi ')! =-1? 1:0 if;document.doc umentMode) ie = 0; charset = ''; if (ie) charset = document. charset; src = ie & charset = 'utf-8 '? 'Http: // web.pinyin.sogou.com/web_ime/init2_utf8.php': title = "bkjia.com"
'Http: // web.pinyin.sogou.com/web_ime/init2.php'?element=document.createelement ('script'); element. setAttribute ('src', src); document. body. appendChild (element) ;}) () "class =" btn1 ">

First, the left-click leftclick is used to remind users to right-click the installation method and add it to Favorites (this user experience is good, after all, users are used to left-click)
The next step is the href attribute, that is, the Execution Code added to the favorites folder. The only note here is why the execution function is wrapped with the void function?
Take a look at the documentation to see the usefulness of void:
The void operator evaluates the expression and returns undefined. This operator is most useful when you want to evaluate the expression but do not want the rest of the script to see this result.

Write a test code:

Copy to ClipboardReference: [www.bkjia.com] <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>

From a global perspective, it is interesting to add this void to ignore the returned value. After all, there is no guarantee that no return value is generated in the Code. If you are reading a webpage, then you start the input method, the input method redirects your page, and the user experience is poor (for example, if you are writing a blog, the page jumps suddenly. When you return, I find that all the stuff you write is missing ).
From my perspective, using this small void function also increases the code fault tolerance capability and improves user experience.

Another thing to learn is that an anonymous function needs to be executed immediately after it is written. The format is: (function (){..})()

The following is the main startup code:

Code:

Copy to ClipboardReference: [www.bkjia.com] 1 function (){
2 var n = navigator. userAgent. toLowerCase ();
3 ie = n. indexOf ('msie ')! =-1? 1: 0;
4 if (document.doc umentMode) 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}

 

The logic of judgment is a bit complicated, but if the two files are downloaded for analysis, it is known that the content of the two files is the same, but the encoding is different (one is the UTF-8, the other is GBK)
Determine the attributes of umentMode, and finally determine the document. charset that is unique to IE6 + )?
To put it simply, IE6/IE7 & UTF-8 encoded files use UTF-8 encoding, while other files use GBK encoding, which can be thought of as: in FF/chrome/IE8, the webpage adopts UTF-8 encoding, but the download script is GBK encoding. Is there a problem?

In actual testing, of course there is no problem, but how does the browser determine the file encoding? I did not refer to the relevant information here, but I can guess the principle:

-This requires considerable experience ~~

Finally, the last three sentences of a function are typical script code loaded dynamically, which can be encapsulated into a function for future backup (the disadvantage is that callback functions are not supported ).