自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Java工程師可能不知道的那些FE潛規(guī)則

作者：sslaowan
開發(fā) 后端
可如今寫一個稍微復(fù)雜點的小應(yīng)用，要兼容所有瀏覽器，才發(fā)現(xiàn)真是太難了，難怪FE是一個獨立的工種，有別于我們這些Java工程師了。

寫了一個多月JavaScript，感覺如今可不比幾年前只有IE6的年代，而且過去只是用JS寫個Ajax或者是簡單的表單驗證，可如今寫一個稍微復(fù)雜點的小應(yīng)用，要兼容所有瀏覽器，才發(fā)現(xiàn)真是太難了，難怪FE是一個獨立的工種，有別于我們這些Java工程師了。如果你也不是專業(yè)FE，那么估計也會跟我一樣在這些地方翻船，或許你所遇到的情況比我這些還多，那么歡迎補充。

1 首先是最簡單的select標(biāo)簽，就有諸多不兼容：

A、 cloneNode方法，對于非IE瀏覽器沒有問題，對于IE瀏覽器，我遇到的問題包括：

1）option selected的會clone不過去，然后會將***個option作為selected值

2）事件clone也會有問題

B、Readonly：對于IE6，可以通過以下方法將select設(shè)為readonly：

obj.onbeforeactive=function(){return false}
obj.onfocus=function(){obj.blur();}
obj.onmouseover=function(){obj.setCapture();}
obj.onmouseout=function(){obj.releaseCapture();}

對于其他瀏覽器，我采用的是元素替代法，動態(tài)創(chuàng)建一個input標(biāo)簽，把值賦給它，然后將select隱藏。

C、select的z-index對于IE6無效，網(wǎng)上有很多關(guān)于這個討論，jQuery采用一個iframe搞定

D、動態(tài)添加option的方法不同，這個網(wǎng)上一搜一大堆

E、對于onclick和onchange的響應(yīng)不同，在FF下可以在onclick select時動態(tài)讀取option值然后構(gòu)建option，然后選中一個值后執(zhí)行onchange事件，但是IE下不能這樣做。

2 css對offsetWidth之類的理解不同

http://newleague.iteye.com/blog/765535

3 對于vertical-align baseline的理解不同：

http://w3help.org/zh-cn/causes/RD1016

4 設(shè)置背景色

element.style.backgroundColor

在firefox下想改變顏色，必須先設(shè)為null，再設(shè)為其他顏色才行，即先取消原來的顏色。

在IE下，想取消顏色，必須設(shè)為''才行，而換其他顏色，無需先去掉之前的顏色，而如果你設(shè)成了null，反倒不行了。

5 不同瀏覽器去padding的理解不同

6 不同瀏覽器對強制換行和強制不換行的理解不同：

http://www.cftea.com/c/2009/01/QPDZU40MNW8FYYG3.asp

最惡心的是對于IE6，如果是<td><span>我是蚊子</span></td>，那么在td上寫了word-break：keep-all依然無效，必須在span上也寫。
 

7 獲得head節(jié)點的方式不同

在Firefox下可以用window.head，而所有瀏覽器都兼容的方式是document.getElementsByTagName('head')[0]

8 往head上添加css code的方法不同，也就是動態(tài)添加<style>標(biāo)簽。

IE下可以用var style=document.createStyleSheet();style.cssText=cssCode;

而有文章說，在Windows上的IE，用createStyleSheet返回的是styleElement的styleSheet，而在Mac上返回的是styleElement自己。

在其他瀏覽器下需要document.createElement('style');

然后還有區(qū)分是否具有styleSheet屬性。

這個很容易搜到。

9 對于onchange事件，firefox瀏覽器可以注冊在table，div等組件上，然后通過冒泡，攔截input，select等發(fā)出的事件，而IE不行，必須綁定到相應(yīng)的組件上

10 將input設(shè)為readonly=true，其依然會響應(yīng)keypress，keyup，keydown，onblur事件

11 IE和非IE對于停止冒泡和取消默認(rèn)行為的方法不同

12 大家都知道IE和非IE在動態(tài)添加事件時使用的方法不同，IE是attachEvent，其他是addListener，然后參數(shù)也不同。更重要的是如果一個控件綁定了多個function，他們綁定和執(zhí)行的順序是不同的，IE是跟綁定順序相反，其他是跟綁定順序相同

13 獲得當(dāng)前事件不同，一個是window.event一個是直接接受event

14 FF下執(zhí)行offset系列非常慢，但是IE下比較快，而IE的改變CSS的執(zhí)行非常慢。

Firefox6比Firefox3.6速度快的多，相差好幾百倍（針對一個400行*50列的表格的JS處理）

15 如果大量動態(tài)改變css，那么使用document.createDocumentFragment，然后將需要修改樣式的Dom獲取出來appendChild到這個臨時的fragment上，修改完css后再append回去即可，這樣性能能差好幾百倍。

16 瀏覽器加載網(wǎng)頁時，順序讀取html，遇到外部js鏈接會讀進(jìn)來，然后按順序執(zhí)行，邊解釋邊執(zhí)行，而對于外部css，圖片等則是啟動另外的線程連接服務(wù)器去獲取。

IE對于CSS引入有限制，我沒試過，但有篇文章討論：http://blog.csdn.net/ydshang/article/details/4158211

17 表格定位某一行，可以通過改變scrollTop來實現(xiàn)，當(dāng)然如果出現(xiàn)了滾動條的話

18 IE的Dom用完要記得釋放，可以在unload方法中，否則會出現(xiàn)內(nèi)存泄露

19 unload方法在各個瀏覽器里各不相同，我之前的文章里有介紹。http://sslaowan.iteye.com/blog/1128209

20 我知道了為什么FE最喜歡的瀏覽器是FF，最討厭的是IE6，恨不得IE6去死，其他IE也不怎么樣。但是Chrome，Opera也各有各的bug

21 Ajax當(dāng)使用同步模式時，如果訪問的鏈接是錯誤的，那么FF會在控制臺報錯，而IE會直接彈出個對話框，然后就崩潰了。

22 FF支持document.getElementsByClass等方法，IE不支持，可以自己寫一個。

23 trim方法在IE和FF下不同，需要自己寫一個，可以用正則表達(dá)式

24 動態(tài)設(shè)置元素的css class在IE和非IE瀏覽器下也不同

25 有時本地字體庫會影響你的字體，大小等顯示，但是有時甚至?xí)绊懩愕牟季?/p>

26 字符串也可以使用><等符號比較大小，但是是字符串比較，不要被騙了。

27 JS中this問題非常讓人困惑

28 判斷瀏覽器可以有很多方法，主流是兩大類，agent判斷法和特性法，后者好像更推薦

29 JS是面向?qū)ο笳Z言，對象.屬性=值 只影響當(dāng)前對象，而對象.prototype.屬性則影響整個類。非IE瀏覽器可以覆蓋DOM對象的類方法，但是IE不行。

30 getComputedStyle，獲得外部添加的css，F(xiàn)F支持，IE不支持，具體看這篇文章http://www.jb51.net/article/16128.htm

31 IE和Chrome支持outerHTML方法，其他瀏覽器沒有。相關(guān)討論：http://walsh.iteye.com/blog/261966，http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox

32 還有一個特悲劇的，IE下會把document.[formname.]控件Id當(dāng)成那個控件，如果把一個控件比如input的id設(shè)為了submit，那么form.submit()就會報錯。

2011-8-2***dd

33 如果利用全角空格進(jìn)行布局時，F(xiàn)irefox支持，而IE會去除只剩一個，但是是在某些情況下的，具體看這篇文章：http://w3help.org/zh-cn/causes/BT1025

34 透明度：

filter:alpha(opacity=0); /* IE */
-moz-opacity:0.3; /* Moz + FF */
opacity: 0.3;

至于用不用var的區(qū)別，undefined和null的區(qū)別，Ajax構(gòu)建的不同方式，這些一般的Java程序員都了解了。

很多Java程序員也會使用JS框架，比如JQuery，Extjs和Dojo，她們都幫我們屏蔽了很多兼容性問題。Dojo提供了Java一樣的面向?qū)ο髾C(jī)制。

拋磚引玉，你還遇到過什么陷阱，那些FE都知道，而我們Java工程師不知道？

有同學(xué)要求例子，有些只是小知識，有了鏈接，那么給一個我做的過程中寫的實驗程序吧，主要是驗證select，還有readonly之后的input對于keypress等事件的響應(yīng)：

  1. <head>    
  2. <script>    
  3.     function addListener(element,e,fn){    
  4.      if(element.addEventListener){    
  5.           element.addEventListener(e,fn,false);    
  6.      } else {    
  7.           element.attachEvent("on" + e,fn);    
  8.      }    
  9.    }    
  10.        
  11.    function getEventSource(event){    
  12.         event = window.event?window.event:event;     
  13.         var source = event.target || event.srcElement;       
  14.         return source;    
  15.   }    
  16.     
  17.       
  18.   function init(e){    
  19.     var provChoice= document.getElementById('prov');    
  20.      fillPro(provChoice);         
  21.      addListener(provChoice,'change',fillCity);    
  22.     var coChoice= document.getElementById('country');    
  23.      addListener(coChoice,'change',function(){alert('a');});    
  24.     var selects=document.getElementsByTagName('select');        
  25.     for(var i=0;i<selects.length;i++){    
  26.        selects[i].cloneNode=function(deep){    
  27.         var temp=document.createElement('div');    
  28.         temp.innerHTML=this.outerHTML;    
  29.         return temp.childNodes[0];          
  30.       }    
  31.           
  32.           
  33.    }        
  34.        
  35.     document.getElementById('cloneCo').appendChild(coChoice.cloneNode(true));    
  36.     var coTD= document.getElementById('co');    
  37.     document.getElementById('r1').appendChild(coTD.cloneNode(true));    
  38.         
  39.     document.getElementById('abc').readOnly=true;    
  40.     document.getElementById('abc').onkeydown=function(e){    
  41.          e.preventDefault();    
  42.          e.stopPropagation();    
  43.     }    
  44.         
  45.     document.getElementById('abc').onkeypress=function(e){    
  46.         alert('b');    
  47.     }    
  48.         
  49.     document.getElementById('abc').onchange=function(e){    
  50.         alert('c');    
  51.     }    
  52.         
  53.     document.getElementById('abc').onblur=function(e){    
  54.         alert('d');    
  55.         document.getElementById('abc').value='add';    
  56.     }    
  57.   }    
  58.      
  59.   function fillPro(pro){    
  60.       pro.options[0]=new Option('BJ','北京');    
  61.       pro.options[1]=new Option('TJ','天津');    
  62.       pro.options[2]=new Option('HLJ','黑龍江');    
  63.       pro.options[3]=new Option('SH','上海');    
  64.   }    
  65.       
  66.   function fillCity(e){    
  67.        var c= document.getElementById('city');    
  68.        if( document.getElementById('prov').value=='黑龍江'){    
  69.          c.options[0]=new Option('HRB','哈爾濱');    
  70.          c.options[1]=new Option('MDJ','牡丹江');    
  71.          c.options[2]=new Option('QQHR','齊齊哈爾');    
  72.          c.options[3]=new Option('JMS','佳木斯');    
  73.        }    
  74.          
  75.          
  76.   }    
  77.        
  78. </script>    
  79. </head>    
  80. <body onload='init(event)'>    
  81.  <table>    
  82.    <tr id='r1'>    
  83.      <td id='co'>    
  84.        <select id='country' name='country'>    
  85.         <option value='UK'>UK</option>    
  86.         <option value='USA'>USA</option>    
  87.         <option value='CHINA' selected>China</option>    
  88.        </select>    
  89.      </td>    
  90.      <td>    
  91.        <select id='prov' name='prov'></select>    
  92.      </td>    
  93.      <td>    
  94.        <select id='city' name='city'></select>    
  95.      </td>    
  96.      <td id='cloneCo'></td>    
  97.      <td>    
  98.        <input id='abc' value='0'  onkeypress='return alert("a1"); '/>    
  99.      </td>           
  100.    <tr>    
  101.  <table>    
  102.     
  103. </body>    
  104. </html>   

原文：http://sslaowan.iteye.com/

【編輯推薦】

  1. 深入Java，初探JVM
  2. 電影《Java風(fēng)云》預(yù)告片
  3. Flex與Java中的Object交互
  4. Flex前端與Java服務(wù)端交互,反射機(jī)制挑大旗
  5. 基于Java的HBase客戶端編程
責(zé)任編輯：陳貽新 來源： sslaowan
Java
相關(guān)推薦

2012-11-23 10:57:44

Shell

2015-11-02 09:16:08

2023-01-29 09:46:47

Dialog彈窗模態(tài)

2023-02-27 09:20:24

絕對定位CSS

2015-08-13 09:03:14

調(diào)試技巧

2019-11-20 10:25:06

sudoLinux

2020-01-29 19:40:36

Python美好，一直在身邊Line

2021-01-05 11:22:58

Python字符串代碼

2021-07-12 07:59:06

安全 HTML 屬性

2014-12-08 10:39:15

2019-11-25 14:05:47

Python裝飾器數(shù)據(jù)

2021-12-17 00:10:00

ChromeDevtools功能

2010-07-29 09:18:31

Linux用戶

2022-09-20 11:58:27

NpmNode.js

2016-09-05 13:14:11

2024-03-04 00:00:00

Kubernetes技巧API

2021-02-08 22:32:43

程序員 靜態(tài)網(wǎng)頁

2010-08-06 13:15:35

2010-07-26 13:24:11

2020-05-09 08:48:21

JavaScript原生方法代碼
點贊
收藏

51CTO技術(shù)棧公眾號