欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript Array.sort() 跨瀏覽器下需要考慮的問題

 更新時(shí)間:2009年12月07日 00:58:34   作者:  
最近組里項(xiàng)目需要一個(gè)簡單的Table排序的功能,這個(gè)功能實(shí)現(xiàn)起來很簡單,并且網(wǎng)上也有很多現(xiàn)成的代碼,因此任務(wù)很快完成。
然而在做跨瀏覽器的測試時(shí)在chrome瀏覽器下發(fā)現(xiàn)了一個(gè)問題,測試人員發(fā)現(xiàn)(見圖1),在chrome下依據(jù)某列排序時(shí),如果兩行的排序數(shù)值相同,chrome不是按通常情況保持這兩列的順序不變,而是將他們順序調(diào)換。在google一下問題之后,我們發(fā)現(xiàn)原來是當(dāng)初ECMAscript規(guī)范中并未規(guī)定具體的sort算法,所以導(dǎo)致各個(gè)瀏覽器都有自己的sort算法,然而由于有些廠商是基于不穩(wěn)定的排序算法實(shí)現(xiàn)的,如chrome和Mozilla/Firefox 3.0以前的排序算法都是不穩(wěn)定的,不過IE是穩(wěn)定的排序算法。這種算法實(shí)現(xiàn)的差異也導(dǎo)致了圖表在不同瀏覽器下顯示的結(jié)果不一致。

 

                    圖1:數(shù)組左邊的數(shù)字表示它初始化時(shí)候的順序

思考了一下,我和組里另外一個(gè)成員分別給出了自己的解決方法,他的意見是通過自己實(shí)現(xiàn)具體的sort算法來統(tǒng)一控制,鑒于網(wǎng)上的現(xiàn)成的排序算法很多并且排序算法是程序員的基礎(chǔ),這種方式實(shí)現(xiàn)起來并不復(fù)雜,唯一的工作就是代碼的實(shí)現(xiàn)。不過我認(rèn)為其實(shí)有更簡單的方法,因?yàn)槲覀兊臄?shù)據(jù)是基于XSLT從xml中解析出來的,而XSLT是知道每行數(shù)據(jù)的的序號(hào)的(當(dāng)然如果是由服務(wù)器端代碼從數(shù)據(jù)庫或webservice讀取一樣很容易取該值),所以我認(rèn)為可以在XSLT中給每列添加一個(gè)Index屬性,e.g.第一行Index=1,第二行Index=2...這樣在sort比較大小的時(shí)候如果發(fā)現(xiàn)兩個(gè)數(shù)值相同,則比較其行號(hào),這樣最終只需要在在比較函數(shù)中添加兩行代碼即可實(shí)現(xiàn)。下面是實(shí)現(xiàn)代碼和結(jié)果截圖:

復(fù)制代碼 代碼如下:

var array = [
{Index:1,val:25},
{Index:2,val:25},
{Index:3,val:45},
{Index:4,val:78}];
array.sort(function(a, b) {
if (a.val === b.val) {
//此處兩值相同,則根據(jù)其行號(hào)(初始化時(shí)的索引值)進(jìn)行比較。
return a.Index - b.Index;
}
return a.val - b.val;
})
for (var i = 0; i < array.length; i++) {
document.write("<p>" + array[i].Index + ":" + array[i].val + "</p>");
}

更新后結(jié)果截圖:

當(dāng)然這只是解決方法之一,我的目的只是盡量減少我們需要維護(hù)的代碼量,這樣可以盡量減少bug。一個(gè)思路,希望對你有所幫助。

挫折就像一面墻,這面墻迫使我們向自己證明,我們是多么渴望得到這面墻后面的寶藏

相關(guān)文章

  • JS實(shí)現(xiàn)數(shù)組的增刪改查操作示例

    JS實(shí)現(xiàn)數(shù)組的增刪改查操作示例

    這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組的增刪改查操作,結(jié)合實(shí)例形式分析了javascript針對數(shù)組的追加、獲取、刪除、添加、修改等常見操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2018-08-08
  • JS動(dòng)態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法

    JS動(dòng)態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法

    這篇文章主要介紹了JS動(dòng)態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法,實(shí)例分析了動(dòng)態(tài)插入js文件及執(zhí)行回調(diào)函數(shù)的相關(guān)技巧,需要的朋友可以參考下
    2016-04-04
  • javascript判斷chrome瀏覽器的方法

    javascript判斷chrome瀏覽器的方法

    這篇文章主要介紹了javascript判斷chrome瀏覽器的方法,通過userAgent判斷檢測一下userAgent返回的字符串里面是否包含“Chrome”,需要的朋友可以參考下
    2014-03-03
  • 淺談js獲取ModelAndView值的問題

    淺談js獲取ModelAndView值的問題

    下面小編就為大家分享一篇淺談js獲取ModelAndView值的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Html5 js實(shí)現(xiàn)手風(fēng)琴效果

    Html5 js實(shí)現(xiàn)手風(fēng)琴效果

    這篇文章主要為大家詳細(xì)介紹了Html5 js實(shí)現(xiàn)手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • JavaScript更改class和id的方法

    JavaScript更改class和id的方法

    JavaScript允許你更改元素的class或id。當(dāng)你更改之后,瀏覽器會(huì)自動(dòng)更新元素的樣式。
    2008-10-10
  • javascript+HTML5自定義元素播放焦點(diǎn)圖動(dòng)畫

    javascript+HTML5自定義元素播放焦點(diǎn)圖動(dòng)畫

    這篇文章主要介紹了javascript+HTML5自定義元素播放焦點(diǎn)圖動(dòng)畫的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-02-02
  • 微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼

    微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • js中小數(shù)轉(zhuǎn)換整數(shù)的方法

    js中小數(shù)轉(zhuǎn)換整數(shù)的方法

    js中小數(shù)轉(zhuǎn)換整數(shù)的方法有很多,有下退、上進(jìn)、四舍五入等等,需要的朋友可以了解下本文
    2014-01-01
  • javascript?Echart可視化學(xué)習(xí)

    javascript?Echart可視化學(xué)習(xí)

    這篇文章主要為大家介紹了Echart可視化學(xué)習(xí)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-01-01

最新評(píng)論