文档章节

用 React 整合 LogEntries JavaScript 库

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2016/05/27 10:45
字数 2271
阅读 19
收藏 1

【编者按】本文作者为 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

用 React 整合 LogEntries JavaScript 库

如果一切构建正常的话,app/index.html在浏览器中的打开结果,就与上图类似。页面中的文本提醒用户在app.jsx代码中更新令牌,并且在点击一个链接后检查其LogEntries账户。单击链接将发送相应类型的日志条目到Logentries.com。LogEntries标志下的一切都是由React插入的。我们来看一下这一页面是怎样构建的。

自然起点就在index.html页面中。对大多数React应用来说,这一页面非常简单和单调。唯一值得注意的是id为“app”的div标签。这是React本身的插入点。

用 React 整合 LogEntries JavaScript 库

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

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 94
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
【译】为什么ReasonReact是编写React的最佳方式

原文地址:medium.freecodecamp.org/psst-heres-… 你是否使用 React 来构建用户界面?好吧,我也是。接下来你会了解为什么要使用 ReasonML 来写 React 应用。 React 是构建用户界面的一种很...

吃吃吃吃不胖
2018/10/18
0
0
学习 React 前你需要知道些什么

如果你正在看这篇文章,你很可能已经知道 React 是啥了。React 的学习曲线陡峭是众所周知的,很多人在开始学习 React 时都一头雾水,笔者自然也不例外。究其原因,是因为我们在学习 React 的...

Hopsken
01/16
0
0
用 Webpack 和 ES6 转换快速开发 Rails 的富客户端

Fast Rich Client Rails Development With Webpack and the ES6 Transpiler 有更好的方式把 JavaScript 生态引入 Rails。 你有没有: 想知道是否有更好的方式在现有 Ruby on Rails 工程下使用...

开源中国匿名会员
2015/06/09
467
0
ReactJS 0.13.0 Beta 1 发布,用户界面 JavaScript 库

React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 Facebook开源了React,这是该公司用于构建反应式图形界面的JavaScript库,已经应用于构建Instagram网站及 Facebook部分...

oschina
2015/01/29
3.7K
11
[译] TypeScript 快速学习指南

原文链接 TypeScript Quick Start Guide 本文将告诉你如何快速开始使用 TypeScript,同时探讨一下使用 TypeScript 的优缺点。TypeScript 是 JavaScript 和 Ecma TC39 标准 的超集。TypeScrip...

zhaofeihao
03/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部