摘要：眾所周知，已經(jīng)被證實是眾多架構(gòu)中的有力競爭者。標(biāo)志下的一切都是由插入的。第一組大括號作為一對例外符號，告訴編譯器把其中內(nèi)容處理成。綁定它們可以確保被激活的功能對應(yīng)于合適的鏈接。本例使用此行的目的是根據(jù)文檔，對象通過命令初始化自身。

【編者按】本文作者為 David Posin，主要介紹 React 與 LogEntries 間的相互操作。本文系國內(nèi) ITOM 管理平臺 OneAPM 編譯呈現(xiàn)。

眾所周知，React.js已經(jīng)被證實是眾多JavaScript架構(gòu)中的有力競爭者。按理說，它已經(jīng)成為web開發(fā)人員應(yīng)當(dāng)考慮的，在當(dāng)前及未來項目中使用的少數(shù)項目庫之一。而了解它如何與技術(shù)棧中的其他庫相集成，是非常重要的一環(huán)。如果你目前正在使用LogEntries，或者考慮使用LogEntries，那懂得如何集成React.js和LogEntries就非常關(guān)鍵。本文將闡明他們間的互操作性。

文中引用的代碼

本文所引用的代碼都可以在GutHub上查看。

寫一個React應(yīng)用程序可能很簡單，但對新手來說，把它加載到Web瀏覽器中往往很艱難。除了一些特定情況外，在加載前，我們都需要使用構(gòu)建工具對React進行預(yù)處理，例如grunt、gulp或者webpack。本文的示例使用了webpack。Webpack運行時使用的配置文件也如示例中所示。

Webpack內(nèi)部使用了Node.js，所以我們可以訪問Node的標(biāo)準(zhǔn)模塊。第一行加載的模塊，即Path，是用來模糊不同平臺的路徑差異的。使用了Path模塊，就可以在任何Node支持的文件系統(tǒng)（Windows、Unix、Mac）中進行構(gòu)建。

該配置文件通知webpack應(yīng)該從哪里開始構(gòu)建應(yīng)用程序，以及把結(jié)果輸出到哪里。Entry屬性告訴webpack應(yīng)用程序從哪里開始。在本例子中，應(yīng)用程序在app文件夾下初始化，并從一個index模塊開始（.js擴展名是默認(rèn)的）。然后它把結(jié)果輸出到app文件夾下的bundle.js文件中。

配置文件的這一部分處理從哪里開始和在哪里結(jié)束的問題。然而，我們的代碼也需要在構(gòu)建過程中進行編譯。這就要加載一個編譯模塊。Babel模塊加載器就很適合用來做這個。

筆者認(rèn)為Babel是用于處理React的最簡單且常見的工具。Babel把你的JavaScript腳本編譯成能被大多數(shù)瀏覽器支持的版本，即便不是所有的瀏覽器。通過配置Babel，我們可以用它編譯React代碼，也可以編譯用更新的JavaScript類語法寫成的代碼。

我們在配置文件中增改了如下模塊加載代碼：

我們?yōu)榫幾g設(shè)置了如下屬性：

test屬性通知Babel運行任何匹配測試標(biāo)準(zhǔn)的內(nèi)容。根據(jù)正則表達式，任何以.js或.jsx作為擴展名的文件，都會進行處理。

include陣列通知Babel在哪些文件夾下遞歸搜索文件。在本文的例子中，即為app/js文件夾中的所有文件以及app/index.jsx文件。

loader是加載器模塊的名字。

query中設(shè)置了es2015和React預(yù)置程序包的模塊具體設(shè)置。

以上就是本示例的構(gòu)建和編譯過程?，F(xiàn)在，我們來看一看代碼。

如果一切構(gòu)建正常的話，app/index.html在瀏覽器中的打開結(jié)果，就與上圖類似。頁面中的文本提醒用戶在app.jsx代碼中更新令牌，并且在點擊一個鏈接后檢查其LogEntries賬戶。單擊鏈接將發(fā)送相應(yīng)類型的日志條目到Logentries.com。LogEntries標(biāo)志下的一切都是由React插入的。我們來看一下這一頁面是怎樣構(gòu)建的。

自然起點就在index.html頁面中。對大多數(shù)React應(yīng)用來說，這一頁面非常簡單和單調(diào)。唯一值得注意的是id為“app”的div標(biāo)簽。這是React本身的插入點。

React應(yīng)用程序從app/index.jsx開始：

React應(yīng)用程序的頂層設(shè)置了文本及其初始渲染。頁面會加載react、react-dom和App.。React-dom是用來渲染網(wǎng)頁的庫。App是我們在頁面中看到的組件。

渲染方法會渲染“”。這個HTML標(biāo)記對應(yīng)于一開始用“const App=”行導(dǎo)入的模塊的名字。作為一個HTML標(biāo)記，“App”通知編譯器把App模塊加載到這個程序空間。

Index頁面使用了React的JSX語法。JSX旨在通過語義HTML格式化React代碼。語義HTML用標(biāo)簽來描述其功能及所指。使用App作為標(biāo)簽是符合語義的，因為它告訴開發(fā)者這個標(biāo)簽的用途。在本例中，它就是用來加載App模塊的。

大多數(shù)用例程序都存在于app/js文件夾下的App.jsx文件中。這個程序會加載文本、鏈接以及建立鏈接點擊的功能。頂層部分會將之后應(yīng)用中需要用到的模塊和變量實例化。

第一個模塊，React，是唯一一個被調(diào)出卻未以明確方式使用的模塊。這是個特殊情況。React是編譯器頂層所需要的。編譯器需要參考React，才能在渲染功能中正確地解析HTML標(biāo)記。

下一個調(diào)用的是Logger。LogEntries代碼部分就在Logger模塊里。該模塊是Logentries對象的一個簡單接口。最后四個引用，設(shè)置了我們會在余下程序里當(dāng)作常用使用的變量。

渲染功能大部分是標(biāo)準(zhǔn)的HTML和React。對React新用戶來說，唯一不同的可能是style標(biāo)簽。React編譯器需要把style標(biāo)簽解析為JavaScript文字，因此屬性會被{{}}框起來。第一組大括號作為一對例外符號，告訴編譯器把其中內(nèi)容處理成JavaScript。第二組大括號表示其中內(nèi)容是JavaScript文字。這兩對花括號中的所有內(nèi)容都要使用駝峰式大小寫（即首字母大寫）才能通過JavaScript格式編譯。

錨標(biāo)記是設(shè)置功能的地方：

每個錨都使用onClick處理器定義click事件。他們援引在類的底部定義的sendLog函數(shù)。大括號告訴編譯器，里面的內(nèi)容是JavaScript代碼。每個處理程序的內(nèi)容都是類，所以這會指向被實例化的App對象。綁定它們可以確保被激活的功能對應(yīng)于合適的鏈接（“error”、“warn”、“info”、“l(fā)og”）。

類中最后一個被調(diào)用的函數(shù)是sendLog，它是這樣的：

sendLog會調(diào)用Logger對象中一個名字與其類型對應(yīng)的方法。Click事件處理器可以被轉(zhuǎn)換為如下偽代碼：

onClick={Logger.error("error message")}>Submit Error 
onClick={Logger.warning("warning message")}>Submit Warning 
onClick={Logger.info("info message")}>Submit Info 
onClick={Logger.log("log message")}>Submit Log

如果你熟悉控制臺API或者Logentries JavaScript API，你就會對它很熟悉。

Logger.jsx是Logentries對象的接口。在寫本文時，Logentries對象針對window對象是全局實例化的。把Logentries對象加入到window意味著使用它不再需要接口。

不過，也有很好的理由來維護接口模式。假若將來Logentries從全局范圍中刪除了，使用接口可以為我們提供保障。其次，使用全局變量會使未來的維護和開發(fā)變得混亂。讓一個對象在接口身后模糊化，并通過引用來使用一個對象實例，總比假設(shè)存在一個全局對象要思路清晰得多。

代碼如下：

第一行調(diào)出Logentries庫。請求聲明允許我們在模塊內(nèi)部構(gòu)建Logentries對象。此外，聲明行告訴編譯器在哪里找這個庫，并把它捆綁入代碼。

module.exports行被其他模塊用作構(gòu)造器。所以其他庫，包括我們在上一節(jié)中的庫，可以同時聲明和創(chuàng)建Logger對象。 本例使用此行的目的是：

根據(jù)Logentries文檔，Logentries對象通過init命令初始化自身。一旦初始化完成，LogEntries對象就可以返回給調(diào)用者使用。這里使用的方法和屬性都可以在此文檔中找到。

使用React的最大挑戰(zhàn)可能是其構(gòu)建過程，這也正是本文的用處所在。使用LogEntries庫正確構(gòu)建代碼的基本流程，以及庫的使用方法，都包含在本文的示例中以供參考了。祝使用愉快！

本文中所涉及代碼均可在Github上找到。

OneAPM Browser Insight 是一個基于真實用戶的 Web 前端性能監(jiān)控平臺，能幫助大家定位網(wǎng)站性能瓶頸，實現(xiàn)網(wǎng)站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術(shù)文章，請訪問 OneAPM 官方技術(shù)博客。

本文轉(zhuǎn)自 OneAPM 官方博客

原文地址：https://dzone.com/articles/integrating-the-logentries-javascript-library-with