独立小巧的JavaScript库(7):calendar.js

KY8 于 2009-03-07 12:01:58 发表JavaScript

主要特点有：

小巧：整个组件代码只有一个文件lhgcalendar.js，大小为5.4K。
调用简单：你只需要在相应位置添加一个事件来调用主函数即可（参考下面有示列）。
效率高：你试下就知道了:-)。
外观还看得过去：呵呵，这个算不上特点，本人界面设计能力差，不过提供的这2种样式还算过得去。
支持的浏览器：IE6+，Firefox2.0+，Chrome(谷歌浏览器)，Opera9.5+，Safari3.0+等。

组件结构

lhgcalendar.js：组件核心文件，其实也就这一个文件:-)。
skin：包含组件图片文件和样式表文件的文件夹。
skin/default.css：组件默认式表文件。
skin/gray.css：灰以样式的样式表文件。

调用方法及参数说明

在需要调用的页面引入lhgcalendar.js，例如：<script type="text/javascript" src="lhgcalenar.js"></script>
然后在要调用的位置上引发的事件中加入调用代码，例如：<input type="text" onclick="lhgcalendar();" />
参数说明：只有一个参数，就是接收日期的控件的ID，用法见下面的示例
还有就是在lhgcalendar.js里有个组件的配置对象：var config = { dir : '', skin : 'default' } 中的dir指的是日历显示在控件的下面还右面，默认是下面，写成'right'就是在右面；skin指的就是皮肤名称。
注：日期的格式为 M-Y-D

点击下载此文件

被阅1784次, 0票Calendar 发表评论

小巧独立的Javascript库(6):jsTree.js

KY8 于 2009-03-01 17:58:32 发表JavaScript

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/

被阅846次, 0票jsTree 发表评论

小巧独立的Javascript库(5):Ajax.js

KY8 于 2009-03-01 16:56:51 发表JavaScript

1、MicroAjax.js

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

Supports GET method
Supports JSON.
Small Size (>1 KB compressed / 2.3 KB with all the comments)
Very easy to use.

被阅642次, 0票Ajax 发表评论

小巧独立的Javascript库(4):subModal.js

KY8 于 2009-03-01 16:23:46 发表JavaScript

subModal是用DIV弹出层实现HTML页内对话框的Javascript Library

小巧独立的Javascript库(3):Sizzle JavaScript Selector Library

KY8 于 2009-03-01 16:21:20 发表JavaScript

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:

Completely standalone (no library dependencies)
Competitive performance for most frequently used selectors
Only 4KB minified and gzipped
Highly extensible with easy-to-use API
Designed for optimal performance with event delegation
Clear IP assignent (all code held by the Dojo Foundation, contributors sign CLAs)

Code Features:

Provides meaningful error messages for syntax problems
Uses a single code path (no XPath)
Uses no browser-sniffing
Caja-compatible code

Source Code:

http://github.com/jeresig/sizzle/tree/master

Discussion:

http://groups.google.com/group/sizzlejs

Documentation

http://wiki.github.com/jeresig/sizzle

点击下载

被阅797次, 0票Sizzle CSS Selector 发表评论

小巧独立的Javascript库(2):DomReady.js

KY8 于 2009-03-01 16:14:02 发表JavaScript

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>

被阅869次, 0票DomReady 发表评论

小巧独立的Javascript库(1):Events.js

KY8 于 2009-03-01 16:07:11 发表JavaScript

Dean Edwards实现的Javascript Events管理：http://dean.edwards.name/weblog/2005/10/add-event/。特性：

it performs no object detection
it does not use the addeventListener/attachEvent methods
it keeps the correct scope (the this keyword)
it passes the event object correctly
it is entirely cross-browser (it will probably work on IE4 and NS4)
and from what I can tell it does not leak memory

// 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); 
    } 
};

被阅659次, 1票event 发表评论

压缩网站的JavaScript文件

KY8 于 2009-01-03 14:55:48 发表JavaScript

通常在一个 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混淆打包”进行在线压缩

被阅564次, 0票压缩 JavaScript 发表评论

开源吧！

随机文章

文章分类

站点统计

最新评论

赞助商

友情链接