Modular


File Scope

Variables and functions declared in a JavaScript file are only valid in that file; variables and functions with the same name can be declared in different files without affecting each other.

You can obtain the global application instance through the global function getApp(). If you need global data, you can set it in App(), such as: 

// app.jsApp({
  globalData: 1
 })
// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)

Modularization

We can extract some common code into a separate js file as a module. Modules can only expose interfaces to the outside world through module.exports.

It should be noted that:

  • exports is a reference to module.exports, so you can change it at will inside the module Pointing to exports will cause unknown errors. Therefore, we recommend developers to use module.exports to expose module interfaces, unless you already clearly know the relationship between the two.
  • The mini program currently does not support the direct introduction of node_modules. When developers need to use node_modules, it is recommended to copy the relevant code to the directory of the mini program. 


// common.js
function sayHello(name) {
  console.log('Hello ' + name + '!')
}
module.exports = {
  sayHello: sayHello
}

In the files that need to use these modules, use require(path) to introduce the public code. 

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

ES6 syntax and API support

WeChat applet runs on three terminals: iOS, Android and developer tools for debugging

  • On iOS, The javascript code of the mini program runs in JavaScriptCore
  • On Android, the javascript code of the mini program is parsed through the X5 kernel
  • On the development tool, the javascript code of the mini program runs in nwjs (chrome kernel)

Although the environments of the three terminals are very similar, at least for now there are still some differences, which has caused great trouble to many developers.

In the development tools of 0.10.101000 and later versions, babel will be used by default to convert the developer code ES6 syntax into ES5 code that is well supported by all three ends, helping developers solve the problems caused by different environments. Come development issues. Developers can turn off this feature in project settings.

It should be noted that:

  • This conversion will only help development deal with grammatical problems. New ES6 APIs such as Promise require developers to introduce Polyfill or other categories by themselves. Library.
  • In order to improve code quality, when the ES6 conversion function is turned on, the javasctipt strict mode is enabled by default, please refer to "use strict".