30分钟 带你浅入requirejs源码
因为最近项目想现实一个单页功能,用的是react ,然后看了一下react route,挖槽 gzip后16k? 然后我简单写了一个纯单页(不支持多页的单页,所有入口都经过rewrite跑到index.html) 才200多行(后续放github)。
然后项目是用webpack打包的, 发现webpack的 require.ensure不支持变量加载的(至少暂时没发现), 就是意味着我有多小页面,就得在main(入口里配多小页面的关系) 这样挫,领导会喷我的。
然后我今天早上起来,想看看requirejs是如何现实的
好前戏完毕 直入主题,大家都知道requrejs 有一个data-main 配置 , 顾名思义就是 入口 类似c,java的main函数
main.js
require.config({
paths: {
'xm': 'xm',
'adb': 'db'
},
waitSeconds: 50
}) requirejs(['xm', 'adb'], function(xm, db) {
console.log(xm, 'main'); db.db(); });
然后定义了2个文件 ,分别是xm.js 和db.js
//xm.js
define([], function() {
return {
name: 'xm',
age: 22
}
});
//db.js
define(['xm'], function(xm){ return {
db: function(){
var who = xm.name; console.log(who, ' play');
}
} })
首先,我们把代码叠起来, 一览众山小
可以看到,其实requirejs 很简单, 只有3个api(按我的理解, 有错请指正)
1、requirejs, 引入定义的模块,并执行callback的代码
2、require,只引入,不执行
3、define,定义一个模块
然后具体看实现的地方
前面1000多行都是 内部调用的 function的实现,例如判断函数啊, 是否数组啊,遍历,反向遍历 etc.. ,太细节 就不多说了
着重看看后面的req变量的实现, 本来想加些标注的, 但是发现 每行都是重点, 正如小时候老师让我们画重点,经常半页书都画上, 不如不画了 囧。
1、这里requirejs 就是上面说到的1的实现
2、config其实就是一系列的配置,例如base路径,path(配短名字), urlArgs(问号后加时间戳之类的),shim(没有用define声明的模块,全局注入) etc..
3、nextTick 其实就是一个定时器, 按你代码 加入的模块,逐个依次 创建script标签 引入到页面
4、然后 引入require的时候,他会默认加了一个版本,默认初始化(注意这行 req({}) ), 默认错误提示等等
5、define函数的实现
好,有了上面已经知道require大概有些什么了, 然后来一起看看某几个重要的细节点。
首先代码里先看看data-main这个关键词 ,其实就是遍历所有的TagName为script的,找到data-main, 然后处理了一下路径
然后最后一行,其实才是真正的main入口初始化
然后第一次require会根据配了的data-main 以下列处理后,通过req.load 自动引入main.js
第一次自动调用requirejs 内容基本都是默认值,没啥好看的, 来 一起看看我们main.js 里主动调用的requrejs、
然后 继续跟下去 发现最后调用了Module的有个each,然后是会调用自己的fetch,load进行一个一个按顺序像main加载步骤一样 加载
因为时间原因,有些太细的点就不深入一一步析 希望此文对初了解requirejs的同学有所帮助,谢谢观看完毕。
30分钟 带你浅入requirejs源码的更多相关文章
- 30分钟 带你浅入seajs源码
上个星期写了浅入requirejs的, 大家都知道 require是AMD规范(Asynchronous Module Definition) 来 今天我们一起看看 CMD规范(Common Mo ...
- 浅谈flask源码之请求过程
更新时间:2018年07月26日 09:51:36 作者:Dear. 我要评论 这篇文章主要介绍了浅谈flask源码之请求过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随 ...
- requireJS 源码(二) data-main 的加载实现
(一)requireJs 的整体结构: requireJS 源码 前192行,是一些 变量的声明,工具函数的实现 以及 对 三个全局变量(requirejs,require,define)若被占用后的 ...
- RequireJs 源码解读及思考
写在前面: 最近做的一个项目,用的require和backbone,对两者的使用已经很熟悉了,但是一直都有好奇他们怎么实现的,一直寻思着读读源码.现在项目结束,终于有机会好好研究一下. 本文重要解读r ...
- Chrome自带恐龙小游戏的源码研究(七)
在上一篇<Chrome自带恐龙小游戏的源码研究(六)>中研究了恐龙的跳跃过程,这一篇研究恐龙与障碍物之间的碰撞检测. 碰撞盒子 游戏中采用的是矩形(非旋转矩形)碰撞.这类碰撞优点是计算比较 ...
- Chrome自带恐龙小游戏的源码研究(完)
在上一篇<Chrome自带恐龙小游戏的源码研究(七)>中研究了恐龙与障碍物的碰撞检测,这一篇主要研究组成游戏的其它要素. 游戏分数记录 如图所示,分数及最高分记录显示在游戏界面的右上角,每 ...
- Chrome自带恐龙小游戏的源码研究(五)
在上一篇<Chrome自带恐龙小游戏的源码研究(四)>中实现了障碍物的绘制及移动,从这一篇开始主要研究恐龙的绘制及一系列键盘动作的实现. 会眨眼睛的恐龙 在游戏开始前的待机界面,如果仔细观 ...
- Chrome自带恐龙小游戏的源码研究(四)
在上一篇<Chrome自带恐龙小游戏的源码研究(三)>中实现了让游戏昼夜交替,这一篇主要研究如何绘制障碍物. 障碍物有两种:仙人掌和翼龙.仙人掌有大小两种类型,可以同时并列多个:翼龙按高. ...
- Chrome自带恐龙小游戏的源码研究(三)
在上一篇<Chrome自带恐龙小游戏的源码研究(二)>中实现了云朵的绘制和移动,这一篇主要研究如何让游戏实现昼夜交替. 昼夜交替的效果主要是通过样式来完成,但改变样式的时机则由脚本控制. ...
随机推荐
- 【转】Android手机分辨率基础知识(DPI,DIP计算)
1.术语和概念 术语 说明 备注 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 摩托罗拉milestone手机是3.7英寸 A ...
- ART_20190430
Algorithm-算法题 第一个只出现一次的字符 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要 ...
- 【题解】洛谷P2421[NOI2002]荒岛野人 (Exgcd)
洛谷P2421:https://www.luogu.org/problemnew/show/P2421 思路 从洞的最大编号开始增大枚举答案 对于每一个枚举的ans要满足Ci+k*Pi≡Cj+k*Pj ...
- py faster rcnn的lib编译出错问题
真是好事多磨啊,计算机系统依然是14.04,而cuda依然是8.0,唯一不同的是时间不一样,下载的各种库版本有差别,GPU的driver不一样. 但是这样就出问题了,py-faster rcnn的li ...
- 用c#语言编写银行利率
sing System;using System.Collections.Generic;using System.Linq;using System.Text; namespace ConsoleA ...
- 常用的linux指令整理
ls 列出文件目录 -a全部文件,连同隐藏文件一起列出 -d仅列出目录本身,而不是列出目录内的文件数据 -l 连同权限一同列出 cd 切换文件目录的命令 pwd显示目前所在的目录 mkdir 创建新的 ...
- JVM垃圾回收补充知识点
1. 分代 虚拟机中的共划分为三个代: 年轻代(Young Gen):eden和survivor-8:1:1 年老代(Old Gen):存储大对象,由survivor晋升 永久代(perm Gen): ...
- 18年selenium3+python3+unittest自动化测试教程(上)
第一章 自动化测试课程介绍和课程大纲 1.自动化测试课程介绍 简介:讲解什么是自动化测试和课程大纲讲解,课程需要的基础和学后的水平 python3.7+selenium3 pycharm 第二章自动化 ...
- Python 学习笔记(八)Python列表(三)
序列 序列:数学上,序列是被排成一列的对象(或事件):这样,每个元素不是在器他元素之前,就是在其他元素之后.这里元素之间的顺序非常重要.<维基百科> 序列是Python中最基本的数据结构. ...
- Django-rest-framework(一)简单入门使用
简单的使用 Django-rest-framework 建成DRF,可以帮助我们快速构建出 django的rest full 风格的api接口. 其源码容易理解,所以我们可以很方便的使用. 安装 pi ...