BIMFACE二次開發系列49 Web網頁中加載模型與圖紙的技術方案

我的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天#

：了解AngularJS

AngularJS是一款非常優秀的前端高級 JS 框架，由 Misko Hevery 等人創建 2009 年被 Google 收購，用于其多款產品有一個全職的開發團隊繼續開發和維護這個庫有了這一類框架就可以輕松構建 SPA 應用程序 single page web application 通過指令擴展了 HTML，通過表達式綁定數據到 HTML。

二：AngularJS的優勢

更少的代碼，實現更強勁的功能

.帶領前端進入MVC時代
　　 mvc模式：Model（模型）是應用程序的核心，指的是程序在數據庫中存儲數據。
　　　　　 View（視圖）是應用的界面，將數據庫里的數據展現出來，展現給程序的使用者。
　　　　　　 Controller（控制器）處理用戶的交互行為，程序使用者更改數據，由控制器接受并發送給模型。

三：AngularJS的特性

MVC
.模塊化
自動化雙向數據綁定使用{{ }}對動態數據綁定，綁定到元素的innerHTML
指令系統 ng-
表單驗證
HTML組件化
.Angular 在構建增加、查詢、修改、刪除的頁面應用時能發揮最大優勢。

四：AngularJS語法特點

Angular 最大程度的減少了頁面上的 DOM 操作；
　　讓 JavaScript 中專注業務邏輯的代碼；
　　通過簡單的指令結合頁面結構與邏輯數據；
　　通過自定義指令實現組件化編程；
　　代碼結構更合理；
　　維護成本更低；
　　Angular 解放了傳統 JavaScript 中頻繁的 DOM 操作

五：AngularJS的用法

1.編寫第一個Angular應用

當網頁加載完畢，AngularJS 自動開始執行； HTML 頁面中 ng-xxx 的屬性稱之為指令（Directive）； ng-app 指令告訴 AngularJS，<html> 元素是 AngularJS 應用程序管理的邊界； {{ }} 雙花括號里面的叫做數據綁定表達式，可以是任何有效的JavaScript值、變量或語句。而在頁面上顯示的是表達式計算后的結果值。 | 管道符號可以給表達式添加過濾器，如 | number:2， |currency

<body>

</body>

</html>

2.Module.controller() 控制器

第二行代碼創建了一個名為userCtrl的控制器，以及一個控制器函數控制器函數接受一個名為$scope的參數

var app = angular.module(“myApp”, []); //myApp模塊名 app是模塊實例

app.controller(“userCtrl” ,function($scope){ //userCtrl是控制器的名字

$scope.name= “李雷和韓梅梅”; //$scope用來保存數據，定義方法

});

由于篇幅會很長，又考慮到條友們可能會沒有耐心看很長的篇章，所以本期就寫到這里，感興趣的同學可以關注小編，小編會繼續發送文章的！

為了感謝觀看，小編準備了禮物給大家，關注小編后私信回復“資料”即可領取哦！

頭條創作挑戰賽#

本文同步本人掘金平臺的原創翻譯：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…

在線咨詢

上一篇：定制錯題本之wkhtmltopdf和phantomjs比較
下一篇：一篇文章告訴你JavaScript 如何實現繼承

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商