青青草在线免费观看,亚洲国产视频a,中文在线资源在线

關于JavaScript的cloneNode方法對于節點上的事件clone問題的研究。

我的測試環境是IE8，對于事件clone要注意一下3點：
1.運行時添加的事件不會被克隆，如下例：

a = document.getElementById('a'); //假設a是一個div
2 a.onclick = function () { alert(this.innerHTML); }
3

b = a.cloneNode();

2.解析HTML時原來帶的事件會被克隆，如下例：

3.通過attachEvent添加的事件會被克隆，如下例：

a = document.getElementById('a');
2    a.attachEvent('onclick', function () {
3          alert(this.innerHTML);
4    });
5

b = a.cloneNode();

最后如果想在clone時將節點其中的子節點一同clone的話，請使用cloneNode(true)。

posted @ 2009-10-18 13:28 Eric Song 閱讀(1042) | 評論 (0) | 編輯收藏

參考Prototype的Class.create寫了一個類似的實現，但是不是Ruby like OOP，使用上更像Java。

實現代碼：

1 function $A (Arguments) {
2     var result = [];
3     for (var i = 0; i < Arguments.length; i++)
4         result.push(Arguments[i]);
5     return result;
6 }
7
8 Class = {
9     create : function () {
10         var args = $A(arguments);
11         var parentClass = args.shift();
12         var properties;
13         if (parentClass instanceof Function)
14             properties = args.shift();
15         else if (parentClass instanceof Object) {
16             properties = parentClass;
17             parentClass = void 0;
18         }
19
20         var klazz = function () {
21             if (this.initialize) this.initialize.apply(this, arguments);
22         };
23
24         if (parentClass) {
25             var tmpClass = new Function;
26             tmpClass.prototype = parentClass.prototype;
27             klazz.prototype = new tmpClass();
28             klazz.prototype.constructor = klazz;
29         }
30
31         for (var key in properties) {
32             if (properties[key] instanceof Function && klazz.prototype[key] instanceof Function) {
33                 klazz.prototype[key] = (function () {
34                     var _parent = klazz.prototype[key];
35                     var _method = properties[key];
36                     return function() {
37                         var _this = this;
38                         $super = function(){
39                             _parent.apply(_this, arguments);
40                         }
41                         _method.apply(this, arguments);
42                     }
43                 })();
44             }
45             else
46                 klazz.prototype[key] = properties[key];
47         }
48
49         return klazz;
50     }
51 }

測試代碼：

1
2             T = Class.create({
3                 initialize : function (tt,mm) {
4                     alert("initialize T

");
5                     this.tt = tt;
6                     this.mm = mm;
7                 },
8                 l : function () {
9                     alert("f");
10                 },
11                 f : function () {
12                     alert(123);
13                 }
14             });
15
16             M = Class.create(T, {
17                 initialize : function (tt,mm,nn) {
18                     $super(tt,mm);
19                     alert("initialize M

");
20                     this.nn = nn;
21                 },
22                 f : function () {
23                     //$super(); 這里也可以不調用父類的f方法
24                     alert(456);
25                 },
26                 s : function () {
27                     alert("sssss");
28                 }
29             });
30
31             N = Class.create(M);
32
33             m = new N(1,2,3);
34             m.f();
35             m.l();
36             m.s();
37             alert(m.tt);
38             alert(m.mm);
39             alert(m.nn);
40             alert(m instanceof N);
41             alert(m instanceof M);
42             alert(m instanceof T);

在做的過程中，上面粗體部分不是像現在這樣實現的，遇到了一個怪異的問題，下面給出原來的實現：

1 var _parent = klazz.prototype[key];
2 var _method = properties[key];
3 klazz.prototype[key] = function() {
4     var _this = this;
5     $super = function(){
6          _parent.apply(_this, arguments);
7     }
8     _method.apply(this, arguments);
9 }

這種實現造成了klazz的prototype中的每個方法執行總是返回相同結果，原因是_parent和_method在create一個Class的時候已經被固定到properties的最后一個key上，所以在運行的時候會返回相同的結果，解決方法如同上面粗體部分，必須用一個函數封裝并立即執行返回內部函數，這是閉包的一種使用方式，這種做法類似把函數內的內容做一個快照，返回的內部函數存取變量的時候其實是從快照中取得，而不是從 properties中取得。

這個版本并不能用在生產環境中，由于時間倉促，肯定會有BUG或不完善的地方。所以建議大家還是使用Prototype的實現，我這個實現只是用來更加深刻的理解一些概念，比如變量作用域鏈、閉包等等的使用。

posted @ 2009-06-09 00:04 Eric Song 閱讀(615) | 評論 (0) | 編輯收藏

Tomcat亂碼問題研究，附帶AJAX亂碼問題研究。

很奇怪測試了多個應用服務器，只有Tomcat出現了亂碼問題。讓我們來分析一下原因，測試環境是Tomcat5.5.27，字符集編碼統一為UTF-8。

1.頁面靜態內容亂碼（非動態生成內容亂碼）
這一般是<%@ page pageEncoding="UTF-8" %>設置的問題，建議在每個頁面上都加上pageEncoding設定，讓應用服務器能正確把JSP文件按照設定的編碼轉換為Java文件，只要這個pageEncoding設置正確就可以避免靜態內容的亂碼。有人可能會說我沒有設置也沒有亂碼，那是因為應用服務器還可以讀取<%@ page contentType="text/html; charset=UTF-8" %>中的charset作為備選方案，雖然這是JSP規范中要求的，但是難保有的容器沒有實現或實現有BUG，所以有時候在某個應用服務器下（如Tomcat）不設置pageEncoding也可以，但是同樣的頁面拿到別的應用服務器下就不能保證不出現亂碼。

2.動態生成內容亂碼
新下載的Tomcat沒有經過任何特殊的設置，無論是GET和POST都出現亂碼。首先設置HTTP Connector（server.xml中監聽8080端口的那個Connector），加上URIEncoding="UTF-8"，消除了GET亂碼，再在JSP頁面中第一句加入<% request.setCharacterEncoding("UTF-8"); %>，消除了POST亂碼。
通過上面兩個設置我們發現，URIEncoding控制的是GET字符集編碼，Request的CharacterEncoding控制的是POST字符集編碼。
如果沒有上面那句<% request.setCharacterEncoding("UTF-8"); %>，在頁面起始加入<%= request.getCharacterEncoding() %>，在Tomcat下我們發現輸出null，在其他服務器下卻輸出UTF-8。這就是為什么在Tomcat下應該正確設置Request的CharacterEncoding的原因。
上面提到的<%@ page contentType="text/html; charset=UTF-8" %>，除了聲明返回給客戶端的流是text/html外，同時設置了Response的CharacterEncoding，即相當于執行了Response.setCharacterEncoding("UTF-8")這段代碼。它保證了服務器端生成的動態內容到達客戶端也不會亂碼。
但有一種情況下也不會出現亂碼，就是如下例這種情況，前提是沒有設置Request的CharacterEncoding：

1 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2 response.getWriter().write(request.getParameter("xxxxx"));
3 }

這種情況下提交過來的表單數據其實是ISO-8859-1的編碼，而返回給客戶端又沒有<%@ page contentType="text/html; charset=UTF-8" %>的設置，所以還是ISO-8859-1的編碼，但是為什么沒有亂碼呢？其實已經亂碼了，如果在第2行下斷點的話，會發現request.getParameter("xxxxx")的返回值就是亂碼。可以用一句Java代碼來解釋為什么客戶端顯示結果沒有亂碼，如下：

1 System.out.println(new String("你好，世界".getBytes("ISO-8859-1"), "ISO-8859-1");

很奇怪這句代碼，明明是中文，應該用GB2312或GBK之類的字符集編碼來getBytes，卻用了ISO-8859-1，事實證明，這種互逆操作對字符串本身沒有任何影響，只要getBytes和new String的時候字符集編碼是一致的就不會引起亂碼。
上面這句代碼正好說明了數據從客戶端POST到服務器端時是ISO-8859-1編碼，然后從服務器端寫回到客戶端還是ISO-8859-1編碼，所以就沒有造成亂碼，如果這里不是直接寫回到客戶端，而是forward到另一個JSP頁面，而這個頁面恰好使用了<%@ page contentType="text/html; charset=UTF-8" %>來設置Response的CharacterEncoding，那么在頁面中輸出xxxxx還會產生亂碼，同樣用一句Java代碼來解釋，如下：

1 System.out.println(new String("你好，世界".getBytes("ISO-8859-1"), "UTF-8"));

所以，最后結論是如果想POST到服務器端不亂碼就要設置Request的CharacterEncoding，寫回到客戶端不亂碼就要設置Response的CharacterEncoding，若是JSP頁面要設置<%@ page contentType="text/html; charset=UTF-8" %>。

3.AJAX亂碼問題（不借助任何JS框架，像Prototype之類的框架會對GET請求的queryString自動應用encodeURIComponent()編碼）
GET請求時，需要對queryString使用encodeURIComponent()編碼之后再提交到服務器。這是XMLHttpRequest規范所要求的。
POST請求時，不需要使用encodeURIComponent()。
通過對應用程序下斷點發現，GET請求和POST請求的數據發送到服務器端都是正常的沒有亂碼，但是服務器端生成的動態內容寫回客戶端卻是亂碼，說明Response的CharacterEncoding設置錯誤，反過來我們再想一下，我們根本就沒有設置過Response的CharacterEncoding，為什么呢？因為我們是以AJAX的方式提交表單，返回后不像JSP頁面那樣有<%@ page contentType="text/html; charset=UTF-8" %>來設置Response的CharacterEncoding，所以就會出錯。

綜合上述，解決的辦法就是各大網站提出的通用解決方案Filter，如果你的應用沒有用到AJAX，只設置Request的CharacterEncoding即可，否則Response的CharacterEncoding也要設置。下面是一個Filter的示例，只引用doFilter方法來說明問題：

1 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
2     request.setCharacterEncoding("UTF-8");
3     response.setCharacterEncoding("UTF-8");
4     chain.doFilter(request, response);
5 }

posted @ 2009-06-07 23:47 Eric Song 閱讀(1006) | 評論 (0) | 編輯收藏

對JavaScript的變量作用域的理解

作用域是一個抽象概念，在瀏覽器的JavaScript實現中會有這個概念，但是不同瀏覽器實現可能不同。

一、作用域的種類（自己感悟）
1.對象作用域，window及標簽元素都屬于對象作用域。
2.函數作用域，函數自身形成的作用域。
可以把作用域看作是上下文（context）之類的對象。

看下面的代碼
例0

breakE = 0;
2

var state = 1; //1
3

Person = function(name) { //2
4

var age = 20;
5

this.name = name;
6

this.show = function () { //3
7

alert(age);
8

alert(state);
9

alert(name);
alert(this.name);
10

}
11

alert(m);
12

}
13 Person.prototype.check = function () {};
14

m = new Person('mike'); //4
15

var j = new Person('Jerry'); //5
16

m.show(); //6

通過看上面這段代碼我們發現有時候定義變量時用var，有時候卻不用，這里有什么區別嗎？在此之前我們先定下規矩，那就是必須有一個全局作用域，就像是window對象的存在一樣，是作用域的最頂層。那么哪些變量被定義到作用域的最頂層呢？那就是state，對于不在任何函數或類中用var定義的變量存在于全局作用域中。那么全局作用域屬于作用域的哪種類型呢？那就是對象作用域。具體是哪個對象的作用域呢？非window對象莫屬。

我們可以把對象作用域想像成兩部分，左面部分是對象級別的，保存的是和對象綁定的成員屬性（無論是變量還是函數），通過this來訪問的。右面的部分是作用域級別的，保存的是var定義的屬性（無論是變量還是函數），可以直接通過變量名稱訪問。對于window來說它是個特殊體，從用var定義的變量可以用this來訪問就能看出問題，我個人猜測window對象既是JavaScript的頂層對象又是頂層作用域，所以才會有這種效果。
另一種情況就是標簽元素的對象作用域和全局作用域非常的像，如下例：

//例1
2

<input type='button' value='click me' onclick='alert(value)'/>
3

//例2
4

<input type='button' value='click me' onclick='alert(this.value)'/>
5

//例3
6

function test() {
7

alert(value);
8

alert(this.value);
9

}
10

很奇怪為什么例1和例2訪問value和全局作用域里的var定義的變量的行為是一致的，按理說value應該屬于input標簽元素對象的成員屬性，訪問對象的成員屬性應該用this來訪問，我們自定義的類，如果成員方法想訪問成員變量都需要加this的，就像最上面的例子里的this.show方法訪問this.name成員變量一樣。而對于例3，勤快的讀者如果運行一下便知一定會出錯的，第一句系統會報value未定義（除非你在全局作用域定義過value變量），第二句會打印出undefined。為什么會這樣呢？這就要引出作用域鏈這個概念了，后面會解釋這個概念的。

反觀函數作用域，由于函數中用var定義的變量不能用this來訪問，所以在函數作用域中不再像對象作用域那樣分兩部分，而this實際保存的是與該函數綁定的對象的引用，也就是說this在函數中有特殊的含義，是不能挪作它用的。

二、作用域鏈
作用域是可以嵌套的，而嵌套的結果就形成了作用域鏈，如例0所示，我們來描述一下作用域鏈：
全局作用域<----Person函數作用域<-----show函數作用域
在全局作用域中可以訪問哪些變量呢（注意我現在指的只是作用域中的變量）？
1.state
2.j
在Person函數作用域中可以訪問哪些變量呢？
1.全局作用域中的所有可訪問的變量
2.name（參數）
3.age
在show函數中又有哪些變量可以被訪問呢？
1.全局作用域中的所有可訪問變量
2.Person函數作用域中所有可訪問變量
3.如若show函數中還定義了var變量也要加入show函數作用域

如果在show中訪問一個x變量，首先從show函數作用域里查是否有x這個變量，如果沒有再查Person作用域，如果還沒有的話再查全局作用域，找到就返回該變量。
講解到這里我們發現一個問題，似乎作用域是定義時生成塊級作用域（即單獨的對象作用域和函數作用域）而運行時生成作用域鏈，這就是詞法作用域的由來。有了這種作用域就構成了閉包的基礎。
下面是一個稍微特殊的例子：

1 function test() {
2     test2();
3 }
4
5 function test3() {
6     test2 = function() {
7         alert("test2");
8     }
9     test();
10 }

定義test的時候test2還不存在，但是調用test的時候，test2就存在了，這說明了作用域鏈確實是運行時生成的。

通過作用域鏈如何解釋例1、2、3呢？
我的分析是對于HTML元素來說當頁面解析的時候，元素被解析成DOM樹，HTML元素里的標準屬性作為該元素對象作用域的變量（類似var定義的那種），而非該元素DOM對象的成員屬性（類似this定義的那種），這樣就解釋了兩個問題：
1.在頁面上預定義的HTML元素標準屬性是不能用delete和removeAttribute刪除的。
2.onclick屬于input元素的一個方法，那么這個作用域鏈應該像下面這樣：
   全局作用域<-----HTML元素作用域<-------onclick函數作用域
   value變量在哪個作用域里呢？答案是HTML元素作用域中。所以onclick不但可以訪問而且加不加this都可以。
那么例3的作用域鏈是什么樣的呢？如下：
    全局作用域<-----test函數作用域
    全局作用域<-----HTML元素作用域<-------onclick函數作用域
沒錯是兩條，因為當單擊按鈕后執行到onclick函數中時走的是第二條鏈，而在onclick中調用了test函數時，走的是第一條鏈。
顯然value還是定義在HTML元素作用域中，而test想訪問value值一定是訪問不到的。

對于這個問題我還測試了一下非標準屬性，如下例：

測試發現非標準的HTML元素屬性可以被刪除，但是delete語句執行時必須用this來引用（IE中測試），直接訪問如alert到沒有這個限制。
說明bb是input對象屬性是沒錯的，因為它可以被刪除，但是如果它沒有被刪除的話alert(bb)還是能顯示出來的，說明這類屬性很特殊，具體怎么解釋我還沒有想好，如果有朋友能解釋的通，請告知我。

三、什么是閉包
show函數顯然是一個閉包，但是它是由類的構造函數生成的，和另一種形式其實是一樣的，代碼如下：

function getFunc (a, b) {
2

return function () {
3

alert(a - b);
4

}
5

}
6

var func1 = getFunc(10,5);
8

func1();
9

var func2 = getFunc(20,30);
11

func2();

上面的代碼func1函數無論我執行多少次都顯示5，func2函數無論我執行多少次都顯示-10，這和例0是多么的像呀，例0中m.show()無論執行多少次都能顯示'mike'，j.show()無論執行多少次都能顯示'Jerry'（行號9那行在起作用，先不考慮this.name那行）。這就是閉包，把作用域鏈中變化的變量給固定化，然后把作用域鏈和函數本身進行綁定，無論我在什么地方執行函數，函數的作用域鏈始終是它定義的時候那條。

四、關于對象成員的訪問（即this能引用的那些屬性），我只是在猜想，可能的作用域鏈應該如下：
    全局作用域<-------m對象作用域<-------m.test函數作用域
    m的對象成員（類中this定義的）保存在對象作用域的左半部，m的作用域變量（類中var定義的）保存在對象作用域的右半部。
    m.test函數要訪問對象成員時從對象作用域的左半部檢索，要訪問作用域變量時從對象作用域的右半部檢索。
    同時這個作用域鏈還解答了另一個問題，即原型方法（公共方法）為什么不能訪問類中用var定義的變量。
    看例0即可知check和Person根本就不在同一個鏈上，又談何能訪問呢？

至此把JavaScript變量作用域講解完畢，我覺得這個還是蠻重要的，如果一定要有個比較的話，應該和Java中的ClassLoader有同樣的重要性吧。大家借鑒的同時請多給我指出錯誤，因為這其中有一些還是我的猜測。

posted @ 2009-05-19 02:06 Eric Song 閱讀(511) | 評論 (0) | 編輯收藏

關于CSS的Position的兩篇好文章

區分CSS中position定位屬性absolute與relative

CSS教程:CSS中的定位（position）

posted @ 2009-04-18 15:03 Eric Song 閱讀(149) | 評論 (0) | 編輯收藏

IE document compatMode

compatMode Property

Gets a value that indicates whether standards-compliant mode is switched on for the object.

Syntax

[ sMode = ] object.compatMode

Possible Values

sMode String that receives one of the following values.

BackCompatStandards-compliant mode is not switched on.

CSS1CompatStandards-compliant mode is switched on.

The property is read-only. The property has no default value.

Remarks

With Microsoft Internet Explorer 6 and later, you switch on standards-compliant mode by including the !DOCTYPE declaration at the top of your document, specifying a valid Label in the declaration, and in some cases, specifying the Definition or URL. The Label element specifies the unique name of the Document Type Definition (DTD), and can be appended with the version number of the DTD. The Definition element specifies the definition of the DTD that is specified in the Label. The URL element specifies the location of the DTD.

When standards-compliant mode is switched on (also called "strict mode"), Windows Internet Explorer displays the document according to the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard. When standards-compliant mode is not switched on (also called "quirks mode"), the document is displayed as it was displayed in previous versions of Internet Explorer.

The compatMode property is deprecated in Internet Explorer 8 in favor of the documentMode property.

IE8 documentMode

Syntax

[ vMode = ] object.documentMode

Possible Values

vMode Floating-point that receives one of the following values.

5Microsoft Internet Explorer 5 mode (also known as "quirks mode").

7Internet Explorer 7 Standards mode.

8Internet Explorer 8 Standards mode.

The property is read-only. The property has no default value.

Remarks

This property is available in all compatibility modes.

The document compatibility mode of a Web page determines how Internet Explorer 8 interprets and renders the page. Page authors generally use meta elements to specify X-UA-Compatible HTTP-EQUIV headers that specify the document compatibility mode. For more information, see Defining Document Compatibility. In versions of Internet Explorer previous to Internet Explorer 8, compatMode was solely determined by DOCTYPE.

posted @ 2009-04-15 17:37 Eric Song 閱讀(497) | 評論 (0) | 編輯收藏

Oracle Distinct注意事項

在使用Distinct時，不能直接對count操作，需要通過子查詢來實現，如下
select count(1) from (select distinct * from table_name)

posted @ 2009-03-19 20:49 Eric Song 閱讀(790) | 評論 (0) | 編輯收藏

Oracle數據庫建立Synonym

通過dblink查詢表 select * from schema_name.table_or_view_name@dblink
建立Synonym create synonym synonym_name for schema_name.table_or_view_name@dblink

posted @ 2009-03-19 20:48 Eric Song 閱讀(182) | 評論 (0) | 編輯收藏

JavaScript對form及form中的引用。

通常我們對form的引用通過給form加上id來實現，其實我們可以使用name來實現。兩者的不同是id需要用document.getElementById()來檢索，name通過document.forms[form_name]來檢索，在form中的表單元素都有name的時候可以通過document.forms[form_name][element_name]來檢索到指定的表單元素。另一種方法可以通過document.forms[form_name].elements來獲得表單元素的集合，但是其中不包括input type='image'，所有這些方法在IE7、Opera、FF2、FF3、Chrome、Safari上測試通過。

posted @ 2009-03-19 20:44 Eric Song 閱讀(262) | 評論 (1) | 編輯收藏

jad和Java Decompiler的小小不同

今天用Java Decompiler反編譯一個類發現其中字符串連加的代碼反編譯的結果和jad的不同。
源碼一般somestr = "a" + "b" + "c" + "d" ....;

jad反編譯過來會自動生成一個StringBuffer，然后把各個子串append到一起。如：
somestr = (new StringBuilder(String.valueOf("a"))).append("b").append("c").append("d")....).toString();

Java Decompiler反編譯的代碼基本上和原來一樣，有字節碼查看工具看出，編譯器確實對字符串相加做了優化。請在eclipse使用byte outline插件查看。但是有一種情況是例外的，如：
somestr = "a" + "b";
somestr += "c" + "d";
編譯器會為每一條語句建立一個StringBuilder，像上面的情況請把兩句合并成一句。

posted @ 2009-03-10 11:25 Eric Song 閱讀(1160) | 評論 (2) | 編輯收藏

僅列出標題

誰動了我的代碼

News

常用鏈接

留言簿

隨筆分類

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜