前言:
之前幾篇文章都已經把小程序的基本結構,每個文件里面的結構以及每個文件中的基本配置和操作,其實后面就是優化和學習了,我們一起學習吧,我也是新手
今天我們來學習下小程序的模塊化,首先看看官方給出的模板:
模塊化
我們可以將一些公共的代碼抽離成為一個單獨的 js 文件,作為一個模塊。模塊只有通過module.exports或者exports才能對外暴露接口。
需要注意的是:
exports是module.exports的一個引用,因此在模塊里邊隨意更改exports的指向會造成未知的錯誤。所以我們更推薦開發者采用module.exports來暴露模塊接口,除非你已經清晰知道這兩者的關系。
小程序目前不支持直接引入node_modules, 開發者需要使用到node_modules時候建議拷貝出相關的代碼到小程序的目錄中。
我們來看看小程序創建時候自帶的utils.js文件中使用:
這是一個格式化日期的工具模塊:
根據js文件中的方法 new Date()獲取系統的當前時間 傳遞給formatTime,根據year month day格式化時間的格式輸出,代碼如下:
utils.js代碼:注意紅標處,這里必須吧這個方法暴露出去,其他的js文件才能使用require獲取方法
log.js代碼:第一個標簽 表示引入了Utils.js里面的方法: 第二個是直接使用在utils中暴露出來的formatTime方法格式化時間。
使用時候:
上面我們已經介紹了一個格式化時間的模板,最近但是最近需要用電話號碼注冊,需要一個倒計時的button,所以就寫了一個:
首先我們做倒計時時候必須是使用遞歸的思想去做,還要判斷時間是否為0 為0之后需要改變button的數據
注意這里的參數是this,之前的文章也提到了this的作用域,到了utils.js中自然是無法使用的了,而且在使用
this的時候必須與之前Page()函數中data的數據的key是一樣的。
最需要注意的就是一定要記得把方法暴露出來:module.exports
在使用的時候一定要使用?require引入。