Detailed explanation of modularization of small programs

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 and will not interact with each other. Influence.

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 the interface through module.exports.

It should be noted that:

exports is a reference of module.exports, so it can be changed at will inside the module exports pointing 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} !')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} !')
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

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')
  }  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }})

ES6 syntax and API support

WeChat applet runs on three terminals: iOS, Android and for DebuggingDeveloper Tools

On iOS, the javascript code of the mini program runs in JavaScriptCore

On Android, the javascript code of the mini program runs through the X5 kernel To analyze

On the development tool, the javascript code of the applet is running in nwjs (chrome kernel)

Although the environments on the three ends are very similar, at least for now there are still some Different, this brings 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 classes themselves. Library.

In order to improve code quality, when the ES6 conversion function is turned on, the javasctipt strict mode is enabled by default

[Related recommendations]

1. WeChat applet is complete Source code download

2. Simple left swipe operation and waterfall flow layout

3. Chai Ge WeChat Mini Program App Store Source Code

The above is the detailed content of Detailed explanation of modularization of small programs. For more information, please follow other related articles on the PHP Chinese website!