小程序之模块化详解

文件作用域

在JavaScript文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

通过全局函数getApp()可以获取全局的应用实例，如果需要全局的数据可以在App()中设置，如：

// 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)

模块化

我们可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过module.exports才能对外暴露接口。

需要注意的是：

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。

小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} !')
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用require(path)将公共代码引入。

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

ES6 语法以及 API 支持

微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中

在 Android 上，小程序的 javascript 代码是通过 X5 内核来解析

在 开发工具上， 小程序的 javascript 代码是运行在 nwjs（chrome内核） 中

虽然尽管三端的环境是十分相似的，但是至少在目前还是有一些区别的，这给很多开发者带来很大的困扰。

在 0.10.101000 以及之后版本的开发工具中，会默认使用 babel 将开发者代码 ES6 语法转换为三端都能很好支持的 ES5 的代码，帮助开发者解决环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。

需要注意的是：

这种转换只会帮助开发处理语法上问题，新的 ES6 的 API 例如 Promise 等需要开发者自行引入 Polyfill 或者别的类库。

为了提高代码质量，在开启 ES6 转换功能的情况下，默认启用 javasctipt 严格模式

【相关推荐】

1. 微信小程序完整源码下载

2. 简单的左滑操作和瀑布流布局

3. 追格微信小程序应用商店源码

Atas ialah kandungan terperinci 小程序之模块化详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!