以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

關於 IE6/7 不支援 Element 自訂方法屬性繼承的可行解決方案

9/2 09' icon

由 prototype 談起

物件導向語言,支援「繼承」的概念,也就是父物件有的方法及屬性,物件本身也一應具備。於是設計人員可以直接在上層物件定義好一堆自己專屬或改良的方法和屬性,這比設計副程式庫還要來得方便許多。

舉個例子,Array 是 Javascript 中的原型物件,任何需要使用到陣列時,只要宣告:

就可以使用陣列所有的方法和屬性,例如 ay.push()。

不僅如此,如果你嫌原生 Array 物件方法或屬性不夠時,你還可以自訂,例如:

那麼,以下語法的測試結果就會跳出一個 Hello World

上例是簡單加了個名為 sayHello 的屬性到 Array 物件中。所以,你就可以用同樣方法,設計出一套屬於自己的,或是你也願意開放出來給大家使用的自訂方法。

自訂物件

同樣的,你也可以自訂物件,並讓物件擁有自己的屬性及方法,如:

那麼,有沒有什麼方法,可以一次為所有 HTML 中的元件,加上自定的方法和屬性呢?這時就要來了解一下,瀏覽器對於 HTML 是怎麼對待的。

Element 物件

在使用 DOM 操作處理時,經常會用到一個指令,叫作 createElement(),這個指令相當於在 HTML 文件中加上新的標籤,所以,這些標籤,在瀏覽器眼中,統稱為「Element」,例如:

document.getElementById(node) 這是一個 HTMLDivElement
document.getElementsByTagName('li')[0] 這是一個 HTMLLiElement
document.getElementsByTagName('li') 這是一個 HTMLCollection (由一群 <li> 組成的集合)

注意上列三則,瀏覽器的行為,第三則,是一個集合,而非 Element。

所以,這時就產生一個有趣的物件,叫作 Element,由 id 取得的物件,就是 HTMLxxxElement,xxx 就是標籤種類,如果 xxx 是表單 <form> 那就是 HTMLFormElement,如果是段落 <p> 那就是 HTMLParagraphElement,依此類推。

這些物件中,共同特性就是全部都是 Element,所以,如果能在 Element 上加上自己的方法及屬性,那不就很完美?

是的!如果你腦筋動得快,jQuery 和 ptototype 都是這麼搞的!

然而,世上仍存在數量龐大的 IE6/7

很不幸的,在 IE6/7 (IE8 已經把 Element 列為物件)把前述所有項目都視為 [object],但是是什麼 object 也看不出來,因此,在 IE 6/7 中,沒有辦法對 Element 自訂方法和屬性,如果你在 IE 中測試:

alert(window.Element); 得到的結論是 undefined。

這就造成相當大困擾了。例如,現在想把圖層的高度回傳值,不要帶有 px 單位,一般是這麼寫:

每次都要寫這麼長一串,不太經濟,於是有了快取函式(Cached Function)寫法,也就是 jQuery 和 prototype 的寫法,簡化如下:

注意:上述只是原理例,並不嚴謹。

如此一來,就可以簡單使用以下語法取得不帶單位的圖層高度:

可惜,這樣的語法,IE6/7 完全不能接受!除非你和我一樣,可以要求客戶不准用 IE,那就不用再看下去了。

解決方案

IE6/7 仍支援繼承(inheritance)只不過不支援 window.Element 而已,如果多花點功夫這麼寫:

那就一樣可以用 $(node).height() 來取得物件高度。這個方法,在 FireFox、Safari、Opera、Chrome 也都適用。

原理就是先定義好物件,然後在每個物件加上自訂的方法和屬性。

上例中,只有一個自定方法,效能上就沒太大差別,如果你自定了一大堆方法和屬性,每次呼叫 $(node),就要把這個物件套上一堆辺法和屬性,效能上就差了,如果瀏覽器處理 Javascript 的功力上不足,那執行起來就鈍鈍的。

但如果是直接定義在 Element 的 prototype 中,就不一樣了,透過繼承的特性,每個 $(node ) 被定義出來就自動包含了這些方法和屬性,其效能,便利性自是不可同日而語。

不過,也沒辦法,暫時只能這樣,完整的範例如下:

上例的自訂屬性中,加了一個 test 屬性,這是一個簡單判別,當 IE 同一 id 再被定義時,如果物件已經存在,就不需要再執行一次宣告自訂方法和屬性的動作。

建議事項

如果你明白了解決方案的原理,再仔細思考,就會發現,每次呼叫 $(node),在 IE 中就要套一堆內容。因此,為避免對瀏覽器消耗過甚,建議這麼寫:

Enjoy !

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

click here.   2017/9/15 上午 12:04:00

I'm really enjoying the theme/design of your website.
Do you ever run into any web browser compatibility problems?
A few of my blog readers have complained about my blog not
working correctly in Explorer but looks great in Firefox.
Do you have any advice to help fix this problem?

Estelle   2017/9/11 下午 10:43:00

Greetings! Very helpful advice in this particular article!

It is the little changes that make the most important changes.
Thanks a lot for sharing!

Francesca   2017/9/11 下午 07:23:00

Hello, i read your blog from time to time and i own a similar one and i was just wondering if
you get a lot of spam feedback? If so how do you reduce it, any plugin or anything you
can recommend? I get so much lately it's driving me mad so any support is very much appreciated.

globalmoringaday.org   2017/9/11 上午 02:11:00

I visited multiple websites but the audio feature for audio songs current at this web site is in fact excellent.

Can you have an operation to make you taller?   2017/8/31 上午 06:37:00

Howdy! Do you use Twitter? I'd like to follow you if that would
be okay. I'm absolutely enjoying your blog and look forward to new
updates.

   2017/8/21 下午 04:30:00

This is my first time pay a quick visit at here and i am really pleassant to read everthing at single place.

How can we increase our height?   2017/8/19 下午 05:51:00

I was suggested this web site by my cousin. I'm not sure whether this post is written by him as
nobody else know such detailed about my trouble.
You are incredible! Thanks!

http://invinciblepage768.snack.ws   2017/8/13 下午 02:03:00

What's up, all the time i used to check web site posts here early in the dawn, for the reason that i love to
find out more and more.

cheryllsiemering.hatenablog.com   2017/8/12 下午 04:00:00

Hi, I do believe this is an excellent website. I stumbledupon it ;) I'm going to revisit once again since i have book marked
it. Money and freedom is the greatest way to change, may you be
rich and continue to help other people.

How do you stretch your Achilles?   2017/8/10 上午 01:31:00

Today, I went to the beach with my children. I found a sea shell and gave it to my 4 year old
daughter and said "You can hear the ocean if you put this to your ear." She placed the shell to her ear and screamed.

There was a hermit crab inside and it pinched her ear. She never wants to go back!
LoL I know this is entirely off topic but I had to tell someone!

http://celestinesearing.weebly.com   2017/8/7 上午 10:57:00

This is the perfect blog for anyone who hopes to find out about this topic.

You realize so much its almost tough to argue with you
(not that I actually would want to…HaHa). You certainly put a new spin on a topic which has been discussed for many years.
Great stuff, just excellent!

http://laceysabata.blog.fc2.com/?xml   2017/8/6 下午 10:19:00

Hello to all, the contents existing at this web site are in fact awesome for people knowledge, well, keep
up the nice work fellows.

What causes burning pain in Achilles tendon?   2017/7/31 上午 11:50:00

Thanks a bunch for sharing this with all of us you really recognize
what you're talking about! Bookmarked. Kindly also
discuss with my site =). We could have a hyperlink trade contract between us

saundrarandall.wordpress.com   2017/7/31 上午 03:21:00

What's up, all the time i used to check webpage posts here early
in the daylight, as i enjoy to learn more and more.

How did the Achilles tendon get it's name?   2017/7/28 上午 10:56:00

Please let me know if you're looking for a writer for
your weblog. You have some really good posts and
I believe I would be a good asset. If you ever want to take some of the load off, I'd really like to write some content for your blog in exchange for a link back
to mine. Please send me an email if interested.

Many thanks!

Can exercise increase your height?   2017/7/23 上午 06:26:00

Your style is very unique in comparison to other folks I've read stuff
from. Many thanks for posting when you've got the opportunity, Guess
I'll just book mark this site.

foot pain side   2017/7/4 上午 04:02:00

Glad to be one of the visitors on this amazing web site :
D.

foot pain differential diagnosis   2017/7/3 下午 02:24:00

I create a comment whenever I appreciate a article on a site or I have something to valuable to contribute to
the conversation. Usually it's a result of the passion displayed in the post I read.

And after this article 【卜維丰】關於 IE 不支援 Element/Object
自訂方法屬性繼承的可行解決方案. I was actually moved enough to drop a comment :-P
I actually do have 2 questions for you if you don't mind.
Is it simply me or does it give the impression like a few of these comments look as if
they are coming from brain dead people? :-P And, if you are posting at additional places, I'd
like to keep up with you. Would you list all of
all your shared pages like your linkedin profile, Facebook page
or twitter feed?

manicure   2017/5/4 上午 05:29:00

I'd like to find out more? I'd love to find
out more details.

manicure   2017/4/11 下午 06:27:00

Spot on with this write-up, I actually think this amazing site needs far more attention. I'll probably be returning to see more, thanks
for the advice!

卜維丰   2011/11/8 下午 04:10:00

寫法不同

老鼠3   2011/11/8 下午 03:14:00

卜老師~
我有問題(舉手),我還是不了解prototype。我想問
1)
myObj=function(){
this.version='1.0';
}
myObj.prototype.sayHello=function(){
alert('Hello');
}
var myTest=new myObj();
myTest.sayHello();


2)
myObj=function(){
this.version='1.0';
this.sayHello=function(){
alert('Hello');
}
}

var myTest=new myObj();
myTest.sayHello();

這二種有什麼不同~~


給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: