1. 程式人生 > >小程式開發之檔案作用域(全域性變數)與模組化(utils抽離工具類)

小程式開發之檔案作用域(全域性變數)與模組化(utils抽離工具類)

檔案作用域

在 JavaScript 檔案中宣告的變數和函式只在該檔案中有效;不同的檔案中可以宣告相同名字的變數和函式,不會互相影響。

通過全域性函式 getApp() 可以獲取全域性的應用例項,如果需要全域性的資料可以在 App() 中設定,
例如:

globalData: {
    //全域性變數
    userInfo: 1
  }

如果在App.js裡呼叫

onShow(options) {
    console.log(this.globalData.userInfo) 
  },

如果在其他檔案.js裡呼叫

// const app = getApp()
Page({
  data: {

  },
  onLoad:function(){
    //先獲取全域性的應用例項,可以放在page外以便全域性引用
    const app = getApp()
    console.log(app.globalData.userInfo)

  }
})

模組化

可以將一些公共的程式碼抽離成為一個單獨的 js 檔案,作為一個模組。模組只有通過 module.exports 或者 exports 才能對外暴露介面。

注:

  • exports 是 module.exports 的一個引用,因此在模組裡邊隨意更改 exports 的指向會造成未知的錯誤。所以更推薦開發者採用 module.exports 來暴露模組介面,除非你已經清晰知道這兩者的關係。
  • 小程式目前不支援直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的程式碼到小程式的目錄中或者使用小程式支援的 npm 功能。

例如:
(1)先建立公共工具類common.js
***注:一般情況下建立在utils檔案

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

//暴露模組介面
//方式1,推薦採用方式1
module.exports.sayHello = sayHello  
//方式2
exports.sayGoodbye = sayGoodbye

(2)在其他檔案.js中引用先引入

const common = require('../../utils/common.js')

Page({
  data: {

  },
  onLoad:function(){
    common.sayHello('張三')
    common.sayGoodbye('張三')
  }
})

注: require 暫時不支援絕對路徑

下面文章我會把常用的公共工具類總結一些