[TOC] ## 1.4 JavaScript腳本 小程序的主要開發語言是 JavaScript ，開發者使用 JavaScript 來開發業務邏輯以及調用小程序的 API 來完成業務需求、處理用戶的操作。 ### 1.4.1 ECMAScript 在大部分開發者看來，ECMAScript和JavaScript表達的是同一種含義，但是嚴格的說，兩者的意義是不同的。 ECMAScript是一種由Ecma國際通過ECMA-262標準化的腳本程序設計語言， JavaScript 是 ECMAScript 的一種實現。理解 JavaScript 是 ECMAScript 一種實現后，可以幫助開發者理解小程序中的 JavaScript同瀏覽器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。 ECMA-262 規定了 ECMAScript 語言的幾個重要組成部分： 1. 語法 2. 類型 3. 語句 4. 關鍵字 5. 操作符 6. 對象 :-:  :-: 圖2-15 瀏覽器中的 JavaScript 瀏覽器中的JavaScript 是由 ECMAScript 和 BOM（瀏覽器對象模型）以及 DOM（文檔對象模型）組成的，Web前端開發者會很熟悉這兩個對象模型，它使得開發者可以去操作瀏覽器的一些表現，比如修改URL、修改頁面呈現、記錄數據等等。 :-:  :-: 圖2-16 NodeJS中的 JavaScript NodeJS中的JavaScript 是由 ECMAScript 和 NPM以及Native模塊組成，NodeJS的開發者會非常熟悉 NPM 的包管理系統，通過各種拓展包來快速的實現一些功能，同時通過使用一些原生的模塊例如 FS、HTTP、OS等等來擁有一些語言本身所不具有的能力。 :-:  :-: 圖2-17 小程序中的 JavaScript 小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 來實現的。同瀏覽器中的JavaScript 相比沒有 BOM 以及 DOM 對象，所以類似 JQuery、Zepto這種瀏覽器類庫是無法在小程序中運行起來的，同樣的缺少 Native 模塊和NPM包管理的機制，小程序中無法加載原生庫，也無法直接使用大部分的 NPM 包。 ### 1.4.2 小程序的執行環境 小程序目前可以運行在三大平臺： 1. iOS平臺，包括iOS9、iOS10、iOS11 2. Android平臺 3. 小程序IDE 區別主要是體現三大平臺實現的 ECMAScript 的標準有所不同。截止到當前一共有七個版本的ECMAScript 標準，目前開發者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的標準，但是在小程序中， iOS9和iOS10 所使用的運行環境并沒有完全的兼容到 ECMAScript 6 標準，一些 ECMAScript 6 中規定的語法和關鍵字是沒有的或者同標準是有所不同的，例如： - 箭頭函數 - let const - 模板字符串 所以一些開發者會發現有些代碼在舊的手機操作系統上出現一些語法錯誤。為了幫助開發者解決這類問題，小程序IDE提供語法轉碼工具幫助開發者，將 ECMAScript 6代碼轉為 ECMAScript 5代碼，從而在所有的環境都能得到很好的執行。 開發者需要在項目設置中，勾選 `ES6 轉 ES5 `開啟此功能。 ### 1.4.3 模塊化 瀏覽器中，所有 JavaScript 是運行在同一個作用域下的，定義的參數或者方法可以被后續加載的腳本訪問或者改寫。 同瀏覽器不同，小程序中可以將任何一個JavaScript 文件作為一個模塊，通過module.exports 或者 exports 對外暴露接口。 簡單模塊示例，B.js 引用模塊A，并使用A暴露的multiplyBy2方法完成一個變量乘以 2 的操作。 代碼清單2-26 模塊示例 ~~~ // moduleA.js module.exports = function( value ){ return value * 2; } ~~~ 代碼清單2-27 引用模塊A ~~~ // B.js // 在B.js中引用模塊A var multiplyBy2 = require('./moduleA') var result = multiplyBy2(4) ~~~ 代碼清單2-28 在需要使用這些模塊的文件中，使用 `require(path)` 將公共代碼引入 ~~~ var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } }) ~~~ ### 1.4.4 腳本的執行順序 瀏覽器中，腳本嚴格按照加載的順序執行。 在小程序中的腳本執行順序有所不同。小程序執行的入口文件是 `app.js` 。并且會根據其中 `require 的模塊順序`決定文件的運行順序，當 app.js 執行結束后，小程序會按照開發者在 `app.json` 中定義的 `pages 的順序`，逐一執行。 ### 1.4.5 作用域 同瀏覽器中運行的腳本文件有所不同，小程序的腳本的作用域同 NodeJS 更為相似。 在文件中聲明的變量和函數只在該文件中有效，不同的文件中可以聲明相同名字的變量和函數，不會互相影響。 當需要使用全局變量的時，通過使用全局函數 `getApp()` 獲取全局的實例，并設置相關屬性值，來達到設置全局變量的目的，如代碼2-38、代碼2-39所示。 代碼清單2-38 在腳本 a.js 中設置全局變量 ~~~ // a.js // 獲取全局變量 var global = getApp() global.globalValue = 'globalValue' ~~~ 代碼清單2-39 在腳本 b.js 中訪問 a.js 定義的全局變量 ~~~ // b.js // 訪問全局變量 var global = getApp() console.log(global.globalValue) // 輸出 globalValue ~~~ 需要注意的是，上述示例只有在 a.js 比 b.js 先執行才有效，當需要保證全局的數據可以在任何文件中安全的被使用到，那么可以在app.js的 `App()` 中進行設置，如代碼2-40、代碼2-41、代碼2-42所示。 代碼清單2-40 定義全局變量 ~~~ // app.js App({ globalData: 1 }) ~~~ 代碼清單2-41 獲取以及修改 global 變量的方法 ~~~ // a.js // 局部變量 var localValue = 'a' // 獲取 global 變量 var app = getApp() // 修改 global 變量 app.globalData++ // 執行后 globalData 數值為 2 ~~~ 代碼清單2-42 獲取 global 變量 ~~~ // b.js // 定義另外的局部變量，并不會影響 a.js 中文件變量 var localValue = 'b' // 如果先執行了 a.js 這里的輸出應該是 2 console.log(getApp().globalData) ~~~