1. 程式人生 > >微信小程序自學第三課:文件作用域,模塊化

微信小程序自學第三課:文件作用域,模塊化

數據 變量 span data ava 有效 函數 方法 oba

一、文件作用域

  在 JavaScript 文件中聲明的變量和函數只在該文件中有效;不同的文件中可以聲明相同名字的變量和函數,不會互相影響。

通過全局函數 getApp() 可以獲取全局的應用實例,如果需要全局的數據可以在 App() 中設置,如:

// app.js
App({
  globalData:{
    appName : "hcoder",
    appVersion : "1.1"
  }
})

// index.js
var app;
Page({
  data:{
    
  },
  onLoad:function(){
    app = getApp();
    this.setData({"appName":app.globalData.appName});
    this.setData({"appVersion":app.globalData.appVersion});
  }
})

//index.wxml
<text>
{{appName}}
{{appVersion}}
</text>

也可以在App()中創建自定義全局函數,在 App全局中使用getApp()獲取到的全局應用實例來調用此方法。

二、模塊化

  在我們開發過程中,可能會有很多公共的方法,我們可以將一些公共的代碼抽離成為一個單獨的 js 文件,作為一個模塊。

模塊只有通過 module.exports 或者 exports 才能對外暴露接口。

  需要註意的是:

  exports 是 module.exports 的一個引用,因此在模塊裏邊隨意更改 exports 的指向會造成未知的錯誤。所以我們更推薦開發者采用 module.exports 來暴露模塊接口,除非你已經清晰知道這兩者的關系。

  小程序目前不支持直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。

1.在公共.js文件中聲明方法,並使用 module.exports 或者 exports 對外暴露接口

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

2.在需要使用這些模塊的文件中,使用 require(path) 將公共代碼引入,使用引用實例進行公共方法的調用

tip:require為common.js相對當前文件的相對路徑,目前不支持絕對路徑

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

微信小程序自學第三課:文件作用域,模塊化