BlogJava-沙漠中的鱼-文章分类-javascript

javascrip对象中的函数callback对象中的方法

沙漠中的鱼 — Sat, 21 Apr 2012 15:35:00 GMT

当在函数类中的某一个对象，需要回调类中的某一个方法时，可以通过如下方式实现。
Test = function(testFuncObj){

var testFunc = testFuncObj;

var _this = this;

this.render = function(parent){

testFunc.onClick(_this.onClick)

}

this.onClick = function(node){

alert(node.text);

}

沙漠中的鱼 2012-04-21 23:35 发表评论

javascript命令行完成自动添加受信任站点

沙漠中的鱼 — Fri, 18 Nov 2011 07:30:00 GMT

沙漠中的鱼 2011-11-18 15:30 发表评论

Java实现一个用户在同一时间只登陆一次

沙漠中的鱼 — Thu, 21 May 2009 08:02:00 GMT

保证网站用户（或管理员）在同一时间只登陆一次在很多场合是很必要的！下面举一个基于Java平台实现的例子。
第一步：创建SessionListenter类

import javax.servlet.http.HttpSession;
import javax.servlet.http.HttpSessionEvent;
import javax.servlet.http.HttpSessionListener;
import org.apache.log4j.Logger;
import org.jpxx.sw.Constants;
import org.jpxx.sw.Factory;

/**
* 该监听器用于监听后台管理员登陆。只允许统一管理员在同一时间登陆一次。
* @author Jun Li
* @version  $Revision: 1.0.2 $, $Date: 2009/01/05 $
* @since 1.0.0
*/
public class SessionListener implements HttpSessionListener {

    Logger log = Factory.getSingletonInstance().getLogger(SessionListener.class);
    public void sessionCreated(HttpSessionEvent event) {
    }

    public void sessionDestroyed(HttpSessionEvent event) {
        HttpSession session = event.getSession();
        // 获取存储管理员的session
        Object o = session.getAttribute(Constants.JPXX_ADMIN_LOGIN_USERNAME_SESSION);
        if(o!=null){
            String userName = o.toString();
            // 登陆的用户都存储在Hashtable中，用户退出，从Hashtable中删除该用户
            Factory.getUsers().remove(userName);
            log.error("删除用户：" + userName + "       " + new java.util.Date());
        }
    }
}

说明：由于该类来自于项目，有很多操作都进行了封装，您稍作修改即可正常使用。注释掉Logger，声明一个静态变量private static Hashtable user = new Hashtable();在sessionCreated()方法中将刚登陆的用户添加到user中。您还需要写注销的页面（jsp或者servlet），在页面里面调用session.invalidate(); 该方法会触发sessionDestroyed()事件！

第二部：将该监听器注册到web.xml

<listener>
<listener-class>org.jpxx.sw.business.SessionListenerlistener-class>
listener>

说明：仅仅依靠session监听器不可能100%可靠，有可能用户不正常退出(例如直接关闭浏览器、系统断电等等)。针对直接关闭浏览器有如下解决方案：在被关闭的页面里面插入如下语句：

Jpxx.forceLogout()方法通过AJAX技术来强制注销用户，即调用session.invalidate()方法。

转载:http://www.jpxx.org/?tid=54

沙漠中的鱼 2009-05-21 16:02 发表评论

javascript字符串判断

沙漠中的鱼 — Fri, 07 Nov 2008 08:25:00 GMT

判断是否全为汉字

if(/[^/x00-/xff]/g.test(s))
   alert("含有汉字");
else
   alert("全是字符");

var strTest="测试Test";
alert(strTest.length);
//显示为6，他把一个汉字当作一自字符，而我需要得到的结果是8，也就是把汉字当成两个字符

var strTest="测试Test";
alert(strTest.replace(/[^\x00-\xff]/g,'##').length);

以上方法只能求汉字加子母的情情况，为求值为1的情况就会产生异常了

ADM.checkStrLen=function(value){
    var str,Num = 0;
    if(value==null)
        return Num;

    for (var i=0;i<value.length;i++){
        str = value.substring(i,i+1);
        if (str<="~")  //判断是否双字节
            Num+=1;
        else
            Num+=2;
    }

return Num;
}

以上方法能解决汉字，字母，数据混合的情况

沙漠中的鱼 2008-11-07 16:25 发表评论

程序设置Extjs树中CheckBox的选中和取消选中设置

沙漠中的鱼 — Wed, 20 Aug 2008 06:36:00 GMT

在Extjs中treepanel中树节点为checkbox类的节时，有时候我们需要用程序来设置他的选中和取消选中状态
var nodes=tree.getChecked();
if(nodes && nodes.length){
for(var i=0;i   //设置UI状态为未选中状态
  nodes[i].getUI().toggleCheck(false);
  //设置节点属性为未选中状态
  nodes[i].attributes.checked=false;
}
}
这样通过获取已选择的节点，用程序取消选择状态
反之可以设置未选中节点选中状态

沙漠中的鱼 2008-08-20 14:36 发表评论

JavaScript多线程技术

沙漠中的鱼 — Thu, 17 Jul 2008 09:23:00 GMT

While increasingly more websites are fully or partially based on AJAX, it is still difficult to develop complicated AJAX applications. What is the main issue which causes this difficulty in developing AJAX applications? Is it asynchronous communication with the server, or is it GUI programming? Both are routinely performed by desktop window applications -- so why is development of AJAX applications which do the same things particularly difficult?

Let’s consider this issue using a simple example. Suppose that you want to build a tree-structured bulletin board system which loads the data for each article by communicating with the server according to user requests rather than loading all articles at one time from the server. Each article has 4 pieces of information associated with it: a unique ID within the bulletin board system, the name of the person who posted the article, the content of the article, and an array of the IDs of its child articles. To begin with, let’s assume that there is a JavaScript function named getArticle() which is responsible for loading a single article. This function receives the integer ID of the article to be loaded as an argument, and it retrieves the data of the article with that ID from the server. It then returns an object which has the 4 pieces of information contained in that article: id, name, content, and children. An example of this function in use can be written like this:

function ( id ) {

var a = getArticle(id);

document.writeln(a.name + "
" + a.content);

}

As you may notice, calling this function many times with the same article ID, however, requires communications with the server again and again for no good reason. To counter this problem, consider the function getArticleWithCache(), which is a getArticle() with a cache capability. In this example, the data loaded by getArticle() will be simply retained as a global variable:

var cache = {};

function getArticleWithCache ( id ) {

if ( !cache[id] ) {

cache[id] = getArticle(id);

}

return cache[id];

}

Now the articles that have been read are cached. Now, let’s consider the function backgroundLoad(), which loads the data of all articles based on this mechanism. This function aims to preload all of the child articles in the background while the user is reading a given article. Because the article data is tree structured, a recursive algorithm can easily be written which traverses the tree and allows all articles to be loaded:

function backgroundLoad ( ids ) {

for ( var i=0; i < ids.length; i++ ) {

var a = getArticleWithCache(ids[i]);

backgroundLoad(a.children);

}

}

The backgroundLoad() function receives an array of IDs as an argument and applies our previously-defined getArticleWithCache() to each ID. This allows the data of the article corresponding to each ID to be cached. Then, by recursively calling backgroundLoad() on the IDs of the child articles of the loaded article, the entire article tree is cached.

So far, everything looks good. If you have worked on AJAX application development, however, you should know that this naïve implementation won’t work successfully. The example has been based on the tacit understanding that getArticle() uses synchronous communication. As a general rule, however, JavaScript requires the use of asynchronous communication in communicating with the server because it has only a single thread. In terms of simplicity, processing everything (including GUI events and rendering), on one thread is a good programming model, because it eliminates the need to think about the complicated problems associated with thread synchronization. On the other hand, it presents a significant problem in developing applications –which appear responsive to the user because the single-thread environment cannot respond to users’ mouse clicking and/or key operation when the thread is working on something else (such as the getArticle() call).

What happens if synchronous communication is carried out within this single-threaded environment? Synchronous communication stops the browser’s execution until the communication result is obtained. The thread cannot respond to users while waiting for the communication result because the call from the server has not been completed, and the thread will remain blocked until the call returns. For this reason, it can not respond to users while it is waiting for the server’s response and the browser therefore looks frozen. This also holds true for the execution of getArticleWithCache() and backgroundLoad(), which are based on getArticle(). Because may take a considerable amount of time to download all of the articles, the browser freezing during that time is a serious problem for backgroundLoad() - since the browser is frozen, it is not possible in the first place to achieve the goal of preloading the data in the background while users are reading articles, since the article will be unreadable.

Since the use of synchronous communication creates a significant problem in usability as described above, JavaScript uses asynchronous communication as a general rule. Therefore, let’s rewrite the program above based on asynchronous communication. JavaScript requires asynchronous communications to be written in an event-driven programming style. In most instances, you specify a callback function which is called once the communication response has been received. For example, getArticleWithCache() defined above can be rewritten as:

var cache = {};

function getArticleWithCache ( id, callback ) {

if ( !cache[id] ) {

callback(cache[id]);

} else {

getArticle(id, function( a ){

cache[id] = a;

callback(a);

});

}

}

This program also internally calls the getArticle() function. It should be noted, however, that the version of getArticle() which is designed for asynchronous communication expects to receive a function as the second argument. When this version of getArticle() is called, it sends a request to the server, as before, however the function returns immediately without waiting for a response from the server. This means that when the execution is returned to the caller, the server response has not yet been retrieved. This allows the thread to work on other tasks until the server response is obtained and the callback function is called. As soon as this response is received from the server, the callback function specified as the second argument of getArticle() is invoked with the server’s response as an argument. Likewise, getArticleWithCache() has been changed so that it will expect a callback function as the second argument. This callback function will then be called within the callback function that is passed to getArticle() so that it will be executed after the server-communication is finished.

You may think that the above rewriting alone is rather complicated, but the backgroundLoad() function involves even more complicated rewriting. It can be also rewritten to handle a callback function:

function backgroundLoad ( ids, callback ) {

var i = 0;

function l ( ) {

if ( i < ids.length ) {

getArticleWithCache(ids[i++], function( a ){

backgroundLoad(a.children, l);

});

} else {

callback();

}

}

l();

}

This rewritten backgroundLoad() function does not look much like our original function, however there is no difference in what they do. This means that both functions receive an array of IDs, call getArticleWithCache() on each element of the array, and recursively apply backgroundLoad() to the resultant child articles. However, it is not easy to recognize even the loop structure for the array, which was represented by a for-statement in the original program. Why are these two sets of functions that do the same thing so totally different from each other?

The difference results from the fact that any function must return immediately after any function that requires server-communication, such as getArticleWithCache(). The callback function that should receive the server response cannot be called unless the original function is no longer executing. For JavaScript, it is not possible to suspend the program in the middle of loops, such as for-statements, and resume it later at the point where execution was suspended; the loop is therefore represented by recursively passing the callback function instead of using a loop syntax. For those who are familiar with Continuation-Passing Style (CPS), this is a manual implementation of CPS. Because no loop syntax can be used, even the simple program described earlier that traverses a tree requires complicated statements. The problem associated with event-driven programs is known as the control flow problem: loop and other control flow statements are likely to be difficult to understand.

There is another problem: if you convert a function which does not use asynchronous communication into a function that uses asynchronous communication, the rewritten function will need to have a new parameter which is a callback functions. This poses a significant problem to existing APIs since our internal changes will not remain internal, but will result in broken APIs and changes by others using our API.

What is the root cause of all of these problems? That’s right. The fact that JavaScript has only one thread causes the problems. Carrying out asynchronous communication on only one thread requires an event-driven program and complicated statements. If another thread could respond to users while the program is waiting for the server response, acrobatics like this would not be required.

Invitation to Multithreaded Programming

Let me talk about Concurrent.Thread, a library that allows JavaScript to use multiple threads, since this greatly eases the difficulty associated with asynchronous communication in the AJAX development mentioned above. This is a free-software library implemented in JavaScript, available under the Mozilla Public License / GNU General Public License. You can download the source code from the website.

Let’s download and use the source code right away. Suppose that you have saved the downloaded source code as a file named Concurrent.Thread.js. Before doing anything else, let’s run the program below, which has a very naïve implementation:

Executing this program should display numbers starting with 0 in order. Numbers appear one after another, which you can view by scrolling the page. Now, let’s look at the source code in more detail. It uses a simple infinite loop as indicated by while ( 1 ). In ordinary cases, a JavaScript program like this continues to use the one and only thread, causing the browser to look frozen. Naturally, it does not allow you to scroll the screen. Then, why does the above program allow you to scroll? The key is Concurrent.Thread.create() located above while ( 1 ). This is a method provided by the library; it is for creating a new thread. On a new thread, the function passed as the argument is executed. Let me slightly rewrite the program as follows:

In this program we have a new function f(), which shows numbers repeatedly. This is defined at the top, and the create() method is called twice with f() as arguments. The second argument passed to the create() method is passed to f() without modification. Executing this program shows some small numbers starting with 0, which are followed by some large numbers starting with 100,000 and small numbers again that follow up the first series of small numbers. Like this, you can observe that the program shows alternating lines of small numbers and large numbers. This indicates that two threads are running concurrently.

Let me show you another use of Concurrent.Thread. In the above example, the create() method was called to create a thread. It is also possible to create a thread without calling any library APIs at all. For example, the former example can be expressed as:

Inside the script tag, an infinite loop is written simply in JavaScript. You should take note of the type attribute of the tag: an unfamiliar value (text/x-script.multithreaded-js) is assigned to it. If this attribute is assigned to the script tag, then Concurrent.Thread executes the content of the tag on a new thread. You should remember that, in this case as well, the library body of Concurrent.Thread must be included.

With Concurrent.Thread, it is possible to switch execution context from one thread to another as needed even if you write a long and continuous program. Let me briefly talk about how this behavior is achieved. In short, code conversion is used. Very roughly speaking, the function passed to the create() method is first converted to a character string, which is then rewritten so that it can be executed on a piecemeal basis. Then, the rewritten function is executed little by little on the scheduler. The scheduler is responsible for coordinating multiple threads. In other words, it makes adjustments so that each of the rewritten functions will be evenly executed. Concurrent.Thread actually does not create new threads but simply simulates a multi-threaded environment on the original single thread.

Although the converted functions appear to be running on different threads, there is actually only one thread running everything. Carrying out synchronous communication within the converted functions will still cause the browser to freeze. You may think that our original problem has not been solved at all, however you don’t have to worry. Concurrent.Thread provides a purpose-built communications library which is implemented using the asynchronous JavaScript communication style and which is designed to allow the other threads to work even when a thread is waiting for a response from the server. This communications library is found under the Concurrent.Thread.Http namespace. For example, it is used as follows:

The get() method retrieves the content of the specified URL using HTTP GET, as its name suggests. It takes a target URL as the first argument and an array representing HTTP header fields as the optional second argument. The get() method communicates with the server and returns an XMLHttpRequest object as the return value when it has received the server response. When the get() method returns, the response had been received. It is not necessary to use a callback function to receive the result. Naturally, there is no worry that the browser freezes while the program is waiting a response from the server. In addition, the post() method can be used to send data to the server:

The post() method takes a destination URL as the first argument and content body to be sent as the second argument. As with the get() method, you can also assign header fields by the optional third argument.

If you implement getArticle() in the first example using this communications library, then you can quickly write getArticleWithCache(), backgroundLoad(), and other functions that use getArticle() using the naïve method shown at the beginning of this article. Even when that version of backgroundLoad() is reading article data, another thread can respond to users as a matter of course, and the browser therefore does not freeze. Now, do you understand how useful it is to use multiple threads in JavaScript?

转载:http://www.infoq.com/articles/js_multithread

沙漠中的鱼 2008-07-17 17:23 发表评论

document.createElement("input")动态创建html元素时checkbox和radio默认选中的问题

沙漠中的鱼 — Tue, 10 Jun 2008 08:27:00 GMT

最近研究createElement的时候发现一个奇怪的问题

var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
echkbox.setAttribute("checked","checked");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
alert(document.getElementById("inputid").checked);

ie7显示出来的checkbox居然是未选中的但是alert出来的却是true，而FF一切正常
后来查了半天资料说是ie显示的时候只对状态改变比较敏感
改成
var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
echkbox.setAttribute("checked","checked");
alert(document.getElementById("inputid").checked);

一切ok
radio同样是这种情况。

转自 someone's something空间

沙漠中的鱼 2008-06-10 16:27 发表评论

float在IE和firefox中的使用

沙漠中的鱼 — Mon, 26 May 2008 11:09:00 GMT

在IE和firefox中，对文档对象DIV标签的停靠方式不同,如在IE中他就识别float的属性，但是在firefox中他就需要cssFloat

firefox下代码

var
oDiv=document.createElement("div");
oDiv.style.width="101";
var iDiv1=document.createElement("div");           iDiv1.style.background="#FFEE00";
iDiv1.style.width=50;    iDiv1.style.cssFloat="left";    iDiv1.innerHTML="右边";
iDiv1.style.height="20"; oDiv.appendChild(iDiv1);

var iDiv2=document.createElement("div");
iDiv2.style.background="#881200";
iDiv2.style.width=50;
iDiv2.style.cssFloat="left";
iDiv2.innerHTML="中间边";
iDiv2.style.height="20";
oDiv.appendChild(iDiv2);

var iDiv3=document.createElement("div");
iDiv3.style.background="#235500";
iDiv3.style.width=1;
iDiv3.style.height="20";
iDiv3.style.cssFloat="left";
iDiv3.style.overflow="hidden";
oDiv.appendChild(iDiv3);

document.getElementById("test").innerHTML=oDiv.innerHTML;

IE代码

var
oDiv=document.createElement("div");         oDiv.style.width="101";
var
iDiv1=document.createElement("div");           iDiv1.style.background="#FFEE00";
iDiv1.style.width=50;    iDiv1.style.float="left";    iDiv1.innerHTML="右边";
iDiv1.style.height="20"; oDiv.appendChild(iDiv1);

var iDiv2=document.createElement("div");
iDiv2.style.background="#881200";
iDiv2.style.width=50;
iDiv2.style.float="left";
iDiv2.innerHTML="中间边";
iDiv2.style.height="20";
oDiv.appendChild(iDiv2);

var iDiv3=document.createElement("div");
iDiv3.style.background="#235500";
iDiv3.style.width=1;
iDiv3.style.height="20";
iDiv3.style.float="left";
iDiv3.style.overflow="hidden";
oDiv.appendChild(iDiv3);

document.getElementById("test").innerHTML=oDiv.innerHTML;

沙漠中的鱼 2008-05-26 19:09 发表评论

javascript适别不同的浏览器和平台

沙漠中的鱼 — Mon, 26 May 2008 10:56:00 GMT

在不同的平台和不同的浏览器中对javascript的支持也不同，在我们写javascript过程中，需要尽量避免他的不兼容性，一般都采用最小公母法，尽量满足不同平台和不同浏览器的我需要，但是对于某些特定功能，我就需要在不同的浏览中实现不同的方法，因此我们就必须能实别不同的平台和浏览器
如下就是适别不同的平台和浏览器方法
//浏览器版本
ADM.BROWERVERSION=parseInt(navigator.appVersion);
//是否为NETSCAPE浏览器
ADM.ISNETSCAPE=navigator.appName.indexOf("Netscape")!=-1;
//是否为IE浏览器
ADM.ISIE=navigator.appName.indexOf("Microsoft")!=-1;
//代理
ADM.AFENT=navigator.appName.toLowerCase();
//是否为WINDOWS平台理
ADM.ISWINDOWS=ADM.AFENT.indexOf("win")!=-1;
//是否为MAC平台理
ADM.ISMAC=ADM.AFENT.indexOf("mac")!=-1;
//是否为UNIX平台理
ADM.ISUNIX=ADM.AFENT.indexOf("x11")!=-1;

沙漠中的鱼 2008-05-26 18:56 发表评论

树转化为表格图型展现

沙漠中的鱼 — Sat, 10 May 2008 14:04:00 GMT

做过olap开发的人可能都知道，他查出来的表的结构就是一棵树，我们需要把树转化为表，通过表格的样式用图型更加客观的展现出来

我们有一棵这样的树

我们现在要把这棵树转化成如下的表格样式

通过表格我们可以看出，他有三部份，主栏，宾栏，主体，而主栏，是一颗向右展开的树，宾栏是一颗向下展开的树，而主体部份则是一个表格

表格的整体布局

主栏

HTML结构

李宁DIV>

鞋/DIV>

上衣DIV>

宾栏

HTML结构

大区

华北

华中

主体

HTML结构

其中在HTML中边框全部采用宽度或高度为1PX的DIV构成
在div布局中，横向展开采用的属性是float="left"

我设计的Js类结构图如下

一个由树转化为表格的程序就完成，但是在开发过程中，有时候也碰到一些问题，如效率等，如有哪位对这控件或报表开发方面有兴趣的，大家一起交流

沙漠中的鱼 2008-05-10 22:04 发表评论

Firebug的使用

沙漠中的鱼 — Mon, 05 May 2008 15:05:00 GMT

什么是Firebug

从事了数年的Web开发工作，越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。笔者在撰写此文的时候，正逢Firebug发布1.0正式版，这不能不说是种巧合。

应用

Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果你担心它会占用太多的系统资源，也可以方便地启用/关闭这个插件，甚至针对特定的站点开启这个插件。

在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架，如图1所示。

图1：Firebug插件展开图示

从图1中看到，Firebug有6个主要的Tab按钮，下文将主要介绍介绍这几方面的功能。

Console	HTML	CSS	Script	Dom	Net
控制台	Html查看器	Css查看器	脚本条时期	Dom查看器	网络状况监视

Console 控制台

控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

象C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。

控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：

PLAIN TEXT

CODE:

console.log("hello world")

如果你有一堆参数需要组合在一起输出，可以写成这样：

PLAIN TEXT

CODE:

console.log(2,4,6,8,"foo",bar).

Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。

图2：在控制台里调试javascript

查看和修改HTML

第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。 HTML

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。

有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。

利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。

图3:：HTML查看器

CSS调试

Firebug的CSS调试器是专为网页设计师们量身定做的。

如今的网页设计言必称div+css，如果你是用table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用div做出来的页面的确能精简HTML代码，HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。

一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
如图4中正在修改一个区块的背景色。

提示：如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。

图4: CSS查看器，能够直接修改样式表

可视化的CSS尺标

我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。

图5：Firebug中的CSS标尺

网络状况监视器

也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。

网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。

图6：网络状况监视器

Javascript调试器

这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。

如果你有一个网站已经建成，然而它的javascript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步排除问题。

图7：javascript调试器

DOM查看器

DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。

图8: Dom查看器

小结

Firebug插件提供了一整套web开发所必需的工具。从HTML的编写，到CSS样式表的美化调优，以及用javascript脚本开发，亦或是Ajax应用，Firebug插件都会成为你的得力助手。所谓工欲善其事，必先利其器。在Web2.0的时代，言必称Ajax，动辄就是用户体验提升，如果把Firebug工具用好，必能让你如虎添翼，将HTML、CSS、javascript整理得服服帖帖，从此成为web开发中的专家级人物。

附

Firebug的中文含义是萤火虫，作者是Joe Hewitt，官方网页 http://www.getfirebug.com
Firefox亦即火狐浏览器，是近年来撼动IE浏览器市场占有率的一支强大力量，要不是它的出现，我想有生之年说不定也看不到IE 7的发布了，官方网页 http://www.firefox.com

引用:http://www.ooso.net/index.php/archives/294

沙漠中的鱼 2008-05-05 23:05 发表评论

javascript编辑器和调试工具

沙漠中的鱼 — Mon, 05 May 2008 15:03:00 GMT

最近在做javascript开发，想找一个比较好的javasctipt编辑器，在网上看到了对1st JavaScript Editor 的评价不错，集成代码自动弹出显示，验证错误功能。可以说是最好的一个javascript编辑器了，于是把它下下来，用起来确实还不错，对于javascrtipt初学者还是javasctipt工程师，建议用这个工具。

但是他对检错方面没有myesclipse的好，对于有一些警告和错误它不能提示出来

对于javasctipt调试工具，也有好几种可选择的方法,由于机器比较慢，我采用的是firefox+firebug来调试，在网上找了一篇介绍的文件，等下把它帖出来，开发.Net的人都知道，vs是一个很不错的调试javasctipt工具，我以前也一直用这个来调试javasctipt,不过专门用来调试javasctipt，可以说是大材小用了

沙漠中的鱼 2008-05-05 23:03 发表评论

Dom-Drag学习

沙漠中的鱼 — Thu, 24 Apr 2008 06:41:00 GMT

摘要: 如果你想实现Web上的组件能用鼠标随意拖动到页面的任意位置或指定的位置等，那你就要看看dom-drag.js了。dom-drag.js可以从http://youngpup.net/projects/dom-drag/下载到，作者 Aaron Boodman。其作者称其为面向现代DHTML浏览器的轻... 阅读全文

沙漠中的鱼 2008-04-24 14:41 发表评论

JavaScript之实现私有属性、像C++和Java一样支持基于类的继承方法之例子

沙漠中的鱼 — Thu, 24 Apr 2008 06:29:00 GMT

摘要: 前面已经了解到，JavaScript中也可以实现私有属性，而且JavaScript也能像C++和Java一样支持基于类的继承方法。为了展示这些是怎样实现的，下面说明如何转换前面使用Vehicle、SportsCar和CementTruck对象的示例，从而使用信息隐藏和继承的新模式。代码清单5-5列出了新的对象定义。代码清单5-5　classicalInheritance.js funct... 阅读全文

沙漠中的鱼 2008-04-24 14:29 发表评论

JavaScript中基于类的继承

沙漠中的鱼 — Thu, 24 Apr 2008 06:21:00 GMT

JavaScript中基于prototype的继承机制可以很好地工作，但是对于一些已经习惯于C++和Java等语言中基于类的继承机制的人来说，JavaScript的prototype继承机制不是一种自然的编程方法。如果你不想用基于prototype的继承，而想用一种基于类的继承方法，那就继续读下去吧。
Netscape的Bob Clary[4]也提出了一个方法，它可以使一个对象使用一个通用的脚本从另一个对象继承属性和函数。这个脚本只是将“父”对象的属性和函数简单地复制到“子”对象。为此，我们将说明如何对脚本稍加修改，从而只是将子对象中不存在的属性和函数复制到子对象；这样一来，子对象中的函数就能覆盖父对象的函数。在两个对象之间创建继承关系的通用函数如下：
function createInheritance(parent, child) {
    var property;
    for(property in parent) {
        if(!child[property]) {
            child[property] = parent[property];
        }
    }
}
createInheritance函数有两个参数，父对象和子对象。这个函数只是迭代处理父对象的所有成员（成员就是属性或函数），如果某个成员在子对象中不存在，则复制到子对象。
使用createInheritance函数相当简单：首先创建子对象的一个实例，然后使用createInheritance函数，为它传递子对象以及父对象的一个实例，如下：
var child = new Child();
createInheritance(new Parent(), child);
父对象中有而子对象中没有的所有属性和方法将复制到子对象。

引用:http://book.csdn.net/bookfiles/11/100117056.shtml

沙漠中的鱼 2008-04-24 14:21 发表评论

JavaScript私有属性和使用JavaScript的信息隐藏

沙漠中的鱼 — Thu, 24 Apr 2008 06:04:00 GMT

铁杆的面向对象设计支持者会注意到，当使用prototype方法向JavaScript对象增加属性和函数时，所增加的属性和函数都是公用的，所有其他对象都能访问。对于函数来说，这通常没有问题，因为大多数函数都确实应当提供给外部客户。但是对于属性，面向对象设计的支持者就会指出，公有属性违反了信息隐藏的概念，对象的属性应当是私有的，因此外部客户不能直接访问。外部客户只能通过公用可用的函数来访问对象的私有属性。

对于JavaScript，同样有可能创建外部客户不能访问的私有属性，而只能通过对象的（公用）方法来访问，但这一点很少有人知道。Douglas Crockford[3]提出了一种在JavaScript中创建私有属性的方法。这种方法非常简单，总结如下：

l 私有属性可以在构造函数中使用var关键字定义。

l 私有属性只能由特权函数（privileged function）公用访问。特权函数就是在构造函数中使用this关键字定义的函数。外部客户可以访问特权函数，而且特权函数可以访问对象的私有属性。

下面来考虑前一个示例中的Vehicle类。假设你想让wheelCount和curbWeightIn- Pounds属性是私有的，并只能通过公用方法访问。新的Vehicle对象如代码清单5-4所示。

代码清单5-4 重写后的Vehicle对象

注意，wheelCount和curbWeightInPounds属性都在构造函数中使用var关键字定义，这就使得这两个属性是私有属性。属性不再是公用的，如果想通过点记法访问wheelCount属性的值，如下：

var numberOfWheels = vehicle.wheelCount;

就会返回undefined，而不是wheelCount实际的值。

由于属性现在是私有的，因此需要提供能访问这些属性的公用函数。getWheelCount、setWheelCount、getCurbWeightInPounds和setCurbWeightInPounds函数就是作此使用的。现在Vehicle对象可以保证只能通过公用函数访问私有属性，因此满足了信息隐藏的

引用:http://book.csdn.net/bookfiles/11/100117056.shtml

沙漠中的鱼 2008-04-24 14:04 发表评论