1. 程式人生 > >微信小程式開發require機制教程

微信小程式開發require機制教程

在學習開發微信小程式中, 分析總結了最近版本微信小程式模組化的函式 require的載入與初始化模組機制,歸納說來,小程式JS模組載入可分為兩大步驟:JS模組載入和JS模組初始化。

JS模組載入:一次性載入全部JS, 但並不一定立即執行

先提一提微信小程式架構: 類瀏覽器 -> HTTP本地服務 -> 雲端服務

微信小程式執行的架構,基本上是瀏覽器 -> HTTP本地服務 -> 雲端服務, HTTP本地服務用來讀取本地檔案或者代理雲端的檔案資源。讀取專案中JS檔案, 是由HTTP本地服務取本地儲存的指令碼檔案.

似乎比較簡單,一個HTML 引用所有JS檔案

既然採用了這種架構,那微信小程式就類似瀏覽器那樣,藉助一個HTML頁面來引用載入所有的JS檔案。(注:這同NODE.JS的方式區別)
在小程式開發開具的HTTP服務部分程式碼,可以看到這個服務幹了這件事情:
微信小程式包目錄下面所有.js檔案, 會按方式插入生成一個HTML檔案,然後類似瀏覽器方式載入.

讓HTTP本地服務配合,對JS檔案作的包裝手法

可是事情並未結束,這種方式一載入,所有js檔案都會立即執行,亂糟糟生成一團,怎麼可能…那require函式又拿來幹什麼呢?原來這兒,HTTP服務在返回.JS檔案內容的,給指令碼內容包裝上了一層: define函式

在這裡插入圖片描述

define函式非常簡單,大致如下:

在這裡插入圖片描述

二, JS模組初始化:按需遞迴式require初始化

先看看微信小程式require函式的定義:

在這裡插入圖片描述

從上面可以看出, require函式只是通過模組名,從記憶體中獲取指令碼內容執行,並置標誌以保證只執行一次.

再精簡一下:

require --呼叫-> factory —>模組中可能再require另一個模組…這樣就是一個典型的遞迴結構。

三,補充一下:頁面js 其實也是被require函式載入

所謂頁面JS,,就是在app.json中註冊的page的js, 它們並沒有被其它JS require方式引用,

那麼它們在什麼時候初始化?

回到之前本地代理伺服器的程式碼,留意下面一點:
在這裡插入圖片描述

原來它們還是使用require函式初始化,而且是載入後立即執行。

目前通常微信小程式程式碼結構不會太複雜,但隨著產品的發展,需求的增加, 程式碼結構可能越來越複雜,越來越注意模組化.同時,如何將舊有JS模組在微信小程式中重用,這也是個重要話題。 所以深入理解微信小程式的JS模組化機制也是很有價值的.

相關推薦

程式開發require機制教程

在學習開發微信小程式中, 分析總結了最近版本微信小程式模組化的函式 require的載入與初始化模組機制,歸納說來,小程式JS模組載入可分為兩大步驟:JS模組載入和JS模組初始化。 JS模組載入:一次性載入全部JS, 但並不一定立即執行 先提一提微信小程式架構:

程式開發入門基礎教程

在這篇部落格中,主要介紹瞭如何從一個微信小程式的使用者轉變為微信小程式的開發者。 1. 首先,需要註冊一個微信小程式賬號 https://mp.weixin.qq.com/  進入微信公眾平臺選擇【立即註冊】   2.註冊賬號型別為【小程式】

程式開發圖解案例教程》PDF版電子書下載

點選下載: 《微信小程式開發圖解案例教程》PDF電子版 內容簡介: 《微信小程式開發圖解案例教程》分兩篇,介紹了微信小程式設計的基本知識和實戰案例。為微信小程式快速入門,包括認識微信小程式、微信小程式框架分析、用微信小程式元件構建UI介面、

程式開發教程--從零開始

從零開始小程式 今天一不小心拿到了小程式的內測資格,為了不辜負微信團隊的信任,我決定十一奮鬥一把!不過話說我可是一個Android工程師啊!所以就讓我們從零開始! 所以本文非常適合非前端工程師學習!哈哈!都說小程式出來前端會搶移動端飯碗,但是據我所知現在好多學習的都是移動開

程式開發教程 #043

本文介紹瞭如何在微信小程式開發中使用 npm 中包的功能,大大提高微信小程式的開發效率,同時也是微信小程式系列教程的視訊版更新。 微信小程式在釋出之初沒有對 npm 的支援功能,這也是目前很多前端開發人員在熟悉了 npm 生態環境後,對微信小程式詬病的地方。 微信小程式在 2.2.1 版本後增加了對 npm

程式詳細圖文教程-10分鐘完成程式開發部署釋出

很多朋友都認為微信小程式申請、部署、釋出很難,需要很長時間。 實際上,微信和騰訊雲同是騰訊產品,已經提供了10分鐘(根據準備資源情況,已完成小程式申請認證)完成小程式開發、部署、釋出的方式。當然,實現的是基礎功能。但是,可以給學習者很便捷的體驗和很好的啟發。 不過,隨著微

程式開發測試教程

簡單介紹 小程式是一種微信開發不需要下載安裝即可使用的應用。 實質 微信小程式就是Hybrid技術的應用。 Hybrid App(混合模式移動應用)。 小程式能夠更多的可以更多的呼叫手機本身的功能(如位置資訊,攝像頭等)。 小程式註冊 小程式開發框架的邏輯層是

更多免費初級中級高階大資料java視訊教程下載 加(***((號keepper,請備註java或掃下面2二3維4碼程式開發

更多免費初級中級高階大資料java視訊教程下載 加(微***信((號keepper,請備註java或掃下面2二3維4碼微信小程式開發java視訊教程2018首個微信小程式開發視訊教程java視訊教程【1】2018小程式零基礎全套視訊java視訊教程9小時搞定微信小程式開發java視訊教程第01講-小程式的背景

程式教程程式開發資源下載彙總

個人分類: 微信小程式 版權宣告:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/rolan1993/article/details/73467932 摘要:微信小程式教程合集、微信小程式開發資源合集、微信小程式DEMO合

程式開發教程-程式入門

轉自http://blog.jobbole.com/106049/ 微信應用號(小程式,「應用號」的新稱呼)終於來了! 目前還處於內測階段,微信只邀請了部分企業參與封測。想必大家都關心「小程式」的最終形態到底是什麼樣子?怎樣將一個「服務號」改造成為「小程式」?

程式開發教程集合

微信小程式開發教程集合?不少朋友都知道現在是小程式發展如火如荼的時候,甚至不少朋友都準備進入小程式開發這個領域。但是網際網路上各種資訊浩如煙海,如何在這些繁雜的資訊中找到自己所需要的,這對於不少人來說是個問題,來現在多享科技為你詳細講述一下微信小程式開發教程,希望可以幫助小程式開發者節約一些時間。 微信小程

程式開發入門教程 含視訊 有原始碼

  做任何程式開發要首先找到其官方文件,我們先來看看其有哪些官方文件。 微信小程式開發文件連結為:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下圖: 這裡就是做微信小程式開發的全部官方文件。 知道了文件的位置,下面我們來介紹下如何做一個微

程式開發入門教程

            小程式:傳圖識字君                                  小程式:廁所在哪呢      傳圖片上去把上面的文字抓取下來                          定位附近的廁所位置   做任何程式開發要首先找到其官方文件,我們先來看看其

程式開發教程-從零開始

從零開始小程式 今天一不小心拿到了小程式的內測資格,為了不辜負微信團隊的信任,我決定十一奮鬥一把!不過話說我可是一個Android工程師啊!所以就讓我們從零開始! 所以本文非常適合非前端工程師學習!哈哈!都說小程式出來前端會搶移動端飯碗,但是據我所知現在好多

程式開發教程(基礎篇)6-logs頁面解析

上一篇教程中對index頁面進行了解析,這一篇來解析下logs頁面 老規矩先上圖 該頁面包含返回按鈕(用於返回index頁面),頁面title和程式啟動日誌列表。 和index頁面相比,logs頁面多了一個logs.json檔案,來配置頁面title的

程式詳細圖文教程-10分鐘完成程式開發部署釋出(3元獲取騰訊雲伺服器帶程式支援系統)

  1、【高頻使用】   美團外賣   滴滴公交查詢   車來了   大眾點評+   京東購物   摩拜單車   滴滴出行DiDi   攜程酒店機票火車票   2、【旅行】   驢媽媽門票預訂   飛常準查航班   海南航空微應用   南航e行   去哪兒出行   朋友家精選

程式怎麼新增模板訊息-程式開發-視訊教程12

模板訊息就是固定格式的訊息, 你可以把訊息裡的部分內容, 替換成適合自己的內容。 微信小程式為我們彙總了幾十個行業, 幾百個模板訊息, 你可以選擇適合自己的模板訊息使用。 微信小程式新增模板訊息流程和方法 登入你的微信小程式後臺,依次選擇‘模板訊息/我的模

程式教程程式開發資源下載彙總(6.16日更新,持續更新中……)

摘要:微信小程式教程合集、微信小程式開發資源合集、微信小程式DEMO合集、微信小程式商店合集、微信小程式經驗合集、微信小程式技巧合集 微信小程式開發工具 微信小程式開發教程 微信小程式入門系列 微信小程式入門例項系列 微信小程式從零入門系列 微信小程式基

程式開發教程(破解版IDE 無內測資格也可使用)

破解版IDE下載地址,以及使用說明: 這裡由於csdn有上傳大小限制,所以只能做兩次上傳了。要放在一起看哦。 安裝步驟 一個步驟都不能錯哦 1、安裝0.7 — 掃碼登陸 — 關閉0.7 2、安裝0.9 ——不要啟動程式——替換3個檔案檔案在weapp-ide-crac

程式開發工具下載以及安裝教程

當我們已經申請微信小程式賬號,接下來我們就需要安裝一個微信小程式開發工具,下面微信小程式觀察網請新增連結描述就和大家介紹一下微信小程式開發工具下載以及安裝教程,希望對大家的工作與學習有所幫助! 第一步:微信公眾平臺上登入你的微信小程式賬號 第二步:登入進入小程式開發-工具-下載,再根據你的系統選擇相對