Javascript Script

The main development language of the mini-program is JavaScript. Developers use JavaScript to develop business logic and call the API of the mini-program to meet business needs.

ECMAScript

In the eyes of most developers, ECMAScript and JavaScript express the same meaning, but strictly speaking, the meanings of the two are different. ECMAScript is a script programming language standardized by Ecma International through ECMA-262. JavaScript is an implementation of ECMAScript. Understanding JavaScript is an implementation of ECMAScript can help developers understand that JavaScript in mini-programs is different from JavaScript in browsers and JavaScript in NodeJS.

ECMA-262 specifies several important components of the ECMAScript language:

1. Type

2. Syntax

3. Statement

4. Keyword

5. Operator

6. Object

The structure of JavaScript in the browser is shown in the figure below:

The JavaScript in the browser is composed of ECMAScript, BOM (Browser Object Model) and DOM (Document Object Model). Web front-end developers will be very familiar with these two object models, which allow developers to operate some browser performances, such as modifying URLs, modifying page presentation, recording data, etc. The structure of JavaScript in NodeJS is shown in the figure below:

The JavaScript in NodeJS is composed of ECMAScript, NPM and Native modules. NodeJS developers will be very familiar with the NPM package management system, and use various expansion packages to quickly implement some functions. At the same time, by using some native modules such as FS, HTTP, OS, etc., they have some capabilities that the language itself does not have.

Then, the two environments familiar to developers are different. The structure of JavaScript in the mini program is shown in the figure below.

The JavaScript in the mini program is implemented by ECMAScript, the mini program framework, and the mini program API. Compared with the JavaScript in the browser, there is no BOM and DOM object, so browser libraries such as JQuery and Zepto cannot run in the mini program. Similarly, there is a lack of Native module and NPM package management mechanism. The mini program cannot load native libraries, nor can it directly use most NPM packages.

Mini Program Execution Environment

After understanding that JavaScript in mini programs is different from browsers and NodeJS, developers also need to pay attention to another issue. The script execution environment of mini programs on different platforms is also different.

Mini programs can currently run on three major platforms:

• iOS platform, including iOS9, iOS10, and iOS11
• Android platform
• Mini Program IDE

This difference mainly reflects the differences in the ECMAScript standards implemented by the three major platforms. As of now, there are a total of seven versions of ECMAScript standards. Currently, most developers use ECMAScript 5 and ECMAScript 6 standards. However, in mini programs, the operating environment used by iOS9 and iOS10 is not fully compatible with the ECMAScript 6 standard. Some syntax and keywords specified in ECMAScript 6 are not available or are different from the standard, such as:

• Arrow function
• let const
• Template string
• ...

So some developers will find that some codes have some syntax errors on old mobile phone operating systems. In order to help developers solve such problems, the mini program IDE provides syntax transcoding tools to help developers convert ECMAScript 6 code to ECMAScript 5 code, so that it can be well executed in all environments.

Developers need to check ES6 to ES5 in the project settings to enable this feature.

modular

In the browser, all JavaScript runs in the same scope, and the defined parameters or methods can be accessed or rewritten by the scripts loaded later. Unlike the browser, any JavaScript file can be used as a module in the mini program, and the interface can be exposed externally through module.exports or exports.

Please see this is a simple module example. B.js references module A and uses the multiplyBy2 method exposed by A to complete the operation of multiplying a variable by 2, as shown in the following code:

// moduleA.js
module.exports = function( value ){
  return value * 2;
}

// B.js

//Reference module A in B.js
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

The following code uses require(path) to introduce the common code in the file where these modules are needed:

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

Script execution order

In the browser, the script is strictly executed in the order of loading, as shown in the following code:

<html>
<head>
  <!-- a.js
  console.log('a.js')
   -->
  <script src ="a.js"></script>
  <script>
    console.log('inline script')
  </script>

  <!-- b.js
  console.log('b.js')
   -->
  <script src ="b.js"></script>
</head>
</html>

The output of the above code is:

a.js
inline script
b.js

However, the script execution order in the mini program is different. The entry file for the mini program is app.js, and the order of file execution will be determined according to the order of the modules required in it. The following code is an app.js example.

/* a.js
console.log('a.js')
*/
var a = require('./a.js')
console.log('app.js')

/* b.js
console.log('b.js')
*/
var b = require('./b.js')

The output order of the above code is:

a.js
app.js
b.js

When app.js is executed, the mini program will be executed one by one in the order of pages defined by the developer in app.json, as shown in the following code:

{
  "pages": [
    "pages/index/index",
    "pages/log/log",
    "pages/result/result"
  ],
  "window": {}
}

// app.js
console.log('app.js')

// pages/index/index
console.log('pages/index/index')

// pages/log/log
console.log('pages/log/log')

// pages/result/result
console.log('pages/result/result')

The output results after the above file is executed are as follows:

app.js
pages/index/index
pages/log/log
pages/result/result

Scope

Different from the script files running in the browser, the scope of the mini program script is more similar to NodeJS.

Variables and functions declared in a file are only valid in that file. Variables and functions with the same name can be declared in different files without affecting each other, as shown in the following code:

// a.js
//Define local variables
var localValue = 'a'

// b.js
// b.js cannot access the variables defined in a.js file:
//Define local variable console.log (localValue) //An error triggered: b.js cannot access the variables defined in a.js

When global variables are needed, use the global function getApp() to get the global instance and set the relevant property values

// a.js
//Access global variable
var global = getApp()
global.globalValue = 'globalValue'

// b.js
//Access global variable
var global = getApp()
console.log(global.globalValue) 
// Output globalValue

It should be noted that the above example is only valid if a.js is executed before b.js. When it is necessary to ensure that global data can be safely used in any file, it can be set in App(), as shown in the following code:

// app.js
App({
  globalData: 1
})

// a.js
//Local variable
var localValue = 'a'

//Get global variable
var app = getApp()

//Modify global variable
app.globalData++  // The value of globalData is 2 after execution

// b.js
//Define other local variables, which will not affect the variables in a.js
var localValue = 'b'

// If a.js is executed first, the value outputted should be 2
console.log(getApp().globalData)