我的BIMFACE二次系列博客中詳細(xì)介紹了服務(wù)器端API的調(diào)用方式以及示例程序，大家可以自行閱讀。

從本篇博客開始，主要介紹BIMFACE與不同類型的業(yè)務(wù)系統(tǒng)進(jìn)行集成開發(fā)應(yīng)用的技術(shù)方案。主要包含

• Web網(wǎng)頁集成BIMFACE應(yīng)用的技術(shù)方案
• CS客戶端集成BIMFACE應(yīng)用的技術(shù)方案
• 移動(dòng)App/小程序/公眾號集成BIMFACE應(yīng)用的技術(shù)方案

本篇主要介紹Web網(wǎng)頁集成BIMFACE應(yīng)用的技術(shù)方案。

由于BIMFACE前端使用了 HTML5、CSS3、WebGL等較新的網(wǎng)頁技術(shù)，所以下面也就是圍繞 HTML、CSS、JS 等技術(shù)做擴(kuò)展介紹。

網(wǎng)頁編程技術(shù)

1、樣式框架（控件庫）

前端樣式框架有幾十上百種，這里列出幾個(gè)主流、大家比較常見常用的樣式框架。

• Bootstrap

Bootstrap是全球最受歡迎的前端開源工具庫， 它支持 Sass 變量和 mixin、響應(yīng)式柵格系統(tǒng)、自帶大量組件和眾多強(qiáng)大的 JavaScript 插件。 基于 Bootstrap 提供的強(qiáng)大功能，能夠讓你快速設(shè)計(jì)并自定義你的響應(yīng)式網(wǎng)站、手機(jī)APP等。 Bootstrap框架中的腳本庫是基于jQuery構(gòu)建的。

• Layui

LayUI是一款采用自身模塊規(guī)范編寫的前端 UI 框架， 遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。 其外在極簡，內(nèi)在飽滿，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。 layui 首個(gè)版本發(fā)布于 2016 年秋天，它區(qū)別于那些基于 MVVM 底層的 UI 框架， 它更多是為后端程序員量身定做，開發(fā)者不需要涉足各種前端工具的復(fù)雜配置，只需面對瀏覽器本身， 一切所需要的元素與交互，Layui都完成了封裝。 Layui框架中的腳本庫是基于jQuery構(gòu)建的。 Layui 兼容目前市場上正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。 我們公司內(nèi)部的業(yè)務(wù)系統(tǒng)也用了Layui框架，大家也可以嘗試著用用。

• Element UI

它是餓了么團(tuán)隊(duì)出品的優(yōu)秀組件庫。 Element 是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。

• iView

一套基于 Vue.js 的高質(zhì)量 UI 組件庫。 包含

（1）iView Pro 以 View UI（iView） 為基礎(chǔ)，擴(kuò)展了 30+ 全新的組件， 除了基礎(chǔ)組件外，還包含了業(yè)務(wù)組件，比如頁頭組件、城市選擇器組件、登錄組件、通知菜單組件等。 View UI Pro 最大化地減輕開發(fā)者工作量，并極大程度地支持響應(yīng)式設(shè)計(jì)，對移動(dòng)端和平板電腦都有更好的支持。

（2）iView Admin Pro Admin Pro 是一套企業(yè)級的通用型中后臺前端解決方案， 它基于 View UI（iView），并內(nèi)置了 View UI Pro。 支持多種布局，動(dòng)態(tài)菜單，強(qiáng)大的鑒權(quán)系統(tǒng)，含有大量典型的業(yè)務(wù)示例，如用戶管理、菜單權(quán)限管理、角色權(quán)限管理等。 Admin Pro 由 iView 作者研發(fā)，使用最前沿的前端技術(shù)棧，支持各類型產(chǎn)品， 比如典型的中后臺應(yīng)用（類阿里云后臺、七牛云后臺，各類 to B 產(chǎn)品）、 社區(qū)型應(yīng)用（類知乎、論壇、門戶）（需使用社交布局）、 地圖型應(yīng)用（需使用地圖布局）、工作桌面型應(yīng)用（需使用工作桌面布局）等。 iView官方還對微信小程序?qū)ｉT封裝了一套高質(zhì)量的UI組件庫，叫 iView Weapp。 iView 與 iView Weapp 校本庫都是基于Vue.js封裝的。 iView 與 iView 與 iView Weapp 兩款組件實(shí)現(xiàn)并適配了PC端、移動(dòng)端、小程序等常用場景， 這里我比較推薦它。大家可以嘗試用用。

2、腳本庫

學(xué)習(xí)網(wǎng)頁編程，最開始接觸的就是JavaScript，它是輕量級，解釋型或即時(shí)編譯型的編程語言。

JavaScript通常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。
JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。

• JavaScript

提供的功能非常強(qiáng)大，但是學(xué)習(xí)起來很困難，一般都會有雜而亂的感覺。
主要有以下原因：

• JavaScript本身知識很抽象難懂，比如：閉包、內(nèi)置對象、DOM。
• JavaScript本身內(nèi)容很多，如函數(shù)庫、對象庫非常多。
• JavaScript混合了多種編程思想。既有面向過程編程思想，又有面向?qū)ο缶幊趟枷搿?/span>
• 不通的瀏覽器對JavaScript支持也不同。為了適配不同的瀏覽器需要做非常多的代碼進(jìn)行特殊處理。
• 沒有好的編輯器，編寫代碼全靠大腦來記憶。
• JavaScript運(yùn)行在網(wǎng)頁里面，如果發(fā)生錯(cuò)誤，不太好調(diào)試。
• 其他原因。

• jQuery

2006年1月就出現(xiàn)了jQuery，它 是一個(gè) JavaScript 庫，極大地簡化了 JavaScript 編程。官方API功能強(qiáng)大，文檔齊全、使用示例也很多，適配絕大多數(shù)主流瀏覽器，非常受歡迎，因此出現(xiàn)了非常多的基于jQuery封裝的免費(fèi)插件，非常好用。到目前為止，jQuery依然有非常多的開發(fā)者在使用它。

• Angular

誕生于2009年，由 Misko Hevery（米斯科·赫維） 等人創(chuàng)建，后為Google所收購，由Google維護(hù)。
AngularJS嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷。

AngularJS通過使用我們稱為指令(directives)的結(jié)構(gòu)，讓瀏覽器能夠識別新的語法。例如：

• 
  
• 使用雙大括號{{}}語法進(jìn)行數(shù)據(jù)綁定
• 使用DOM控制結(jié)構(gòu)來實(shí)現(xiàn)迭代或者隱藏DOM片段
• 支持表單和表單的驗(yàn)證
• 能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上
• 能將HTML分組成可重用的組件

• React

FaceBook 公司于2013年5月開源的 JavaScript MVC 框架。由于 React 的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關(guān)注和使用。主要用于構(gòu)建UI。可以在React里傳遞多種類型的參數(shù)，如聲明代碼，幫助你渲染出UI、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動(dòng)態(tài)變量、甚至是可交互的應(yīng)用組件。

• Vue.js

作者尤雨溪，中國人。在谷歌工作，工作過程中受到Angular的啟發(fā)，從中提取自己所喜歡的部分，開發(fā)出了一款輕量框架。

2014年1月，正式對外發(fā)布了Vue.Js第一個(gè)版本。

Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。只關(guān)注視圖層，采用自底向上增量開發(fā)的設(shè)計(jì)。它目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue 學(xué)習(xí)起來非常簡單，目前國內(nèi)很多大廠都在使用它。

• TypeScript

微軟公司在2015年12月推出了TypeScript。它是 JavaScript類型的超集，它給 JavaScript 添加了語言特性擴(kuò)展。增加的功能包括：

• 類型批注和編譯時(shí)類型檢查
• 類型推斷、類型擦除
• 接口、枚舉
• 泛型編程、命名空間
• 元組、Await異步編程

TypeScript可以編譯成純JavaScript，可以運(yùn)行在任何瀏覽器、任何計(jì)算機(jī)和任何操作系統(tǒng)上，并且是免費(fèi)開源的。上面的AngularJS、Vue.js 的最新版本中底層都是用 TypeScript 重寫的，足以看出TypeScript是多么的受歡迎。

Ajax技術(shù)

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

通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。 這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。 使用 AJAX 的應(yīng)用程序案例：新浪微博、Google 地圖、開心網(wǎng)等等。

1、工作原理

2、創(chuàng)建 XMLHttpRequest 對象

3、向服務(wù)器發(fā)送請求

4、服務(wù)器響應(yīng)

5、XMLHttpRequest 對象屬性

6、onreadystatechange 事件

jQuery AJAX

原始的Ajax使用較麻煩，jQuery Ajax是目前應(yīng)用的首選，其內(nèi)部實(shí)現(xiàn)原理是基于XMLHttpRequest對象封裝了一些常用易用的方法。

建議

• 小團(tuán)隊(duì)使用 jQuery
• 大團(tuán)隊(duì)有專業(yè)前端開發(fā)工程師，使用Vue.js

《BIMFace.SDK.CSharp》開源SDK。歡迎大家下載使用：https://gitee.com/NAlps/BIMFace.SDK

#俄羅斯因疫情全國放假9天#

頭條創(chuàng)作挑戰(zhàn)賽#

本文同步本人掘金平臺的原創(chuàng)翻譯：https://juejin.cn/post/7124664273355145229

想要更好地理解 Angular 應(yīng)用程序所有的不同構(gòu)建的模塊？

在這篇文章中，我們將走進(jìn)模塊的內(nèi)容。

在 angular 應(yīng)用中，模塊是共享和重用代碼的好方法。

共享模塊不僅讓你的應(yīng)用聯(lián)系緊密，而且可以對你的應(yīng)用進(jìn)行瘦身。

在這個(gè)教程中，我們將創(chuàng)建自定義的模塊，并發(fā)掘它的組件。

然后，我們將學(xué)習(xí)怎么使用我們的模塊來啟用延遲加載，從而使應(yīng)用更小，使用戶體驗(yàn)更好。

我們開始吧！

App Module

在 Angular 里面，一切皆可組織成模塊。所以，即使你不知道哪些是模塊或者怎么使用它們，你已經(jīng)無行在應(yīng)用中使用它們了。其中最突出的是 AppModule。

AppModule 是你應(yīng)用中的根模塊，并且對于運(yùn)行我們的應(yīng)用程序是必要的模塊。在這里，我們可以定義應(yīng)用程序使用哪些組件或者哪些模塊。那么它長什么樣呢？我們通過 angular-cli 來生成一個(gè)基本的 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 {}
復(fù)制代碼

要生成你自己的模塊，請打開終端并進(jìn)入項(xiàng)目的根目錄。

使用下面的命令行去生成一個(gè)新的模塊文件。

ng generate module [name]
復(fù)制代碼

一個(gè) Angular Module 是什么？

簡單來說，一個(gè)模塊就是一個(gè)類，就像組件和服務(wù)一樣。

Angular 中的代碼通常以模塊的形式組織。我們可以將模塊視為包含特定用例所需要代碼的包或捆綁包。

最重要的模塊是 App-Module，每個(gè)通過腳手架生成的應(yīng)用都有它。

但是，App-Module 很可能不是你目前為止遇到的唯一模塊。還有很多開箱即用的模塊。

比如 Http-Client-Module，它包含一個(gè)很有用處的 Http-Client 和 Forms-Module（其中包含 UI 組件和 HTML-Forms 指令）。

正如我們上面的例子中看到的，我們要使用模塊之前，需要先導(dǎo)入模塊。

App-Module 是應(yīng)用程序的根模塊。該模塊導(dǎo)入其他模塊，這些模塊可以自己導(dǎo)入其他模塊。

就像組件一樣，生成的結(jié)構(gòu)是一個(gè)模塊樹。

@NgModule

在 @NgModule 操作符里面，我們定義模塊的所有屬性。我們提供了一個(gè)簡單的 JavaScript 對象作為參數(shù)。讓我們仔細(xì)點(diǎn)看，這些屬性是什么，又干了些什么：

Bootstrap

定義應(yīng)用程序的根組件。僅在 AppModule 中使用它。

Exports

我們在這里定義要組件、指令或者管道。這意味著，我們的模塊在導(dǎo)入時(shí)將這些模塊提供給其他模塊。否則，這些模塊將停留在模塊內(nèi)部，無法從外部訪問。

Declarations

在 declarations 數(shù)組中，我們定義著所有的組件，指令和管道，我們可以在這個(gè)模塊內(nèi)使用。如果一個(gè)組件（或者指令或者管道）你并沒有添加到 declarations 中，但是你又在模塊或者應(yīng)用中使用了，angular 應(yīng)用在運(yùn)行時(shí)報(bào)錯(cuò)。此外，一個(gè)組件只能在一個(gè)模塊中聲明。如果你想在多個(gè)模塊中使用你的組件，你需要將改組件捆綁到一個(gè)單獨(dú)的模塊中，并將其導(dǎo)入到模塊中。

Imports

說到導(dǎo)入... 你的模塊可以導(dǎo)入任意數(shù)量的子模塊。還沒有定義任何自定義模塊？沒問題，我們將解決這個(gè)問題。即使你沒有任何模塊，你仍然需要導(dǎo)入一些 angular 模塊。正如我們之前提到的，Angular 在構(gòu)建之初已經(jīng)考慮到了模塊化。雖然很多特性都包含在 Angular 的核心中，但是有些特性被捆綁在它們自己的模塊中。比如，你想使用 HttpClient，你得想導(dǎo)入 HttpClientModule。

Providers

我們定義了模塊所需的任何的 @Injectables。然后，任何子組件或者模塊都可以通過依賴注入獲得該 @Injectables 相同的實(shí)例。在 AppModule 案例中，這些 @Injectables 就是 application-scoped。

構(gòu)建自定義模塊

我們假裝已經(jīng)構(gòu)建了一個(gè)很棒的應(yīng)用程序。這個(gè)程序只有一個(gè)模塊，就是 AppModule。

現(xiàn)在，為我們應(yīng)用程序添加登錄內(nèi)容。登錄內(nèi)容將包含一個(gè)登錄的頁面和一個(gè)注冊的頁面。也許會有一個(gè)幫助的頁面。每個(gè)頁面都是以組件的方式呈現(xiàn)。

LoginComponent
RegisterComponent
HelpComponent
復(fù)制代碼

同時(shí)，我們需要一個(gè)服務(wù)發(fā)起 Http 請求。

AuthenticationService
復(fù)制代碼

由于這些頁面是完全獨(dú)立的，并且與我們應(yīng)用程序的內(nèi)容頁面無關(guān)。我們決定將它們捆綁到一個(gè)單獨(dú)的模塊中。我們稱這個(gè)模塊為 AuthentictionModule。

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

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

@NgModule({
  imports: [CommonModule],
})
export class AuthenticationModule {}
復(fù)制代碼

現(xiàn)在，將我們的組件添加到 declarations 部分。同時(shí)，我們將它們放在 exports 部分，因?yàn)槲覀兿朐谀K外部使用它們。

// 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 {}
復(fù)制代碼

已經(jīng)準(zhǔn)備好了。現(xiàn)在，我們可以在 AppModule 導(dǎo)入它，然后使用它里面的組件，比如在 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 {}
復(fù)制代碼

Lazy-Loading Modules

事實(shí)表明，你可以使用模塊做更多事情，而不是僅僅組織你的組件。也可以延遲加載模塊。這是什么意思呢？

Angular 程序的下載體積很大。根據(jù)你的用戶場景，這是一個(gè)很大的問題。特別是在移動(dòng)端，加載一個(gè)應(yīng)用程序可能需要耗費(fèi)很長時(shí)間。減少加載時(shí)間的一種方法是將應(yīng)用程序拆分成模塊。

當(dāng)你以惰性方式加載模塊時(shí)，它不會包含在初始的程序中。相反，它僅在需要的時(shí)候才下載。為啥要下載我們還沒用得上的組件呢，是吧？

那么，它是怎么工作的？

我們用惰性加載方式更改下先前的例子。為了實(shí)現(xiàn)這點(diǎn)，我們要在應(yīng)用中添加路由。

首先，我們用路由配置來配置路由模塊。所以，我們創(chuàng)建一個(gè)名為 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)
復(fù)制代碼

非延遲加載的組件由路徑和組件屬性指定。如果我們想在特定的路由上延遲加載模塊，我們可以使用 loadChildren 屬性。這里我們指定模塊的路徑和名稱，用 # 分隔開。

之后，我們可以在我們的 AppModule 中導(dǎo)入配置模塊。我們還刪除了 AuthenticationModule 的導(dǎo)入，因?yàn)樗茄舆t加載的。

// 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 {}
復(fù)制代碼

接著，我們在程序的某個(gè)地方添加 router-outlet。這里我們把它放在 AppComponent 中。

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

<router-outlet></router-outlet>
復(fù)制代碼

如果我們進(jìn)入那個(gè)路由，那個(gè)模塊將被加載。但是此時(shí)屏幕上什么都沒有。因?yàn)?Angular 還不知道現(xiàn)實(shí)哪個(gè)組件。為了解決這個(gè)問題，我們必須為 authentication module 定義子路由。這看起來集合和 app.routing 完全一樣。不一樣的是，我們調(diào)用的是 forChild() 而不是 forRoot()，當(dāng)然，路由也不同。

// 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)
復(fù)制代碼

現(xiàn)在需要做的是，將路由導(dǎo)入到 AuthenticationModule 中。當(dāng)我們再次進(jìn)入路由后，登陸組件會被展示出來。這是因?yàn)槲覀兣渲闷錇槟J(rèn)路由。

// 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 {}
復(fù)制代碼

Angular 模塊不是 JavaScript 模塊

別把 Angular 模塊和 JavaScript 模塊混淆。Angular 模塊是類，用 @NgModule 進(jìn)行標(biāo)識。另一方面，當(dāng)我們使用 Typescript 關(guān)鍵字 import 導(dǎo)入模塊時(shí)，我們在導(dǎo)入一個(gè) JavaScript 模塊。該模塊可以包含 Angular 模塊。

Angular 模塊

// src/app/app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
復(fù)制代碼

JavaScript 模塊

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
復(fù)制代碼

本文是譯文，采用的是意譯的方式，其中加上個(gè)人的理解和注釋，原文地址是：malcoded.com/posts/angul…