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

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

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

文中引用的代碼

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

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

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

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

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

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

我們?cè)谂渲梦募性龈牧巳缦履K加載代碼：

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

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

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

loader是加載器模塊的名字。

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

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

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

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

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

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

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

Index頁(yè)面使用了React的JSX語(yǔ)法。JSX旨在通過(guò)語(yǔ)義HTML格式化React代碼。語(yǔ)義HTML用標(biāo)簽來(lái)描述其功能及所指。使用App作為標(biāo)簽是符合語(yǔ)義的，因?yàn)樗嬖V開(kāi)發(fā)者這個(gè)標(biāo)簽的用途。在本例中，它就是用來(lái)加載App模塊的。

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

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

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

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

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

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

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

sendLog會(huì)調(diào)用Logger對(duì)象中一個(gè)名字與其類(lèi)型對(duì)應(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

如果你熟悉控制臺(tái)API或者Logentries JavaScript API，你就會(huì)對(duì)它很熟悉。

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

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

代碼如下：

第一行調(diào)出Logentries庫(kù)。請(qǐng)求聲明允許我們?cè)谀K內(nèi)部構(gòu)建Logentries對(duì)象。此外，聲明行告訴編譯器在哪里找這個(gè)庫(kù)，并把它捆綁入代碼。

module.exports行被其他模塊用作構(gòu)造器。所以其他庫(kù)，包括我們?cè)谏弦还?jié)中的庫(kù)，可以同時(shí)聲明和創(chuàng)建Logger對(duì)象。 本例使用此行的目的是：

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

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

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

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

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

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