微信小程序 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 相关文章推荐
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
js加强的经典分页实例
Mar 15 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
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
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
php上传图片类及用法示例
2016/05/11 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php中数组最简单的使用方法
2020/12/27 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
用htc组件制作windows选项卡
2007/01/13 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
webpack 模块热替换原理
2018/04/09 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
JavaScript制作3D旋转相册
2020/08/02 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
园林设计师自荐信
2013/11/18 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
初三学习决心书
2014/03/11 职场文书
物业保安岗位职责
2014/07/02 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript