开发微信小程序的流程_微信小程序 require机制详解及实例代码

  • 栏目:行业动态 时间:2021-01-12 16:21 分享新闻到:
<返回列表

微信小程序 require机制详解及实例代码     投稿:lqh   这篇文章主要介绍了微信小程序 require机制详解及实例代码的相关资料,需要的朋友可以参考下

微信小程序 require机制详解

一, JS模块加载:一次性加载全部JS, 但并不一定立即执行.

先提一提微信小程序架构: 类浏览器 - HTTP本地服务 - 云端服务

微信小程序运行的架构,基本上是浏览器 - HTTP本地服务 - 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源。读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件.

似乎比较简单,一个HTML 引用所有JS文件

既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HTML页面来引用加载所有的JS文件。(注:这同NODE.JS的方式区别)

在小程序开发开具的HTTP服务部分代码,可以看到这个服务干了这件事情:

微信小程序包目录下面所有.js文件, 会按 script src="../xxx.js" 方式插入生成一个HTML文件,然后类似浏览器方式加载.

让HTTP本地服务配合,对JS文件作的包装手法

可是事情并未结束,这种方式一加载,所有js文件都会立即执行,乱糟糟生成一团,怎么可能..那require函数又拿来干什么呢 原来这儿,HTTP服务在返回.JS文件内容的,给脚本内容包装上了一层: define函数

代理服务部分代码:

(projectManager.js)
function getScripts(projInfo, callback) {
 fs.readFile(fname, 'utf8', function(err, scripts) {
 .... 
 scripts = 'define("' + moduleName + '", function(require, module, exports, ' + noBrowserStr +
 '){ ' + scripts + '\n});',
 needRequire (scripts += 'require("' + moduleName + '")'), //page页面js文件,会添加上require自己,加载后立即初始化。
 .....
 callback(null, scripts) //scripts串内容作为HTTP GET的返回

define函数非常简单,大致如下:

......
 var 
 ......
 moduleList = {}; 
 define = function(moduleName, factory) { //define是全局函数,每个JS文件都默认会调用. 
 moduleList[moduleName] = { status: status1, factory: factory }

从上面代码看出,,这样一来,每加载一个JS文件,只是将其文件名与脚本内容串加入了内存中的一个变量保存,并未执行。 注意,这就与普通的HTML 脚本引用加载立即执行完全不同了.

接下来,就轮到微信小程序的require函数出场了。

二, JS模块初始化:按需递归式require初始化

先看看微信小程序require函数的定义:

 require = function(moduleName) { 
 ....
 var module = moduleList[moduleName]; //define函数调用时为moduleList赋的值
 .....
 if (module.status === status1) { 
 //如果未初始化,则初始化
 var factory = module.factory, //这个factory就是这个JS文件的脚本.
 obj = { exports: {} }, u = void 0;
 factory (u = factory(o(moduleName), obj, obj.exports)), module.exports = obj.exports || u, module.status = status2
 return module.exports

从上面可以看出, require函数只是通过模块名,从内存中获取脚本内容执行,并置标志以保证只执行一次.

再精简一下:

require --调用- factory --- 模块中可能再require另一个模块...

这样就是一个典型的递归结构。

三,补充一下:页面js 其实也是被require函数加载

所谓页面JS,,就是在app.json中注册的page的js, 它们并没有被其它JS require方式引用,

那么它们在什么时候初始化?

回到之前本地代理服务器的代码,留意下面一点:

代理服务部分代码:
(projectManager.js)
function getScripts(projInfo, callback) {
 fs.readFile(fname, 'utf8', function(err, scripts) {
 .... 
 //page页面js文件,needRequire值为TRUE,会添加上require自己
 needRequire (scripts += 'require("' + moduleName + '")'), 
 .....

原来它们还是使用require函数初始化,而且是加载后立即执行。

目前通常微信小程序代码结构不会太复杂,但随着产品的发展,需求的增加, 代码结构可能越来越复杂,越来越注意模块化.同时,如何将旧有JS模块在微信小程序中重用,这也是个重要话题。 所以深入理解微信小程序的JS模块化机制也是很有价值的.

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


分享新闻到:

更多阅读

开发微信小程序的流程_微信小程序 requ

行业动态 2021-01-12
手机微信微信小程序 require体制详细说明及案例编码 文章投稿:lqh 本文关键详细介绍了手...
查看全文

问卷小程序怎么做_js完成主动轮换选项卡

行业动态 2021-01-12
js完成全自动轮换选择项卡 本文关键为大伙儿详尽详细介绍了js完成全自动轮换选择项卡...
查看全文

微信小程序开发设计_用Nodejs搭建效劳器拜

行业动态 2021-01-12
用Nodejs构建网络服务器浏览html、css、JS等静态数据資源文档 以便测一个周边店面的作用...
查看全文
返回全部新闻


区域站点: 南丰县免费网站建设   南宫市自己建立网站   囊谦县凡客建站   南和县模板建站   南华县免费网站建设   南江县自己建立网站   南京市凡客建站   南靖县模板建站   南康市免费网站建设   南乐县自己建立网站   南陵县凡客建站   南宁市模板建站   南平市免费网站建设   南皮县自己建立网站   南市区凡客建站   南通市模板建站   南投县免费网站建设   南雄市自己建立网站   南溪县凡客建站   南阳市模板建站   南漳县免费网站建设   南召县自己建立网站   南郑县凡客建站   那坡县模板建站   那曲县免费网站建设   纳雍县自己建立网站   讷河市凡客建站   内黄县模板建站   内江市免费网站建设   内丘县自己建立网站   内乡县凡客建站   嫩江市模板建站   聂荣县免费网站建设   尼玛县自己建立网站   尼木县凡客建站   宁安市模板建站   宁波市免费网站建设   宁城县自己建立网站   宁德市凡客建站   宁都县模板建站   宁国市免费网站建设   宁海县自己建立网站   宁化县凡客建站   宁晋县模板建站   宁陵县免费网站建设   宁明县自己建立网站   宁南县凡客建站   宁强县模板建站   宁陕县免费网站建设   宁武县自己建立网站   宁乡市凡客建站   宁阳县模板建站   宁远县免费网站建设   农安县自己建立网站   磐安县凡客建站   盘锦市模板建站   盘山县免费网站建设   磐石市自己建立网站   盘州市凡客建站   蓬安县模板建站   澎湖县免费网站建设   蓬莱市自己建立网站   彭山县凡客建站   蓬溪县模板建站   彭阳县免费网站建设   彭泽县自己建立网站   彭州市凡客建站   偏关县模板建站   平安县免费网站建设   平昌县自己建立网站   平定县凡客建站   屏东县模板建站   平度市免费网站建设   平果县自己建立网站   平和县凡客建站   平湖市模板建站   平江县免费网站建设   平乐县自己建立网站   平凉市凡客建站   平利县模板建站   平罗县免费网站建设   平陆县自己建立网站   屏南县凡客建站   平泉市模板建站   屏山县免费网站建设   平顺县自己建立网站   平塘县凡客建站   平潭县模板建站   平武县免费网站建设   萍乡市自己建立网站   平乡县凡客建站   平阳县模板建站   平遥县免费网站建设   平阴县自己建立网站   平邑县凡客建站   平远县模板建站   平舆县免费网站建设   皮山县自己建立网站   普安县凡客建站   浦北县模板建站   浦城县免费网站建设   普洱市自己建立网站   普格县凡客建站   浦江县模板建站   普兰县免费网站建设   普宁市自己建立网站   莆田市凡客建站   迁安市模板建站   乾安县免费网站建设   潜江市自己建立网站   潜山市凡客建站  

友情链接: 她的后院 建网站平台 H5商城 自助建站 手机建站平台 凡科自助建站 手机版

Copyright © 2002-2020 凡客建站_模板建站_免费网站建设_自己建立网站_如何建立企业网站 版权所有 (网站地图) 备案号:粤ICP备10235580号