[郑州|结业弟子]JS-王庚龙|2021年06月06日的日报-技能树.IT修真院

发表于： 2021-06-06 21:47:23

0 1828

今天完成的事情：angular 管道；

明天计划的事情：数据展示；使用路由完成换页；JS知识巩固

遇到的问题：使用服务将获取到数据封装，但是在组件中调用及使用还没能搞出来；

收获：

Angular的管道可以看作成是一个数据格式化展示的工具。我们需要使用管道实现对数据的格式化

管道可以将数据格式化显示，而不改变源数据。获取数据可能简单到创建一个局部变量就行，也可能复杂到从WebSocket中获取数据流。一旦取到数据，我们可以把它们原始值的toString结果直接推入视图中。例，几乎每个人都更喜欢简单的日期格式，例如1988-04-15，而不是系统或服务端传过来的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。我们可以通过管道来将这个日期格式转换在渲染到视图中

管道把数据作为输入，然后转换它，给出期望的输出。
管道(Pipe)可以根据开发者的意愿将数据格式化。

一、大小写转换管道

uppercase将字符串转换为大写
lowercase将字符串转换为小写

将字符串转换为大写{{str | uppercase}}

str:string = 'hello'

输出为：字符串转换为大写 HELLO

二、日期管道

date 日期管道符可以接受参数，用来规定输出日期的格式。

现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}

today : Date = new Date();

页面上会显示现在的实时时间；

三、小数管道

number管道用来将数字处理为我们需要的小数格式
接收的参数格式为{ 最少整数位数 } . { 最少小数位数 } - { 最多小数位数 }
其中最少整数位数默认为1
最少小数位数默认为0
最多小数位数默认为3
当小数位数少于规定的{最少小数位数}时，会自动补0
当小数位数多于规定的{最多小数位数}时，会四舍五入

圆周率是 { { pi | number:'2.2-4' } }

pi:number = 3.14159;

页面上会显示
圆周率是03.1416

四、货币管道

currency管道用来将数字转换为货币格式

{{a | currency:'USD':false}}

{{b | currency:'USD':true:'4.2-2'}}

a:number = 8.2515

b:number = 156.548

页面上将显示
USD 8.2

这里的′USD′是美元United符，当为true时，则显示$符。后面的规定小数位数的参数和上面介绍的一样。

JS知识巩固：
DOM概括：

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。

节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attr：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。

节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。
浏览器原生提供 document 节点，代表整个文档。
document // 整个文档树
文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
除了根节点，其他节点都有三种层级关系。
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。

比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。