Web Foreground Technology Learning Summary (3)-Portable full-station JavaScript deployment

The question of the proposed

When I first started a project a year ago, I was just getting started with the front desk technology, using jquery to write a little bit of interaction is still not a big problem, but to all of these effects clean, neat deployment to the whole station, to me a little headache. Since the site page is not particularly large, there are twenty or thirty of them, If each page to write a separate JS file or directly to write JS in the page, is not conducive to maintaining and compromising the performance of the foreground. According to Yahoo's front desk performance promotion proposal, should try to reduce the number of JS files. So I decided to find a way to write all the code except the jquery library and some plug-ins. File. Although there may be times when some of the page load JS will not be useful to the code, but this for a medium-sized Web site has the following performance advantages:

A small number of JS files, the browser to the server's request will be greatly reduced, saving the resources of the server;

Because almost every page to load the JS files are the same, so in the first load, and then visit other pages, the browser can read all JS directly from the cache, browsing speed greatly improved

If the file organization is more organized, it is very convenient for later maintenance.

Such deployments can be said to be ' lightweight '. The question now is how to organize the document to be as organized as possible. Of course, I was a rookie at the time, the degree of writing JS is still only use jquery stage, for the expansion of jquery is ignorant, not to mention JS closures, using JS simulation of other language OOP use, as well as design patterns of these more professional skills (in fact, these technologies are still in the study). I could not think of a good way out of thin air, so I began to refer to other excellent performance of the web2.0 station JS code. The foreign website (such as Digg,netvibes) JS all uses Packer and so on the thing to add the secret, people read it very difficult, and then turned to the domestic, look at the school and so on, JS file a lot of, after all, is a large web site does not fit. Later found watercress, found performance is quite excellent, and then the JS is not encrypted , only three files Jquery.js,suggest.js and douban.js. One of the last files is worth referencing.

Study on the Code of watercress

At that time read the code of watercress also spent a lot of effort. I found that some elements of the HTML in the Watercress class name is very special, such as (note the value of the class attribute)

<input　type="text"　 name="search_text"　class="j　a_search_text　 greyinput"　autocomplete="off"/>

And these elements are generally have JS to enhance the interaction effect, such as form elements, recommended buttons, etc. there are also many variables in douban.js that are consistent with the names of some of the above element classes, such as

Douban.init_search_text　=　function(o){
　　//这里 是相关代码
}

So I think, watercress should be like this: JS when CSS to use, when given certain elements of the class name, the element will have the corresponding JS characteristics, such as the above said INPUT element has class name A_search_text, so it has a douban.init_ Search_text the JS attribute given by this variable (or function). How does this happen? In order to facilitate the description, the Douban.js simplified as follows, omitted the detailed tip, we can roughly see the backbone:

------The first paragraph------
var Douban = new Object ();
Douban.eventmonitor = function () {
This.listeners = new Object ();
}
Douban.eventmonitor.prototype.broadcast=function (Widgetobj, MSG, data) {/* code omitted */};
Douban.eventmonitor.prototype.subscribe=function (MSG, callback) {/* code omitted */};
Douban.eventmonitor.prototype.unsubscribe=function (MSG, callback) {/* code omitted */};
------The second paragraph------
var event_monitor = new Douban.eventmonitor ();
function Load_event_monitor (root) {
var re =/a_ (\w+)/;
var fns = {};
$ (". J", Root). Each (function (i) {
var m = re.exec (This.classname);
if (m) {
var f = fns[m[1]];
if (!f) {
F = eval ("Douban.init_" +m[1]);
FNS [m[1]] = f;
}
F && F (this);
}
});
}
$ (function () {
Load_event_monitor (document);
});
------Third paragraph------
DOUBAN.INIT_EVC = function (o) {/*...*/};
Douban.init_enb = function (o) {/*...*/};
Douban.init_folder_n = function (o) {/*...*/};
Douban.init_unfolder = function (o) {/*...*/};
...