當你創建更復雜的app時，你可能會遇到不是在 NativeScript 模塊里實現的功能。不要擔心，因為 NativeScript 允許你使用npm（node包管理）來導入npm模塊到你的app。或者，如果需要的話，你可以安裝 NativeScript 插件，它們是簡單的npm模塊，可以用來訪問本地代碼并使用安卓和ios SDK。 在本章，你將安裝和使用一個外部的email驗證器模塊，當郵件地址在注冊頁面輸入的時候驗證地址格式。然后，你會添加一個 NativeScript 插件， [NativeScript 社交分享](https://www.npmjs.com/package/nativescript-social-share) ，以允許用戶用他們設備本地的共享程序來分享他們的雜貨列表。 ## **[Table of contents](http://docs.nativescript.org/tutorial/chapter-5#table-of-contents)**目錄 * 5.1: 使用npm模塊 * [5.2: 使用NativeScript 插件](#5-2) ## **[5.1: Using npm modules](http://docs.nativescript.org/tutorial/chapter-5#51-using-npm-modules)**使用npm模塊 {#5-1} 能夠確保人們在注冊頁面輸入準確格式的email地址到你的app里是非常好的。你可以自己寫這個功能，但驗證郵件地址是令人驚訝地棘手（ [surprisingly tricky](http://stackoverflow.com/questions/46155/validate-email-address-in-javascript) ），所以使用一個已經提供驗證的npm模塊是更簡單的。對于雜貨鋪，我們來看看如何添加這個 [郵件驗證模塊](https://www.npmjs.com/package/email-validator) 來測試地址是否有效。 > ### 操作：安裝email驗證模塊 > > --- > > 回到你的命令行，確定你在雜貨鋪項目的文件夾根目錄工作，也就是這樣： > > `sample-Groceries <----------------` > > `├── app` > > `│ └── ...` > > `├── package.json` > > `└── platforms` > > `├── android` > > `└── ios` > > 在此根目錄安裝email驗證模塊： > > `npm install email-validator --save` 安裝進程在后臺搞了一些飛機。首先，因為你添加了 `--save` 標志，npm記錄這個依賴到你app的 `package.json` 。如果打開 `package.json` ，你會看到 `"email-validator"` 在你app的 `"dependencies"` 數組.。 `"dependencies": {` `"email-validator": "^1.0.4"` `}` npm CLI同樣在你app根目錄里創建了一個 `node_modules` 文件夾。此文件夾包含email驗證模塊的代碼，就是在 `node_modules/email_validator/index.js` 里的一些驗證邏輯。 > ### 提示： > > 通過在 `package.json` 文件保存你app的npm依賴，你總是可以運行 `npm install` 來再生你的 `node_modules` 文件夾。也是因為這點，通常的操作是在源碼管理里排除 `node_modules` 文件夾。雜貨鋪app使用git作源碼管理，也因此在它的 `.gitignore` 里包括了 `ode_modules/` 既然你安裝了模塊，我們就來看如何使用它。 #### > ### 操作：使用email驗證模塊 > > --- > > 打開 `/app/shared/view-models/user-view-model.js` 將下面這行代碼添加到文件頂部： > > `var validator = require("email-validator");` > > ### **注意：** > > --- > > NativeScript 框架的 `require()` 方法被設置為查看npm模塊的 `package.json` 文件的 `"main"` 值。在當前模塊里， `"main"` 值是 `"index.js"` 。因此，當你運行 `require("email-validator")` ，你實際上在請求位于 `node_modules/email_validator/index.js` 的文件。你也可以輸入 `require("email-validator/index")` 檢索到相同的文件。 > > 要利用驗證器，添加一個函數到 `user-view-model.js` ，正好在 `return viewModel` 行的上面： > > `viewModel.isValidEmail = function() {` > > `var email = this.get("email");` > > `return validator.validate(email);` > > `};` > > Then, edit the registration function in `app/views/register/register.js` to trap any malformed email addresses: > > 然后，在 `app/views/register/register.js` 編輯注冊函數來分離任何畸形的email地址： > > `exports.register = function() {` > > `if (user.isValidEmail()) {` > > `completeRegistration();` > > `} else {` > > `dialogsModule.alert({` > > `message: "Enter a valid email address.",` > > `okButtonText: "OK"` > > `});` > > `}` > > `};` 在這個函數里，用戶提交一個email和密碼，值被發送到視圖模型去驗證。如果通過，注冊可以畸形，否則你顯示一個警告。然而為了徹底檢驗這個改變（指的是添加驗證器這回事），你需要做另外一件事情。 > ### 操作：重建app > > 我們在第一章提過，雖然 `tns livesync` 命令足夠聰明地重載app來應付你對app的大多數更改，某些更改需要全部重建——主要是，在 `app/App_Resources` 里對本地文件的改變，通過 `npm install` 安裝了新的模塊，和新的 NativeScript 插件。 > > For NativeScript to recognize this new email-validator npm module, type `Ctrl+C` in your terminal to kill the existing `tns livesync` watcher if it’s still running, and then use `tns run` to rebuild your application and deploy it to an emulator or device. > > 要讓 NativeScript 認識這個新的email驗證器 npm 模塊，在你的命令行按 `Ctrl+C` 終止現有的 `tns livesync` 監視，如果它在繼續運行的話，然后使用 `tns run` 來重建你的應用并部署到虛擬機或者設備上。 > > `tns run ios --emulator` > > 或 > > `tns run android --emulator` > > app部署之后你可以再次運行 `livesync` 命令來重啟監視。 > > `tns livesync ios --emulator --watch` > > 或 > > `tns livesync android --emulator --watch` app再次運行之后，如果你視圖哦那個一個無效的email地址注冊，你會看到阻止提交的警告：  通常，npm模塊大大擴展你在 NativeScript app里能做的事情的數量。需要如期時間格式化？使用 [moment](https://www.npmjs.com/package/moment) 。需要多用途函數處理對象和數組？使用 [lodash](https://www.npmjs.com/package/lodash) 或 [underscore](https://www.npmjs.com/package/underscore) 。當你把 NativeScript 插件引入到這個場景時，這個代碼重用的效力會變得更加強大。 > ### 警告： > > **不是所有npm模塊在 NativeScript app里都能工作，依賴于 Node.js 或 browser APIs 的沒用，因為 NativeScript 里沒有這些 APIs 。 NativeScript wiki 涵蓋了一個\*\***[被驗證過能在NativeScript apps里運行的一些相當流行的npm模塊的清單](https://github.com/NativeScript/NativeScript/wiki/supported-npm-modules)**\*\* 。** ## [**5.2: Using NativeScript plugins**](http://docs.nativescript.org/tutorial/chapter-5#52-using-nativescript-plugins)**\*\***\*\*_\*使用\_\* NativeScript 插件 {#5-2} NativeScript插件是添加了運行原生代碼和使用ios\/android框架的功能的npm模塊。因為 NativeScript 插件也是npm模塊，你在此前部分學習的那么多技巧仍然有效。最大的不同之處是在命令行里用來安裝插件的方法。我們通過安裝 NativeScript 社交分享插件來看看它是如何工作的。 > ### 操作： ** 安裝社交分享插件** > > --- > > 回到命令行，確定你仍然在app的根目錄，運行下面的命令： > > `tns plugin add nativescript-social-share` 安裝進程做了與 `npm install` 命令相同的事情——包括從npm檢索模塊，安裝模塊到 `node_modules` 里面，并且把模塊作為一個依賴保存到 `ckage.json` ——但是 `tns plugin add` 命令而外地設置了插件需要使用的所有原生代碼。 例如 [NativeScript push插件](https://github.com/NativeScript/push-plugin) 使用了ios和android SDK，那么 `tns plugin add` 命令就妥善安裝了它們。 [NativeScript flashlight插件](https://github.com/tjvantoll/nativescript-flashlight) 需要授權使在安卓上用攝像頭，那么 `tns plugin add` 命令就同樣地負責設置好。 既然你安裝了社交分享插件，我們就來看如何使用它。 > ### 操作：使用社交分享插件 > > --- > > 打開`app/views/list/list.js` 在文件頂部添加下面這行，它會引入你剛才安裝的社交分享模塊： > > `var socialShare = require("nativescript-social-share");` > > 然后你需要創建一些UI元素來允許你分享雜貨列表。為此，打開 `app/views/list/list.xml` ，緊跟開標簽 `<Page>` 后且在開標前 `<GridLayout>` 前添加下面的代碼： > > `<Page.actionBar>` > > `<ActionBar title="Groceries">` > > `<ActionBar.actionItems>` > > `<ActionItem text="Share" tap="share" ios.position="right" />` > > `</ActionBar.actionItems>` > > `</ActionBar>` > > `</Page.actionBar>` > > 這段代碼定義了一個 [ActionBar](http://docs.nativescript.org/ui/action-bar) ，它是一個UI組件可以包含不同的目錄項目，并包裹在 `<ActionBar.actionItems>標簽里。` ActionBar 的 `title` 允許你顯示頁面具體的標題。 > > ### 注意： > > ios設備上， `<ActionItem>` 是有序地從左到右地放置；你可以通過提供一個 `ios.position` 屬性來覆蓋它們（就像上面的代碼那樣） > > 模塊安裝并引入之后，且UI就位，你可以在列表頁面的后臺代碼文件里實現 `<ActionItem>` 的tap處理器（ `share()` ）了。 > > 為此，回到 `list.js` 文件，粘貼下面的代碼到文件底部： > > `exports.share = function() {` > > `var list = [];` > > `var finalList = "";` > > `for (var i = 0, size = groceryList.length; i < size ; i++) {` > > `list.push(groceryList.getItem(i).name);` > > `}` > > `var listString = list.join(", ").trim();` > > `socialShare.shareText(listString);` > > `};` 這段代碼從雜貨列表的視圖模型抓取雜貨，把數據轉換為逗號分隔的字符串，并把字符串傳遞給社交分享模塊的 `shareText()` 方法。 > ### 警告： > > --- > > 在這節安裝了一個 NativeScript 插件，你必須最后一次重建app來測試改變。如果你不記得如何做，[回到本章開始](#5-1)去查看。 現在如果你運行app，你會看到在屏幕頂端有一個新的按鈕。當你點擊它，會出現原生的 iOS 或 Android 分享掛件，讓你發送你的雜貨到社交網絡，或者通過email，短信，或者任何你喜歡的方式發送它們。 酷斃了吧，哈？使用npm模塊的能力極大地擴展了你在一個 NativeScript app里能做的事情。需要在你的app里構建郵件？試試 [NativeScript email plugin](https://www.npmjs.com/package/nativescript-email) 。需要在你的app里使用剪貼板？試試 [NativeScript clipboard plugin](https://www.npmjs.com/package/nativescript-clipboard) 。 如果你在尋找 NativeScript 插件，可以從搜索 [Telerik NativeScript 插件市場](http://plugins.telerik.com/nativescript)和我們的[community-curated list of plugins on npm](http://plugins.nativescript.rocks/) 開始。如果沒找到你要的插件，你可以 [在我們的點子入口請求插件](https://nativescript.ideas.aha.io/) ，或者你可以嘗試 [自己創造這個插件](https://docs.nativescript.org/plugins) 。 Between NativeScript modules, npm modules, and NativeScript plugins, the NativeScript framework provides a lot of functionality you can use to build your next app. However, we've yet to talk about NativeScript's most powerful feature: the ability to directly access iOS and Android APIs in JavaScript. Let's look at how it works. 在 NativeScript 模塊，npm模塊，和 NativeScript 插件之間， NativeScript 框架提供了大量功能讓你可以用來創建你的下一個app。然而，我們尚未談到 NativeScript最強大的內容：在 JavaScript 里面直接訪問 iOS 和 Android 的API。我們來看看它是如何工作的 。