微信小程序 require机制详解及实例代码


Posted in Javascript onDecember 14, 2016

微信小程序 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模块化机制也是很有价值的.

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

Javascript 相关文章推荐
JS通过相同的name进行表格求和代码
Aug 18 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
js实现获取鼠标当前的位置
Dec 14 #Javascript
详解vue.js组件化开发实践
Dec 14 #Javascript
JavaScript Ajax实现异步通信
Dec 14 #Javascript
微信小程序 配置文件详细介绍
Dec 14 #Javascript
微信小程序 闭包写法详细介绍
Dec 14 #Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 #Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
使用javascript插入样式
2016/03/14 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python 列表的清空方式
2020/01/13 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
成教自我鉴定
2013/10/27 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
听证通知书
2015/04/24 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
2016年安全月活动总结
2016/04/06 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL