CheerpJ：輕松將Java應用轉換為JavaSc

CheerpJ：輕松將Java應用轉換為JavaScript

多程序員認為JavaScript優于Java。對于初學者來說，Javascript不像Java那樣老化。而且，更容易理解和使用，當然這兩者差別很大。Java可以獨立存在，而JavaScript必須放在HTML文檔中——有時也稱為容器。

JavaScript，HTML和CSS專門用于Web應用程序和Web開發。另一方面，Java可以嵌入到一個完整的專有應用程序中，它不需要任何其他功能。如今，一切正在跳到網絡或某種形式的web applet，以便在平臺上使用，例如移動設備。

這些差異使得很難將老化的Java應用程序和代碼轉換為JavaScript。通常情況下，這可能是一個漫長的過程，需要不止一個程序員來完成。

CheerpJ，一種新的編譯器技術——即將改變所有的一切。

CheerpJ

Cheerpj是一個獨特的工具，將Java字節碼轉換為JavaScript，允許程序員將應用程序和軟件相對輕松地移動到Web上。

最好的是它不需要Java插件或安裝工作，程序員不必經歷下載、安裝和配置Java環境和IDE的麻煩。

它甚至有一個離線編譯器，將Java轉換為JavaScript。服務器端Java組件可以轉換為客戶端庫，以便在瀏覽器中使用。這是一個巨大的交易，并將允許程序員將獨立的產品或應用程序帶到網絡上。實際上，這可能意味著在更多的平臺和設備上向更多用戶開放老化的java應用程序或工具。

由于JavaScript的本質，完成的小程序將不那么僵硬，在閱讀原始代碼時更容易理解，并且在交互和事件方面更加豐富。JavaScript通常與網頁事件和關于網站開發的操作相關聯，傳統的Java并不完全有助于這些事情。

另外，通過JavaScript，程序員可以在對象和動作調用中更加具體。例如，引用狀態欄或瀏覽器窗口等現有項目，并直接對該組件進行更新或更改，Java顯然就無法這樣操作。

JavaScript也與許多領先的技術相兼容，例如，Widevine的加密媒體擴展（也稱為EME），依賴JavaScript來跨多個設備和服務器管理數字版權許可。

雖然與CheerpJ類似的工具已經存在——即Google Web Toolkit，它也允許將Java內容放在瀏覽器，但CheerpJ與其他平臺（如Google）截然不同。其他平臺不支持Java構造和部署，僅包含對Java運行時庫的部分實現和引用。程序員可以將新的應用程序轉換為瀏覽器，但已經在使用的應用程序將很難轉換。顯然，這種新的編譯器并不是這樣，CheerpJ為現有和以前的Java應用程序打開了一扇新的大門。

幸運的是，從Java到JavaScript的跳躍是相當容易和快速的。

什么時候可用？

七月限量發行，但并不是每個人都可以拿到手。11月下旬公開發行，但是官方商業版。如果你不是內測人員，只能等到公開發行在使用了。對于早期Java程序員而言，這幾個月倒也不算什么，畢竟等了那么多年了。

暫時，可以考慮CheerpL Applet Viewer Extension，這將允許在沒有Java插件或環境安裝的情況下運行應用程序。

文適合有 Java 基礎知識的人群

本文作者：HelloGitHub-秦人

HelloGitHub 推出的《講解開源項目》系列，今天給大家帶來一款開源 Java 版一款網頁元素解析框架——jsoup，通過程序自動獲取網頁數據。

項目源碼地址：https://github.com/jhy/jsoup

一、項目介紹

jsoup 是一款 Java 的 HTML 解析器。可直接解析某個 URL 地址的 HTML 文本內容。它提供了一套很省力的 API，可通過 DOM、CSS 以及類似于 jQuery 選擇器的操作方法來取出和操作數據。

jsoup 主要功能：

從一個 URL、文件或字符串中解析 HTML。
使用 DOM 或 CSS 選擇器來查找、取出數據。
可操作 HTML 元素、屬性、文本。

二、使用框架

2.1 準備工作

掌握 HTML 語法
Chrome 瀏覽器調試技巧
掌握開發工具 idea 的基本操作

2.2 學習源碼

將項目導入 idea 開發工具，會自動下載 maven 項目需要的依賴。源碼的項目結構如下：

快速學習源碼是每個程序員必備的技能，我總結了以下幾點：

閱讀項目 ReadMe 文件，可以快速知道項目是做什么的。
概覽項目 pom.xml 文件，了解項目引用了哪些依賴。
查看項目結構、源碼目錄、測試用例目錄，好的項目結構清晰，層次明確。
運行測試用例，快速體驗項目。

2.3 下載項目

git clone https://github.com/jhy/jsoup

2.4 運行項目測試代碼

通過上面的方法，我們很快可知 example 目錄是測試代碼，那我們直接來運行。注：有些測試代碼需要稍微改造一下才可以運行。

例如，jsoup 的 Wikipedia 測試代碼：

public class Wikipedia {
    public static void main(String[] args) throws IOException {
        Document doc = Jsoup.connect("http://en.wikipedia.org/").get();
        log(doc.title());

        Elements newsHeadlines = doc.select("#mp-itn b a");
        for (Element headline : newsHeadlines) {
            log("%s\n\t%s", headline.attr("title"), headline.absUrl("href"));
        }
    }

    private static void log(String msg, String... vals) {
        System.out.println(String.format(msg, vals));
    }
}

說明：上面代碼是獲取頁面（http://en.wikipedia.org/）包含（#mp-itn b a）選擇器的所有元素，并打印這些元素的 title , herf 屬性。維基百科國內無法訪問，所以上面這段代碼運行會報錯。

改造后可運行的代碼如下：

public static void main(String[] args) throws IOException {
    Document doc = Jsoup.connect("https://www.baidu.com/").get();
    Elements newsHeadlines = doc.select("a[href]");
    for (Element headline : newsHeadlines) {
        System.out.println("href: " +headline.absUrl("href") );
    }
}

三、工作原理

Jsoup 的工作原理，首先需要指定一個 URL，框架發送 HTTP 請求，然后獲取響應頁面內容，然后通過各種選擇器獲取頁面數據。整個工作流程如下圖：

以上面為例：

3.1 發請求

Document doc = Jsoup.connect("https://www.baidu.com/").get();

這行代碼就是發送 HTTP 請求，并獲取頁面響應數據。

3.2 數據篩選

Elements newsHeadlines = doc.select("a[href]");

定義選擇器，獲取匹配選擇器的數據。

3.3 數據處理

for (Element headline : newsHeadlines) {
        System.out.println("href: " +headline.absUrl("href") );
    }

這里對數據只做了一個簡單的數據打印，當然這些數據可寫入文件或數據的。

四、實戰

獲取豆瓣讀書 -> 新書速遞中每本新書的基本信息。包括：書名、書圖片鏈接、作者、內容簡介（詳情頁面）、作者簡介（詳情頁面）、當當網書的價格（詳情頁面），最后將獲取的數據保存到 Excel 文件。

目標鏈接：https://book.douban.com/latest?icn=index-latestbook-all

4.1 項目 pom.xml 文件

項目引入 jsoup、lombok、easyexcel 三個庫。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>JsoupTest</artifactId>
    <version>1.0-SNAPSHOT</version>
    <properties>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.13.1</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.2.6</version>
        </dependency>
    </dependencies>
</project>

4.2 解析頁面數據

public class BookInfoUtils {

    public static List<BookEntity> getBookInfoList(String url) throws IOException {
        List<BookEntity>  bookEntities=new ArrayList<>();
        Document doc = Jsoup.connect(url).get();
        Elements liDiv = doc.select("#content > div > div.article > ul > li");
        for (Element li : liDiv) {
            Elements urls = li.select("a[href]");
            Elements imgUrl = li.select("a > img");
            Elements bookName = li.select(" div > h2 > a");
            Elements starsCount = li.select(" div > p.rating > span.font-small.color-lightgray");
            Elements author = li.select("div > p.color-gray");
            Elements description = li.select(" div > p.detail");

            String bookDetailUrl = urls.get(0).attr("href");
            BookDetailInfo detailInfo = getDetailInfo(bookDetailUrl);
            BookEntity bookEntity = BookEntity.builder()
                    .detailPageUrl(bookDetailUrl)
                    .bookImgUrl(imgUrl.attr("src"))
                    .bookName(bookName.html())
                    .starsCount(starsCount.html())
                    .author(author.text())
                    .bookDetailInfo(detailInfo)
                    .description(description.html())
                    .build();
//            System.out.println(bookEntity);
            bookEntities.add(bookEntity);
        }
        return bookEntities;
    }
    /**
     *
     * @param detailUrl
     * @return
     * @throws IOException
     */
    public static BookDetailInfo getDetailInfo(String detailUrl)throws IOException{

        Document doc = Jsoup.connect(detailUrl).get();
        Elements content = doc.select("body");

        Elements price = content.select("#buyinfo-printed > ul.bs.current-version-list > li:nth-child(2) > div.cell.price-btn-wrapper > div.cell.impression_track_mod_buyinfo > div.cell.price-wrapper > a > span");
        Elements author = content.select("#info > span:nth-child(1) > a");
        BookDetailInfo bookDetailInfo = BookDetailInfo.builder()
                .author(author.html())
                .authorUrl(author.attr("href"))
                .price(price.html())
                .build();
        return bookDetailInfo;
    }
}

這里的重點是要獲取網頁對應元素的選擇器。

例如：獲取 li.select("div > p.color-gray") 中 div > p.color-gray 是怎么知道的。

使用 chrome 的小伙伴應該都猜到了。打開 chrome 瀏覽器 Debug 模式，Ctrl + Shift +C 選擇一個元素,然后在 html 右鍵選擇 Copy ->Copy selector,這樣就可以獲取當前元素的選擇器。如下圖：

4.3 存儲數據到 Excel

為了數據更好查看，我將通過 jsoup 抓取的數據存儲的 Excel 文件，這里我使用的 easyexcel 快速生成 Excel 文件。

Excel 表頭信息

@Data
@Builder
public class ColumnData {

    @ExcelProperty("書名稱")
    private String bookName;

    @ExcelProperty("評分")
    private String starsCount;

    @ExcelProperty("作者")
    private String author;

    @ExcelProperty("封面圖片")
    private String bookImgUrl;

    @ExcelProperty("簡介")
    private String description;

    @ExcelProperty("單價")
    private String price;
}

生成 Excel 文件

public class EasyExcelUtils {

    public static void simpleWrite(List<BookEntity> bookEntityList) {
        String fileName = "D:\\devEnv\\JsoupTest\\bookList" + System.currentTimeMillis() + ".xlsx";
        EasyExcel.write(fileName, ColumnData.class).sheet("書本詳情").doWrite(data(bookEntityList));
        System.out.println("excel文件生成完畢...");
    }
    private static List<ColumnData> data(List<BookEntity> bookEntityList) {
        List<ColumnData> list = new ArrayList<>();
        bookEntityList.forEach(b -> {
            ColumnData data = ColumnData.builder()
                    .bookName(b.getBookName())
                    .starsCount(b.getStarsCount())
                    .author(b.getBookDetailInfo().getAuthor())
                    .bookImgUrl(b.getBookImgUrl())
                    .description(b.getDescription())
                    .price(b.getBookDetailInfo().getPrice())
                    .build();
            list.add(data);
        });
        return list;
    }
}

4.4 最終展示效果

最終的效果如下圖：

以上就是從想法到實踐，我們就在實戰中使用了 jsoup 的基本操作。

完整代碼地址：https://github.com/hellowHuaairen/JsoupTest

五、最后

Java HTML Parser 庫：jsoup，把它當成簡單的爬蟲用起來還是很方便的吧？

為什么會講爬蟲？大數據，人工智能時代玩的就是數據，數據很重要。作為懂點技術的我們，也需要掌握一種獲取網絡數據的技能。當然也有一些工具 Fiddler、webscraper 等也可以抓取你想要的數據。

教程至此，你應該也能對 jsoup 有一些感覺了吧。編程是不是也特別有意思呢？參考我上面的實戰案例，有好多網站可以實踐一下啦～歡迎在評論區曬你的實戰。

合Java和Web開發，Learning Technologies公司推出CheerpJ準備作為編譯器技術，將Java字節碼轉換為JavaScript，以便在瀏覽器中執行。基于LLVM / Clang編譯器平臺以及Learning Technologies的Cheerp C ++到JavaScript編譯器，CheerpJ不需要源代碼，就能把Java字節碼轉換為JavaScript。

在CheerpJ中，應用程序和Java庫被轉換為Web應用程序，因此不需要插件或Java安裝。服務器端Java組件可以成為基于瀏覽器的客戶端庫，而本機Java代碼作為Node.js服務器端JavaScript平臺的平臺無關的組件。

CheerpJ具有離線編譯能力，將Java字節碼轉換為JavaScript以及基于JavaScript的Java運行時環境。另外該平臺的還有一部分能力是動態類的即時編譯器，用于與應用程序一起部署。

Java和JavaScript之間的雙向互操作性可以從Java調用任何JavaScript庫或瀏覽器API。此外，任何Java方法都可以暴露給JavaScript。可以在jar包以及單個.class文件中調用CheerpJ。被轉換的程序可以通過jar.js和jar包部署在Web服務器上。

CheerpJ與其他類似技術不同之處在于可以將Java放在瀏覽器中，例如GWT（Google Web Toolkit ）。在其他類似技術中就缺乏對Java結構的完全支持，并且僅部分實現了Java運行時庫。這些限制使這些其他技術更適合新的應用程序，而不是轉換現有的。

從其他語言編譯成JavaScript的其他技術包括Scala.js ， Kotlin語言和Microsoft的TypeScript 。

Learning Technologies計劃于七月份公開發行CheerpJ，預計秋季將有商業版本。CheerpJ的遠期目標是WebAssembly 。WebAssembly一種是為了解決JS的性能問題，適合于編譯到Web，可移植的，大小和加載時間高效的二進制格式。

CheerpL Applet Viewer Extension是一款Chrome擴展，它可以在不需要Java安裝或插件的情況下啟用Java小程序。通過CheerpJ.js的即時匯編啟用Applets。擴展程序現在處于beta版本中。

在線咨詢

上一篇：不用react，C# 也可以使用Ant Design
下一篇：CSS table-layout 屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商