Angular

前言从本文开始将逐步介绍 NG-NEST UI 库的项目源码结构和组件是如何设计制作的。 环境准备通过以下命令来下载 ng-nest 源码： $ git clone https://github.com/NG-NEST/ng-nest.git$ cd ng-nest$ npm install核心目录介绍| 文件夹名称 | 说明 | | docs | 非组件文档，项目简介、快速上手、教程等 || lib | 组件文件夹，包含框架组件源码 || scripts | ts 脚本，主要用来生成文档页面组件以及相关的路由配置 || src | 文档项目，生成的文档会自动放到 src/main/docs 下 |package.json 文件中的 scripts 说明..."scripts": { "ng": "ng", "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points", // 加快 ngcc 编译 "start": "ng serve", // 启动文档项目 "start:en": "ng serve --configuration=en", "start:zh": "ng serve --configuration=zh", "build": "node --max_old_space_size=81920 ./node_modules/@angular/cli/bin/ng build --prod ", // 打包文档项目 "build:en": "ng build --prod --configuration=production-en", "build:zh": "ng build --prod --configuration=production-zh", "build:ng-nest-ui": "node --max_old_space_size=81920 ./node_modules/@angular/cli/bin/ng build ng-nest-ui --prod && npm run build:scss", // 打包组件库并拷贝相关scss样式文件 "build:docs": "npm run build:scripts && node ./scripts/build/generate/docs", // 生成文档页面 "build:scripts": "tsc -p scripts", // ts 脚本编译成 js "build:scss": "cpx ./lib/ng-nest/ui/style/**/* ./dist/ng-nest/ui/style", // 拷贝组件库样式文件 "test": "ng test ng-nest-site", // 测试文档项目 "test:ng-nest-ui": "ng test ng-nest-ui", // 组件测试，通过此处开发测试单个组件 "lint": "ng lint", "e2e": "ng e2e", "extract": "ng xi18n --output-path=locale" // 文档项目的本地化配置},...组件结构我们以 Button 组件来介绍一下组件的结构，所有组件的结构都是遵循此格式。 ...

本文成文时间是 2019-08-18 ，文中提到的最新版本号是以 2019-08-18 为基准的。 前情摘要在介绍正文之前需要先简单了解几个概念： STOMP 协议、STOMP over WebSocket 以及 RxJS。（关于这三点本文不会进行详细介绍） 什么是 STOMP？STOMP 即 Simple or Streaming Text Orientated Messageing Protocal ，是一种简单（流）文本定向传输协议。 STOMP 是 WebSocket 更高级的子协议，它使用一个基于帧的格式来定义消息，与 HTTP 的 Request 和 Response 类似。 STOMP 提供可互操作的连接格式，允许 STOMP 客户端与任意代理进行交互。STOMP 是一个非常简单易用的协议， 服务器端实现起来会相对困难一些，编写客户端非常容易。 STOMP over WebSocketSTOMP over Websocket 即通过 WebSocket 建立 STOMP 连接，也就是说是在 WebSocket 连接的基础上再建立 STOMP 连接。 WebSocket 协议定义了两种类型的消息，文本和二进制，但它们的内容是未定义的。 如果说 Socket 是 C/S 架构 的 TCP 编程，那么同理 WebSocket 就是 B/S架构的 TCP 编程，所以需要在客户端与服务端之间定义一个机制去协商一个子协议 - 更高级别的消息协议，将它使用在 WebSocket 之上去定义每次发送消息的类别、格式和内容，等等。 ...