首页 > 代码库 > 一步一步带你分析 requirejs
一步一步带你分析 requirejs
详细源代码一共就2000多行,来看我这篇分析的同学应该都下载下来了,好了,话不多说,开始:
代码的开头就出现3个全局变量: requirejs, require, define
var requirejs, require, define; (function(global, setTimeout){ balababla...... })(this, (typeof setTimeout === ‘undefined‘ ? undefined : setTimeout)))
require 和 define 大家应该都知道上干什么的,说实话,我是不知道的,在分析代码的时候,我从来也没用过这个框架,就听过AMD,就来直接看源码了。
如果你也不是很清楚,这2个变量是干什么的,我就来简单介绍一下,懂得的同学要是发现我说错了,希望指点我也一下。
主页面 index.html:
注意src是引入我们的requirejs库, data-main:就是我们第一次用requrie的地方:
<html> <head> <title></title> </head> <body> <script src="http://www.mamicode.com/require.js" type="text/javascript" data-main="main.js"></script> </body> </html>
main.js:
这里2个代码块都是依赖require的:
(1)require.config:配置
(2)requrie(); 加载需要的函数,注意里面的 [‘name‘, ‘say‘],其实都是文件名,它们都在./js/ 目录下,具体看conifg
require.config({ baseUrl: ‘‘, paths: { ‘nameDep‘: ‘js/nameDep‘, ‘say‘: ‘js/say‘, ‘name‘: ‘js/name‘ }, shim: { ‘name‘: { deps: [‘nameDep‘] } } }); require([‘name‘, ‘say‘], function (name, say) { say(name); });
./js/name.js 和 ./js/say.js
//name define([‘‘], function () { return ‘测试‘; });
//say define([], function () { return function (name) { console.log(name); }; });
最后注意在config中有个skim,这里面也是定义js文件的,只是由于他可能不符合AMD加载的规范
./js/nameDep.js
console.log("nameDep.js")
--------------------------------------分割线-------------------------------------------------------------------------
一步一步带你分析 requirejs
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。