用 React 整合 LogEntries JavaScript 庫

【編者按】本文做者爲 David Posin，主要介紹 React 與 LogEntries 間的相互操做。本文系國內 ITOM 管理平臺 OneAPM 編譯呈現。

衆所周知，React.js已經被證明是衆多JavaScript架構中的有力競爭者。按理說，它已經成爲web開發人員應當考慮的，在當前及將來項目中使用的少數項目庫之一。而瞭解它如何與技術棧中的其餘庫相集成，是很是重要的一環。若是你目前正在使用LogEntries，或者考慮使用LogEntries，那懂得如何集成React.js和LogEntries就很是關鍵。本文將闡明他們間的互操做性。

文中引用的代碼

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

構建和編譯

寫一個React應用程序可能很簡單，但對新手來講，把它加載到Web瀏覽器中每每很艱難。除了一些特定狀況外，在加載前，咱們都須要使用構建工具對React進行預處理，例如grunt、gulp或者webpack。本文的示例使用了webpack。Webpack運行時使用的配置文件也如示例中所示。

Webpack內部使用了Node.js，因此咱們能夠訪問Node的標準模塊。第一行加載的模塊，即Path，是用來模糊不一樣平臺的路徑差別的。使用了Path模塊，就能夠在任何Node支持的文件系統（Windows、Unix、Mac）中進行構建。

該配置文件通知webpack應該從哪裏開始構建應用程序，以及把結果輸出到哪裏。Entry屬性告訴webpack應用程序從哪裏開始。在本例子中，應用程序在app文件夾下初始化，並從一個index模塊開始（.js擴展名是默認的）。而後它把結果輸出到app文件夾下的bundle.js文件中。

配置文件的這一部分處理從哪裏開始和在哪裏結束的問題。然而，咱們的代碼也須要在構建過程當中進行編譯。這就要加載一個編譯模塊。Babel模塊加載器就很適合用來作這個。

筆者認爲Babel是用於處理React的最簡單且常見的工具。Babel把你的JavaScript腳本編譯成能被大多數瀏覽器支持的版本，即使不是全部的瀏覽器。經過配置Babel，咱們能夠用它編譯React代碼，也能夠編譯用更新的JavaScript類語法寫成的代碼。

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

咱們爲編譯設置了以下屬性：

• test屬性通知Babel運行任何匹配測試標準的內容。根據正則表達式，任何以.js或.jsx做爲擴展名的文件，都會進行處理。

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

• loader是加載器模塊的名字。

• query中設置了es2015和React預置程序包的模塊具體設置。

以上就是本示例的構建和編譯過程。如今，咱們來看一看代碼。

代碼

Indexes

若是一切構建正常的話，app/index.html在瀏覽器中的打開結果，就與上圖相似。頁面中的文本提醒用戶在app.jsx代碼中更新令牌，而且在點擊一個連接後檢查其LogEntries帳戶。單擊連接將發送相應類型的日誌條目到Logentries.com。LogEntries標誌下的一切都是由React插入的。咱們來看一下這一頁面是怎樣構建的。

天然起點就在index.html頁面中。對大多數React應用來講，這一頁面很是簡單和單調。惟一值得注意的是id爲「app」的div標籤。這是React自己的插入點。

React應用程序從app/index.jsx開始：

React應用程序的頂層設置了文本及其初始渲染。頁面會加載react、react-dom和App.。React-dom是用來渲染網頁的庫。App是咱們在頁面中看到的組件。

渲染方法會渲染「」。這個HTML標記對應於一開始用「const App=」行導入的模塊的名字。做爲一個HTML標記，「App」通知編譯器把App模塊加載到這個程序空間。

Index頁面使用了React的JSX語法。JSX旨在經過語義HTML格式化React代碼。語義HTML用標籤來描述其功能及所指。使用App做爲標籤是符合語義的，由於它告訴開發者這個標籤的用途。在本例中，它就是用來加載App模塊的。

App.jsx

大多數用例程序都存在於app/js文件夾下的App.jsx文件中。這個程序會加載文本、連接以及創建連接點擊的功能。頂層部分會將以後應用中須要用到的模塊和變量實例化。

第一個模塊，React，是惟一一個被調出卻未以明確方式使用的模塊。這是個特殊狀況。React是編譯器頂層所須要的。編譯器須要參考React，才能在渲染功能中正確地解析HTML標記。

下一個調用的是Logger。LogEntries代碼部分就在Logger模塊裏。該模塊是Logentries對象的一個簡單接口。最後四個引用，設置了咱們會在餘下程序裏看成經常使用使用的變量。

渲染功能大部分是標準的HTML和React。對React新用戶來講，惟一不一樣的多是style標籤。React編譯器須要把style標籤解析爲JavaScript文字，所以屬性會被{{}}框起來。第一組大括號做爲一對例外符號，告訴編譯器把其中內容處理成JavaScript。第二組大括號表示其中內容是JavaScript文字。這兩對花括號中的全部內容都要使用駝峯式大小寫（即首字母大寫）才能經過JavaScript格式編譯。

錨標記是設置功能的地方：

每一個錨都使用onClick處理器定義click事件。他們援引在類的底部定義的sendLog函數。大括號告訴編譯器，裏面的內容是JavaScript代碼。每一個處理程序的內容都是類，因此這會指向被實例化的App對象。綁定它們能夠確保被激活的功能對應於合適的連接（「error」、「warn」、「info」、「log」）。

類中最後一個被調用的函數是sendLog，它是這樣的：

sendLog會調用Logger對象中一個名字與其類型對應的方法。Click事件處理器能夠被轉換爲以下僞代碼：

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

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

不過，也有很好的理由來維護接口模式。倘若未來Logentries從全局範圍中刪除了，使用接口能夠爲咱們提供保障。其次，使用全局變量會使將來的維護和開發變得混亂。讓一個對象在接口身後模糊化，並經過引用來使用一個對象實例，總比假設存在一個全局對象要思路清晰得多。

代碼以下：

第一行調出Logentries庫。請求聲明容許咱們在模塊內部構建Logentries對象。此外，聲明行告訴編譯器在哪裏找這個庫，並把它捆綁入代碼。

module.exports行被其餘模塊用做構造器。因此其餘庫，包括咱們在上一節中的庫，能夠同時聲明和建立Logger對象。 本例使用此行的目的是：

根據Logentries文檔，Logentries對象經過init命令初始化自身。一旦初始化完成，LogEntries對象就能夠返回給調用者使用。這裏使用的方法和屬性均可以在此文檔中找到。

結論

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

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

OneAPM Browser Insight 是一個基於真實用戶的 Web 前端性能監控平臺，能幫助你們定位網站性能瓶頸，實現網站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術博客。

本文轉自 OneAPM 官方博客

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