码迷,mamicode.com
首页 > Web开发 > 详细

一步一步带你分析 requirejs

时间:2017-07-09 17:11:55      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:函数   定义   main   requirejs   目录   干什么   class   UI   pat   

详细源代码一共就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="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

标签:函数   定义   main   requirejs   目录   干什么   class   UI   pat   

原文地址:http://www.cnblogs.com/huenchao/p/7141812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!