angularjs如何使用第三方函式庫？ angularjs使用第三方函式庫詳解

本篇文章介紹了angularjs如何使用第三方函式庫，有哪些第三方的函式庫是可以讓angularjs使用的，讓我們帶著問題一起進入文章。

Angular 的元件與模組看似好像與現有各種第三方類別庫（例如：lodash、moment 等）使用上有點格格不入，這很大的原因是TypeScript 造成的假象。三足鼎立的前端其實都是雷同的，不管是哪一種前端框架都可以使用到這些第三方類別庫。

以下我將從另一個視角解釋 Angular 如何使用第三方類別庫的一種經驗做法。

一、寫在前面

在開始之前，需要先了解TypeScript 模組系統－模組是指在其自身作用域裡執行，而不是在全域作用域裡；模組間是依靠export 和import 建立關係。編譯器在編譯過程中，也是依賴這種關係來定位需要編譯的檔案。

TypeScript 仍然還是以 JavaScript 檔案的形式發布類別庫，這會導致類型無法表述，需要配合聲明檔案對其進行類型描述；因此聲明檔案成了類別庫一個必不可少的組成部分。

二、分類

Angular 使用TypeScript 語言開發，誠如上一小節講來說，要想讓一個類別庫被運用，要件是有沒有聲明文件 。

有宣告檔

要分清類別庫是否有宣告檔*.d.ts，可以從兩個面向來確認這件事：

1、類別庫自帶

從Npm 安裝一個依賴套件後，可以直接檢查其庫的package.json 是否包含typings 節點，例如moment：

"typings": "./moment.d.ts"

2、TypeSearch檢索

TypeScript 提供了一個叫做TypeSearch 網站，可以直接輸入關鍵字檢查是否包含該類別庫的聲明文件。

例如lodash 可以在清單中點擊會跳到npm 網站，並且會看到這樣的一個指令：

npm install --save @types/lodash

無宣告檔

#這類情況還蠻常見，例如早一點時間G2 就沒有聲明文件，這種情況下只能自行編寫聲明文件。

Angular Cli 創建的專案會包含一個src/typings.d.ts 聲明文件，它會自動包含在全域聲明定義中，而把這些類庫的聲明資訊寫在這裡面再好不過。

一般而言自己很難對一個類別庫寫一個完整的聲明文件，這對於成本來說太不合算，因此往往都是只對部分全域物件做一個any （表示忽略該靜態型別檢查）亦可，例如：

// src/typings.d.ts
declare var G2: any;

三、如何使用？

聲明文件是紐帶，依然以這種方式來劃分如何使用。

對於有聲明文件，無需額外做什麼，只需在需要模組的地方使用import 來導入即可，例如：

import * as moment from 'moment';

moment(); // 当前时间

無聲明文件

重要來看無宣告檔案時怎麼做，前面說到使用any 來表示忽略靜態型別檢查，意義者無法享受宣告檔帶來的智慧提示快感。

像G2 ，我們可以在項目的任意位置直接使用它，但也僅僅只能識別G2 變量，而實例的方法或屬性是不可知的。

// app.component.ts

const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

除此之外 TypeScript 編譯過程中也不會對 G2 做任何型別檢查，G2 是否真的存在只能由自己掌握。對 Angular 而言，是需要額外在 .angular-cli.json 的 scripts 節點上明確載入這些模組。 （想看更多就到PHP中文網AngularJS開發手冊中學習）

// .angular-cli.json
"scripts": [
    "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript 編譯後還是JavaScript 程式碼，假如不手動載入G2 相關JavaScript文件，自然在運行過程中會提供未找到G2 的錯誤。

總結

從 TypeScript 的角度來看如何使用第三方類別庫，會有不同的感覺，只是一個簡單的非可靠但有效的描述。希望懂得多的人手下留情。

這裡無意黑 G2 的意思，現 G2 已經提供了宣告檔了。

好了，這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。

#

以上是angularjs如何使用第三方函式庫？ angularjs使用第三方函式庫詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！