IT博客-KiMoGiGi 技术文集-随笔分类-JavaScripthttp://www.cnitblog.com/seeyeah/category/3170.html不在乎选择什么，而在乎坚持多久……zh-cnTue, 27 Sep 2011 15:20:03 GMTTue, 27 Sep 2011 15:20:03 GMT60【原】Json对象格式化字符串输出http://www.cnitblog.com/seeyeah/archive/2009/09/29/61618.htmlKiMoGiGiKiMoGiGiMon, 28 Sep 2009 16:44:00 GMThttp://www.cnitblog.com/seeyeah/archive/2009/09/29/61618.htmlhttp://www.cnitblog.com/seeyeah/comments/61618.htmlhttp://www.cnitblog.com/seeyeah/archive/2009/09/29/61618.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/61618.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/61618.html虽然很多IDE或工具已经实现，但有时做简单测试时，格式化还是需要的。

假设，JS调用（假设界面有一个id为result的textarea）
var json = {
    Id: 1,
    Name: "Test",
    Date: new Date(),
    Subjects:
    [
        {
            Name: "语文"
        },
        {
            Name: "数学"
        },
        {
            Name: "英语",
            Marks: [90, 100, 83, { Test: "aaa"}]
        }
    ],
    Company:
    {
        Name: "Microsoft",
        Location: "USA"
    },
    Test: null
};
//-------------测试
//格式化Json字符串
document.getElementById("result").value = JsonUti.convertToString(json);

界面输出


实现代码如下:
        var JsonUti = {
            //定义换行符
            n: "\n",
            //定义制表符
            t: "\t",
            //转换String
            convertToString: function(obj) {
                return JsonUti.__writeObj(obj, 1);
            },
            //写对象
            __writeObj: function(obj    //对象
                    , level             //层次（基数为1）
                    , isInArray) {       //此对象是否在一个集合内
                //如果为空，直接输出null
                if (obj == null) {
                    return "null";
                }
                //为普通类型，直接输出值
                if (obj.constructor == Number || obj.constructor == Date || obj.constructor == String || obj.constructor == Boolean) {
                    var v = obj.toString();
                    var tab = isInArray ? JsonUti.__repeatStr(JsonUti.t, level - 1) : "";
                    if (obj.constructor == String || obj.constructor == Date) {
                        //时间格式化只是单纯输出字符串，而不是Date对象
                        return tab + ("\"" + v + "\"");
                    }
                    else if (obj.constructor == Boolean) {
                        return tab + v.toLowerCase();
                    }
                    else {
                        return tab + (v);
                    }
                }
 
                //写Json对象，缓存字符串
                var currentObjStrings = [];
                //遍历属性
                for (var name in obj) {
                    var temp = [];
                    //格式化Tab
                    var paddingTab = JsonUti.__repeatStr(JsonUti.t, level);
                    temp.push(paddingTab);
                    //写出属性名
                    temp.push(name + " : ");
 
                    var val = obj[name];
                    if (val == null) {
                        temp.push("null");
                    }
                    else {
                        var c = val.constructor;
 
                        if (c == Array) { //如果为集合，循环内部对象
                            temp.push(JsonUti.n + paddingTab + "[" + JsonUti.n);
                            var levelUp = level + 2;    //层级+2
 
                            var tempArrValue = [];      //集合元素相关字符串缓存片段
                            for (var i = 0; i < val.length; i++) {
                                //递归写对象                         
                                tempArrValue.push(JsonUti.__writeObj(val[i], levelUp, true));
                            }
 
                            temp.push(tempArrValue.join("," + JsonUti.n));
                            temp.push(JsonUti.n + paddingTab + "]");
                        }
                        else if (c == Function) {
                            temp.push("[Function]");
                        }
                        else {
                            //递归写对象
                            temp.push(JsonUti.__writeObj(val, level + 1));
                        }
                    }
                    //加入当前对象“属性”字符串
                    currentObjStrings.push(temp.join(""));
                }
                return (level > 1 && !isInArray ? JsonUti.n : "")                       //如果Json对象是内部，就要换行格式化
                    + JsonUti.__repeatStr(JsonUti.t, level - 1) + "{" + JsonUti.n     //加层次Tab格式化
                    + currentObjStrings.join("," + JsonUti.n)                       //串联所有属性值
                    + JsonUti.n + JsonUti.__repeatStr(JsonUti.t, level - 1) + "}";   //封闭对象
            },
            __isArray: function(obj) {
                if (obj) {
                    return obj.constructor == Array;
                }
                return false;
            },
            __repeatStr: function(str, times) {
                var newStr = [];
                if (times > 0) {
                    for (var i = 0; i < times; i++) {
                        newStr.push(str);
                    }
                }
                return newStr.join("");
            }
        };
 

实例下载：JsonToString.rar


KiMoGiGi 2009-09-29 00:44 发表评论
]]>JavaScript stack overflowhttp://www.cnitblog.com/seeyeah/archive/2008/09/02/48653.htmlKiMoGiGiKiMoGiGiTue, 02 Sep 2008 15:49:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/09/02/48653.htmlhttp://www.cnitblog.com/seeyeah/comments/48653.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/09/02/48653.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/48653.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/48653.htmlhttp://weblogs.asp.net/bleroy/archive/2007/10/18/javascript-stack-overflow.aspx

Here's one that some of you may have seen before, but I thought I'd post it to save some time to those who didn't.

Today we were trying to debug some client-side code and we needed to quickly wire the click event of a button. So we did this, without thinking too hard:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Stack overflow</title>
    <script type="text/javascript">
    function onclick() {
// do stuff
    }
</script>
</head>
<body>
    <div>
        <input type="button" value="Click me" onclick="onclick();" />
    </div>
</body>
</html>

Can you spot the stack overflow? We were so focused on the "do stuff" part that we didn't see it at first, thinking it came from there. But of course, it just comes from onclick="onclick();". When JavaScript resolves the name "onclick", it looks first on the current context before it goes up the scope chain and finds our global function (which it never does). The current context here is the input element, which happens to have an "onclick" attribute, which executes "onclick", etc. Crash.

So the valuable lesson we've learned here is to adopt a naming convention for our event handlers that can't conflict with the name of the event. I usually choose elementIdOnEventName. For example here if the input's id is button1, we'd go with button1OnClick.



KiMoGiGi 2008-09-02 23:49 发表评论
]]>JavaScript多线程编程简介http://www.cnitblog.com/seeyeah/archive/2008/08/14/48001.htmlKiMoGiGiKiMoGiGiThu, 14 Aug 2008 15:06:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/08/14/48001.htmlhttp://www.cnitblog.com/seeyeah/comments/48001.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/08/14/48001.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/48001.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/48001.htmlhttp://www.infoq.com/cn/articles/js_multithread

虽然有越来越多的网站在应用AJAX技术进行开发，但是构建一个复杂的AJAX应用仍然是一个难题。造成这些困难的主要原因是什么呢？是与服务器的异步通信问题？还是GUI程序设计问题呢？通常这两项工作都是由桌面程序来完成的，那究竟为何开发一个可以实现同样功能的AJAX应用就这么困难呢？

AJAX 开发中的难题

让我们通过一个简单的例子来认识这个问题。假设你要建立一个树形结构的公告栏系统(BBS)，它可以根据用户请求与服务器进行交互，动态加载每篇文章的信息，而不是一次性从服务器载入所有文章信息。每篇文章有四个相关属性：系统中可以作为唯一标识的ID、发贴人姓名、文章内容以及包含其所有子文章ID的数组信息。首先假定有一个名为getArticle()的函数可以加载一篇文章信息。该函数接收的参数是要加载文章的ID，通过它可从服务器获取文章信息。它返回的对象包含与文章相关的四条属性：id，name，content和children。例程如下：

function ( id ) {
     var a = getArticle(id);
     document.writeln(a.name + "
" + a.content);
 }

然而你也许会注意到，重复用同一个文章ID调用此函数，需要与服务器之间进行反复且无益的通信。想要解决这个问题，可以考虑使用函数 getArticleWithCache()，它相当于一个带有缓存能力的getArticle()。在这个例子中，getArticle()返回的数据只是作为一个全局变量被保存下来：

var cache = {};
 function getArticleWithCache ( id ) {
     if ( !cache[id] ) {
         cache[id] = getArticle(id);
     }
     return cache[id];
 }

现在已将读入的文章缓存起来，让我们再来考虑一下函数backgroundLoad()，它应用我们上面提到的缓存机制加载所有文章信息。其用途是，当读者在阅读某篇文章时，从后台预加载它所有子文章。因为文章数据是树状结构的，所以很容易写一个递归的算法来遍历树并且加载所有的文章：

function backgroundLoad ( ids ) {
     for ( var i=0; i < ids.length; i++ ) {
         var a = getArticleWithCache(ids[i]);
         backgroundLoad(a.children);
     }
 }

backgroundLoad ()函数接收一个ID数组作为参数，然后通过每个ID调用前面定义过的getArticldWithCache()方法，这样就把每个ID对应的文章缓存起来。之后再通过已加载文章的子文章ID数组递归调用backgroundLoad()方法，如此整个文章树就被缓存起来。

到目前为止，一切似乎看起来都很完美。然而，只要你有过开发AJAX应用的经验，你就应该知晓这种幼稚的实现方法根本不会成功，这个例子成立的基础是默认 getArticle()用的是同步通信。可是，作为一条基本原则，JavaScript要求在与服务器进行交互时要用异步通信，因为它是单线程的。就简单性而言，把每一件事情（包括GUI事件和渲染）都放在一个线程里来处理是一个很好的程序模型，因为这样就无需再考虑线程同步这些复杂问题。另一方面，他也暴露了应用开发中的一个严重问题，单线程环境看起来对用户请求响应迅速，但是当线程忙于处理其它事情时(比如说调用getArticle())，就不能对用户的鼠标点击和键盘操作做出响应。

如果在这个单线程环境里进行同步通信会发生什么事情呢？同步通信会中断浏览器的执行直至获得通信结果。在等待通信结果的过程中，由于服务器的调用还没有完成，线程会停止响应用户并保持锁定状态直到调用返回。因为这个原因，当浏览器在等待服务器响应时它不能对用户行为作出响应，所以看起来像是冻结了。当执行 getArticleWithCache()和backgroundLoad()会有同样的问题，因为它们都是基于getArticle()函数的。由于下载所有的文章可能会耗费很可观的一段时间，因此对于backgroundLoad()函数来说，浏览器在此段时间内的冻结就是一个很严重的问题——既然浏览器都已经冻结，当用户正在阅读文章时就不可能首先去执行后台预加载数据，如果这样做连当前的文章都没办法读。

如上所述，既然同步通信在使用中会造成如此严重的问题，JavaScript就把异步通信作为一条基本原则。因此，我们可以基于异步通信改写上面的程序。 JavaScript要求以一种事件驱动的程序设计方式来写异步通信程序。在很多场合中，你都必须指定一个回调程序，一旦收到通信响应，这个函数就会被调用。例如，上面定义的getArticleWithCache()可以写成这样：

var cache = {};
 function getArticleWithCache ( id, callback ) {
     if ( !cache[id] ) {
         callback(cache[id]);
     } else {
         getArticle(id, function( a ){
             cache[id] = a;
             callback(a);
         });
     }
 }

这个程序也在内部调用了getArticle()函数。然而需要注意的是，为异步通信设计的这版getArticle()函数要接收一个函数作为第二个参数。当调用这个getArticle()函数时，与从前一样要给服务器发送一个请求，不同的是，现在函数会迅速返回而非等待服务器的响应。这意味着，当执行权交回给调用程序时，还没有得到服务器的响应。如此一来，线程就可以去执行其它任务直至获得服务器响应，并在此时调用回调函数。一旦得到服务器响应， getArticle()的第二个参数作为预先定义的回调函数就要被调用，服务器的返回值即为其参数。同样的，getArticleWithCache ()也要做些改变，定义一个回调参数作为其第二个参数。这个回调函数将在被传给getArticle()的回调函数中调用，因而它可以在服务器通信结束后被执行。

单是上面这些改动你可能已经认为相当复杂了，但是对backgroundLoad()函数做得改动将会更复杂，它也要被改写成可以处理回调函数的形式：

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

改动后的backgroundLoad()函数看上去和我们以前的那个函数已经相去甚远，不过他们所实现的功能并无二致。这意味着这两个函数都接受ID数组作为参数，对于数组里的每个元素都要调用getArticleWithCache()，再应用已经获得子文章ID递归调用backgroundLoad ()。不过同样是对数组的循环访问，新函数中的就不太好辨认了，以前的程序中是用一个for循环语句完成的。为什么实现同样功能的两套函数是如此的大相径庭呢？

这个差异源于一个事实：任何函数在遇到有需要同服务器进行通信情况后，都必须立刻返回，例如getArticleWithCache()。除非原来的函数不在执行当中，否则应当接受服务器响应的回调函数都不能被调用。对于JavaScript，在循环过程中中断程序并在稍后从这个断点继续开始执行程序是不可能的，例如一个for语句。因此，本例利用递归传递回调函数实现循环结构而非一个传统循环语句。对那些熟悉连续传送风格(CPS)的人来说，这就是一个 CPS的手动实现，因为不能使用循环语法，所以即便如前面提到的遍历树那么简单的程序也得写得很复杂。与事件驱动程序设计相关的问题是控制流问题：循环和其它控制流表达式可能比较难理解。

这里还有另外一个问题：如果你把一个没有应用异步通信的函数转换为一个使用异步通信的函数，那么重写的函数将需要一个回调函数作为新增参数，这为已经存在的APIs造成了很大问题，因为内在的改变没有把影响限于内部，而是导致整体混乱的APIs以及API的其它使用者的改变。

造成这些问题目的根本原因是什么呢？没错，正是JavaScript单线程机制导致了这些问题。在单线程里执行异步通信需要事件驱动程序设计和复杂的语句。如果当程序在等待服务器的响应时，有另外一个线程可以来处理用户请求，那么上述复杂技术就不需要了。

试试多线程编程

让我来介绍一下Concurrent.Thread，它是一个允许JavaScript进行多线程编程的库，应用它可以大大缓解上文提及的在AJAX开发中与异步通信相关的困难。这是一个用JavaScript写成的免费的软件库，使用它的前提是遵守Mozilla Public License和GNU General Public License这两个协议。你可以从他们的网站 下载源代码。

马上来下载和使用源码吧！假定你已经将下载的源码保存到一个名为Concurrent.Thread.js的文件夹里，在进行任何操作之前，先运行如下程序，这是一个很简单的功能实现：

<script type="text/javascript" src="Concurrent.Thread.js"></script>
 <script type="text/javascript">
     Concurrent.Thread.create(function(){
         var i = 0;
         while ( 1 ) {
             document.body.innerHTML += i++ + "<br>";
         }
     });
 </script>

执行这个程序将会顺序显示从0开始的数字，它们一个接一个出现，你可以滚屏来看它。现在让我们来仔细研究一下代码，他应用while(1)条件制造了一个不会中止的循环，通常情况下，象这样不断使用一个并且是唯一一个线程的JavaScript程序会导致浏览器看起来象冻结了一样，自然也就不会允许你滚屏。那么为什么上面的这段程序允许你这么做呢？关键之处在于while(1)上面的那条Concurrent.Thread.create()语句，这是这个库提供的一个方法，它可以创建一个新线程。被当做参数传入的函数在这个新线程里执行，让我们对程序做如下微调：

<script type="text/javascript" src="Concurrent.Thread.js"></script>
 <script type="text/javascript">
     function f ( i ){
         while ( 1 ) {
             document.body.innerHTML += i++ + "<br>";
         }
     }
     Concurrent.Thread.create(f, 0);
     Concurrent.Thread.create(f, 100000);
 </script>

在这个程序里有个新函数f()可以重复显示数字，它是在程序段起始定义的，接着以f()为参数调用了两次create()方法，传给create()方法的第二个参数将会不加修改地传给f()。执行这个程序，先会看到一些从0开始的小数，接着是一些从100,000开始的大数，然后又是接着前面小数顺序的数字。你可以观察到程序在交替显示小数和大数，这说明两个线程在同时运行。

让我来展示Concurrent.Thread的另外一个用法。上面的例子调用create()方法来创建新线程。不调用库里的任何APIs也有可能实现这个目的。例如，前面那个例子可以这样写：

<script type="text/javascript" src="Concurrent.Thread.js"></script>
 <script type="text/x-script.multithreaded-js">
     var i = 1;
     while ( 1 ) {
         document.body.innerHTML += i++ + "<br>";
     }
 </script>

在script 标签内，很简单地用JavaScript写了一个无穷循环。你应该注意到标签内的type属性，那里是一个很陌生的值(text/x- script.multithreaded-js)，如果这个属性被放在script标签内，那么Concurrent.Thread就会在一个新的线程内执行标签之间的程序。你应当记住一点，在本例一样，必须将Concurrent.Thread库包含进来。

有了Concurrent.Thread，就有可能自如的将执行环境在线程之间进行切换，即使你的程序很长、连续性很强。我们可以简要地讨论下如何执行这种操作。简言之，需要进行代码转换。粗略地讲，首先要把传递给create()的函数转换成一个字符串，接着改写直至它可以被分批分次执行。然后这些程序可以依照调度程序逐步执行。调度程序负责协调多线程，换句话说，它可以在适当的时候做出调整以便每一个修改后的函数都会得到同等机会运行。 Concurrent.Thread实际上并没有创建新的线程，仅仅是在原本单线程的基础上模拟了一个多线程环境。

虽然转换后的函数看起来是运行在不同的线程内，但是实际上只有一个线程在做这所有的事情。在转换后的函数内执行同步通信仍然会造成浏览器冻结，你也许会认为以前的那些问题根本就没有解决。不过你不必耽心，Concurrent.Thread提供了一个应用JavaScript 的异步通信方式实现的定制通信库，它被设计成当一个线程在等待服务器的响应时允许其它线程运行。这个通信库存于 Concurrent.Thread.Http下。它的用法如下所示：

<script type="text/javascript" src="Concurrent.Thread.js"></script>
 <script type="text/x-script.multithreaded-js">
     var req = Concurrent.Thread.Http.get(url, ["Accept", "*"]);
     if (req.status == 200) {
         alert(req.responseText);
     } else {
         alert(req.statusText);
     }
 </script>

get()方法，就像它的名字暗示的那样，可以通过HTTP的GET方法获得指定URL的内容，它将目标URL作为第一个参数，将一个代表HTTP请求头的数组作为可选的第二个参数。get()方法与服务器交互，当得到服务器的响应后就返回一个XMLHttpRequest对象作为返回值。当get()方法返回时，已经收到了服务器响应，所以就没必要再用回调函数接收结果。自然，也不必再耽心当程序等待服务器的响应时浏览器冻结的情况了。另外，还有一个 post()方法可以用来发送数据到服务器：

<script type="text/javascript" src="Concurrent.Thread.js"></script>
 <script type="text/x-script.multithreaded-js">
     var req = Concurrent.Thread.Http.post(url, "key1=val1&key2=val2");
     alert(req.statusText);
 </script>

post()方法将目的URL作为第一个参数，要发送的内容作为第二个参数。像get()方法那样，你也可以将请求头作为可选的第三个参数。

如果你用这个通信库实现了第一个例子当中的getArticle()方法，那么你很快就能应用文章开头示例的那种简单的方法写出getArticleWithCache(),backgroundLoad ()以及其它调用了getArticle()方法的函数了。即使是那版backgroundLoad()正在读文章数据，照例还有另外一个线程可以对用户请求做出响应，浏览器因此也不会冻结。现在，你能理解在JavaScript中应用多线程有多实用了？

想了解更多

我向你介绍了一个可以在JavaScript中应用多线程的库：Concurrent.Thread。这篇文章的内容只是很初级的东西，如果你想更深入的了解，我推荐您去看the tutorial。它提供有关Concurrent.Thread用法的更多内容，并列出了可供高级用户使用的文档，是最适合起步的材料。访问他们的网站也不错，那里提供更多信息。

有关作者

Daisuke Maki：从International Christian大学文科学院自然科学分部毕业后（取得文学学士学位），又在Electro-Communications大学的研究生院信息专业攻读硕士学位。擅长Web开发和应用JavaScript的AJAX。他开发了Concurrent.Thread。2006财政年度在日本信息技术促进机构（IPA）指导的项目Explatory Software Project中应用了这个设计。

目前已经拥有一个工学硕士学位的他正在Electro-Communications大学的研究生院注册攻读博士学位。



KiMoGiGi 2008-08-14 23:06 发表评论
]]>ECMA Script Specification http://www.cnitblog.com/seeyeah/archive/2008/06/22/45927.htmlKiMoGiGiKiMoGiGiSun, 22 Jun 2008 07:27:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/06/22/45927.htmlhttp://www.cnitblog.com/seeyeah/comments/45927.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/06/22/45927.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/45927.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/45927.html
http://www.ecma-international.org/publications/standards/Ecma-262.htm

KiMoGiGi 2008-06-22 15:27 发表评论
]]>[原]jQuery调用WebServicehttp://www.cnitblog.com/seeyeah/archive/2008/06/12/45471.htmlKiMoGiGiKiMoGiGiWed, 11 Jun 2008 16:59:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/06/12/45471.htmlhttp://www.cnitblog.com/seeyeah/comments/45471.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/06/12/45471.html#Feedback6http://www.cnitblog.com/seeyeah/comments/commentRss/45471.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/45471.html
1、编写4种WebService方法
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]                             //令WebService成功传入Json参数，并以Json形式返回结果
    [GenerateScriptType(typeof(Person))]        //不是必要，但推荐添加(如果Person里面再嵌套另一个复杂类型，则必要声明)
    [ToolboxItem(false)]
    public class WebService1 : System.Web.Services.WebService
    {
        /// <summary>
        /// 无任何参数
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        /// <summary>
        /// 传入参数
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        [WebMethod]
        public string Hello(string name)
        {
            return string.Format("Hello {0}", name);
        }

        /// <summary>
        /// 返回泛型列表
        /// </summary>
        /// <param name="i"></param>
        /// <returns></returns>
        [WebMethod]
        public List<int> CreateArray(int i)
        {
            List<int> list = new List<int>();

            while (i >= 0)
            {
                list.Add(i--);
            }

            return list;
        }

        /// <summary>
        /// 返回复杂类型
        /// </summary>
        /// <param name="name"></param>
        /// <param name="age"></param>
        /// <returns></returns>
        [WebMethod]
        public Person GetPerson(string name, int age)
        {
            return new Person()
            {
                Name = name,
                Age = age
            };
        }
    }

    /// <summary>
    /// 复杂类型
    /// </summary>
    public class Person
    {
        public string Name { get; set; }

        public int Age { get; set; }
    }

2、编写js调用以上方法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
    input
    {
        width:200px;
    }
    </style>

    <script type="text/javascript" src="jquery-1[1].2.6.min.js"></script>
    <script type="text/javascript">
    $(function(){  
      
        /*
            1、WebService请求类型都为Post，WebService的Url为“[WebServiceUrl]/[WebMethod]”
            2、contentType声明为Json
            3、data要用Json的字符串格式传入
            4、设置了dataType为json后，result就直接为返回的Json对象。

        */
        
        //调用无参数方法
        $("#btnHelloWorld").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/HelloWorld",
                data:"{}",
                dataType:'json',
                success:function(result){                    
                    alert(result.d);
                }
            });
        });        
        
        //传入1个参数
        $("#btnHello").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/Hello",
                data:"{name:'KiMoGiGi'}",
                dataType:'json',
                success:function(result){                    
                    alert(result.d);
                }
            });
        });
        
         //返回泛型列表
        $("#btnArray").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/CreateArray",
                data:"{i:10}",
                dataType:'json',
                success:function(result){                    
                    alert(result.d.join(" | "));
                }
            });
        });
        
         //返回复杂类型
        $("#btnPerson").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/GetPerson",
                data:"{name:'KiMoGiGi',age:26}",
                dataType:'json',
                success:function(result){
                    var person = result.d;
                    var showText = [];
                    for(var p in person){
                        showText.push(p + ":" + person[p]);
                    }
                    alert(showText.join("\r\n"));
                }
            });
        });
    });
    </script>
</head>
    <body>
        <form id="form1" runat="server">
            <p>
                <input type="button" id="btnHelloWorld" value="HelloWorld" />
            </p>
            <p>
                <input type="button" id="btnHello" value="Hello" />
            </p>
            <p>
                <input type="button" id="btnArray" value="CreateArray" />
            </p>
            <p>
                <input type="button" id="btnPerson" value="GetPerson" />
            </p>
        </form>
    </body>
</html>




KiMoGiGi 2008-06-12 00:59 发表评论
]]>jQuery BlockUI Plugin (v2)http://www.cnitblog.com/seeyeah/archive/2008/06/10/45264.htmlKiMoGiGiKiMoGiGiMon, 09 Jun 2008 16:22:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/06/10/45264.htmlhttp://www.cnitblog.com/seeyeah/comments/45264.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/06/10/45264.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/45264.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/45264.html
官方网址：http://www.malsup.com/jquery/block/

使用参数：


Options

BlockUI's default options look (exactly) like this: 
// override these in your code to change the default behavior and style 
$.blockUI.defaults = { 
    // message displayed when blocking (use null for no message) 
    message:  '<h1>Please wait...</h1>', 
     
    // styles for the message when blocking; if you wish to disable 
    // these and use an external stylesheet then do this in your code: 
    // $.blockUI.defaults.css = {}; 
    css: {  
        padding:        0, 
        margin:         0, 
        width:          '30%',  
        top:            '40%',  
        left:           '35%',  
        textAlign:      'center',  
        color:          '#000',  
        border:         '3px solid #aaa', 
        backgroundColor:'#fff', 
        cursor:         'wait' 
    }, 
     
    // styles for the overlay 
    overlayCSS:  {  
        backgroundColor:'#000',  
        opacity:        '0.6'  
    }, 
     
    // z-index for the blocking overlay 
    baseZ: 1000, 
     
    // set these to true to have the message automatically centered 
    centerX: true, // <-- only effects element blocking (page block controlled via css above) 
    centerY: true, 
     
    // allow body element to be stetched in ie6; this makes blocking look better 
    // on "short" pages.  disable if you wish to prevent changes to the body height 
    allowBodyStretch: true, 
     
    // be default blockUI will supress tab navigation from leaving blocking content; 
    constrainTabKey: true, 
     
    // fadeOut time in millis; set to 0 to disable fadeout on unblock 
    fadeOut:  400, 
     
    // suppresses the use of overlay styles on FF/Linux (due to significant performance issues with opacity) 
    applyPlatformOpacityRules: true 
}; 
Changing the blockUI options is simple and can be done in one of two ways:
  1. Globally, by directly overriding the values in the $.blockUI.defaults object
  2. Locally, by passing an options object to the blockUI (or block) function.

Global Overrides

You can change the default options by simply declaring different values for them. For example: 
// change message border 
$.blockUI.defaults.css.border = '5px solid red'; 
 
// make fadeOut effect shorter 
$.blockUI.defaults.fadeOut = 200; 

Local Overrides

Local overrides are achieved by passing an object to the blockUI (or block) function. The exact same options are available to the local options object as are available in the global object. For example: 
// change message border 
$.blockUI({ css: { border = '5px solid red'} }); 
 
... 
 
// make fadeOut effect shorter 
$.blockUI({ fadeOut: 200 }); 
 
... 
 
// use a different message 
$.blockUI({ message: 'Hold on!' }); 


KiMoGiGi 2008-06-10 00:22 发表评论
]]>jQuery Ajax 全解析 http://www.cnitblog.com/seeyeah/archive/2008/06/07/45127.htmlKiMoGiGiKiMoGiGiSat, 07 Jun 2008 15:36:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/06/07/45127.htmlhttp://www.cnitblog.com/seeyeah/comments/45127.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/06/07/45127.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/45127.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/45127.html本文地址: jQuery Ajax 全解析

本文作者：QLeelulu

转载请标明出处！

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态：success，error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});

这里将显示结果。

 

注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。

 

2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

参数：

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码： 

		$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
alert(data);
//alert(textStatus);//请求状态：success，error等等。
                                  当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
//alert(this);
});

点击发送请求：

jQuery.get()回调函数里面的 this ，指向的是Ajax请求的选项配置信息：

image

 

3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

Ajax.aspx：

Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");
jQuery 代码： 
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
alert(data.result);
}, "json");

点击提交：

这里设置了请求的格式为"json"：

image

如果你设置了请求的格式为"json"，此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意一下，alert(data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。

 

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：

加载并执行 test.js。

jQuery 代码:

$.getScript("test.js");

加载并执行 AjaxEvent.js ，成功后显示信息。

jQuery 代码: 

$.getScript("AjaxEvent.js", function(){
alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");
});

加载完后请重新点击一下上面的 Load 请求看看有什么不同。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的，例如： 

 $.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：

 $("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});

或者：

 $("#loading").ajaxStart(function(){
$(this).show();
});

我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了： 

 $.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});

下面是jQuery官方给出的完整的Ajax事件列表：

  • ajaxStart (Global Event)
    This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
    • beforeSend (Local Event)
      This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
    • ajaxSend (Global Event)
      This global event is also triggered before the request is run.
    • success (Local Event)
      This event is only called if the request was successful (no errors from the server, no errors with the data).
    • ajaxSuccess (Global Event)
      This event is also only called if the request was successful.
    • error (Local Event)
      This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
    • ajaxError (Global Event)
      This global event behaves the same as the local error event.
    • complete (Local Event)
      This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
    • ajaxComplete (Global Event)
      This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
  • ajaxStop (Global Event)
    This global event is triggered if there are no more Ajax requests being processed.

    具体的全局事件请参考API文档。
    好了，下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();  

     

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

    $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

    注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
    当设置 datatype 类型为 'script' 的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。

    $.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。

    jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。(这个我不是很懂)

    参数列表：

    参数名 类型 描述
    url String (默认: 当前页地址) 发送请求的地址。
    type String (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
    timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
    async Boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
    beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
    function (XMLHttpRequest) {
            this; // the options for this ajax request
            }
    cache Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
    complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
    function (XMLHttpRequest, textStatus) {
            this; // the options for this ajax request
            }
    contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
    data Object,
    String    		 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
    dataType String

    预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:

    "xml": 返回 XML 文档，可用 jQuery 处理。

    "html": 返回纯文本 HTML 信息；包含 script 元素。

    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

    "json": 返回 JSON 数据 。

    "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
    error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
    function (XMLHttpRequest, textStatus, errorThrown) {
            // 通常情况下textStatus和errorThown只有其中一个有值 
            this; // the options for this ajax request
            }
    global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
    ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
    processData Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
    success Function 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
    function (data, textStatus) {
            // data could be xmlDoc, jsonObj, html, text, etc...
            this; // the options for this ajax request
            }

    这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
    请认真阅读上面的参数列表，如果你要用jQuery来进行Ajax开发，那么这些参数你都必需熟知的。

    示例代码，获取博客园首页的文章题目：

    $.ajax({
type: "get",
url: "http://www.cnblogs.com/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
},
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
},
error: function(){
//请求出错处理
}
});

    这里将显示首页文章列表。

     

     

    其他

    jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。

    设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

    jQuery 代码: 

    $.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });

     

    serialize() 与 serializeArray()

    serialize() : 序列表表格内容为字符串。

    serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

    示例：

    HTML代码：

    <p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>

    image

    serializeArray() 结果为：

    image

     

    一些资源

    一个jQuery的Ajax Form表单插件：http://www.malsup.com/jquery/form/

    一个专门生成Loading图片的站点：http://ajaxload.info/   大家觉得那些Loading比较炫的可以在这里跟帖晒一下，方便大家取用，嘎嘎



    • KiMoGiGi 2008-06-07 23:36 发表评论
    ]]>    浅析 innerHTML 性能优化的原理 http://www.cnitblog.com/seeyeah/archive/2008/05/11/43608.htmlKiMoGiGiKiMoGiGiSun, 11 May 2008 14:52:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/05/11/43608.htmlhttp://www.cnitblog.com/seeyeah/comments/43608.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/05/11/43608.html#Feedback1http://www.cnitblog.com/seeyeah/comments/commentRss/43608.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/43608.htmlhttp://fins.javaeye.com/blog/183373
    昨天看了 lveyo老兄的"innerHTML的性能问题" 一文 http://lveyo.javaeye.com/blog/182891

    该文介绍了一篇老外的关于提高innerHTML性能的文章.

    老外的方法非常的怪异且神奇.

    很多朋友在惊叹之余 对于背后的原理非常感兴趣.
    受hax的提醒, 我看了一下webkit的代码.在这里我将分析的结果分享出来

    说的不一定对 还请大家多多拍砖.


    浏览器在 el.innerHTML = newHTML 时所做的工作:

    ====================================
    原始方法

    1) 创建一个fragment(document碎片)
    2) 将 newHTML 设置到 fragment 内部 (这里怎么设置的不必关心,反正不是用的innerHTML 呵呵)
    3) 清除el下的所有子节点 , 类似 el.removeChildren()
    4) 将fragment加入到 el内, 类似 el.appendChild(fragment)


    ====================================
    文章里的新方法

    1)克隆el节点(不包含子节点),相当于
    newEl=document.createElement(el.tagName);
    然或将el的所有属性赋值给 newEl (通过 el.getAttribute newEl.setAttribute)

    2) 创建一个fragment(document碎片)
    3) 将 newHTML 设置到 fragment 内部 (这里怎么设置的不必关心,反正不是用的innerHTML 呵呵)
    4) 清除 newEl 下的所有子节点 , 类似 newEl.removeChildren()
    5) 将 fragment 加入到 newEl 内, 类似 newEl.appendChild(fragment)
    6) 用 fragment 替换 el. 相当于 el.parentNode.replaceChild(newEl, el);

    新方法看起来比原始方法更麻烦, 但是为什么速度会更快呢?

    关键点就是在 新方法的步骤 4 5 6 .
    首先看4:
    newEl 是clone的el,但是没有子结点,所以removeChildren很快就返回.相当于没有执行.
    而且就算newEL有子结点,由于newEl不是一个在dom树里的节点, 也省去了其中复杂的一步
    而 el.removeChildren 这个操作 相比之下自然要耗时很多.原因有三:removeChild操作比较复杂;el有子节点;el和el的子结点都在dom树内.


    再来看5
    newEl 和 fragment 本身都是脱离dom树独立存在的,这个操作速度也要比el.appendChild(fragment)快.

    再来看6.
    6的操作就是 在el.parentNode中移除el,然后再在原始位置加入newEl. 这个步骤并没有速度优势.
    但是 4 5 6这3个操作加起来,当el和newHTML足够复杂时,还是要比原始方法的 3 4 步更快


    以上就是我的分析 有不对的地方 欢迎大家抛砖.
    同时欢迎大家来贴一下 IE 和 ff的实现方式

    KiMoGiGi 2008-05-11 22:52 发表评论
    ]]>    Cross Site AJAX [转载]http://www.cnitblog.com/seeyeah/archive/2008/04/16/42450.htmlKiMoGiGiKiMoGiGiWed, 16 Apr 2008 14:04:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/04/16/42450.htmlhttp://www.cnitblog.com/seeyeah/comments/42450.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/04/16/42450.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/42450.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/42450.html一般情形下，为安全起见，浏览器不允许你在客户端通过XMLHttpRequest访问别的域(参考连接1,2)，即使是同一域的子域也不行，譬如www.joycode.com 到 blog.joycode.com。(你可以通过某些设置来访问子域，但因为这方法不是很通行，所有就不考虑了，但如果你感兴趣，参考连接2。)

    但很明显，在不少情形下，访问别的网站，获取别的网站的信息/服务是非常有用的，特别是在这个Web 2.0时代。

    常用的跨站访问的方法有3种(参考连接3，4)：

    1. 在同一域的服务器端建立一个代理，浏览器向该代理网址发送请求，然后该代理向其他域的网址发请求，在获取回复后，或作处理或按原样发回到浏览器
    2. 使用按需(On-Demand) Javascript 脚本。在页面内动态生成新的<script>，将其src属性指向别的网站的网址，这个网址返回的内容必须是合法的Javascript脚本，常用的是JSON消息。
    3. 使用IFRAME。在页面内嵌或动态生成指向别的网站的IFRAME，然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。改变一个网页的anchor hash fragment并不会使浏览器重新装载网页，所以一个网页的状态得以保持，而网页本身则可以通过一个计时器(timer)来察觉自己anchor hash的变化，从而相应改变自己的状态(参考这个帖子中提及的Nikhil Kothari的历史控件中的方法)。 Julien Couvreur在他的《Cross-document messaging hack》里描述了一个更复杂的应用情形，
      "....
      For example, if you have page A containing an iframe B in a different domain,then B can create a new iframe and load it with a url in the same domain as A. The url that is loaded doesn't generate a request to the server if it is properly cached and only the fragment identifier is used to pass changing information. Page A can now get the DOM handle on the new iframe and successfully retrieve the information transmitted in the url by B...." (大体这样，网页A包含了一个IFRAME B，B的网页来自一个不同的域。然后B页可以生成一个IFRAME C，把它指向与网页A同域的某个地址，因为是A与C同域，网页A可以访问C里的信息，反之亦然。)

    ASP.NET AJAX扩展(即Atlas)提供了一个桥(bridge)机制让你在服务器端配置来访问别的网站，并同时支持POX和SOAP这2种协议。想了解其中细节，请参考Atlas文档里的《Building Mash-ups with "Atlas"》。当然你完全可以自己建立一个web service，通过它来访问其他网站并返回信息。

    据说，Atlas中的 IFrameExecutor 可以实现跨域的调用，我按照MSDN博客Federal Developer Weblog的这篇帖子《Calling web services hosted outside of your application with “Atlas”》上的步骤试了一下，但在Windows 2003 Server SP1上得到却是“Access is denied”的错误信息。然后我下载了该文中的项目，试验的结果仍旧是“Access is denied”。也许需要改动一些浏览器中的什么设置才能成功，但这不是我的目的，我需要一个在普通设置下都能成功的例子。

    按需(On-Demand) Javascript脚本的实现是很简单的，譬如我有这样一个网页，(想测试的话，需要改动其中的网址)

    <html>
    <head>
    <script language="javascript" type="text/javascript">
    function loadContent()
    {
    var s=document.createElement('SCRIPT');
    s.src='http://www.anotherdomain.com/TestCrossJS.aspx?f=setDivContent';
    document.body.appendChild(s);
    }

    function setDivContent(v)
    {
    var dv = document.getElementById("dv");
    dv.innerHTML = v;
    }
    </script>
    </head>
    <body>
    <div id="dv"></div>

    <input type="button" value="Click Me" onclick="loadContent()">
    </body>
    </html>

    其中的www.anotherdomain.com/TestCrossJS.aspx是这样的，

    <script language="C#" runat="server">
    void Page_Load(object sender, EventArgs e)
    {
      string f = Request.QueryString["f"];
      Response.Clear();
      Response.ContentType = "application/x-javascript";
      Response.Write(String.Format(@"
                       {0}('{1}');", 
                       f,
                       DateTime.Now));
      Response.End();
    }
    </script>

    点击“Click Me”按钮，生成一个新的script tag，下载对应的 Javascript 脚本，结束时回调其中的setDivContent()，从而更新网页上一个div的内容。

    IFRAME的方法好像很流行，除了dojo工具包支持外，据微软的Dare Obasanjo说(参考连接9)，Windows Live Contacts Gadget使用了这个方法来获取Hotmail的address book。最近，Plaxo公司的开发人员 Joseph Smarr在七月的OSCON 2006会议上作了一个题为《Cross-site Ajax: Challenges and Techniques for Building Rich Web 2.0 Mashups》的讲座[来源：Kevin Yank--OSCON 2006: Cross-site Ajax]，他们将这个方法做成了一个平台，允许合作伙伴间合作，他们开发的方案叫“The JavaScript Wormhole(虫洞)”，据说准备将其推广为一个标准。他讲座的PPT可以在这里下载，里面对这个方案做了说明，非常值得看一下。

    现在将IFRAME的方法简单示范如下:

    1. http://domain1/TestCross.html:

    <html>
    <head>
    <script language="javascript" type="text/javascript">
    var url = "http://domain2/TestCross.html"
    var oldHash = null;
    var timer = null;

    function getHash()
    {
    var hash = window.location.hash;
    if ((hash.length >= 1) && (hash.charAt(0) == '#'))
    {
    hash = hash.substring(1);
    }

    return hash;
    }
    function sendRequest()
    {
    var d = document;
    var t = d.getElementById('request');
    var f = d.getElementById('alienFrame');
    f.src = url + "#" + t.value + "<br/>" + new Date();
    }

    function setDivHtml(v)
    {
    var d = document;
    var dv = d.getElementById('response');
    dv.innerHTML = v;
    }

    function idle()
    {
    var newHash = getHash();

    if (newHash != oldHash)
    {
    setDivHtml(newHash);
    oldHash = newHash;
    }

    timer = window.setTimeout(idle, 100);
    }

    function window.onload()
    {
    timer = window.setTimeout(idle, 100);
    }
    </script>
    </head>
    <body>

    请求：<input type="text" id="request"> <input type="button" value="发送" onclick="sendRequest()" /><br/>
    回复：<div id="response"></div>

    <iframe id="alienFrame" src="http://domain2/TestCross.html"></iframe>

    </body>
    </html>

    2. http://domain2/TestCross.html:

    <html>
    <head>
    <script language="javascript" type="text/javascript">
    var url = "http://domain1/TestCross.html"
    var oldHash = null;
    var timer = null;

    function getHash()
    {
    var hash = window.location.hash;
    if ((hash.length >= 1) && (hash.charAt(0) == '#'))
    {
    hash = hash.substring(1);
    }

    return hash;
    }
    function sendRequest()
    {
    var d = document;
    var t = d.getElementById('request');
    var f = parent;
    //alert(f.document); //试着去掉这个注释，你会得到“Access is denied”
    f.location.href = url + "#" + t.value + "<br/>" + new Date();
    }

    function setDivHtml(v)
    {
    var d = document;
    var dv = d.getElementById('response');
    dv.innerHTML = v;
    }

    function idle()
    {
    var newHash = getHash();

    if (newHash != oldHash)
    {
    setDivHtml(newHash);
    oldHash = newHash;
    }

    timer = window.setTimeout(idle, 100);
    }

    function window.onload()
    {
    timer = window.setTimeout(idle, 100);
    }
    </script>
    </head>
    <body>

    请求：<input type="text" id="request"> <input type="button" value="发送" onclick="sendRequest()" /><br/>
    回复：<div id="response"></div>

    </body>
    </html>

    两个网页基本相同，第一个网页内嵌一个IFRAME，在点击“发送”按钮后，会将文本框里的内容通过hash fragment传给IFRAME。点击IFRAME里的“发送”按钮后，它会将文本框里的内容通过hash fragment传给父窗口。因为是只改动了hash fragment，浏览器不会重新load网页内容，这里使用了一个计时器来检测URL变化，如果变化了，就更新其中一个div的内容 。

    这个方法是不是个安全漏洞？考虑到微软的Windows Live都在使用这个方法，估计不是，。这个方法是不是很安全？考虑到这个方法只有在2个网站协作的情形才能成功，安全问题好像不是很大，除非其中涉及的网站本身有XSS的问题。

    【参考连接】

    1. Security Considerations: Dynamic HTML
    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/sec_dhtml.asp

    2. About Cross-Frame Scripting and Security
    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/xframe_scripting_security.asp

    3. Cross-Domain Proxy
    http://ajaxpatterns.org/Cross-Domain_Proxy

    4. Cross Domain XMLHttpRequest using an IFrame Proxy
    http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75

    5. Back Button Support for Atlas UpdatePanels
    http://www.nikhilk.net/BackButtonSupport.aspx

    6. Cross-document messaging hack
    http://blog.monstuff.com/archives/000304.html

    7. Building Mash-ups with "Atlas"
    http://atlas.asp.net/docs/Walkthroughs/DevScenarios/bridge.aspx

    8. Calling web services hosted outside of your application with “Atlas”
    http://blogs.msdn.com/federaldev/archive/2006/07/31/684229.aspx

    http://www.federaldeveloper.com/Shared%20Documents/Presentations%20by%20Marc%20Schweigert/CallAtlasWebServiceInDifferentProject.zip

    9. AJAX Tip: Passing Messages Between iframes
    http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=3b03cf9d-b589-4838-806e-64efcc0a1a15

    10. OSCON Cross-site Ajax Slides
    http://blog.plaxo.com/archives/2006/07/oscon_crosssite.html

    http://www.plaxo.com/css/api/Joseph-Smarr-Plaxo-OSCON-2006.ppt

    11. OSCON 2006: Cross-site Ajax
    http://www.sitepoint.com/blogs/2006/07/28/oscon-2006-cross-site-ajax/



    KiMoGiGi 2008-04-16 22:04 发表评论
    ]]>    【原】简单分析“腾讯招聘”网站Ajax分页http://www.cnitblog.com/seeyeah/archive/2008/03/25/41472.htmlKiMoGiGiKiMoGiGiTue, 25 Mar 2008 15:36:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/03/25/41472.htmlhttp://www.cnitblog.com/seeyeah/comments/41472.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/03/25/41472.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/41472.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/41472.html阅读全文

    KiMoGiGi 2008-03-25 23:36 发表评论
    ]]>    JavaScript的私有变量http://www.cnitblog.com/seeyeah/archive/2008/03/16/40992.htmlKiMoGiGiKiMoGiGiSun, 16 Mar 2008 02:09:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/03/16/40992.htmlhttp://www.cnitblog.com/seeyeah/comments/40992.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/03/16/40992.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/40992.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/40992.html
    摘至：JavaScript中的私有成员
    原文：Private Members in JavaScript


    JavaScript 是世界上最被误解的语言。很多人认为它缺乏信息隐藏的特性所以对象不能有私有实例变量和方法。但这是一个误解。JavaScript对象同样可以拥有私有变量。下面就讲解一下：

    对象

    JavaScript根本上都是关于的对象（Object）的。数组（Array）是对象，函数（Function）是对象，Object就不说了。那什么是对象？对象是名称-值的配对的集合。名称是字符串，值可以是字符串、数字、布尔值和对象（包括数组和函数）。对象常常实现为哈希表以快速存取值。

    如果一个值是函数，我们可以将它视为方法method。当调用一个对象的方法时，this 变量就会被设为该对象。这个方法就可以通过this变量访问实例变量。

    对象是由构造器constructor产生的，它是初始化对象的函数。构造器提供了其它语言中类提供的特性，包括静态方法和变量。

    公共成员

    对象的成员都是 public 公共成员。任何函数都可以访问、修改或者删除这些成员。有两种主要的途径给新的对象加入成员：

    构造器中

    这个技术一般用来初始化公共实例变量。构造器的this变量是用来向对象添加成员的。

    function Container(param) {    this.member = param;}

    这样，如果我们构造一个新的对象

    var myContainer = new Container('abc');

    那么myContainer.member 就会包含‘abc’。

    原型中

    这个技巧一般用来添加公共方法。当一个成员被检索且没有在对象中发现的时候，那么它就会从对象构造器的 prototype 成员中去获取它。这个原型机制可用来实现继承。它也保存内存。要为一个构造器生成的所有对象加入一个方法，将函数加入构造器的prototype 中:

    Container.prototype.stamp = function (string) {
return this.member + string;
}

    这样，我们可以调用这个方法

    myContainer.stamp('def')

    它会返回‘abcdef’.

    私有成员

    私有Private成员要由构造器生成。构造器中的普通的var变量和参数都成为私有成员。

    function Container(param) {
this.member = param;
var secret = 3;
var self = this;}

    这个构造器有三个私有实例变量：param, secret, 和 self。它们被附加到了对象上，但它们无法从外部访问，同时它们也无法被这个对象的公共方法所访问。他们只对私有成员可见。私有方法则是构造器内部的函数。

    function Container(param) {
function dec() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}
this.member = param;
var secret = 3;
var self = this;
}

    私有方法 dec 检查 secret 实例变量。如果它大于0，就减少secret 的大小并返回 true 。否则它返回 false 。这个可以限制对象使用三次。

    按照惯例，我们给出一个私有的 self 参数。这个可以令对象对私有方法可见。这种做法是因为ECMAScript Language Specification中的一个错误，这个错误令 this 不能正确地对内部函数设置。

    私有方法无法被公共方法调用。要令私有方法有用，我们需要引入一种特权方法。

    特权成员

    一个特权A privileged 方法可以访问私有的变量和方法，同时它对公共域可见。也可以删除或替换一个特权方法，但不能改变它。

    特权方法是用 this 在构造器中分配的。

    function Container(param) {
function dec() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}
this.member = param;
var secret = 3;
var self = this;
this.service = function () {
if (dec()) {
return self.member;
} else {
return null;
}
};
}

    service 就是一个特权方法。前三次调用会返回‘abc’。
    之后 ，它会返回 null。service调用的私有的 dec 方法，而
    dec又访问了私有的 secret变量。service对其它的对象和方法是可见的，但不能直接访问私有成员。

    闭包

    这种公共、私有和特权成员的模式是可行的原因是由于JavaScript有 closure闭包。这个意味着一个内部的函数总是可以访问这个函数外部的变量和参数，甚至在外部的函数返回之后。这是这个语言的一个极其强大的特性。目前没有哪本关于JavaScript编程的书展示了如何发掘这个特性。大多数都没有提到。

    私有和特权成员只能在对象构造的时候生成。公共成员可以在任意时刻添加。

    模式

    公共（Public）

    function Constructor(…) {
this.membername = value;
}
Constructor.prototype.membername = value;

    私有（Private）

    function Constructor(…) {
var self =  this;
var membername =  value;
function  membername(…)  {…}
}

    注意，实际上函数语句

    function  membername(…)  {…}

    是以下语句的缩写，两者相同：

    var  membername = function  membername(…)  {…};

    特权（Privileged）

    function Constructor(…) {
this.membername =  function (…)  {…};
}


    KiMoGiGi 2008-03-16 10:09 发表评论
    ]]>    Javascript Closureshttp://www.cnitblog.com/seeyeah/archive/2008/03/16/40981.htmlKiMoGiGiKiMoGiGiSat, 15 Mar 2008 16:32:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/03/16/40981.htmlhttp://www.cnitblog.com/seeyeah/comments/40981.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/03/16/40981.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/40981.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/40981.html阅读全文

    KiMoGiGi 2008-03-16 00:32 发表评论
    ]]>    英语技术文章【20080303】http://www.cnitblog.com/seeyeah/archive/2008/03/03/40407.htmlKiMoGiGiKiMoGiGiMon, 03 Mar 2008 15:12:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/03/03/40407.htmlhttp://www.cnitblog.com/seeyeah/comments/40407.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/03/03/40407.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/40407.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/40407.htmlWriting Object-Oriented JavaScript
    详细介绍用OO的方式写JS
    http://www.codeproject.com/KB/aspnet/JsOOP1.aspx
    http://www.codeproject.com/KB/aspnet/JsOOP2.aspx
    http://www.codeproject.com/KB/aspnet/JsOOP3.aspx

    2、Declarative QueryString Parameter Binding
    使用Attribute绑定QueryString值到变量的方法，Attribute的又一个有趣的使用方法。
    http://www.codeproject.com/KB/aspnet/WebParameter.aspx

    KiMoGiGi 2008-03-03 23:12 发表评论
    ]]>    一个ExtJS的综合示例http://www.cnitblog.com/seeyeah/archive/2008/01/23/39258.htmlKiMoGiGiKiMoGiGiWed, 23 Jan 2008 15:23:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/01/23/39258.htmlhttp://www.cnitblog.com/seeyeah/comments/39258.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/01/23/39258.html#Feedback3http://www.cnitblog.com/seeyeah/comments/commentRss/39258.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/39258.html摘至：javaeye BBS

    ExtJS算是一重量级的客户端框架了,如何把他与传统的Web应用集成？是所有的地方都用Ext，还是在某些地方使用，另外是每一个页面都引入ext-all.js，还是让整个应用只加载在这个大家伙一次？我们又该如何开发自定义的控件，如何充分使用javascript的面向对象特性对我们的应用进行封装呢？

    下面推荐我们团队的williamRaym及冷雨所做的一个ExtJS综合示例，是一个ExtJS2.0+Spring2.r+JPA(Hibernate3.2)+EasyJWeb-1.0技术构造开发的单用户Blog应用，比较简单， 有兴趣的朋友可以看一看，相关Ext应用代码可以在登录进入系统后可以直接另存为即可。

    　　示例应用的地址： http://wlr.easyjf.com/

    　　后台管理：用户名为admin　密码也是admin

    　　下面是一些截图：

    　　Blog后台登录
    　　


    　　后台主页
    　　


    　　分类管理
    　　

    　　发布日志
    　　

    　　用户管理
    　　

    　　上传照片
    　　

    　　这是一个简单的单用户博客，有文章发布、上传图片、评论等常用功能，后台使用ext做的界面。代码过段时间会完善之后会发布出来提供下载。

    KiMoGiGi 2008-01-23 23:23 发表评论
    ]]>    DomHelper - Create Elements using DOM, HTML fragments and Templates http://www.cnitblog.com/seeyeah/archive/2008/01/10/38728.htmlKiMoGiGiKiMoGiGiThu, 10 Jan 2008 15:28:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/01/10/38728.htmlhttp://www.cnitblog.com/seeyeah/comments/38728.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/01/10/38728.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/38728.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/38728.htmlDomHelper - Create Elements using DOM, HTML fragments and Templates
    Update: DomHelper vs. Scriptaculous Builder vs. MochiKit DOM
    I had some time to fool around tonight so I created this page with live head to head benchmarks against prototype+Scriptaculous and MochiKit's excellent DOM library. Check it out and see for yourself. The results are unbelievable.
    If you are doing JavaScript development, then at some point or another you have probably had to use DOM to create elements. Like everything else with DOM, creating elements can be extremely verbose, leading to bloated code and spending too much time doing something that should be simple.
    Creating elements using DOM can also have poor performance, especially in Internet Explorer. To maximize performance and maintain standards, any DOM creation classes should support both DOM and HTML fragments. HTML fragments are extremely fast in Internet Explorer, sometimes as much as 300% faster. 3
    The DomHelper class in the 0.32.2 release provides a layer of abstraction from DOM and transparently supports creating elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates from your DOM building code.1
    Simple Examples
    To save me from typing it out every time, the examples below are going to assume that a shorthand variable dh has being defined for YAHOO.ext.DomHelper.
    var dh = YAHOO.ext.DomHelper;
    Let's look at a simple example:
    // The context element 'my-div' can either be the id or the actual node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
    Since DomHelper transparently uses DOM or HTML fragments, it manages appending the elements as well. This is a nice feature since it will save you from having to manually append everything after creating it.2
    Let's expand the example:
    var list = dh.append('my-div', {
tag: 'ul', cls: 'my-list', children: [
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'},
{tag: 'li', id: 'item3', html: 'List Item 3'},
{tag: 'li', id: 'item4', html: 'List Item 4'}
]
});
    All attributes on the passed object "o" are assumed to be element attributes, except for 4 special attributes:
    • tag - The tag name of the element
    • children - An array of the same kind of element definition objects to be created and appended. These can be nested as deep as you want.
    • cls - The class attribute of the element. "class" is a reserved word and className is too long. This will end up being either the "class" attribute on a HTML fragment or className for a DOM node, depending on whether DomHelper is using fragments or DOM.
    • html - The innerHTML for the element.
    Here's a list of the insertion methods supported:
    • append(<HTMLElement/String> el, <Object> o) - Creates new DOM element(s) defined by o and appends them to el
    • insertBefore(<HTMLElement/String> el, <Object> o) - Creates new DOM element(s) defined by o and inserts them before el
    • insertAfter(<HTMLElement/String> el, <Object> o) - Creates new DOM element(s) defined by o and inserts them after el
    • overwrite(<HTMLElement/String> el, <Object> o) - Creates new DOM element(s) defined by o and overwrites the contents of el with them
    • createTemplate(<Object> o) - Creates a template from the DOM element(s) defined by o (See below)
    • insertHtml(<String> where, <HTMLElement> el, <String> html) - Inserts fragments into the DOM. It supports four insertion points related to el (which are named after the same points in IE's insertAdjacentHTML): beforeBegin, afterBegin, beforeEnd, afterEnd.
    OK, I've seen this before. What's so special about this implementation?
    Under the hood when you are creating your elements, DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead of DOM can significantly boost performance. If you don't like performance boosts and you want to force it to use DOM, you can:
    YAHOO.ext.DomHelper.useDom = true;
    The real power is in the built-in templating. The "o" parameter for createTemplate() has the same syntax as all the other methods only it doesn't create or append any elements. Instead it returns a Template object which can be used over and over to insert new elements. Let's revisit the example above, and use a template this time:
    var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
for(var i = 0; i < 5, i++){
tpl.append(list, [i]);
}
    Template objects support the same insertion methods of DomHelper. The 2nd parameter to the insertion methods is either an array (for numeric template parameters, like the above example) or an object (for named parameters).
    The Template object can also be used on it's own:
    var html = '<a id="{0}" href="{1}" class="nav">{2}</a>';
var tpl = new YAHOO.ext.DomHelper.Template(html);
tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
    Here's the same example using named parameters:
    var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
var tpl = new YAHOO.ext.DomHelper.Template(html);
tpl.append('blog-roll', {
id: 'link1',
url: 'http://www.jackslocum.com/',
text: "Jack's Site"
});
tpl.append('blog-roll', {
id: 'link2',
url: 'http://www.dustindiaz.com/',
text: "Dustin's Site"
});
    Compiling Templates
    It's probably not shocking that the templates are applied using regular expressions. The performance is great, but if you are adding a bunch of DOM elements using the same template, you can increase performance even further by "compiling" the template. The way "compile()" works is the template is parsed and broken up at the different variable points and a dynamic function is created and eval'ed. The generated function performs string concatenation of these parts and the passed variables instead of using regular expressions. 1
    var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
var tpl = new YAHOO.ext.DomHelper.Template(html);
tpl.compile();
//... use template like normal
    Benchmarks
    I did some benchmarking while creating these classes to see how different things would perform. I executed the code below in a loop 1000 times, which creates and appends 3000 new elements. I also had a non-template version which built the exact same thing.3
    var spec = {
tag: 'div',
style: 'width:100%;border:1px solid blue;',
cls: 'wtf',
children: [{
tag: 'a',
href: '{url}',
children: [{
tag: 'span',
html: '{text}'
}]
}]
};
var template = YAHOO.ext.DomHelper.createTemplate(spec);
    Below are the average times by browser. Notice the HUGE difference in IE6, 1.35 to .300. The DOM implemenation in IE6 must be written in VB with that performance ;) . Opera 9's performance creating nodes is amazing as usual.
    Insertion Method IE7 beta 2 IE6 FF 1.5 Opera 9
    DOM .730 1.35 .420 .280
    HTML Fragments .360 .380 .400 .260
    Template .320 .335 .385 .220
    Compiled Template .295 .300 .350 .210
    The overall performance improvement of using DomHelper alone was good enough to  merit the work. I can't wait to replace the Grid component's row building code with compiled templates.


    KiMoGiGi 2008-01-10 23:28 发表评论
    ]]>    ExtJs tutorialhttp://www.cnitblog.com/seeyeah/archive/2008/01/08/38580.htmlKiMoGiGiKiMoGiGiMon, 07 Jan 2008 16:54:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/01/08/38580.htmlhttp://www.cnitblog.com/seeyeah/comments/38580.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/01/08/38580.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/38580.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/38580.htmlhttp://203.93.254.59:8889/extdoc/html/index.html



    KiMoGiGi 2008-01-08 00:54 发表评论
    ]]>    Tutorial:What is that Scope all about (Chinese)http://www.cnitblog.com/seeyeah/archive/2008/01/08/38578.htmlKiMoGiGiKiMoGiGiMon, 07 Jan 2008 16:17:00 GMThttp://www.cnitblog.com/seeyeah/archive/2008/01/08/38578.htmlhttp://www.cnitblog.com/seeyeah/comments/38578.htmlhttp://www.cnitblog.com/seeyeah/archive/2008/01/08/38578.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/38578.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/38578.htmlhttp://extjs.com/learn/Tutorial:What_is_that_Scope_all_about_%28Chinese%29
    Summary: 本教程讲解了Javascript中的作用域（scope）几个要点和变量可见度（variables visibility）等的问题。
    Author: Jozef Sakalos(译者：Frank Cheung)
    Published: August 27, 2007
    Ext Version: 1.1+ / 2.0+

    事前准备

    学习本教程的最佳方法是随手准备好Firefox中的工具Firebug。这样使得您可以即刻测试教程的例子。

    如果机子上还没有FireFox和FireBug，就应该尽快安装一套来用。

    定义

    作用域scope
    1.（名词）某样事物执行、操作、拥有控制权的那么一个区域 [1]
    2. （名词） 编写程序时，程序之中变量的可见度；例如，一个函数能否使用另外一个函数所创建的变量。[2]

    可是这能够说明什么问题呢？ 每当有人在说“这是作用域的问题”或“作用域搞错了”的时候，那就是说某个函数运行起来的时候，找不到正确变量的位置。这样我们便知道应该从哪一方面入手，查找出问题所在。

    正式开始

    实际上每一个你定义的函数都是某个对象的方法。甚至是这样的写法： 

    function fn() {
alert(11);
}

    老兄你不是故弄玄虚吧～。做一个这样的演示可真得是简单得要命。没错！本例不需要任何Javascript文件，服务器或html。你只要打开firefox，弹出firebug,点击console tab。在Firefox状态栏上面看到有>>>提示的地方就可以输入了。

    输入： 

    function fn() { alert(11); };

    然后回车。一切安然...你刚才做的实际上是定义了一个函数fn。接着试试： 

    fn();

    然后回车。得到11的警告窗口？还不错吧？接着试试： 

    window.fn();
this.fn();

    得到一样的结果吧？这是因为函数fn是window对象的一个方法，在第二行的"this"的作用域实际指向了windows对象。不过多数情况中你不需要像这样window.myFunction(...)地调用函数，这样太麻烦了，程序员工作起来会很不方便。

    window对象

    window 对象总是存在的，你可理解其为一个浏览器窗口对象。它包含了其它所有的对象如document 和所有的全局变量。

    你可以打开Firebug，切换到 Script 页面并在Firebug右侧的New watch expression... 里面输入 window。观察window对象究竟有什么在里面。

    接着，尝试找出我们之前定义过的fn函数。

    另外，每个frame或iframe拥有其自身的window对象，其自身的全局空间。

    理解作用域

    接下的内容开始有点复杂了。切换到Firebug Console标签页然后输入： 

    var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }};
var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};

    结果是什么？你声明了o1 和 o2两个对象，分别都有一些属性和方法，但值不同。


    接着试试： 

    fun();
window.fun();
this.fun();

    出错了，是吧？因为window对象（等价于this）并没有fun的方法。试一试下面的： 

    o1.fun();
o2.fun();

    22和33出来了？非常好！

    接下来这部分的内容最复杂啦。基于这个原始的函数，如果对象的数量多的话，你必须为每个对象加上这个函数－明显是重复劳动了。这样说吧，o1.fun写得非常清晰的而且为了搞掂它已经占用了我一个星期的开发时间。想象一下代码到处散布着this变量，怎么能不头疼？如果要将调用（执行）的o1.fun方法但this会执行o2,应该怎么实现呢？试一试下面的： 

    o1.fun.call(o2);

    明白了吗？当执行o1的fun方法时你强行将变量this指向到o2这个对象，换句话说，更加严谨地说:o1.fun的方法在对象o2的作用域下运行。

    当运行一个函数，一个对象的方法时，你可将作用域当作this值的变量。

    变量的可见度

    变量的可见度和作用域的关系非常密切。我们已经了解到，可在任何对象的外部，声明变量，或在全局的函数（函数也是变量的一种）也可以，更严格说，它们是全局对象window的属性。 全局变量在任何地方都可见；无论函数的内部还是外部。如果你在某一个函数内修改了一个全局变量，其它函数也会得知这个值是修改过的。

    对象可以有它自己的属性（像上面的testvar）,这些属性允许从内部或是外部均是可见的。试： 

    alert(o1.testvar); // 从外部访问o1的属性testvar

    从内部访问的演示可在两个测试对象的fun方法找到。

    用关键字var在内部声明，相当于声明局部变量（局部声明也是在一条链上，即Scope Chain 作用域链上,Frank注）： 

    i = 44;
function fn2() {
var i = 55;
alert(i);
}
fn2();

    将得到什么？对了，55。声明在函数fn2的变量i是一个本地变量（局部变量），和等于44的全局变量i 44没什么关系。 But: 

    alert(i);

    这会访问全局变量i，显示44。

    希望本文能帮助读者彻底理解作用域变量可见性的含义。



    KiMoGiGi 2008-01-08 00:17 发表评论
    ]]>    读GI源码、学JS编程——Javascript动态加载技术。 http://www.cnitblog.com/seeyeah/archive/2007/04/18/25845.htmlKiMoGiGiKiMoGiGiTue, 17 Apr 2007 17:20:00 GMThttp://www.cnitblog.com/seeyeah/archive/2007/04/18/25845.htmlhttp://www.cnitblog.com/seeyeah/comments/25845.htmlhttp://www.cnitblog.com/seeyeah/archive/2007/04/18/25845.html#Feedback1http://www.cnitblog.com/seeyeah/comments/commentRss/25845.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/25845.htmlFrom  city22



    在大型    RIA中，动态加载技术十分重要，毕竟几百K甚至M级别的脚本让用户等待加载完了再浏览是不可能。大多数成熟的framework都有动态加载技术的实现，就是说先加载一个最基础功能，然后利用动态加载技术慢慢把所有的脚本加进来，或者说需要某个功能的时候再加载某个模块所  需要的javascript的文件。

    好了不说那么多P话了，尽快进入正题来看看GI是怎么实现的动态加载技术。其实GI的load做的很复杂，因为他涉及到了进度条阿等等很多乱七八糟的东西，我们就不分析那么多东西了，来看看他最基础的东西是如何实现的吧。GI中的动态加载有两种，一种是用的是XMLHttpRequest来请求脚本内容，另一种则是加入一个 <script>标签的方式来动态加入脚本以达到动态加载的功能。网上也许还有其它得方法，但其它得方法也都是根据这两种演变来的，还是以这两种为基础得。我们来看看它是如何实现的。

    首先是第一种

          /** @private @jsxobf-clobber */
          ClassLoader_prototype.loadJSFileSync     = function(strURI) {
                var req = new jsx3.net.Request();
            req.open(    "GET", strURI, false);
            req.send();
                
                if (req.getStatus() == jsx3.net.Request.STATUS_OK) {
                  var script = req.getResponseText();
              jsx3.eval(script);
                  return true;
            }

                return false;
          };

    呵呵，XMLHttpRequest的GET请求就可以吧js文件拿下来，然后用eval执行所有的脚本，这样就达到了加载脚本的功能了。方法也很简单，也就不用多介绍什么了吧。不过我记着有人说过js必须要UTG-8格式存的，但测试了一下，不用好像也可以。

    我们看在package。Js文件里面有个有意思的方法

      /**
       * Ensures that one or more classes is available before this method returns. Any class that fails to load will
       * throw an error. Only classes that can be found by the system class loader may be loaded in this manner.
       *
       * @param strClass {String} the fully-qualified names of the classes to load.
       * @since 3.2
           */
      jsx3.require     = function(strClass) {
            for (var i = 0; i < arguments.length; i++) {
              var className = arguments[i];
          className     = jsx3._REQUIRE_MAP[className] || className;
              if (jsx3.Class.forName(className) == null)
            jsx3.CLASS_LOADER.loadClass(className);
        }
      };

    需要说明的是jsx3.ClASS_LOADER.loadClass()方法中其实就是调用了loadJSFileSync()方法，这个方法就是在调用类之前如果该类没有被加载将会在被load一次做到需要什么才用什么，不会把所有Javascipt都加载进来。

    然后我们再来看第二种方法，添加标签的方式来load脚本

          /** @private @jsxobf-clobber */
          ClassLoader_prototype.loadScript     = function(strSrc, strId) {
                // instance a new DOM element
            var element = document.createElement("script");
            element.src     = strSrc;
            element.type     = 'text/javascript';
            element.id     = strId;
            element.language     = 'javascript';
            
                // set up onload handler
            var me = this;
                if (this.IE) {
              element.onreadystatechange     = function() { 
                    var state = this.readyState;
                    if (state == "loaded" || state == "interactive" || state == "complete") {
                      this.onreadystatechange = null;
                  me._loaded[strSrc]     = true;
                  me._publish({subject:    "load", type:"script", src:strSrc});
                }
              };
            }     else if (this.MOZ || this.KON) {
              element.onload     = function() { 
                element.onload     = null;
                me._loaded[strSrc]     = true;
                me._publish({subject:    "load", type:"script", src:strSrc}); 
              };
            }
            
            element.jsxid     = strSrc;
            
                // bind the element to the browser DOM to begin loading the resource
            document.getElementsByTagName("head")[0].appendChild(element);
          };


    呵呵，相信大家都能看懂吧，就是在    head标签中加入了script标签，src当然就是重点了，而如何判断脚本加载结束，也明确的告诉我们，在IE下用onreadystatechange，在Firefox下用onload。呵呵，好像很简单吧。

    到这里，我突然想到一个问题，script标签好像功能很强大啊，竟然可以用来读服务器上的Javascript文件，跟XMLHttpRequest有同样的功能啊，看来这个东西可以被我们来利用一下了，做点手脚也许会有不同的效果哦，来看。

    首先我们写一个Handlers用来模拟一个Javascript文件，然后用这个handler来生成返回的内容，

          <httpHandlers>
                <add verb="*" type="JsTest.JsHandler" path="demo2.js"/>
              </httpHandlers>

        public class JsHandler:IHttpHandler,IRequiresSessionState
        {
                public void ProcessRequest(HttpContext context)
            {
                    string action = context.Request["action"].ToString();
                context.Response.Write(    "alert(\"hello world  " + action + "\");");
            }
    }

    这个Handler中我只是返回了一段alert，呵呵，下面用script来加载他吧，刚才看到的一样，只是script中src我们做了点手脚，嘿嘿指向的是demo2.js?action=city22，哈哈看到了吧，就是个GET访问方式啊！

    window.onload=function()
    {
            var script=document.createElement("script");
        script.type    ='text/javascript';
        script.language    ='javascript';
        script.src    ="demo2.js?action=city22";
        document.getElementsByTagName(    "head")[0].appendChild(script);
    }

    测试成功，哈，看来还真是能模拟一个XMLHttpRequest了。

    不过有人肯定该问了，这个有什么用XMLHttpRequest已经很好用了啊，干嘛在来个这东西。我感觉这东西在一定的领域还是能发挥作用的。XMLHttpRequest不能垮站访问，这是个问题，也就是说你在www.a.net/index.html上写了一段XMLHttpRequest不能调用www.b.net上的任何东西，即使改动document.domian 也不可以，唉多可惜。当然了Iframe给我们解决了这个问题，但是script标签又给了我们新的选择，我们完全可以模拟open(),send()，等这些方法，返回的脚本中使用变量作为返回内容来模拟responseText。看来跨站问题又有了新的解决思路了。以后script标签值得我们去深入研究一下咯。

    KiMoGiGi 2007-04-18 01:20 发表评论
    ]]>    JavaScript中的this关键字 http://www.cnitblog.com/seeyeah/archive/2007/03/17/24184.htmlKiMoGiGiKiMoGiGiSat, 17 Mar 2007 10:25:00 GMThttp://www.cnitblog.com/seeyeah/archive/2007/03/17/24184.htmlhttp://www.cnitblog.com/seeyeah/comments/24184.htmlhttp://www.cnitblog.com/seeyeah/archive/2007/03/17/24184.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/24184.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/24184.htmlCopy From Beginor

    在JavaScript中，this通常绑定到函数被调用的对象上，这种默认绑定在多数情况下是正常的，但是在某些情况下，this的这种绑定会丢失，比如，将函数作为参数传递给另外一个函数，这种默认的绑定就丢失了，例如：

    var myObj = {
       name: 'A nice demo!',
       fx: function() {
          alert(this.name);
       }
    };

    function runFx(fx) {
       fx();
    }

    window.name = 'I am a nice window';

    myObj.fx();  // 在这里，将会提示 A nice demo!

    runFx(myObj.fx); // 在这里，得到的提示将会是 I am a nice window

    为什么会出现这种情况呢？因为在第二次调用中，myObj.fx作为参数传递给了runFx，在函数runFx中执行时fx丢失了对myObj的默认绑定，而绑定到了runFx的默认绑定window上，所以第二次调用时得到的提示为I am a nice window，而这个往往不是我们需要的结果。

    在Ajax横行的今天，要编写复杂的客户端组件，不可避免的要将函数名作为参数传递，Prototype注意到了这个问题，MS ASP.Net Ajax也注意到了这个问题，不知道你注意了没有？

    Prototype提供的解决方案是bind方法，在Prototype的官方文档给出的描述是：Provides aguaranteed-binding equivalent of the original function, possibly with pre-filled arguments. 上面的例子如果使用Prototype的话，可以修改如下：

    var myObj = {
       name: 'A nice demo!',
       fx: function() {
          alert(this.name);
       }
    };

    function runFx(fx) {
       fx();
    }

    window.name = 'I am a nice window';

    myObj.fx();  // 在这里，将会提示 A nice demo!

    var fx2 = myObj.fx.bind(myObj) // 先做一个绑定，
    runFx(fx2); // 在这里，得到的提示将会是 A nide demo !这个往往是我们需要的结果

    MS Ajax提供的解决方案是Function.createDelegate函数，createDelegate方法是个静态方法，可以直接调用。如果使用MS Ajax库的话，可以将上面的例子修改为：

    var myObj = {
       name: 'A nice demo!',
       fx: function() {
          alert(this.name);
       }
    };

    function runFx(fx) {
       fx();
    }

    window.name = 'I am a nice window';

    myObj.fx();  // 在这里，将会提示 A nice demo!

    var fx2 = Function.createDelegate(myObj, myObj.fx) // 按照微软的说法，先做一个委托，
    runFx(fx2); // 在这里，得到的提示将会是 A nide demo !这个往往是我们需要的结果

    这看起来只是一个小问题，但是如果不注意的话却会造成很大的问题。引用Prototype中的原话：As discussed on the general Function page,binding can be a pretty tricky thing sometimes.



    KiMoGiGi 2007-03-17 18:25 发表评论
    ]]>    如何限制用户在文本框输入的字数http://www.cnitblog.com/seeyeah/archive/2007/02/02/22558.htmlKiMoGiGiKiMoGiGiThu, 01 Feb 2007 16:56:00 GMThttp://www.cnitblog.com/seeyeah/archive/2007/02/02/22558.htmlhttp://www.cnitblog.com/seeyeah/comments/22558.htmlhttp://www.cnitblog.com/seeyeah/archive/2007/02/02/22558.html#Feedback2http://www.cnitblog.com/seeyeah/comments/commentRss/22558.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/22558.html显然，这只能使用javascript来完成这一艰巨的任务了。
    首先，既然要限制字数，肯定要想办法实时获取用户在文本框里输入的文字的数量。input控件有个length的属性，可以方便地获取字数。可是，它所返回的字数无论是中文还是英文或者数字，1个字就算1个字。客户要限制字数的原因是为了页面显示的时候排版不会乱，因此一个汉字需要按2个英文字符来计算。这样的话，这个默认的length就无用武之地了。
    怎么区分中文和英文呢？查阅了一下资料，string对象有一个叫charCodeAt(index)的方法，可以获取字符串中某一个字符的编码。我们都知道，字母数字的ascii编码都小于255而汉字的编码肯定大于255，因此我们可以使用此方法来判断字符串占用多少英文字符的宽度。
    function GetCharLength(str)
    {
     var iLength = 0;
     for(var i = 0;i<str.length;i++)
     {
     if(str.charCodeAt(i) >255)
     {
     iLength += 2;
     }
     else
     {
     iLength += 1;
     }
     }
     return iLength;
    }

    字数统计有了，接下去我们需要实时地捕获用户的输入。我们可以采取在input文本框的onkeyup事件中加入字符串检测函数的调用即可。
    在检测完字符长度后，对于那些超长的，我们将采用自后往前截断的方法将多余的字符去除。
    字符截断代码如下：
    function CutStr(Str,Len)
    {
     var CurStr = "";
     for(var i = 0;i<Str.length;i++)
     {
     CurStr += Str.charAt(i);
     if(GetCharLength(CurStr )>Len)
     {
     return Str.substring(0,i);
     }
     }
     return CurStr ;
    }
    至此，一个简单的限制用户输入字符数的方案完成了。
    接下去，我们考虑一些改进。
    1、javascript中，可以使用正则表达式来搜索字符串里的字符并替换，我们可以用此方法来获取字符串占用的宽度，代码如下：
    String.prototype.len=function(){
    return this.replace(/[^\x00-\xff]/g,"**").length;
    }
    这段代码为string对象建立了一个len的属性，用户可以直接使用string.len来获取字符串所占用的宽度。在这里，我们使用了一个小技巧，通过正则表达式将编码在255以外的字符换成2个*，这样就可以统计了。
    其实这个replace还有其它用法，比如要限制用户只能输入数字，可以使用
    <input onChange="value=value.replace(/[^\d]/g,'')" >
    只能输入数字和英文 /[\W]/g
    只能输入汉字的 /[^\u4E00-\u9FA5]/g

    2、微软拼音输入法对keyup事件很敏感，在某些情况下会把文本框里原有的字符全部去除（其实，主要因为用微软拼音输入法，虽然中文字没有上去，但是拼音字母已经作为内容存在文本框内，从而会激发判断函数。而一旦拼音比较长，会使字符超长，产生截断操作。因为是重写了框里的文本，截断操作之后，光标将移到最后一位，从而导致整个输入法的异常）
    发现这个问题后，我又测试了其它一些输入法，发现这些输入法输入中文的方式各不一样，微软全拼输入法和智能ABC输入法也不同。考虑到还有其它各种输入法，因此采用在焦点移出的时候onBlur进行判断和截断操作。这样是最安全的。

    以下是完整的代码：
    <script language="javascript">
    <!--
     
    String.prototype.len=function(){
    return this.replace(/[^\x00-\xff]/g,"**").length;
    }
     
    //Set maxlength for multiline TextBox
    function setMaxLength(object,length)
    {
     
     var result = true;
     var controlid = document.selection.createRange().parentElement().id;
     var controlValue = document.selection.createRange().text;
     var tempString=object.value;
     
     var tt="";
     for(var i=0;i<length;i++)
     {
     if(tt.len()<length)
     tt=tempString.substr(0,i+1);
     else
     break;
     }
     if(tt.len()>length)
     tt=tt.substr(0,tt.length-1);
       object.value=tt;
    }
     
    //Check maxlength for multiline TextBox when paste
    function limitPaste(object,length)
    {
     var tempLength = 0;
     if(document.selection)
     {
     if(document.selection.createRange().parentElement().id == object.id)
     {
     tempLength = document.selection.createRange().text.len();
     }
     }
     var tempValue = window.clipboardData.getData("Text");
     tempLength = object.value.len() + tempValue.len() - tempLength;
     
     if (tempLength > length)
     {
     tempLength -= length;
     var tt="";
     for(var i=0;i<tempValue.len()-tempLength;i++)
     {
     if(tt.len()<(tempValue.len()-tempLength))
     tt=tempValue.substr(0,i+1);
     else
     break;
     }
     if(tt.len()<=0)
     {
     window.event.returnValue=false;
     
     }
     else
     {
     tempValue=tt;
     window.clipboardData.setData("Text", tempValue);
     window.event.returnValue = true;
     }
     }
     
     
    }
     
    function PressLength()
    {
     
     if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
     {
     if(event.srcElement.length!=null)
     setMaxLength(event.srcElement,event.srcElement.length);
     
     }
    }
     
    function LimitLength()
    {
     
     if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
     {
     if(event.srcElement.length!=null)
     limitPaste(event.srcElement,event.srcElement.length);
     }
    }
    document.documentElement.attachEvent('onBlur', PressLength);
    document.documentElement.attachEvent('onpaste', LimitLength);
     
    //-->
     </script>

    From http://www.gaozhe.net/article.asp?id=11

    KiMoGiGi 2007-02-02 00:56 发表评论
    ]]>    Javascript 垂直滚动AD条 [From Taobao]http://www.cnitblog.com/seeyeah/archive/2007/01/18/22051.htmlKiMoGiGiKiMoGiGiThu, 18 Jan 2007 14:20:00 GMThttp://www.cnitblog.com/seeyeah/archive/2007/01/18/22051.htmlhttp://www.cnitblog.com/seeyeah/comments/22051.htmlhttp://www.cnitblog.com/seeyeah/archive/2007/01/18/22051.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/22051.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/22051.html-----------------Js
    // JavaScript Document
    function SlideBox(container, frequency, direction) {
     if (typeof(container) == 'string') {
      container = document.getElementById(container);
     }
     this.container = container;
     this.frequency = frequency;
     this.direction = direction;
     this.films = [];
     var divs = this.container.getElementsByTagName('div');
     for (var i = 0; i < divs.length; i++) {
      if (divs[i].className == 'slideFilm') {
       divs[i].onmouseover = function(self)
        {
         return function()
          {
           self._mouseover()
          };
        }(this);
       divs[i].onmouseout = function(self){return function(){self._mouseout()};}(this);
       this.films[this.films.length] = divs[i];
      }
     }
     this._playTimeoutId = null;
     this._slideTimeoutId = null;
     this._slidable = true;
     var isIE5 = navigator.userAgent.toLowerCase().indexOf("msie 5")>0;
     if (!isIE5)
      this._loop();
    }

    SlideBox.prototype = {
     _loop : function() {
      var sb = this;
      this._playTimeoutId = setTimeout(function(){sb._slide()}, this.frequency);
     },

     _slide : function() {
      var sb = this;
      var _slide = function() {
       if (!sb._slidable) return;
       var c = sb.container;
       if (sb.direction == 'top') {
        if (c.scrollTop < c.offsetHeight-2) {
         c.scrollTop += 2;
        } else {
         clearInterval(sb._slideTimeoutId);
         sb._loop();
         var ul = c.getElementsByTagName('ul')[0];
         ul.appendChild(c.getElementsByTagName('li')[0]);
         c.scrollTop = 0;
        }
       } else if (sb.direction == 'left') {
        if (c.scrollLeft < c.offsetWidth-2) {
         c.scrollLeft += 2;
        } else {
         clearInterval(sb._slideTimeoutId);
         sb._loop();
         var ul = c.getElementsByTagName('ul')[0];
         ul.appendChild(c.getElementsByTagName('li')[0]);
         c.scrollLeft = 0;
        }
       }
      }
      this._slideTimeoutId = setInterval(_slide, 10);
     },

     _mouseover : function() {
      this._slidable = false;
     },

     _mouseout : function() {
      this._slidable = true;
     }
    }


    -------------------------------HTML Example
    <html>
     <head>
      <title>Untitled</title>
      <style>
      /* AD top */
    #ADList{
     float:left;
     width:380px;
     height:191px;
    }
    #ADList ul{
     margin:0;
     padding:0;
     list-style-type:none;
    }
    #ADListRoll{
     height:25px;
     width:380px;
     /*background:url(http://pics.taobao.com/bao/album/chl/fp/home_roll_bg.gif) left top no-repeat;*/
     line-height:25px;
     padding:0 5px;
     color:#69F;
    }
    #ADListRoll a{
     color:#565656;
    }
    #ADListText,#ADListImg{
     margin-top:6px;
    }
    #ADListText ul {
     margin-left:10px;
    }
    #ADListText ul li{
     float:left;
     line-height:16px;
     line-height:20px;
     padding:0;
     margin:0;
     width:170px;
     display:block;
     padding-left:12px;
     /*background:transparent url(http://pics.taobao.com/bao/album/sys/misc/top_icon.gif) 3px 7px no-repeat;*/
    }
    #ADListImg li{
     float:left;
     width:76px;
     text-align:center;
    }
    #ADListImg li img{
     border:1px #ccc solid;
     margin-bottom:5px;
     display:block;
    }
    #ADListRollContainer{height:25px;line-height:25px;overflow:hidden;float:left; }

    #ADListRollContainer ul { list-style: none; margin:0px; padding:0;  cursor:pointer;}

    #ADListRollContainer li { display: block;}

    #ADListRollContainer li div { height:25px; line-height:25px; margin:0 0 0 5px; padding:0;}
      </style>
     </head>
     <body>
      <div id="ADList">
       <div id="ADListRoll">
        <div id="ADListRollContainer">
         <ul>
          <li>
           <div class="slideFilm">1.<a href="http://search1.taobao.com/browse/1801/t-false---------2048------g,giydambrhizdamrvhe5tembqgeydumrqgi2toozsgaydamb2giydamzuhmzdaobwgy5dgmrtguzdwmrqha4daortgi2tmni--g,hmzdambqge5ndw5sx652jqhnhmzdambrga5ndw6lvi5tembqgaydurltorswktdbovsgk4rp2hc4vk6axt36yozsga4dmnr2ztmmr456vo52vt5vyhidwmrqha4daowquhi7s--g,ojsxgzlsozsv64dsnfrwkwztguwdcmbqgaydambqgboq---g,2hnq-------2-------b-y-40-list-coefp-0-all-1801.htm"
             target="_blank">雅诗兰黛ANR眼霜小样50元起</a>
           </div>
          </li>
          <li>
           <div class="slideFilm">2.<a href="http://search1.taobao.com/browse/15-1512/t-g,hm5twoz3hm5twoz3-----g,g4ztsmbmmq4deobmiuztkobmg4ztombmjm3tsmddfq3demztfrhdomzmky4tembmie3dmobmg42taqzmiq4taobmgmzdkmbmo44dgmbmmm4dkobmieytembqfrndglclgi--or-2048----2--------y-40-list-coefp-0-all-1512.htm1512.htm"
             target="_blank">淘宝人气拍照手机促销(行货)</a></div>
          </li>
          <li>
           <div class="slideFilm">3.<a href="http://list.taobao.com/browse/99-50001031/t-false--------yes---------------------2-------b-y-40-list-coefp-0-all-50001031.htm"
             target="_blank">迎新年游戏货币打折出售</a></div>
          </li>
         </ul>
        </div>
       </div>
      </div>
      <script type="text/javascript" src="slidebox.js"></script>
      <script type="text/javascript">
      new SlideBox('ADListRollContainer', 2000, 'top');
      </script>
     </body>
    </html>



    KiMoGiGi 2007-01-18 22:20 发表评论
    ]]>    Javascript 扩展Datehttp://www.cnitblog.com/seeyeah/archive/2007/01/18/22049.htmlKiMoGiGiKiMoGiGiThu, 18 Jan 2007 14:17:00 GMThttp://www.cnitblog.com/seeyeah/archive/2007/01/18/22049.htmlhttp://www.cnitblog.com/seeyeah/comments/22049.htmlhttp://www.cnitblog.com/seeyeah/archive/2007/01/18/22049.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/22049.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/22049.html  /*用相对不规则的字符串来创建日期对象,不规则的含义为:顺序包含年月日三个数值串,有间隔*/  
      String.prototype.createDate   =   function(){  
              if(this   ==   "")   return   new   Date();  
      var   regThree   =   /^\D*(\d{2,4})\D+(\d{1,2})\D+(\d{1,2})\D*$/;  
      var   regSix   =   /^\D*(\d{2,4})\D+(\d{1,2})\D+(\d{1,2})\D+(\d{1,2})\D+(\d{1,2})\D+(\d{1,2})\D*$/;  
      var   str   =   "";  
      var   date   =   null;  
      if(regThree.test(this)){  
      str   =   this.replace(/\s/g,"").replace(regThree,"$1/$2/$3");  
      date   =   new   Date(str);  
      }  
      else   if(regSix.test(this)){  
      str   =   this.match(regSix);  
      date   =   new   Date(str[1],str[2]-1,str[3],str[4],str[5],str[6]);  
      }  
      if(isNaN(date)) return   new   Date();  
      else   return   date;  
      }  
       
      /*  
        *   功能:根据输入表达式返回日期字符串  
        *   参数:dateFmt:字符串,由以下结构组成          
        *             yy:长写年,YY:短写年mm:数字月,MM:英文月,dd:日,hh:时,  
        *             mi:分,ss秒,ms:毫秒,we:汉字星期,WE:英文星期.  
        *             isFmtWithZero   :   是否用0进行格式化,true   or   false  
      */  
      Date.prototype.parseString   =   function(dateFmt,isFmtWithZero){  
      dateFmt   =   (dateFmt   ==   null?"yy-mm-dd"   :   dateFmt);  
      isFmtWithZero   =   (isFmtWithZero   ==   null?true   :   isFmtWithZero);  
      if(typeof(dateFmt)   !=   "string"   )  
      throw   (new   Error(-1,   'parseString()方法需要字符串类型参数!'));  
      var   weekArr=[["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],  
          ["SUN","MON","TUR","WED","THU","FRI","SAT"]];  
      var   monthArr=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];  
      var   str=dateFmt;  
      str   =   str.replace(/yy/g,this.getFullYear());  
      str   =   str.replace(/YY/g,this.getYear());  
      str   =   str.replace(/mm/g,(this.getMonth()+1).toString().fmtWithZero(isFmtWithZero));  
      str   =   str.replace(/MM/g,monthArr[this.getMonth()]);  
      str   =   str.replace(/dd/g,this.getDate().toString().fmtWithZero(isFmtWithZero));  
      str   =   str.replace(/hh/g,this.getHours().toString().fmtWithZero(isFmtWithZero));  
      str   =   str.replace(/mi/g,this.getMinutes().toString().fmtWithZero(isFmtWithZero));  
      str   =   str.replace(/ss/g,this.getSeconds().toString().fmtWithZero(isFmtWithZero));  
      str   =   str.replace(/ms/g,this.getMilliseconds().toString().fmtWithZeroD(isFmtWithZero));  
      str   =   str.replace(/we/g,weekArr[0][this.getDay()]);  
      str   =   str.replace(/WE/g,weekArr[1][this.getDay()]);  
      return   str;  
      }  
      /*将一位数字格式化成两位,如:   9   to   09*/  
      String.prototype.fmtWithZero   =   function(isFmtWithZero){  
      if(isFmtWithZero)  
      return   (this<10?"0"+this:this);  
      else   return   this;  
      }  
      String.prototype.fmtWithZeroD   =   function(isFmtWithZero){  
      if(isFmtWithZero)  
      return   (this<10?"00"+this:(this<100?"0"+this:this));  
      else   return   this;  
      }  
       
      /*   功能   :   返回与某日期相距N天(N个24小时)的日期  
        *   参数   :   num   number类型   可以为正负整数或者浮点数,默认为1;  
        *                 type   0(秒)   or   1(天),默认为天  
        *   返回   :   新的PowerDate类型  
        */  
      Date.prototype.dateAfter=function(num,type){  
      num   =   (num   ==   null?1:num);  
      if(typeof(num)!="number")   throw   new   Error(-1,"dateAfterDays(num,type)的num参数为数值类型.");  
      type   =   (type==null?1:type);  
      var   arr   =   [1000,86400000];  
      var   dd   =   this.valueOf();  
      dd   +=   num*arr[type];  
      return   new   Date(dd);  
      }  
       
      //判断是否是闰年,返回true   或者   false  
      Date.prototype.isLeapYear   =   function   (){  
      var   year   =   this.getFullYear();  
      return   (0==year%4   &&   ((year   %   100   !=   0)||(year   %   400   ==   0)));  
      }  
       
      //返回该月天数  
      Date.prototype.getDaysOfMonth   =   function   (){  
      return   (new   Date(this.getFullYear(),this.getMonth()+1,0)).getDate();  
      }  
       
      //转换成大写日期(中文)  
      Date.prototype.getChinaDate   =     function(){  
      var   year   =   this.getFullYear().toString();  
      var   month=   this.getMonth()+1;  
      var   day   =   this.getDate();  
      var   arrNum   =   ["零","一","二","三","四","五","六","七","八","九","十","十一","十二"];  
      var   strTmp="";  
      for(var   i=0,j=year.length;i<j;i++){  
      strTmp   +=   arrNum[year.charAt(i)];  
      }  
      strTmp   +=   "年";  
      strTmp   +=   arrNum[month]+"月";  
      if(day<10)  
      strTmp   +=   arrNum[day];  
      else   if   (day   <20)  
      strTmp   +=   "十"+arrNum[day-10];  
      else   if   (day   <30   )  
      strTmp   +=   "二十"+arrNum[day-20];  
      else    
      strTmp   +=   "三十"+arrNum[day-30];  
      strTmp   +=   "日";  
      return   strTmp;  
      }  
      //日期比较函数,参数date:为Date类型,如this日期晚于参数:1,相等:0   早于:   -1  
      Date.prototype.dateCompare   =   function(date){  
      if(typeof(date)   !=   "object"   ||   !(/Date/.test(date.constructor)))  
        throw   new   Error(-1,"dateCompare(date)的date参数为Date类型.");  
      var   d   =   this.getTime()   -   date.getTime();  
      return   d>0?1:(d==0?0:-1);  
      }  
       
      /*功能:返回两日期之差  
        *参数:pd       PowerDate对象  
        *         type:   返回类别标识.yy:年,mm:月,ww:周,dd:日,hh:小时,mi:分,ss:秒,ms:毫秒  
        *         intOrFloat   :返回整型还是浮点型值   0:整型,不等于0:浮点型  
        *         output   :   输出提示,如:时间差为#周!  
        */  
      Date.prototype.calDateDistance   =   function   (date,type,intOrFloat,output){  
      if(typeof(date)   !=   "object"   ||   !(/Date/.test(date.constructor)))  
        throw   new   Error(-1,"calDateDistance(date,type,intOrFloat)的date参数为Date类型.");  
      type   =   (type==null?'dd':type);  
      if(!((new   RegExp(type+",","g")).test("yy,mm,ww,dd,hh,mi,ss,ms,")))  
        throw   new   Error(-1,"calDateDistance(pd,type,intOrFloat,output)的type参数为非法.");  
      var   iof   =   (intOrFloat==null?0:intOrFloat);  
      var   miSecMain   =   this.valueOf();  
      var   miSecSub     =   date.valueOf();  
      var   num=0;  
      switch(type){  
      case   "yy":   num   =   this.getFullYear()   -   date.getFullYear();   break;  
      case   "mm":   num   =   (this.getFullYear()   -   date.getFullYear())*12+this.getMonth()-date.getMonth();   break;  
      case   "ww":   num   =   ((miSecMain-miSecSub)/7/86400000).fmtRtnVal(iof);   break;  
      case   "dd":   num   =   ((miSecMain-miSecSub)/86400000).fmtRtnVal(iof);   break;  
      case   "hh":   num   =   ((miSecMain-miSecSub)/3600000).fmtRtnVal(iof);   break;  
      case   "mi":   num   =   ((miSecMain-miSecSub)/60000).fmtRtnVal(iof);   break;  
      case   "ss":   num   =   ((miSecMain-miSecSub)/1000).fmtRtnVal(iof);   break;  
      case   "ms":   num   =   (miSecMain-miSecSub);break;  
      default:     break;  
      }  
      if(output)  
      return   output.replace(/#/g,"   "+num+"   ");  
      else   return   num;  
      }  
      //返回整数或者两位小数的浮点数  
      Number.prototype.fmtRtnVal   =   function   (intOrFloat){  
      return   (intOrFloat   ==   0   ?   Math.floor(this)   :   parseInt(this*100)/100);  
      }  
      //根据当前日期所在年和周数返回周日的日期  
      Date.prototype.RtnByWeekNum   =   function   (weekNum){  
      if(typeof(weekNum)   !=   "number")  
      throw   new   Error(-1,"RtnByWeekNum(weekNum)的参数是数字类型.");  
      var   date   =   new   Date(this.getFullYear(),0,1);  
      var   week   =   date.getDay();  
      week   =   (week==0?7:week);  
      return   date.dateAfter(weekNum*7-week,1);  
      }  
      //根据日期返回该日期所在年的周数  
      Date.prototype.getWeekNum   =   function   (){  
      var   dat   =   new   Date(this.getFullYear(),0,1);  
      var   week   =   dat.getDay();  
      week   =   (week==0?7:week);  
      var   days   =   this.calDateDistance(dat,"dd")+1;  
      return   ((days   +   6   -   this.getDay()   -   7   +   week)/7);  
      }  


    KiMoGiGi 2007-01-18 22:17 发表评论
    ]]>    Javascript 简繁体转换http://www.cnitblog.com/seeyeah/archive/2006/12/29/21255.htmlKiMoGiGiKiMoGiGiThu, 28 Dec 2006 16:49:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/12/29/21255.htmlhttp://www.cnitblog.com/seeyeah/comments/21255.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/12/29/21255.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/21255.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/21255.html  1 <html>
     2 <head>
     3     <title>Untitled</title>
     4     <script language="javascript">
     5     function charPYStr(){
     6     return '啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑北辈背贝钡倍狈备惫焙被奔苯本笨崩绷甭泵蹦迸逼鼻比鄙笔彼碧蓖蔽毕毙毖币庇痹闭敝弊必辟壁臂避陛鞭边编贬扁便变卞辨辩辫遍标彪膘表鳖憋别瘪彬斌濒滨宾摈兵冰柄丙秉饼炳病并玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳捕卜哺补埠不布步簿部怖擦猜裁材才财睬踩采彩菜蔡餐参蚕残惭惨灿苍舱仓沧藏操糙槽曹草厕策侧册测层蹭插叉茬茶查碴搽察岔差诧拆柴豺搀掺蝉馋谗缠铲产阐颤昌猖场尝常长偿肠厂敞畅唱倡超抄钞朝嘲潮巢吵炒车扯撤掣彻澈郴臣辰尘晨忱沉陈趁衬撑称城橙成呈乘程惩澄诚承逞骋秤吃痴持匙池迟弛驰耻齿侈尺赤翅斥炽充冲冲虫崇宠抽酬畴踌稠愁筹仇绸瞅丑臭初出橱厨躇锄雏滁除楚础储矗搐触处揣川穿椽传船喘串疮窗幢床闯创吹炊捶锤垂春椿醇唇淳纯蠢戳绰疵茨磁雌辞慈瓷词此刺赐次聪葱囱匆从丛凑粗醋簇促蹿篡窜摧崔催脆瘁粹淬翠村存寸磋撮搓措挫错搭达答瘩打大呆歹傣戴带殆代贷袋待逮怠耽担丹单郸掸胆旦氮但惮淡诞弹蛋当挡党荡档刀捣蹈倒岛祷导到稻悼道盗德得的蹬灯登等瞪凳邓堤低滴迪敌笛狄涤翟嫡抵底地蒂第帝弟递缔颠掂滇碘点典靛垫电佃甸店惦奠淀殿碉叼雕凋刁掉吊钓调跌爹碟蝶迭谍叠丁盯叮钉顶鼎锭定订丢东冬董懂动栋侗恫冻洞兜抖斗陡豆逗痘都督毒犊独读堵睹赌杜镀肚度渡妒端短锻段断缎堆兑队对墩吨蹲敦顿囤钝盾遁掇哆多夺垛躲朵跺舵剁惰堕蛾峨鹅俄额讹娥恶厄扼遏鄂饿恩而儿耳尔饵洱二贰发罚筏伐乏阀法珐藩帆番翻樊矾钒繁凡烦反返范贩犯饭泛坊芳方肪房防妨仿访纺放菲非啡飞肥匪诽吠肺废沸费芬酚吩氛分纷坟焚汾粉奋份忿愤粪丰封枫蜂峰锋风疯烽逢冯缝讽奉凤佛否夫敷肤孵扶拂辐幅氟符伏俘服浮涪福袱弗甫抚辅俯釜斧脯腑府腐赴副覆赋复傅付阜父腹负富讣附妇缚咐噶嘎该改概钙盖溉干甘杆柑竿肝赶感秆敢赣冈刚钢缸肛纲岗港杠篙皋高膏羔糕搞镐稿告哥歌搁戈鸽胳疙割革葛格蛤阁隔铬个各给根跟耕更庚羹埂耿梗工攻功恭龚供躬公宫弓巩汞拱贡共钩勾沟苟狗垢构购够辜菇咕箍估沽孤姑鼓古蛊骨谷股故顾固雇刮瓜剐寡挂褂乖拐怪棺关官冠观管馆罐惯灌贯光广逛瑰规圭硅归龟闺轨鬼诡癸桂柜跪贵刽辊滚棍锅郭国果裹过哈骸孩海氦亥害骇酣憨邯韩含涵寒函喊罕翰撼捍旱憾悍焊汗汉夯杭航壕嚎豪毫郝好耗号浩呵喝荷菏核禾和何合盒貉阂河涸赫褐鹤贺嘿黑痕很狠恨哼亨横衡恒轰哄烘虹鸿洪宏弘红喉侯猴吼厚候后呼乎忽瑚壶葫胡蝴狐糊湖弧虎唬护互沪户花哗华猾滑画划化话槐徊怀淮坏欢环桓还缓换患唤痪豢焕涣宦幻荒慌黄磺蝗簧皇凰惶煌晃幌恍谎灰挥辉徽恢蛔回毁悔慧卉惠晦贿秽会烩汇讳诲绘荤昏婚魂浑混豁活伙火获或惑霍货祸击圾基机畸稽积箕肌饥迹激讥鸡姬绩缉吉极棘辑籍集及急疾汲即嫉级挤几脊己蓟技冀季伎祭剂悸济寄寂计记既忌际妓继纪嘉枷夹佳家加荚颊贾甲钾假稼价架驾嫁歼监坚尖笺间煎兼肩艰奸缄茧检柬碱硷拣捡简俭剪减荐槛鉴践贱见键箭件健舰剑饯渐溅涧建僵姜将浆江疆蒋桨奖讲匠酱降蕉椒礁焦胶交郊浇骄娇嚼搅铰矫侥脚狡角饺缴绞剿教酵轿较叫窖揭接皆秸街阶截劫节茎睛晶鲸京惊精粳经井警景颈静境敬镜径痉靖竟竞净炯窘揪究纠玖韭久灸九酒厩救旧臼舅咎就疚鞠拘狙疽居驹菊局咀矩举沮聚拒据巨具距踞锯俱句惧炬剧捐鹃娟倦眷卷绢撅攫抉掘倔爵桔杰捷睫竭洁结解姐戒藉芥界借介疥诫届巾筋斤金今津襟紧锦仅谨进靳晋禁近烬浸尽劲荆兢觉决诀绝均菌钧军君峻俊竣浚郡骏喀咖卡咯开揩楷凯慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕颗科壳咳可渴克刻客课肯啃垦恳坑吭空恐孔控抠口扣寇枯哭窟苦酷库裤夸垮挎跨胯块筷侩快宽款匡筐狂框矿眶旷况亏盔岿窥葵奎魁傀馈愧溃坤昆捆困括扩廓阔垃拉喇蜡腊辣啦莱来赖蓝婪栏拦篮阑兰澜谰揽览懒缆烂滥琅榔狼廊郎朗浪捞劳牢老佬姥酪烙涝勒乐雷镭蕾磊累儡垒擂肋类泪棱楞冷厘梨犁黎篱狸离漓理李里鲤礼莉荔吏栗丽厉励砾历利傈例俐痢立粒沥隶力璃哩俩联莲连镰廉怜涟帘敛脸链恋炼练粮凉梁粱良两辆量晾亮谅撩聊僚疗燎寥辽潦了撂镣廖料列裂烈劣猎琳林磷霖临邻鳞淋凛赁吝拎玲菱零龄铃伶羚凌灵陵岭领另令溜琉榴硫馏留刘瘤流柳六龙聋咙笼窿隆垄拢陇楼娄搂篓漏陋芦卢颅庐炉掳卤虏鲁麓碌露路赂鹿潞禄录陆戮驴吕铝侣旅履屡缕虑氯律率滤绿峦挛孪滦卵乱掠略抡轮伦仑沦纶论萝螺罗逻锣箩骡裸落洛骆络妈麻玛码蚂马骂嘛吗埋买麦卖迈脉瞒馒蛮满蔓曼慢漫谩芒茫盲氓忙莽猫茅锚毛矛铆卯茂冒帽貌贸么玫枚梅酶霉煤没眉媒镁每美昧寐妹媚门闷们萌蒙檬盟锰猛梦孟眯醚靡糜迷谜弥米秘觅泌蜜密幂棉眠绵冕免勉娩缅面苗描瞄藐秒渺庙妙蔑灭民抿皿敏悯闽明螟鸣铭名命谬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌谋牟某拇牡亩姆母墓暮幕募慕木目睦牧穆拿哪呐钠那娜纳氖乃奶耐奈南男难囊挠脑恼闹淖呢馁内嫩能妮霓倪泥尼拟你匿腻逆溺蔫拈年碾撵捻念娘酿鸟尿捏聂孽啮镊镍涅您柠狞凝宁拧泞牛扭钮纽脓浓农弄奴努怒女暖虐疟挪懦糯诺哦欧鸥殴藕呕偶沤啪趴爬帕怕琶拍排牌徘湃派攀潘盘磐盼畔判叛乓庞旁耪胖抛咆刨炮袍跑泡呸胚培裴赔陪配佩沛喷盆砰抨烹澎彭蓬棚硼篷膨朋鹏捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片骗飘漂瓢票撇瞥拼频贫品聘乒坪苹萍平凭瓶评屏坡泼颇婆破魄迫粕剖扑铺仆莆葡菩蒲埔朴圃普浦谱曝瀑期欺栖戚妻七凄漆柒沏其棋奇歧畦崎脐齐旗祈祁骑起岂乞企启契砌器气迄弃汽泣讫掐洽牵扦钎铅千迁签仟谦乾黔钱钳前潜遣浅谴堑嵌欠歉枪呛腔羌墙蔷强抢橇锹敲悄桥瞧乔侨巧鞘撬翘峭俏窍切茄且怯窃钦侵亲秦琴勤芹擒禽寝沁青轻氢倾卿清擎晴氰情顷请庆琼穷秋丘邱球求囚酋泅趋区蛆曲躯屈驱渠取娶龋趣去圈颧权醛泉全痊拳犬券劝缺炔瘸却鹊榷确雀裙群然燃冉染瓤壤攘嚷让饶扰绕惹热壬仁人忍韧任认刃妊纫扔仍日戎茸蓉荣融熔溶容绒冗揉柔肉茹蠕儒孺如辱乳汝入褥软阮蕊瑞锐闰润若弱撒洒萨腮鳃塞赛三叁伞散桑嗓丧搔骚扫嫂瑟色涩森僧莎砂杀刹沙纱傻啥煞筛晒珊苫杉山删煽衫闪陕擅赡膳善汕扇缮墒伤商赏晌上尚裳梢捎稍烧芍勺韶少哨邵绍奢赊蛇舌舍赦摄射慑涉社设砷申呻伸身深娠绅神沈审婶甚肾慎渗声生甥牲升绳省盛剩胜圣师失狮施湿诗尸虱十石拾时什食蚀实识史矢使屎驶始式示士世柿事拭誓逝势是嗜噬适仕侍释饰氏市恃室视试收手首守寿授售受瘦兽蔬枢梳殊抒输叔舒淑疏书赎孰熟薯暑曙署蜀黍鼠属术述树束戍竖墅庶数漱恕刷耍摔衰甩帅栓拴霜双爽谁水睡税吮瞬顺舜说硕朔烁斯撕嘶思私司丝死肆寺嗣四伺似饲巳松耸怂颂送宋讼诵搜艘擞嗽苏酥俗素速粟僳塑溯宿诉肃酸蒜算虽隋随绥髓碎岁穗遂隧祟孙损笋蓑梭唆缩琐索锁所塌他它她塔獭挞蹋踏胎苔抬台泰酞太态汰坍摊贪瘫滩坛檀痰潭谭谈坦毯袒碳探叹炭汤塘搪堂棠膛唐糖倘躺淌趟烫掏涛滔绦萄桃逃淘陶讨套特藤腾疼誊梯剔踢锑提题蹄啼体替嚏惕涕剃屉天添填田甜恬舔腆挑条迢眺跳贴铁帖厅听烃汀廷停亭庭挺艇通桐酮瞳同铜彤童桶捅筒统痛偷投头透凸秃突图徒途涂屠土吐兔湍团推颓腿蜕褪退吞屯臀拖托脱鸵陀驮驼椭妥拓唾挖哇蛙洼娃瓦袜歪外豌弯湾玩顽丸烷完碗挽晚皖惋宛婉万腕汪王亡枉网往旺望忘妄威巍微危韦违桅围唯惟为潍维苇萎委伟伪尾纬未蔚味畏胃喂魏位渭谓尉慰卫瘟温蚊文闻纹吻稳紊问嗡翁瓮挝蜗涡窝我斡卧握沃巫呜钨乌污诬屋无芜梧吾吴毋武五捂午舞伍侮坞戊雾晤物勿务悟误昔熙析西硒矽晰嘻吸锡牺稀息希悉膝夕惜熄烯溪汐犀檄袭席习媳喜铣洗系隙戏细瞎虾匣霞辖暇峡侠狭下厦夏吓掀锨先仙鲜纤咸贤衔舷闲涎弦嫌显险现献县腺馅羡宪陷限线相厢镶香箱襄湘乡翔祥详想响享项巷橡像向象萧硝霄削哮嚣销消宵淆晓小孝校肖啸笑效楔些歇蝎鞋协挟携邪斜胁谐写械卸蟹懈泄泻谢屑薪芯锌欣辛新忻心信衅星腥猩惺兴刑型形邢行醒幸杏性姓兄凶胸匈汹雄熊休修羞朽嗅锈秀袖绣墟戌需虚嘘须徐许蓄酗叙旭序畜恤絮婿绪续轩喧宣悬旋玄选癣眩绚靴薛学穴雪血勋熏循旬询寻驯巡殉汛训讯逊迅压押鸦鸭呀丫芽牙蚜崖衙涯雅哑亚讶焉咽阉烟淹盐严研蜒岩延言颜阎炎沿奄掩眼衍演艳堰燕厌砚雁唁彦焰宴谚验殃央鸯秧杨扬佯疡羊洋阳氧仰痒养样漾邀腰妖瑶摇尧遥窑谣姚咬舀药要耀椰噎耶爷野冶也页掖业叶曳腋夜液一壹医揖铱依伊衣颐夷遗移仪胰疑沂宜姨彝椅蚁倚已乙矣以艺抑易邑屹亿役臆逸肄疫亦裔意毅忆义益溢诣议谊译异翼翌绎茵荫因殷音阴姻吟银淫寅饮尹引隐印英樱婴鹰应缨莹萤营荧蝇迎赢盈影颖硬映哟拥佣臃痈庸雍踊蛹咏泳涌永恿勇用幽优悠忧尤由邮铀犹油游酉有友右佑釉诱又幼迂淤于盂榆虞愚舆余俞逾鱼愉渝渔隅予娱雨与屿禹宇语羽玉域芋郁吁遇喻峪御愈欲狱育誉浴寓裕预豫驭鸳渊冤元垣袁原援辕园员圆猿源缘远苑愿怨院曰约越跃钥岳粤月悦阅耘云郧匀陨允运蕴酝晕韵孕匝砸杂栽哉灾宰载再在咱攒暂赞赃脏葬遭糟凿藻枣早澡蚤躁噪造皂灶燥责择则泽贼怎增憎曾赠扎喳渣札轧铡闸眨栅榨咋乍炸诈摘斋宅窄债寨瞻毡詹粘沾盏斩辗崭展蘸栈占战站湛绽樟章彰漳张掌涨杖丈帐账仗胀瘴障招昭找沼赵照罩兆肇召遮折哲蛰辙者锗蔗这浙珍斟真甄砧臻贞针侦枕疹诊震振镇阵蒸挣睁征狰争怔整拯正政帧症郑证芝枝支吱蜘知肢脂汁之织职直植殖执值侄址指止趾只旨纸志挚掷至致置帜峙制智秩稚质炙痔滞治窒中盅忠钟衷终种肿重仲众舟周州洲诌粥轴肘帚咒皱宙昼骤珠株蛛朱猪诸诛逐竹烛煮拄瞩嘱主著柱助蛀贮铸筑住注祝驻抓爪拽专砖转撰赚篆桩庄装妆撞壮状椎锥追赘坠缀谆准捉拙卓桌琢茁酌啄着灼浊兹咨资姿滋淄孜紫仔籽滓子自渍字鬃棕踪宗综总纵邹走奏揍租足卒族祖诅阻组钻纂嘴醉最罪尊遵昨左佐柞做作坐座';
     7 }
     8 
     9 function ftPYStr(){
    10     return '啊阿埃挨哎唉哀皚癌藹矮艾礙愛隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翺襖傲奧懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙壩霸罷爸白柏百擺佰敗拜稗斑班搬扳般頒板版扮拌伴瓣半辦絆邦幫梆榜膀綁棒磅蚌鎊傍謗苞胞包褒剝薄雹保堡飽寶抱報暴豹鮑爆杯碑悲卑北輩背貝鋇倍狽備憊焙被奔苯本笨崩繃甭泵蹦迸逼鼻比鄙筆彼碧蓖蔽畢斃毖幣庇痹閉敝弊必辟壁臂避陛鞭邊編貶扁便變卞辨辯辮遍標彪膘表鼈憋別癟彬斌瀕濱賓擯兵冰柄丙秉餅炳病並玻菠播撥缽波博勃搏鉑箔伯帛舶脖膊渤泊駁捕蔔哺補埠不布步簿部怖擦猜裁材才財睬踩采彩菜蔡餐參蠶殘慚慘燦蒼艙倉滄藏操糙槽曹草廁策側冊測層蹭插叉茬茶查碴搽察岔差詫拆柴豺攙摻蟬饞讒纏鏟産闡顫昌猖場嘗常長償腸廠敞暢唱倡超抄鈔朝嘲潮巢吵炒車扯撤掣徹澈郴臣辰塵晨忱沈陳趁襯撐稱城橙成呈乘程懲澄誠承逞騁秤吃癡持匙池遲弛馳恥齒侈尺赤翅斥熾充衝沖蟲崇寵抽酬疇躊稠愁籌仇綢瞅醜臭初出櫥廚躇鋤雛滁除楚礎儲矗搐觸處揣川穿椽傳船喘串瘡窗幢床闖創吹炊捶錘垂春椿醇唇淳純蠢戳綽疵茨磁雌辭慈瓷詞此刺賜次聰蔥囪匆從叢湊粗醋簇促躥篡竄摧崔催脆瘁粹淬翠村存寸磋撮搓措挫錯搭達答瘩打大呆歹傣戴帶殆代貸袋待逮怠耽擔丹單鄲撣膽旦氮但憚淡誕彈蛋當擋黨蕩檔刀搗蹈倒島禱導到稻悼道盜德得的蹬燈登等瞪凳鄧堤低滴迪敵笛狄滌翟嫡抵底地蒂第帝弟遞締顛掂滇碘點典靛墊電佃甸店惦奠澱殿碉叼雕凋刁掉吊釣調跌爹碟蝶叠諜疊丁盯叮釘頂鼎錠定訂丟東冬董懂動棟侗恫凍洞兜抖鬥陡豆逗痘都督毒犢獨讀堵睹賭杜鍍肚度渡妒端短鍛段斷緞堆兌隊對墩噸蹲敦頓囤鈍盾遁掇哆多奪垛躲朵跺舵剁惰墮蛾峨鵝俄額訛娥惡厄扼遏鄂餓恩而兒耳爾餌洱二貳發罰筏伐乏閥法琺藩帆番翻樊礬釩繁凡煩反返範販犯飯泛坊芳方肪房防妨仿訪紡放菲非啡飛肥匪誹吠肺廢沸費芬酚吩氛分紛墳焚汾粉奮份忿憤糞豐封楓蜂峰鋒風瘋烽逢馮縫諷奉鳳佛否夫敷膚孵扶拂輻幅氟符伏俘服浮涪福袱弗甫撫輔俯釜斧脯腑府腐赴副覆賦複傅付阜父腹負富訃附婦縛咐噶嘎該改概鈣蓋溉幹甘杆柑竿肝趕感稈敢贛岡剛鋼缸肛綱崗港杠篙臯高膏羔糕搞鎬稿告哥歌擱戈鴿胳疙割革葛格蛤閣隔鉻個各給根跟耕更庚羹埂耿梗工攻功恭龔供躬公宮弓鞏汞拱貢共鈎勾溝苟狗垢構購夠辜菇咕箍估沽孤姑鼓古蠱骨谷股故顧固雇刮瓜剮寡挂褂乖拐怪棺關官冠觀管館罐慣灌貫光廣逛瑰規圭矽歸龜閨軌鬼詭癸桂櫃跪貴劊輥滾棍鍋郭國果裹過哈骸孩海氦亥害駭酣憨邯韓含涵寒函喊罕翰撼捍旱憾悍焊汗漢夯杭航壕嚎豪毫郝好耗號浩呵喝荷菏核禾和何合盒貉閡河涸赫褐鶴賀嘿黑痕很狠恨哼亨橫衡恒轟哄烘虹鴻洪宏弘紅喉侯猴吼厚候後呼乎忽瑚壺葫胡蝴狐糊湖弧虎唬護互滬戶花嘩華猾滑畫劃化話槐徊懷淮壞歡環桓還緩換患喚瘓豢煥渙宦幻荒慌黃磺蝗簧皇凰惶煌晃幌恍謊灰揮輝徽恢蛔回毀悔慧卉惠晦賄穢會燴彙諱誨繪葷昏婚魂渾混豁活夥火獲或惑霍貨禍擊圾基機畸稽積箕肌饑迹激譏雞姬績緝吉極棘輯籍集及急疾汲即嫉級擠幾脊己薊技冀季伎祭劑悸濟寄寂計記既忌際妓繼紀嘉枷夾佳家加莢頰賈甲鉀假稼價架駕嫁殲監堅尖箋間煎兼肩艱奸緘繭檢柬堿鹼揀撿簡儉剪減薦檻鑒踐賤見鍵箭件健艦劍餞漸濺澗建僵姜將漿江疆蔣槳獎講匠醬降蕉椒礁焦膠交郊澆驕嬌嚼攪鉸矯僥腳狡角餃繳絞剿教酵轎較叫窖揭接皆稭街階截劫節莖睛晶鯨京驚精粳經井警景頸靜境敬鏡徑痙靖竟競淨炯窘揪究糾玖韭久灸九酒廄救舊臼舅咎就疚鞠拘狙疽居駒菊局咀矩舉沮聚拒據巨具距踞鋸俱句懼炬劇捐鵑娟倦眷卷絹撅攫抉掘倔爵桔傑捷睫竭潔結解姐戒藉芥界借介疥誡屆巾筋斤金今津襟緊錦僅謹進靳晉禁近燼浸盡勁荊兢覺決訣絕均菌鈞軍君峻俊竣浚郡駿喀咖卡咯開揩楷凱慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕顆科殼咳可渴克刻客課肯啃墾懇坑吭空恐孔控摳口扣寇枯哭窟苦酷庫褲誇垮挎跨胯塊筷儈快寬款匡筐狂框礦眶曠況虧盔巋窺葵奎魁傀饋愧潰坤昆捆困括擴廓闊垃拉喇蠟臘辣啦萊來賴藍婪欄攔籃闌蘭瀾讕攬覽懶纜爛濫琅榔狼廊郎朗浪撈勞牢老佬姥酪烙澇勒樂雷鐳蕾磊累儡壘擂肋類淚棱楞冷厘梨犁黎籬狸離漓理李裏鯉禮莉荔吏栗麗厲勵礫曆利傈例俐痢立粒瀝隸力璃哩倆聯蓮連鐮廉憐漣簾斂臉鏈戀煉練糧涼梁粱良兩輛量晾亮諒撩聊僚療燎寥遼潦了撂鐐廖料列裂烈劣獵琳林磷霖臨鄰鱗淋凜賃吝拎玲菱零齡鈴伶羚淩靈陵嶺領另令溜琉榴硫餾留劉瘤流柳六龍聾嚨籠窿隆壟攏隴樓婁摟簍漏陋蘆盧顱廬爐擄鹵虜魯麓碌露路賂鹿潞祿錄陸戮驢呂鋁侶旅履屢縷慮氯律率濾綠巒攣孿灤卵亂掠略掄輪倫侖淪綸論蘿螺羅邏鑼籮騾裸落洛駱絡媽麻瑪碼螞馬罵嘛嗎埋買麥賣邁脈瞞饅蠻滿蔓曼慢漫謾芒茫盲氓忙莽貓茅錨毛矛鉚卯茂冒帽貌貿麽玫枚梅酶黴煤沒眉媒鎂每美昧寐妹媚門悶們萌蒙檬盟錳猛夢孟眯醚靡糜迷謎彌米秘覓泌蜜密冪棉眠綿冕免勉娩緬面苗描瞄藐秒渺廟妙蔑滅民抿皿敏憫閩明螟鳴銘名命謬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌謀牟某拇牡畝姆母墓暮幕募慕木目睦牧穆拿哪呐鈉那娜納氖乃奶耐奈南男難囊撓腦惱鬧淖呢餒內嫩能妮霓倪泥尼擬你匿膩逆溺蔫拈年碾攆撚念娘釀鳥尿捏聶孽齧鑷鎳涅您檸獰凝甯擰濘牛扭鈕紐膿濃農弄奴努怒女暖虐瘧挪懦糯諾哦歐鷗毆藕嘔偶漚啪趴爬帕怕琶拍排牌徘湃派攀潘盤磐盼畔判叛乓龐旁耪胖抛咆刨炮袍跑泡呸胚培裴賠陪配佩沛噴盆砰抨烹澎彭蓬棚硼篷膨朋鵬捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片騙飄漂瓢票撇瞥拼頻貧品聘乒坪蘋萍平憑瓶評屏坡潑頗婆破魄迫粕剖撲鋪仆莆葡菩蒲埔樸圃普浦譜曝瀑期欺棲戚妻七淒漆柒沏其棋奇歧畦崎臍齊旗祈祁騎起豈乞企啓契砌器氣迄棄汽泣訖掐洽牽扡釺鉛千遷簽仟謙乾黔錢鉗前潛遣淺譴塹嵌欠歉槍嗆腔羌牆薔強搶橇鍬敲悄橋瞧喬僑巧鞘撬翹峭俏竅切茄且怯竊欽侵親秦琴勤芹擒禽寢沁青輕氫傾卿清擎晴氰情頃請慶瓊窮秋丘邱球求囚酋泅趨區蛆曲軀屈驅渠取娶齲趣去圈顴權醛泉全痊拳犬券勸缺炔瘸卻鵲榷確雀裙群然燃冉染瓤壤攘嚷讓饒擾繞惹熱壬仁人忍韌任認刃妊紉扔仍日戎茸蓉榮融熔溶容絨冗揉柔肉茹蠕儒孺如辱乳汝入褥軟阮蕊瑞銳閏潤若弱撒灑薩腮鰓塞賽三三傘散桑嗓喪搔騷掃嫂瑟色澀森僧莎砂殺刹沙紗傻啥煞篩曬珊苫杉山刪煽衫閃陝擅贍膳善汕扇繕墒傷商賞晌上尚裳梢捎稍燒芍勺韶少哨邵紹奢賒蛇舌舍赦攝射懾涉社設砷申呻伸身深娠紳神沈審嬸甚腎慎滲聲生甥牲升繩省盛剩勝聖師失獅施濕詩屍虱十石拾時什食蝕實識史矢使屎駛始式示士世柿事拭誓逝勢是嗜噬適仕侍釋飾氏市恃室視試收手首守壽授售受瘦獸蔬樞梳殊抒輸叔舒淑疏書贖孰熟薯暑曙署蜀黍鼠屬術述樹束戍豎墅庶數漱恕刷耍摔衰甩帥栓拴霜雙爽誰水睡稅吮瞬順舜說碩朔爍斯撕嘶思私司絲死肆寺嗣四伺似飼巳松聳慫頌送宋訟誦搜艘擻嗽蘇酥俗素速粟僳塑溯宿訴肅酸蒜算雖隋隨綏髓碎歲穗遂隧祟孫損筍蓑梭唆縮瑣索鎖所塌他它她塔獺撻蹋踏胎苔擡台泰酞太態汰坍攤貪癱灘壇檀痰潭譚談坦毯袒碳探歎炭湯塘搪堂棠膛唐糖倘躺淌趟燙掏濤滔縧萄桃逃淘陶討套特藤騰疼謄梯剔踢銻提題蹄啼體替嚏惕涕剃屜天添填田甜恬舔腆挑條迢眺跳貼鐵帖廳聽烴汀廷停亭庭挺艇通桐酮瞳同銅彤童桶捅筒統痛偷投頭透凸禿突圖徒途塗屠土吐兔湍團推頹腿蛻褪退吞屯臀拖托脫鴕陀馱駝橢妥拓唾挖哇蛙窪娃瓦襪歪外豌彎灣玩頑丸烷完碗挽晚皖惋宛婉萬腕汪王亡枉網往旺望忘妄威巍微危韋違桅圍唯惟爲濰維葦萎委偉僞尾緯未蔚味畏胃餵魏位渭謂尉慰衛瘟溫蚊文聞紋吻穩紊問嗡翁甕撾蝸渦窩我斡臥握沃巫嗚鎢烏汙誣屋無蕪梧吾吳毋武五捂午舞伍侮塢戊霧晤物勿務悟誤昔熙析西硒矽晰嘻吸錫犧稀息希悉膝夕惜熄烯溪汐犀檄襲席習媳喜銑洗系隙戲細瞎蝦匣霞轄暇峽俠狹下廈夏嚇掀鍁先仙鮮纖鹹賢銜舷閑涎弦嫌顯險現獻縣腺餡羨憲陷限線相廂鑲香箱襄湘鄉翔祥詳想響享項巷橡像向象蕭硝霄削哮囂銷消宵淆曉小孝校肖嘯笑效楔些歇蠍鞋協挾攜邪斜脅諧寫械卸蟹懈泄瀉謝屑薪芯鋅欣辛新忻心信釁星腥猩惺興刑型形邢行醒幸杏性姓兄凶胸匈洶雄熊休修羞朽嗅鏽秀袖繡墟戌需虛噓須徐許蓄酗敘旭序畜恤絮婿緒續軒喧宣懸旋玄選癬眩絢靴薛學穴雪血勳熏循旬詢尋馴巡殉汛訓訊遜迅壓押鴉鴨呀丫芽牙蚜崖衙涯雅啞亞訝焉咽閹煙淹鹽嚴研蜒岩延言顔閻炎沿奄掩眼衍演豔堰燕厭硯雁唁彥焰宴諺驗殃央鴦秧楊揚佯瘍羊洋陽氧仰癢養樣漾邀腰妖瑤搖堯遙窯謠姚咬舀藥要耀椰噎耶爺野冶也頁掖業葉曳腋夜液一壹醫揖銥依伊衣頤夷遺移儀胰疑沂宜姨彜椅蟻倚已乙矣以藝抑易邑屹億役臆逸肄疫亦裔意毅憶義益溢詣議誼譯異翼翌繹茵蔭因殷音陰姻吟銀淫寅飲尹引隱印英櫻嬰鷹應纓瑩螢營熒蠅迎贏盈影穎硬映喲擁傭臃癰庸雍踴蛹詠泳湧永恿勇用幽優悠憂尤由郵鈾猶油遊酉有友右佑釉誘又幼迂淤于盂榆虞愚輿余俞逾魚愉渝漁隅予娛雨與嶼禹宇語羽玉域芋郁籲遇喻峪禦愈欲獄育譽浴寓裕預豫馭鴛淵冤元垣袁原援轅園員圓猿源緣遠苑願怨院曰約越躍鑰嶽粵月悅閱耘雲鄖勻隕允運蘊醞暈韻孕匝砸雜栽哉災宰載再在咱攢暫贊贓髒葬遭糟鑿藻棗早澡蚤躁噪造皂竈燥責擇則澤賊怎增憎曾贈紮喳渣劄軋鍘閘眨柵榨咋乍炸詐摘齋宅窄債寨瞻氈詹粘沾盞斬輾嶄展蘸棧占戰站湛綻樟章彰漳張掌漲杖丈帳賬仗脹瘴障招昭找沼趙照罩兆肇召遮折哲蟄轍者鍺蔗這浙珍斟眞甄砧臻貞針偵枕疹診震振鎮陣蒸掙睜征猙爭怔整拯正政幀症鄭證芝枝支吱蜘知肢脂汁之織職直植殖執值侄址指止趾只旨紙志摯擲至致置幟峙制智秩稚質炙痔滯治窒中盅忠鍾衷終種腫重仲衆舟周州洲謅粥軸肘帚咒皺宙晝驟珠株蛛朱豬諸誅逐竹燭煮拄矚囑主著柱助蛀貯鑄築住注祝駐抓爪拽專磚轉撰賺篆樁莊裝妝撞壯狀椎錐追贅墜綴諄准捉拙卓桌琢茁酌啄著灼濁茲咨資姿滋淄孜紫仔籽滓子自漬字鬃棕蹤宗綜總縱鄒走奏揍租足卒族祖詛阻組鑽纂嘴醉最罪尊遵昨左佐柞做作坐座';
    11 }
    12     //简体转繁体
    13     function S2T(cc)
    14     {
    15         var str='';
    16         for(var i=0;i<cc.length;i++){
    17             if(charPYStr().indexOf(cc.charAt(i))!=-1)
    18             {
    19                 str+=ftPYStr().charAt(charPYStr().indexOf(cc.charAt(i)));
    20             }
    21             else
    22             {
    23                 str+=cc.charAt(i);
    24             }
    25         }
    26         return str;
    27     }
    28     //繁体转简体
    29     function T2S(cc)
    30     {
    31         var str='';
    32         for(var i=0;i<cc.length;i++){
    33             if(ftPYStr().indexOf(cc.charAt(i))!=-1)
    34                 str+=charPYStr().charAt(ftPYStr().indexOf(cc.charAt(i)));
    35             else
    36                 str+=cc.charAt(i);
    37         }
    38         return str;
    39     }
    40     function ConvertCharater(type){
    41     var txtS = document.getElementById("txtS");
    42     var txtT = document.getElementById("txtT");
    43     if(type==0)
    44         txtS.value=T2S(txtT.value);
    45     else
    46         txtT.value=S2T(txtS.value);
    47     }
    48     </script>
    49 </head>
    50 
    51 <body>
    52 <input type="button" value="简体转繁体" onclick='ConvertCharater(1);'>
    53 <input type="button" value="繁体转简体" onclick='ConvertCharater(0);'>
    54 <hr>
    55 简体：
    56 <br>
    57 <TEXTAREA id=txtS rows=10 cols=80 value=""></TEXTAREA>
    58 <hr>
    59 繁体：
    60 <br>
    61 <TEXTAREA id=txtT rows=10 cols=80 value=""></TEXTAREA>
    62 </body>
    63 </html>
    64 

    KiMoGiGi 2006-12-29 00:49 发表评论
    ]]>    脚本打开“我的电脑”等……http://www.cnitblog.com/seeyeah/archive/2006/12/21/20893.htmlKiMoGiGiKiMoGiGiWed, 20 Dec 2006 16:12:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/12/21/20893.htmlhttp://www.cnitblog.com/seeyeah/comments/20893.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/12/21/20893.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/20893.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/20893.html {
        var s3 = new ActiveXObject("wscript.shell");
        s3.run("explorer.exe ::{450D8FBA-AD25-11D0-98A8-0800361B1103}");
     }
     
      function  mycom()  //打开我的电脑
     {
        var s1=new ActiveXObject("wscript.shell"); 
        s1.run("explorer.exe ::{20D04FE0-3AEA-1069-A2D8-08002B30309D}");
     }
     
     function  mycontrol()  //打开控制面板
     {
        var s1=new ActiveXObject("wscript.shell"); 
        s1.run("explorer.exe ::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\\::{21EC2020-3AEA-1069-A2DD-08002B30309D}");
     }
     
     function  myrubbishBin()  //回收站
     {
        var s1=new ActiveXObject("wscript.shell"); 
        s1.run("explorer.exe ::{645FF040-5081-101B-9F08-00AA002F954E}");
     }


    KiMoGiGi 2006-12-21 00:12 发表评论
    ]]>    从javascript语言本身谈项目实战 http://www.cnitblog.com/seeyeah/archive/2006/12/16/20586.htmlKiMoGiGiKiMoGiGiFri, 15 Dec 2006 17:05:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/12/16/20586.htmlhttp://www.cnitblog.com/seeyeah/comments/20586.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/12/16/20586.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/20586.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/20586.html随着ajax的升温，javascript越来越得到人们的重视。重要的是，ajax在一定程度上带来了web软件架构上的变化，人们把越来越多的功能分配到客户端实现，javascript子项目规模越来越大。如何更高效的使用javascript，如何更科学的组织javascript，如何更顺利的保证项目进展？我想就我的经验谈一点浅见。

    一。 开发人员需要认真学习javascript语言本身
           由于javascript是“[url =http://www2.uuzone.com/blog/555080192/18957.htm]世界上最被误解的语言[/url]”, 大部分人对javascript语法并没有全面了解过，只是凭借看起来很像c或者java的关键字按照自己的理解写javascript代码。其实 javascript是一种很独特的语言，和c++/java有非常大的区别，要想用javascript做大一些的项目，开发人员必须老老实实的学习 javascript的语法。真正掌握了语法后，我们才不会把delete看成释放内存对象，才不会为到底参数传递是值传递还是引用传递而烦恼。真正理解了javascript的基于原型的OO方式，才可能写出具有良好架构的javascript程序。
           《javascript权威指南》是一本最合适的书，郑重推荐。另外ECMA262 文档可以作为参考。网上流行的jscript手册chm版本使用起来比较方便，不过这是微软的jscript实现，和标准的javascript略有区别，使用时应该注意上面的注脚信息。关于javascript的原型和OO,网上已经有很多文章介绍了，在此不再多说。

    二。 良好的代码来源于良好的设计
           只有设计优良，代码才会写的漂亮。现在的javascript子项目已经不是以前web项目中的“边角料”和散兵游勇了，在较大的ajax项目内， javascript将非常复杂，ajax的异步模型也和以前顺序执行的程序设计有所区别。所以建议做javascript前首先做好设计。推荐使用用例驱动的方式，把用例分析清楚，以便全局考虑所有可能的页面交互过程，绘出页面内一些对象之间的交互图，分析一些数据对象的状态，作出精细的 javascript设计。

    三。 使用设计模式，复用其他领域的设计经验
            如果javascript非常复杂，可以考虑使用一些模式。我想大部分做javascript的开发者都不是“javascript科班”出身吧 掌握了javascript的语言本质，就可以复用我们在其他领域的经验了。使用javascript框架或者ajax框架，使用单例模式做一个全局的数据缓冲池，或者使用观察者模式把界面对象和数据对象分离，使用命令模式实现用户的操作队列等等。

    四。 调试代码的技巧
            javascript的代码不太好调试，这是由于：

        * 一般的开发人员对javascript语言本身不太精通。也就是上面提到的。
        * web项目包含较多的因素，复杂性加剧。服务端脚本、模板、html、js等很多环节都可能增加调试难度。
        * 浏览器存在兼容性问题。有可能在一个细节问题上IE、Mozilla、opera等浏览器都有差异。
        * 工具的缺乏。虽然mozilla的jsdebugger非常好用（还有bug，比如eval时调试器有些问题），但是其他浏览器环境下调试工具就不怎么样了。ms系统自带的script debug工具调试本地代码还可以，直接调试网站js代码表现欠佳。opera除了javascript控制台外我没有找到其他调试工具。

           在此我推荐几个调试技巧：

       1. 使用Mozilla firefox的jsdebugger插件。这个我不再多说了，最经典的js调试工具。在线调试远程站点的javascript效果非常棒。
       2. 把问题隔离，建立本地的html文件和js文件，使用ms script debug调试工具来调试。如果js模块比较独立，可以使用这个工具的。如果写hta的项目，这个工具当然是首选了。
       3. httpWatch 这是一个ie下的插件，非常好用，能够监视ie中的任何http会话，并能够看到http会话的原文。可以通过这个工具了解你的程序有没有和服务器产生会话，参数＆返回的数据到底是什么。
       4. 在网页内建立用于调试的textarea
          可以在网页内建立一个textarea来接受你想运行的js语句，然后加一个按钮使用js的eval函数执行你输入的代码。
          这种方式非常适合在线调试，网页出错后写代码输出页面内的对象值。建议写一些dump工具函数配合使用，效果更佳。
          我非常喜欢这种方式，可以随时使用开关打开页面内隐藏的textarea进行调试，感觉很像给一台服务器接上了终端，然后使用shell可以做任何事情 函数可以在这里重新定义，可以任意操作界面中的任何元素，调用任何对象的任何函数，输出任何你需要的运行时刻值。
       5. 使用异常(exception)和断言(assert)
          使用try{}catch(e){}结构不光可以屏蔽出错信息，让界面更友好。我们的程序可以使用异常、抛出异常来构建一种更好的出错处理机制。
          有这样一个故事，我在使用string.localeCompare函数时随手写了这样的代码：
          var iRe = str1.localeCompare(str2);
          switch(iRe){
          0: return ....
          1: return ....
          -1:return ....
          defalut:throw "error:localeCompare return other value"
          }
          写完就忘了，没想到我的同事在linux下使用firefox时，异常被抛出了，然后我们得知：linux firefox下localeCompare返回的不只是0/1/-1,而是返回一个具体值.
          这个异常抛出有效的检测出了代码的不完美。

          firefox下的异常dump后能得到较为详细的调用栈信息，这一点非常好。IE的异常信息没有这么详细。

          异常和断言也可以结合成为一个非常有效的调试工具。
          断言(assert)是在其他语言中的一种很有效的调试工具，常常以这种形式出现：
          assert( <条件> ) ;
          在程序处于debug状态，当条件为假时，系统中止运行并报告这个断言。由于断言是我们自己定义的，所以我们可以很容易的判断出出错的地方，进而找到bug所在。
          javascript语言没有提供宏，也没有提供assert，我们可以这样模拟
          if(_is_debug) assert = function(expression , strLable){
              if( !expression ) throw Error(strLable);
          }
          else assert = function(){};//_is_debug是一个全局变量
          这样可以实现在发生"不可能的事情"的时候，让程序在调试模式下抛出异常，在发布版本中不作理会。

          可以这样输出当前栈的调用信息,弥补刚才提到的IE中异常对象没有栈信息的缺陷:
          function callStackInfo(){
          var s="",line="";
          var cer=arguments.callee.caller;
          while(cer){
          var sf=cer.toString();
          s+=line+sf.substring(sf.indexOf('function'),sf.indexOf('{'))+"\n";
          line=".."+line;
          cer=cer.caller;
          }
          return s;
          }

           本文只就javascript在web开发，特别是在ajax方面的开发做了一些讨论，主要在于管窥如何更好的使用“纯javascript”。web开发还有很多其他方面，比如xml和Dom等实际上和javascript息息相关，但是本文没有涉及，还请见谅。欢迎各位朋友就我的讨论多提意见。



    KiMoGiGi 2006-12-16 01:05 发表评论
    ]]>    最亲密接触Dhtml&JScript开发细节http://www.cnitblog.com/seeyeah/archive/2006/12/03/19883.htmlKiMoGiGiKiMoGiGiSat, 02 Dec 2006 17:18:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19883.htmlhttp://www.cnitblog.com/seeyeah/comments/19883.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19883.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/19883.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/19883.html鸟食轩

    脚本语法篇
            ·从JavaScript函数重名看其初始化方式
            ·在JScript中运算符"||"和"&&"的特殊特性
            ·原来JScript中的关键字'var'还是有文章的
            ·JavaScript语言中的Literal Syntax特性
            ·JS类定义原型方法的两种实现的区别
            ·在JavaScript中使用inline函数的问题
            ·区分JS中的undefined,null,"",0和false
            ·JavaScript中this关键字使用方法详解
            ·function, new function, new Function
            ·JScript中的"this"关键字使用方式补充
            ·JavaScript语句可以不以;结尾的烦恼
            ·JScript中的undefined和"undefined"
            

        脚本调试篇
            ·我所使用的JavaScript调试环境(1) (2)(3)
            ·使用IE的地址栏来辅助调试Web页脚本
            ·这年头居然连MSDN Library都靠不住呀
            ·JS类库Bindows1.3中的内存释放方式
            ·访问JavaScript对象的构造函数时失败
            ·在with语句中跨frame的变量引用问题
            ·原型方法的不同写法居然会影响调试
            ·这么小心还是在"08"向8的转换上栽了
            ·使用debugger语句调试JScript的郁闷
            ·被逮到一个初始状态考虑不周的Bug
            ·使用页面元素属性做状态判断的隐患

        脚本技巧篇
            ·比较JavaScript中的集合及其检索效率
            ·JScript内置对象Array中元素的删除问题
            ·获取JavaScript用户自定义类的类名称
            ·在JavaScript中也玩变量类型强行转换
            ·在popup窗口中俘获事件的缺陷&修复
            ·怎么判断鼠标移入一个Popup窗口呢?
            ·MyMsn beta版源代码里微软遇到问题
            ·在什么时候才会用到fireEvent方法呢?
            ·阻止shift+click页面超链接打开新窗口
            ·用createEventObject来模拟事件参数
            ·只遍历出JScript对象的expando属性
            ·使用unknown类型判断当前窗口类型
            ·从此不再为Web页面中的Tooltip烦恼
            ·使用匿名函数为setInterval传递参数
            ·按阅读习惯来高效排列字符串的脚本
            ·对Web页面元素的绝对唯一引用方法

        脚本应用篇
            ·使用混合脚本编程来实现的Base64编码
            ·使用TextRange获取输入框中光标的位置
            ·使用混合脚本编程来实现的Base64解码
            ·注入Script增加了一个GoogleTrack功能
            ·关于Web页中的色彩反转遇到一点问题
            ·为Web页中的Table对象创建一个映射表
            ·使用方向键在输入框矩阵中自然的导航
            ·JScript版CollectionBase类的一个实现
            ·用脚本为本blog增加了几项自定义功能
            ·设计有复杂客户端Script的服务器控件
            ·对JScript对象的实例Clone的一个实现
            ·JavaScript面向对象编程之Singleton类
            ·JScript实现的一个String.Format方法
            ·单扫描的JScript版String.Format方法
            ·兼容值类型的JavaScript对象Clone方法
            ·通过n次循环获得n个自然数随机排序
            ·"舍简求繁"的MSN Spaces图片浏览器
            ·Code: UrlBuilder class in JavaScript
            ·利用搜索引擎引用来高亮页面关键字

        脚本高级篇
            ·在JavaScript面向对象编程中使用继承(1) (2)(3)(4)(5)
            ·JScript中的prototype(原型)属性研究(1) (2)
            ·在JavaScript面向对象编程中使用重载
            ·在JScript面向对象编程中使用重载(续)
            ·JavaScript中的Object到底是什么呢?!
            ·JavaScript对象也玩序列化和反序列化
            ·MyMsn动态Resize页框架的布局详解
            ·修复附加继承法中模拟重载的一缺陷
            ·使用prototype特性编程中的效率问题
            ·绝对的单表格支持横纵表头锁定示例
            ·网页中单一表格横纵表头锁定的细节
            ·理解并解决IE的内存泄漏方式[翻译] [2][3][4]   

        Ajax基础篇
            ·使用XMLHTTP Request Object获取服务器数据
            ·构建一个pool来管理无刷新页面的xmlhttp对象
            ·把JScript函数模拟为"异步执行"方式
            ·Ajax基石脚本异步并发调用参数传递
            ·让您的Ajax应用加载数据时界面友好

        控件开发篇
            ·使用Popup窗口创建无限级Web页菜单(1) (2)(3)(4)(5)(6)(7)(8)
            ·动态载入数据的无刷新TreeView控件(1) (2)(3)(4)(5)(6)(7)(8)(9)

        DHTML篇
            ·使用CheckBox的indeterminate属性的问题
            ·获取Html元素在页面中的绝对位置及问题(1) (2)
            ·Web页中的HTML元素的排版布局规则
            ·用户定制Web页中元素的排版布局策略
            ·关于HTML Object中三个Style实例的区别
            ·使用button元素自定义别具风格的按钮
            ·用系统滚动条实现NumericUpDown的原理
            ·系统滚动条实现的NUD控件Unusable版
            ·细说HTML元素的ID和Name属性的区别
            ·挺好玩的uniqueID&uniqueNumber属性
            ·精通CSS(层叠样式单)语法请帮忙看看
            ·JavaScript中的5种事件使用方式解说
            ·DHTML Scriptlets 容器对象参考手册
            ·使用DOM来创建页面元素的一些问题
            ·使用乱序标签来控制HTML的输出效果
            ·HTML Elements 和 DHTML Objects
            ·在使用optgroup时遇到的缺陷与修复
            ·滚动TextArea中内容到底部的BT方法
            ·精确地计算Web页面中滚动条的宽度
            ·在Web页面中控制其元素的选择状态
            ·HTML中不支持静态Expando的元素
            ·使用onbeforeunload属性后的副作用
            ·在Option条目中填充前导空格的方法
            ·关于使用runtimeStyle属性问题讨论
            ·Web开发中的Drag&Drop完全手册

        IE问题篇
            ·IE的模态对话框里的问题还真是不少
            ·IE的JScript解析器可能有Memory Leak
            ·继续来研究JScript解析引擎的GC问题
            ·同一页面引入多个JS文件的编码问题
            ·处理IE中Bubble Up 事件模型的细节
            ·搞笑的W3C和M$对DOM中属性命名
            ·在XP+SP2下隐藏模态窗口的状态栏
            ·判断用户浏览器是否是XP SP2的IE6
            ·在IE模态窗口中自由查看HTML源码
            ·模态窗口对字符串参数的巨无聊限制
            ·应用虑镜特效时遇到浏览器权限问题
            ·encode脚本和normal脚本混用的问题
            ·IE7提供XMLHttpRequest对象为兼容
            ·IE6使用add方法添加optGroup的bug
            ·IE解析完全相同html代码的不同表现
            ·怎样在Web开发中完美控制IE标题栏
            ·IE6 Hotfix MS-042将导致其Crash!

        其它篇
            ·IIS对于Web页中相对路径解析的问题
            ·关于对cross-browser支持的一些看法
            ·谈一谈支持cross-browser的解决方案
            ·SmartNavigation在Fx2.0中下岗了...
            ·关于DOM Explorer插件的功能和问题
            ·DOM Explorer升级修正了大部分问题
            ·微软终于想通把Script56文档更新了


    KiMoGiGi 2006-12-03 01:18 发表评论
    ]]>    细说HTML元素的ID和Name属性的区别http://www.cnitblog.com/seeyeah/archive/2006/12/03/19882.htmlKiMoGiGiKiMoGiGiSat, 02 Dec 2006 17:17:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19882.htmlhttp://www.cnitblog.com/seeyeah/comments/19882.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19882.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/19882.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/19882.html鸟食轩

    可以说几乎每个做过Web开发的人都问过，到底元素的ID和Name有什么区别阿？为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。

        上周我也遇到了ID和Name的问题，在页面里输入了一个input type="hidden"，只写了一个ID='SliceInfo'，赋值后submit，在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示，于是在input里加了个Name='SliceInfo'，就一切ok了。

        第一段里对于ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完全由ID来代替，从而将其取消掉。具体用途有：

        用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
        用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
        用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。
        用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
        用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
        用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

        显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。

        当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值element.name = "..."来添加其Name，而必须在创建Element时，使用document.createElement('<element name = "myName"></element>')为元素添加Name属性。这是什么意思啊？看下面的例子就明白了。
    <script language="JavaScript">
    var input = document.createElement('INPUT');
    input.id     = 'myId';
    input.name     = 'myName';
    alert(input.outerHTML);
    </script>

        消息框里显示的结果是：<INPUT id=myId>。

    <script language="JavaScript">
    var input = document.createElement('<INPUT name="myName">');
    input.id     = 'myId';
    alert(input.outerHTML);
    </script>

        消息框里显示的结果是：<INPUT id=myId name=myName>。
        初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白。

        这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中



    KiMoGiGi 2006-12-03 01:17 发表评论
    ]]>    只遍历出JScript对象的expando属性http://www.cnitblog.com/seeyeah/archive/2006/12/03/19881.htmlKiMoGiGiKiMoGiGiSat, 02 Dec 2006 17:15:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19881.htmlhttp://www.cnitblog.com/seeyeah/comments/19881.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19881.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/19881.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/19881.html这篇文章里讨论过。不过在遍历这样的map时，expando导入属性和prototype导入属性存在了混淆。

        由于JScript的prototype特性对对象的扩充非常的方便，所以我们在制作一些JScript类库的时候，一般都会使用prototype特性为对象添加方法，比如我们对Object进行如下prototype扩充：
    Object.prototype.Clone = function() {};
    Object.prototype.Call     = function() {};
    Object.prototype.OtherMethod     = function(){};

        这个时候如果再使用Object作为map结构来使用，我们就会遇到遍历这个map的错误，看下面的代码：
    var objMap = {};
    objMap['abc']     = '1.abc';
    objMap['def']     = '2.def';
    objMap['ghi']     = '3.ghi';
    objMap['jkl']     = '4.jkl';    

        遍历这个集合：
    function DisplayMap(map)
    {
            var values = [];
            for ( var key in map )
        {
            values.push(map[key]);
        }
            return values;
    }
    Display(objMap);

        我们发现，在values里的值居然是：function(){},function() {},function() {},1.abc,2.def,3.ghi,4.jkl。真是郁闷! 其实这就是 for in 语句的效果，JScript也就是这么设计的，我们没有办法改变。那么我门能不能只取出objMap中expando进去的属性呢？

        由于prototype属性的优先级很高，在对象实例生成的时候就expand到对象实例中去了。所以我们建立的任何一个对象，都会包含相同的prototype属性。这样一来就好办了，我们把objMap中的prototype属性找出来过滤掉就行了呗。参考代码如下：
    function GetExpandoValues(map)
    {
            var values = [];
            var obj = new map.constructor();
            for ( var key in map )
        {
                if ( obj[key] !== map[key] )
            {
                values.push(map[key]);
            }
        }
            return values;
    }
    GetExpandoValues(objMap);

        获得结果为：1.abc,2.def,3.ghi,4.jkl。

        


    KiMoGiGi 2006-12-03 01:15 发表评论
    ]]>    JScript中的undefined和"undefined"http://www.cnitblog.com/seeyeah/archive/2006/12/03/19875.htmlKiMoGiGiKiMoGiGiSat, 02 Dec 2006 17:04:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19875.htmlhttp://www.cnitblog.com/seeyeah/comments/19875.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/12/03/19875.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/19875.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/19875.html鸟食轩
    JScript中用于表示未定义的undefined标识符到底是表示什么未定义？它和"undefined"(包括"在内)又有什么区别和联系呢？为什么有的时候可以使用undefined来和变量做比较，而有的时候又不行呢？

        underfined和"undefined"的区别大家一眼就能看出来。在一般的认知下，我们认为undefined是JScript提供的一个"关键字"，而"undefined"却毫无悬念的就是一个字符串，只是引号内的内容长得和undefined一个样。undefined和"undefined"的区别虽然是十分明显的，但它们的联系也是紧密的。

        仔细阅读JScript手册，其实这个underfined是一个"已定义"的Global值，而不是它的字面意义所表达的未定义。我们看下面这个代码示例，很有趣：
    <script language="javascript">
    alert(undefined);
    alert(variable);
    </script>

        执行的结果是：
        undefined.png

        我们稍微修改一下上面的代码，添加一个typeof调用来看看：   
    <script language="javascript">
    alert(typeof undefined);
    alert(typeof variable);
    </script>

        这下结果应该是什么呢？显示"object"和"undefined"吗？当然不是了，两个alert调用都将显示"undefined"。

        所以undefined是脚本引擎定义的一个常量，它在脚本引擎初始化完毕后存在。它的实际作用是用来表示一个已定义的变量的为初始化状态(uninitialized)，比如var i;，这时这个i的值就是undefined，而i是实实在在define了的，只是未初始化。这时我们就可以写这样的表达式来对i做判断，比如if ( i == undefined )。如果从未在代码中出现过的变量被使用，这时的未定义的概念就是不undefined所描述的未初始化了，而是说明该变量完全未被登记到脚本引擎的上下文中。使用类似if ( abc == undefined )的语句，将得到类似上图中的第二个错误提示。

        在实际使用中，如果使用typeof来判断变量是否未定义，是可以完全兼容未定义(undefined)和未初始化(uninitialized)两种情况的，只是很多时我不喜欢使用 if ( typeof xxx == 'undefined' ) 这样的写法，因为literal的字符串容易拼写错误，对用习惯了的强类型语言的角度来看也显得不专业。


    KiMoGiGi 2006-12-03 01:04 发表评论
    ]]>    利用ProtoType开发的另一JavaScript框架http://www.cnitblog.com/seeyeah/archive/2006/11/26/19599.htmlKiMoGiGiKiMoGiGiSat, 25 Nov 2006 16:59:00 GMThttp://www.cnitblog.com/seeyeah/archive/2006/11/26/19599.htmlhttp://www.cnitblog.com/seeyeah/comments/19599.htmlhttp://www.cnitblog.com/seeyeah/archive/2006/11/26/19599.html#Feedback0http://www.cnitblog.com/seeyeah/comments/commentRss/19599.htmlhttp://www.cnitblog.com/seeyeah/services/trackbacks/19599.htmlhttp://script.aculo.us/

    http://www.cnitblog.com/Files/seeyeah/scriptaculous-js-1.6.5.zip

    KiMoGiGi 2006-11-26 00:59 发表评论
    ]]>