我的BIMFACE二次系列博客中详细介绍了服务器端API的调用方式以及示例程序，大家可以自行阅读。

从本篇博客开始，主要介绍BIMFACE与不同类型的业务系统进行集成开发应用的技术方案。主要包含

• Web网页集成BIMFACE应用的技术方案
• CS客户端集成BIMFACE应用的技术方案
• 移动App/小程序/公众号集成BIMFACE应用的技术方案

本篇主要介绍Web网页集成BIMFACE应用的技术方案。

由于BIMFACE前端使用了 HTML5、CSS3、WebGL等较新的网页技术，所以下面也就是围绕 HTML、CSS、JS 等技术做扩展介绍。

网页编程技术

1、样式框架（控件库）

前端样式框架有几十上百种，这里列出几个主流、大家比较常见常用的样式框架。

• Bootstrap

Bootstrap是全球最受欢迎的前端开源工具库， 它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。 基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的响应式网站、手机APP等。 Bootstrap框架中的脚本库是基于jQuery构建的。

• Layui

LayUI是一款采用自身模块规范编写的前端 UI 框架， 遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 其外在极简，内在饱满，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。 layui 首个版本发布于 2016 年秋天，它区别于那些基于 MVVM 底层的 UI 框架， 它更多是为后端程序员量身定做，开发者不需要涉足各种前端工具的复杂配置，只需面对浏览器本身， 一切所需要的元素与交互，Layui都完成了封装。 Layui框架中的脚本库是基于jQuery构建的。 Layui 兼容目前市场上正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。 我们公司内部的业务系统也用了Layui框架，大家也可以尝试着用用。

• Element UI

它是饿了么团队出品的优秀组件库。 Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

• iView

一套基于 Vue.js 的高质量 UI 组件库。 包含

（1）iView Pro 以 View UI（iView） 为基础，扩展了 30+ 全新的组件， 除了基础组件外，还包含了业务组件，比如页头组件、城市选择器组件、登录组件、通知菜单组件等。 View UI Pro 最大化地减轻开发者工作量，并极大程度地支持响应式设计，对移动端和平板电脑都有更好的支持。

（2）iView Admin Pro Admin Pro 是一套企业级的通用型中后台前端解决方案， 它基于 View UI（iView），并内置了 View UI Pro。 支持多种布局，动态菜单，强大的鉴权系统，含有大量典型的业务示例，如用户管理、菜单权限管理、角色权限管理等。 Admin Pro 由 iView 作者研发，使用最前沿的前端技术栈，支持各类型产品， 比如典型的中后台应用（类阿里云后台、七牛云后台，各类 to B 产品）、 社区型应用（类知乎、论坛、门户）（需使用社交布局）、 地图型应用（需使用地图布局）、工作桌面型应用（需使用工作桌面布局）等。 iView官方还对微信小程序专门封装了一套高质量的UI组件库，叫 iView Weapp。 iView 与 iView Weapp 校本库都是基于Vue.js封装的。 iView 与 iView 与 iView Weapp 两款组件实现并适配了PC端、移动端、小程序等常用场景， 这里我比较推荐它。大家可以尝试用用。

2、脚本库

学习网页编程，最开始接触的就是JavaScript，它是轻量级，解释型或即时编译型的编程语言。

JavaScript通常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

• JavaScript

提供的功能非常强大，但是学习起来很困难，一般都会有杂而乱的感觉。
主要有以下原因：

• JavaScript本身知识很抽象难懂，比如：闭包、内置对象、DOM。
• JavaScript本身内容很多，如函数库、对象库非常多。
• JavaScript混合了多种编程思想。既有面向过程编程思想，又有面向对象编程思想。
• 不通的浏览器对JavaScript支持也不同。为了适配不同的浏览器需要做非常多的代码进行特殊处理。
• 没有好的编辑器，编写代码全靠大脑来记忆。
• JavaScript运行在网页里面，如果发生错误，不太好调试。
• 其他原因。

• jQuery

2006年1月就出现了jQuery，它 是一个 JavaScript 库，极大地简化了 JavaScript 编程。官方API功能强大，文档齐全、使用示例也很多，适配绝大多数主流浏览器，非常受欢迎，因此出现了非常多的基于jQuery封装的免费插件，非常好用。到目前为止，jQuery依然有非常多的开发者在使用它。

• Angular

诞生于2009年，由 Misko Hevery（米斯科·赫维） 等人创建，后为Google所收购，由Google维护。
AngularJS尝试去补足HTML本身在构建应用方面的缺陷。

AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：

• 
  
• 使用双大括号{{}}语法进行数据绑定
• 使用DOM控制结构来实现迭代或者隐藏DOM片段
• 支持表单和表单的验证
• 能将逻辑代码关联到相关的DOM元素上
• 能将HTML分组成可重用的组件

• React

FaceBook 公司于2013年5月开源的 JavaScript MVC 框架。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用。主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

• Vue.js

作者尤雨溪，中国人。在谷歌工作，工作过程中受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架。

2014年1月，正式对外发布了Vue.Js第一个版本。

Vue.js是一套构建用户界面的渐进式框架。只关注视图层，采用自底向上增量开发的设计。它目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，目前国内很多大厂都在使用它。

• TypeScript

微软公司在2015年12月推出了TypeScript。它是 JavaScript类型的超集，它给 JavaScript 添加了语言特性扩展。增加的功能包括：

• 类型批注和编译时类型检查
• 类型推断、类型擦除
• 接口、枚举
• 泛型编程、命名空间
• 元组、Await异步编程

TypeScript可以编译成纯JavaScript，可以运行在任何浏览器、任何计算机和任何操作系统上，并且是免费开源的。上面的AngularJS、Vue.js 的最新版本中底层都是用 TypeScript 重写的，足以看出TypeScript是多么的受欢迎。

Ajax技术

AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

1、工作原理

2、创建 XMLHttpRequest 对象

3、向服务器发送请求

4、服务器响应

5、XMLHttpRequest 对象属性

6、onreadystatechange 事件

jQuery AJAX

原始的Ajax使用较麻烦，jQuery Ajax是目前应用的首选，其内部实现原理是基于XMLHttpRequest对象封装了一些常用易用的方法。

建议

• 小团队使用 jQuery
• 大团队有专业前端开发工程师，使用Vue.js

《BIMFace.SDK.CSharp》开源SDK。欢迎大家下载使用：https://gitee.com/NAlps/BIMFace.SDK

#俄罗斯因疫情全国放假9天#

头条创作挑战赛#

本文同步本人掘金平台的原创翻译：https://juejin.cn/post/7124664273355145229

想要更好地理解 Angular 应用程序所有的不同构建的模块？

在这篇文章中，我们将走进模块的内容。

在 angular 应用中，模块是共享和重用代码的好方法。

共享模块不仅让你的应用联系紧密，而且可以对你的应用进行瘦身。

在这个教程中，我们将创建自定义的模块，并发掘它的组件。

然后，我们将学习怎么使用我们的模块来启用延迟加载，从而使应用更小，使用户体验更好。

我们开始吧！

App Module

在 Angular 里面，一切皆可组织成模块。所以，即使你不知道哪些是模块或者怎么使用它们，你已经无行在应用中使用它们了。其中最突出的是 AppModule。

AppModule 是你应用中的根模块，并且对于运行我们的应用程序是必要的模块。在这里，我们可以定义应用程序使用哪些组件或者哪些模块。那么它长什么样呢？我们通过 angular-cli 来生成一个基本的 AppModule。

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
复制代码

要生成你自己的模块，请打开终端并进入项目的根目录。

使用下面的命令行去生成一个新的模块文件。

ng generate module [name]
复制代码

一个 Angular Module 是什么？

简单来说，一个模块就是一个类，就像组件和服务一样。

Angular 中的代码通常以模块的形式组织。我们可以将模块视为包含特定用例所需要代码的包或捆绑包。

最重要的模块是 App-Module，每个通过脚手架生成的应用都有它。

但是，App-Module 很可能不是你目前为止遇到的唯一模块。还有很多开箱即用的模块。

比如 Http-Client-Module，它包含一个很有用处的 Http-Client 和 Forms-Module（其中包含 UI 组件和 HTML-Forms 指令）。

正如我们上面的例子中看到的，我们要使用模块之前，需要先导入模块。

App-Module 是应用程序的根模块。该模块导入其他模块，这些模块可以自己导入其他模块。

就像组件一样，生成的结构是一个模块树。

@NgModule

在 @NgModule 操作符里面，我们定义模块的所有属性。我们提供了一个简单的 JavaScript 对象作为参数。让我们仔细点看，这些属性是什么，又干了些什么：

Bootstrap

定义应用程序的根组件。仅在 AppModule 中使用它。

Exports

我们在这里定义要组件、指令或者管道。这意味着，我们的模块在导入时将这些模块提供给其他模块。否则，这些模块将停留在模块内部，无法从外部访问。

Declarations

在 declarations 数组中，我们定义着所有的组件，指令和管道，我们可以在这个模块内使用。如果一个组件（或者指令或者管道）你并没有添加到 declarations 中，但是你又在模块或者应用中使用了，angular 应用在运行时报错。此外，一个组件只能在一个模块中声明。如果你想在多个模块中使用你的组件，你需要将改组件捆绑到一个单独的模块中，并将其导入到模块中。

Imports

说到导入... 你的模块可以导入任意数量的子模块。还没有定义任何自定义模块？没问题，我们将解决这个问题。即使你没有任何模块，你仍然需要导入一些 angular 模块。正如我们之前提到的，Angular 在构建之初已经考虑到了模块化。虽然很多特性都包含在 Angular 的核心中，但是有些特性被捆绑在它们自己的模块中。比如，你想使用 HttpClient，你得想导入 HttpClientModule。

Providers

我们定义了模块所需的任何的 @Injectables。然后，任何子组件或者模块都可以通过依赖注入获得该 @Injectables 相同的实例。在 AppModule 案例中，这些 @Injectables 就是 application-scoped。

构建自定义模块

我们假装已经构建了一个很棒的应用程序。这个程序只有一个模块，就是 AppModule。

现在，为我们应用程序添加登录内容。登录内容将包含一个登录的页面和一个注册的页面。也许会有一个帮助的页面。每个页面都是以组件的方式呈现。

LoginComponent
RegisterComponent
HelpComponent
复制代码

同时，我们需要一个服务发起 Http 请求。

AuthenticationService
复制代码

由于这些页面是完全独立的，并且与我们应用程序的内容页面无关。我们决定将它们捆绑到一个单独的模块中。我们称这个模块为 AuthentictionModule。

// src/app/authentication/authentication.module.ts

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'

@NgModule({
  imports: [CommonModule],
})
export class AuthenticationModule {}
复制代码

现在，将我们的组件添加到 declarations 部分。同时，我们将它们放在 exports 部分，因为我们想在模块外部使用它们。

// src/app/authentication/authentication.module.ts

import { HelpComponent } from './help/help.component'
import { RegisterComponent } from './register/register.component'
import { LoginComponent } from './login/login.component'
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'

@NgModule({
  imports: [CommonModule],
  declarations: [LoginComponent, RegisterComponent, HelpComponent],
  exports: [LoginComponent, RegisterComponent, HelpComponent],
})
export class AuthenticationModule {}
复制代码

已经准备好了。现在，我们可以在 AppModule 导入它，然后使用它里面的组件，比如在 AppComponent 中使用。

// src/app/app.module.ts

import { AuthenticationModule } from './authentication/authentication.module'
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AuthenticationModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
复制代码

Lazy-Loading Modules

事实表明，你可以使用模块做更多事情，而不是仅仅组织你的组件。也可以延迟加载模块。这是什么意思呢？

Angular 程序的下载体积很大。根据你的用户场景，这是一个很大的问题。特别是在移动端，加载一个应用程序可能需要耗费很长时间。减少加载时间的一种方法是将应用程序拆分成模块。

当你以惰性方式加载模块时，它不会包含在初始的程序中。相反，它仅在需要的时候才下载。为啥要下载我们还没用得上的组件呢，是吧？

那么，它是怎么工作的？

我们用惰性加载方式更改下先前的例子。为了实现这点，我们要在应用中添加路由。

首先，我们用路由配置来配置路由模块。所以，我们创建一个名为 app.routing.ts 的文件，它跟 app.module 同级。

// src/app/app.routing.ts

import { ContentComponent } from './content/content.component'
import { Routes, RouterModule } from '@angular/router'
import { ModuleWithProviders } from '@angular/core'

export const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'content' },
  { path: 'content', component: ContentComponent },
  {
    path: 'login',
    loadChildren: './authentication/authentication.module#AuthenticationModule',
  },
]

export const routing: ModuleWithProviders = RouterModule.forRoot(routes)
复制代码

非延迟加载的组件由路径和组件属性指定。如果我们想在特定的路由上延迟加载模块，我们可以使用 loadChildren 属性。这里我们指定模块的路径和名称，用 # 分隔开。

之后，我们可以在我们的 AppModule 中导入配置模块。我们还删除了 AuthenticationModule 的导入，因为它是延迟加载的。

// src/app/app.module.ts

import { routing } from './app.routing'
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'
import { ContentComponent } from './content/content.component'

@NgModule({
  declarations: [AppComponent, ContentComponent],
  imports: [
    BrowserModule,
    routing, //import routing
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
复制代码

接着，我们在程序的某个地方添加 router-outlet。这里我们把它放在 AppComponent 中。

<!-- src/app/app.component.html -->

<router-outlet></router-outlet>
复制代码

如果我们进入那个路由，那个模块将被加载。但是此时屏幕上什么都没有。因为 Angular 还不知道现实哪个组件。为了解决这个问题，我们必须为 authentication module 定义子路由。这看起来集合和 app.routing 完全一样。不一样的是，我们调用的是 forChild() 而不是 forRoot()，当然，路由也不同。

// src/app/authentication/authentication.routing.ts

import { AuthenticationComponent } from './authentication.component'
import { HelpComponent } from './help/help.component'
import { RegisterComponent } from './register/register.component'
import { LoginComponent } from './login/login.component'
import { Routes, RouterModule } from '@angular/router'
import { ModuleWithProviders } from '@angular/core'

export const routes: Routes = [
  { path: '', component: LoginComponent }, // default route of the module
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'help', component: HelpComponent },
]

export const routing: ModuleWithProviders = RouterModule.forChild(routes)
复制代码

现在需要做的是，将路由导入到 AuthenticationModule 中。当我们再次进入路由后，登陆组件会被展示出来。这是因为我们配置其为默认路由。

// src/app/authentication/authentication.module.ts

import { AuthenticationComponent } from './authentication.component'
import { routing } from './authentication.routing'
import { HelpComponent } from './help/help.component'
import { RegisterComponent } from './register/register.component'
import { LoginComponent } from './login/login.component'
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'

@NgModule({
  imports: [
    CommonModule,
    routing, // import routing
  ],
  declarations: [
    AuthenticationComponent,
    LoginComponent,
    RegisterComponent,
    HelpComponent,
  ],
})
export class AuthenticationModule {}
复制代码

Angular 模块不是 JavaScript 模块

别把 Angular 模块和 JavaScript 模块混淆。Angular 模块是类，用 @NgModule 进行标识。另一方面，当我们使用 Typescript 关键字 import 导入模块时，我们在导入一个 JavaScript 模块。该模块可以包含 Angular 模块。

Angular 模块

// src/app/app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
复制代码

JavaScript 模块

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
复制代码

本文是译文，采用的是意译的方式，其中加上个人的理解和注释，原文地址是：malcoded.com/posts/angul…