关注开源代码的实际应用
主要特点有:
组件结构
调用方法及参数说明
is an open soure treeview control written in JavaScript.
I wrote the script for my phpXplorer system. The script is not intended to be a website menu.
Due to use of the DOM the script only works in modern browsers like MSIE > 5.0, Netscape/Mozilla/Firefox and Opera.
Without support for dead Browsers the size of the script is only 12kb and there are no browser switches inside the code.
A funny feature is that the treeview is able to define its data definition by itself.
Try to click on the node images of this little example tree with the left mouse button.
http://www.webxplorer.org/jsTree/
MicroAjax is one of the smallest and easiest AJAX libraries. Usage:
- microAjax("/resource/url", function (res) {
- alert (res);
- });
Download:trunk version (svn) minified version (841 byte)
Help:FAQ
2、jx - JavaScript Ajax Library
jx is a small toolkit for providing AJAX support in JavaScript. It has two different version - jx and jxs.
Features

subModal是用DIV弹出层实现HTML页内对话框的Javascript Library
相关资源:
http://code.google.com/p/submodal/
subModal回调函数和添加title示例
2个不错的js插件 iBox, subModal
HTML javascript实现模态窗口开源实现总结(lightbox,subModal,greybox,thickbox)
Sizzle是 一个纯js写的CSS选择器引擎,js大师Resig的作品.据说,相比其它主流javascript库,在Firefox 3下快4倍, Opera 9下快3倍, Safari 3下快1.5倍.而且Resig正在说服其它主流的javascrip库的基础CSS选择器引擎也采用Sizzle,目前准备引入Sizzle框架有: jQuery(1.3以上版本已经使用), MochiKit, Prototype, and Dojo.他们的目标也很简单,就是把大家的力量集中在一个统一的CSS选择器引擎上,不用各自为政.
A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
Features:
Code Features:
Source Code:
http://github.com/jeresig/sizzle/tree/master
Discussion:
http://groups.google.com/group/sizzlejs
Documentation
window.onload事件可以安全的执行javascript,因为该事件是在页面完全加载完后才开始执行(包括页面内的图片、flash等 所有元素),不会因为JS需要对某个DOM 操作,而页面还没有加载该节点而引起错误。但是这种安全是需要付出代价的:如果某些图片(或者一些别的东西)加载特别慢,那么load事件会等到很久之后 才会触发。针对这个问题,一些JS框架提供了一些补充方法。如:jquery的$(document).ready()、mootools的 domready事件。都是在页面的DOM加载完毕后立即执行,而不需要等待漫长的图片下载过程。如果不使用这些框架,可以使用这个独立的DomReady.js
使用方法:
- <html lang="en">
- <head>
- <script src="domready.js" type="application/javascript"></script>
- <script type="application/javascript">
- DomReady.ready(function() {
- alert('dom is ready');
- });
- </script>
- </head>
- <body>
- </body>
- </html>
Dean Edwards实现的Javascript Events管理:http://dean.edwards.name/weblog/2005/10/add-event/。特性:
addeventListener/attachEvent methodsthis keyword)
- // written by Dean Edwards, 2005
- // http://dean.edwards.name/
- function addEvent(element, type, handler) {
- // assign each event handler a unique ID
- if (!handler.$guid) handler.$guid = addEvent.guid++;
- // create a hash table of event types for the element
- if (!element.events) element.events = {};
- // create a hash table of event handlers for each element/event pair
- var handlers = element.events[type];
- if (!handlers) {
- handlers = element.events[type] = {};
- // store the existing event handler (if there is one)
- if (element["on" + type]) {
- handlers[0] = element["on" + type];
- }
- }
- // store the event handler in the hash table
- handlers[handler.$guid] = handler;
- // assign a global event handler to do all the work
- element["on" + type] = handleEvent;
- };
- // a counter used to create unique IDs
- addEvent.guid = 1;
- function removeEvent(element, type, handler) {
- // delete the event handler from the hash table
- if (element.events && element.events[type]) {
- delete element.events[type][handler.$guid];
- }
- };
- function handleEvent(event) {
- // grab the event object (IE uses a global event object)
- event = event || window.event;
- // get a reference to the hash table of event handlers
- var handlers = this.events[event.type];
- // execute each event handler
- for (var i in handlers) {
- this.$handleEvent = handlers[i];
- this.$handleEvent(event);
- }
- };
下面是一个改进版(防止内存泄漏):
- function addEvent(element, type, handler) {
- // assign each event handler a unique ID
- if (!handler.$guid) handler.$guid = addEvent.guid++;
- // assign each element a unique ID
- if (!element.$guid) element.$guid = addEvent.guid++;
- // create a hash table of event types for the element
- if (!addEvent.handlers[element.$guid]) addEvent.handlers[element.$guid] = {};
- // create a hash table of event handlers for each element/event pair
- var handlers = addEvent.handlers[element.$guid][type];
- if (!handlers) {
- handlers = addEvent.handlers[element.$guid][type] = {};
- // store the existing event handler (if there is one)
- if (element["on" + type]) {
- handlers[0] = element["on" + type];
- }
- }
- // store the event handler in the hash table
- handlers[handler.$guid] = handler;
- // assign a global event handler to do all the work
- element["on" + type] = handleEvent;
- };
- // a counter used to create unique IDs
- addEvent.guid = 1;
- // a global hash table containing all handlers
- addEvent.handlers = {};
- function removeEvent(element, type, handler) {
- // check if the element has a guid
- if (!element.$guid) return;
- // delete the event handler from the hash table
- if (addEvent.handlers[element.$guid] && addEvent.handlers[element.$guid][type]) {
- delete addEvent.handlers[element.$guid][type][handler.$guid];
- }
- };
- function handleEvent(event) {
- // grab the event object (IE uses a global event object)
- event = event || window.event;
- // get a reference to the hash table of event handlers
- var handlers = addEvent.handlers[this.$guid][event.type];
- // execute each event handler
- for (var i in handlers) {
- this.$handleEvent = handlers[i];
- this.$handleEvent(event);
- }
- };
通常在一个 Web 2.0 应用中,会有很多业务逻辑相关的 JS 代码,而且很多逻辑从后台搬到了客户端执行,因此这部分客户端代码非常多。为了提供更快的响应速度,典型的做法是压缩所有客户端需要加载的资源包括图 片,HTML 文件,CSS 文件,JS 代码等等,而图片文件已经无法再进行压缩,只有 HTML,CSS,JS 等文本文件有进一步压缩的空间。
进行JavaScript文件压缩的工具比较多:Douglas Crockford的JSMIN、the Dojo compressor、Dean Edwards的Packer、YUI Compressor
the Dojo compressor shrinksafe 之所以称其“safe”,是因为它在压缩了 JS 文件以后,不会改变其对象内部方法和属性名称,引用到该段代码的地方不需要任何更改,还是可以直接调用其内部方法和属性。在 custom_rhino.jar 所在的目录运行 java –jar custom_rhino.jar –version 100 可以进入 rihno 的命令行状态。

压缩一个 JS 文件的命令如下:
java -jar custom_rhino.jar -c infile.js > outfile.js
经测试,一个 JS 文件经过这样的命令压缩后,可以减小 30% 左右,将压缩后的文件放回系统中,对该 JS 文件的功能调用没有任何影响。
YUI Compressor不但可以压缩JavaScript还可以压缩CSS,用法:
- Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]
- Global Options
- -h, --help Displays this information
- --type <js|css> Specifies the type of the input file
- --charset <charset> Read the input file using <charset>
- --line-break <column> Insert a line break after the specified column number
- -v, --verbose Display informational messages and warnings
- -o <file> Place the output into <file>. Defaults to stdout.
- JavaScript Options
- --nomunge Minify only, do not obfuscate
- --preserve-semi Preserve all semicolons
- --disable-optimizations Disable all micro optimizations
JSMIN可以通过“Javascript精简压缩”进行在线压缩
Packer可以通过“Javascript混淆打包”进行在线压缩