Douban's jquery skills [reprinted]

Douban is a successful product in the 2.0 community, and ajax technology in it is also doing well. I studied its source code and it uses jquery on the page, I like its integrated event processing mechanism. I don't need to write a lot of event binding code. I only need to use certain naming rules to automatically add some functions to page elements, almost all of the above functions use this implementation. With jquery's powerful selector, the code looks concise and clear. let's take a look at some of its core components. I use jquery 1.2.3, and the size of 29kb after compression. The speed is much better than before. let's just look at the code. we also recommend the css framework blueprint, which is quite useful.

// Define the namespace
Var Bowtech = new Object ();

 

// Register the global event monitor.
Bowtech. EventMonitor = function (){
This. listeners = new Object ();
}
// Broadcast events
Bowtech. EventMonitor. prototype. broadcast = function (widgetObj, msg, data ){
Var lst = this. listeners [msg];

If (lst! = Null ){
For (var o in lst ){
Lst [o] (widgetObj, data );
}
}
}
// Bind all events.
Bowtech. EventMonitor. prototype. subscribe = function (msg, callback ){
Var lst = this. listeners [msg];
If (lst ){
Lst. push (callback );
} Else {
This. listeners [msg] = [callback];
}
}
// Cancel event binding.
Bowtech. EventMonitor. prototype. unsubscribe = function (msg, callback ){
Var lst = this. listener [msg];
If (lst! = Null ){
Lst = lst. filter (function (ele, index, arr) {return ele! = Callback ;});
}
}

// Page scope event-monitor obj.
Var event_monitor = new Bowtech. EventMonitor ();
// Execute event binding for all elements of class = "j a_xxx yyy" id = "xxx-123", the xxx-123 part is used to get the ID of the element, such as the ID of a post,
// Department after a_xxx
// Used to identify applications such as vote, review, and blog.
// The Bound event is: Bowtech. init_vote/Bowtech. init_blog and so on.
Function load_event_monitor (root ){
Var re =/a _ (\ w +)/; // obtain the ID using a regular expression.
Var fns = {};
$ (". J", root). each (function (I ){
Var m = re.exe c (this. className );
If (m ){
Var f = fns [m [1];
If (! F) {// create a function object if the event processing function does not exist.
F = eval ("Bowtech. init _" + m [1]);
Fns [m [1] = f; // call the binding function.
}
F & f (this );
}
});
}
// Method to be executed after the document is loaded (see the jquery document)
// Generally, all events should be bound when a document is loaded, except for one case.
// For example, if the content retrieved through the Ajax method still contains action buttons, you need to bind these functions.
// Call load_event_monitor (element) manually.
$ (Function (){
Load_event_monitor (document );
});
// Note that the o object here is an html element rather than a jquery object, so you should use the $ (o) function when calling its method.
// Convert it to a jquery object.
Bowtech. init_forder = function (o ){
Var eid = $ (o). attr ("id"). split ("-") [1];
Var fo = $ ("# f-" + eid );
Var unfo = $ ("# unf-" + eid );

Fo. click (function (){
$ (O). hide ();
Unfo. show ();
Fo. hide ();
});
Unfo. click (function (){
$ (O). show ();
Fo. show ();
Unfo. hide ();
});
}

JQuery. fn. extend ({
Set_caret: function (){
If (! $. Browser. msie) return;
Var initSetCaret = function () {this. caretPos = document. selection. createRange (). duplicate ()};
This. click (initSetCaret). select (initSetCaret). keyup (initSetCaret );
},
Insert_caret: function (textFeildValue ){
Var textObj = this [0];
If (document. all & textObj. createTextRange & textObj. caretPos ){
Var caretPos = textObj. caretPos;
CaretPos. text = caretPos. text. charAt (caretPos. text. length-1) = ''? TextFeildValue + '': textFeildValue;
} Else if (textObj. setSelectionRange ){
Var rangeStart = textObj. selectionStart;
Var rangeEnd = textObj. selectionEnd;
Var tempStr1 = textObj. value. substring (0, rangeStart );
Var tempStr2 = textObj. value. substring (rangeEnd );
TextObj. value = tempStr1 + textFeildValue + tempStr2;
TextObj. focus ();
Var len = textFeildValue. length;
TextObj. setSelectionRange (rangeStart + len, rangeStart + len );
TextObj. blur ();
} Else {
TextObj. value + = textFeildValue;
}
}
})

The front-end is easy to use. You only need to write it like this:
<Div id = "test2" class = "mod">
<H3>
The title can be set here.
</H3>
<Div class = "j modb a_forder" id = "modb-1002">
Here are some main contents
<Dl>
<Dt> Hello world </dt>
<Dd>
Hahaha </dd>
</Dl>
This experiment was completed in shenzhouben of shujia.
</Div>
<Div class = "edit">
<A id = "f-1002" class = "forder" href = "javascript: void (0);"> [collapse] </a> <a id = "unf-1002"
Class = "unforder" href = "javascript: void (0);"> [Expand] </a>
</Div>
</Div>

The style is omitted. You can write it by yourself and then send two messages:

 

Collapsed

Development Environment: shenzhenben, VS2008, Framework 2.0 of shujia