懶人必備！一鍵搞定京東商品參數(shù)批量對比

內(nèi)容來源于@什么值得買APP，觀點(diǎn)僅代表作者本人｜作者：值友6213528050

您在電商平臺購物時(shí)，是否經(jīng)常在多款同類型待選商品之間猶豫不決、反復(fù)橫跳？

雖然京東、中關(guān)村在線提供了參數(shù)對比工具，但如下圖所示，其最多只支持 4 至 5 個(gè)商品同時(shí)比較。在京東平臺，當(dāng)對比商品數(shù)量超過 4 個(gè)時(shí)，系統(tǒng)會(huì)提示：“對比欄已滿，您可以刪除不需要的欄內(nèi)商品再繼續(xù)添加哦！”。

當(dāng)你有大量備選商品需要進(jìn)行對比時(shí)（如：購買手機(jī)時(shí)，同價(jià)位有數(shù)十款手機(jī)），若使用官方工具無法，則完成批量對比以快速排除符合心理預(yù)期的商品。`

京東僅支持同時(shí)對比 4 款商品

為了解決該問題，筆者開發(fā)了可用于京東平臺的商品批量對比油猴腳本，安裝后可以同時(shí)對不限數(shù)量的京東商品進(jìn)行批量對比，對比結(jié)果可以導(dǎo)出為 CSV 格式，也可以將結(jié)果頁面鏈接分享給朋友查看。

查看示例商品的對比結(jié)果：車載充電器點(diǎn)煙器參數(shù)對比

安裝方式

該腳本為油猴腳本，因此為了運(yùn)行該腳本，您必須首先在瀏覽器中安裝油猴腳本擴(kuò)展，具體安裝方式可參考 GreasyFork 的官方文檔。

在確保您已經(jīng)在瀏覽器中安裝油猴腳本擴(kuò)展后，點(diǎn)擊本腳本鏈接，即可看到安裝按鈕。

點(diǎn)擊綠色按鈕安裝本腳本

安裝成功后，打開任意一個(gè)京東商品鏈接（如：https://item.jd.com/100053888573.html），即可在商品圖片下方看到藍(lán)色的對比按鈕。

安裝成功后，出現(xiàn)對比相關(guān)的藍(lán)色按鈕

使用方式

該腳本會(huì)維護(hù)一個(gè)待對比商品清單，只需要將待對比的商品加入對比清單，然后點(diǎn)擊“開始對比”按鈕即可完成參數(shù)對比。

某些商品（如：https://item.jd.com/100006528068.html）沒有可選擇的其他款式，您可以點(diǎn)擊“添加本商品”按鈕。

點(diǎn)擊“添加本商品”按鈕可將當(dāng)前頁面展示的商品加入對比清單

某些商品有其他可選擇的款式，您可以點(diǎn)擊“添加本商品”按鈕來添加當(dāng)前頁面顯示的商品到對比清單，也可以點(diǎn)擊“添加所有 ?? 個(gè)型號”來將本頁面中的所有商品加入到對比清單。

點(diǎn)擊“添加所有 5 個(gè)型號”按鈕可批量添加本商品頁面展示的所有商品型號

“開始對比” 按鈕上顯示的數(shù)字即為當(dāng)前待對比清單中的商品數(shù)量

當(dāng)所有待對比商品都加入對比清單后，點(diǎn)擊“開始對比”按鈕，稍等 1 ~ 2 秒，對比結(jié)果將會(huì)作為新的標(biāo)簽頁自動(dòng)彈出。在本案例中，對比結(jié)果可以點(diǎn)擊該鏈接查看。

局限性

某些商品無具體參數(shù)：該腳本用于對比的數(shù)據(jù)源來自京東商品詳情頁面，故當(dāng)某商品的商家未填；
若使用“添加所有型號”功能，某些商品無法正確獲得實(shí)際價(jià)格：京東商品頁面的價(jià)格是動(dòng)態(tài)加載的，因此通過該腳本僅能獲得到當(dāng)前頁面商品的價(jià)格，而不能獲取當(dāng)前頁面其他型號商品的價(jià)格。不過由于大部分商家會(huì)將商品最低售價(jià)（券后）展示在商品首個(gè)圖片中，也可以通過看對比結(jié)果頁面中的商品圖片來獲得價(jià)格。

意見與反饋

覺得好用？歡迎在 GitHub 上星標(biāo)本倉庫，或在 GitHub 上關(guān)注作者
覺得不好用？歡迎在此處提出反饋意見

作者聲明本文無利益相關(guān)，歡迎值友理性交流，和諧討論～

ypeScript 和 JavaScript 是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語言，我們已經(jīng)熟知 TypeScript 是 JavaScript 的一個(gè)超集，但是 TypeScript 與 JavaScript 之間又有什么樣的區(qū)別呢？在選擇開發(fā)語言時(shí)，又該如何抉擇呢？

本文將會(huì)深入對比這兩種語言，討論兩種語言之間的關(guān)聯(lián)和差異，并概述兩種語言各自的優(yōu)勢。

JavaScript 和 TypeScript 的概要介紹

JavaScript

JavaScript 是一種輕量級的解釋性腳本語言，可嵌入到 HTML 頁面中，在瀏覽器端執(zhí)行，能夠?qū)崿F(xiàn)瀏覽器端豐富的交互功能，為用戶帶來流暢多樣的用戶體驗(yàn)。

JavaScript 是基于對象和事件驅(qū)動(dòng)的，無需特定的語言環(huán)境，只需在支持的瀏覽器上就能運(yùn)行。

JavaScript 語言具有以下特點(diǎn)：

JavaScript 是一種腳本編寫語言，無需編譯，只要嵌入 HTML 代碼中，就能由瀏覽器逐行加載解釋執(zhí)行。

JavaScript 是一種基于對象的語言，可以創(chuàng)建對象同時(shí)使用現(xiàn)有對象。但是 Javascript 并不支持其它面向?qū)ο笳Z言所具有的繼承和重載功能。

JavaScript 的語法簡單，使用的變量為弱類型。

JavaScript 語言較為安全，僅在瀏覽器端執(zhí)行，不會(huì)訪問本地硬盤數(shù)據(jù)。

JavaScript 語言具有動(dòng)態(tài)性。JavaScript 是事件驅(qū)動(dòng)的，只根據(jù)用戶的操作做出相應(yīng)的反應(yīng)處理。

JavaScript 只依賴于瀏覽器，與操作系統(tǒng)的因素?zé)o關(guān)。因此 JavaScript 是一種跨平臺的語言。

JavaScript 兼容性較好，能夠與其他技術(shù)（如 XML，REST API 等）一起使用。

TypeScript

TypeScript 是 Microsoft 開發(fā)和維護(hù)的一種面向?qū)ο蟮木幊陶Z言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以載入 JavaScript 代碼運(yùn)行，并擴(kuò)展了 JavaScript 的語法。

TypeScript 具有以下特點(diǎn)：

TypeScript 是 Microsoft 推出的開源語言，使用 Apache 授權(quán)協(xié)議

TypeScript 增加了靜態(tài)類型、類、模塊、接口和類型注解

TypeScript 可用于開發(fā)大型的應(yīng)用

TypeScript 易學(xué)易于理解

JavaScript 和 TypeScript 的主要差異

TypeScript 可以使用 JavaScript 中的所有代碼和編碼概念，TypeScript 是為了使 JavaScript 的開發(fā)變得更加容易而創(chuàng)建的。例如，TypeScript 使用類型和接口等概念來描述正在使用的數(shù)據(jù)，這使開發(fā)人員能夠快速檢測錯(cuò)誤并調(diào)試應(yīng)用程序

TypeScript 從核心語言方面和類概念的模塑方面對 JavaScript 對象模型進(jìn)行擴(kuò)展。

JavaScript 代碼可以在無需任何修改的情況下與 TypeScript 一同工作，同時(shí)可以使用編譯器將 TypeScript 代碼轉(zhuǎn)換為 JavaScript。

TypeScript 通過類型注解提供編譯時(shí)的靜態(tài)類型檢查。

TypeScript 中的數(shù)據(jù)要求帶有明確的類型，JavaScript不要求。

TypeScript 為函數(shù)提供了缺省參數(shù)值。

TypeScript 引入了 JavaScript 中沒有的“類”概念。

TypeScript 中引入了模塊的概念，可以把聲明、數(shù)據(jù)、函數(shù)和類封裝在模塊中。

TypeScript 的優(yōu)勢

下面列舉 TypeScript 相比于 JavaScript 的顯著優(yōu)勢：

1. 靜態(tài)輸入

靜態(tài)類型化是一種功能，可以在開發(fā)人員編寫腳本時(shí)檢測錯(cuò)誤。查找并修復(fù)錯(cuò)誤是當(dāng)今開發(fā)團(tuán)隊(duì)的迫切需求。有了這項(xiàng)功能，就會(huì)允許開發(fā)人員編寫更健壯的代碼并對其進(jìn)行維護(hù)，以便使得代碼質(zhì)量更好、更清晰。

2. 大型的開發(fā)項(xiàng)目

有時(shí)為了改進(jìn)開發(fā)項(xiàng)目，需要對代碼庫進(jìn)行小的增量更改。這些小小的變化可能會(huì)產(chǎn)生嚴(yán)重的、意想不到的后果，因此有必要撤銷這些變化。使用TypeScript工具來進(jìn)行重構(gòu)更變的容易、快捷。

3. 更好的協(xié)作

當(dāng)發(fā)開大型項(xiàng)目時(shí)，會(huì)有許多開發(fā)人員，此時(shí)亂碼和錯(cuò)誤的機(jī)也會(huì)增加。類型安全是一種在編碼期間檢測錯(cuò)誤的功能，而不是在編譯項(xiàng)目時(shí)檢測錯(cuò)誤。這為開發(fā)團(tuán)隊(duì)創(chuàng)建了一個(gè)更高效的編碼和調(diào)試過程。

4. 更強(qiáng)的生產(chǎn)力

干凈的 ECMAScript 6 代碼，自動(dòng)完成和動(dòng)態(tài)輸入等因素有助于提高開發(fā)人員的工作效率。這些功能也有助于編譯器創(chuàng)建優(yōu)化的代碼。

JavaScript 的優(yōu)勢

相比于 TypeScript，JavaScript 也有一些明顯優(yōu)勢。

1. 人氣

JavaScript 的開發(fā)者社區(qū)仍然是巨大而活躍的，在社區(qū)中可以很方便地找到大量成熟的開發(fā)項(xiàng)目和可用資源。

2. 學(xué)習(xí)曲線

由于 JavaScript 語言發(fā)展的較早，也較為成熟，所以仍有一大批開發(fā)人員堅(jiān)持使用他們熟悉的腳本語言 JavaScript，而不是學(xué)習(xí) TypeScript。

3. 本地瀏覽器支持

TypeScript 代碼需要被編譯（輸出 JavaScript 代碼），這是 TypeScript 代碼執(zhí)行時(shí)的一個(gè)額外的步驟。

4. 不需要注釋

為了充分利用 TypeScript 特性，開發(fā)人員需要不斷注釋他們的代碼，這可能會(huì)使項(xiàng)目效率降低。

5. 靈活性

有些開發(fā)人員更喜歡 JavaScript 的靈活性。

如何抉擇

TypeScript 正在成為開發(fā)大型編碼項(xiàng)目的有力工具。因?yàn)槠涿嫦驅(qū)ο缶幊陶Z言的結(jié)構(gòu)保持了代碼的清潔、一致和簡單的調(diào)試。因此在應(yīng)對大型開發(fā)項(xiàng)目時(shí)，使用 TypeScript 更加合適。如果有一個(gè)相對較小的編碼項(xiàng)目，似乎沒有必要使用 TypeScript，只需使用靈活的 JavaScript 即可。

avaweb

在我們平常的javaweb開發(fā)中，前臺頁面經(jīng)常會(huì)用到獲取url中的參數(shù)，大多數(shù)程序員可能直接

用window.location.href 獲取到當(dāng)前頁面的url，然后再用substring去截取字符串，這樣的話很麻煩。

當(dāng)然我上面所說的是在html的文件中，如果你是用的jsp的話，那就很簡單了。用el表達(dá)式我們可以很輕松的獲取url中的參數(shù)：${param.paramName}

好了，言歸正傳，那如何在html中獲取url中的參數(shù)了？

我們可以單獨(dú)封裝一個(gè)函數(shù)來達(dá)到這個(gè)目的。以后只要是要獲取url的參數(shù)，直接調(diào)用這個(gè)函數(shù)就可以了。

function get_param(name, url){
if(!url) url = window.location.href;
name = name.replace(/[\[\]]/g,"\$&");
var regex =newRegExp("[?&]"+ name +"(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if(!results) return null;
if(!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g," "));
}

我在后續(xù)的文章中，會(huì)分享更多更實(shí)用的開發(fā)小技巧給大家，希望大家多多關(guān)注！

在線咨詢

上一篇：什么是HTM或HTML文件？如何打開HTM和HTML文件？
下一篇：一句廢話也沒有，20個(gè)PSD網(wǎng)站模板白給了

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

懶人必備！一鍵搞定京東商品參數(shù)批量對比