一步一步带你分析 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="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")

  

--------------------------------------分割线-------------------------------------------------------------------------

时间: 2024-08-24 04:44:16

一步一步带你分析 requirejs的相关文章

【面试必备】透过源码角度一步一步带你分析 ArrayList 扩容机制

一 先从 ArrayList 的构造函数说起ArrayList有三种方式来初始化,构造方法源码如下:/** 默认初始容量大小*/private static final int DEFAULT_CAPACITY = 10; private static final Object[] DEFAULTCAPACITY_EMPTY_ELEMENTDATA = {}; /*默认构造函数,使用初始容量10构造一个空列表(无参数构造)*/public ArrayList() {this.elementDat

一步一步带你入门MySQL中的索引和锁 (转)

出处: 一步一步带你入门MySQL中的索引和锁 索引 索引常见的几种类型 索引常见的类型有哈希索引,有序数组索引,二叉树索引,跳表等等.本文主要探讨 MySQL 的默认存储引擎 InnoDB 的索引结构. InnoDB的索引结构 在InnoDB中是通过一种多路搜索树——B+树实现索引结构的.在B+树中是只有叶子结点会存储数据,而且所有叶子结点会形成一个链表.而在InnoDB中维护的是一个双向链表. 你可能会有一个疑问,为什么使用 B+树 而不使用二叉树或者B树? 首先,我们知道访问磁盘需要访问到

Android中级篇之百度地图SDK v3.5.0-一步一步带你仿各大主流APP地图定位移动选址功能

定位+移动选址 百学须先立志-学前须知: 我们经常在各大主流APP上要求被写上地址,如百度外卖.爱鲜蜂收货地址等等:其中他们大多数是可以让我们在地图上移动选址.就如下面这段GIF演示的一样: 尽信书,不如无书-能学到什么? 1.地图状态MapStatus类及监听setOnMapStatusChangeListener 2.定位LocationClient类 3.反地理编码GeoCoder类 工欲善其事必先利其器-申请Key 百度地图访问应用(AK)申请地址:http://lbsyun.baidu

(第一篇) 一步一步带你了解linq to Object

要想学好linq to object 我们必须要先学习lambda 表达式,学习lambda 表达式呢我们必须了解匿名函数和匿名类,学习匿名函数,我们必须学会委托,这是本文的宗旨.下面开始第一步.在第一步开始之前,我们做点准备工作,建立一个学生类和一个班级类,类结构如下 public class Student { public int Id { get; set; } public int ClassId { get; set; } public string Name { get; set;

从植物大战僵尸开始一步一步带你入门逆向工程,

逆向工程扫盲篇 最近又来了一群对逆向工程感兴趣的同学,我这里带领大家来一次逆向工程初体验. 在这里我们会 修改弹框的值 修改植物大战僵尸的阳光 编译并运行以下C程序 使用的工具:Devcpp #include<windows.h> int main(){ MessageBox(0,"Hello world","title",MB_OK); return 0; } 编译后如上所示. 运行结果如下: 下面我们来一步一步修改HelloWorld IDA的基本使

一步一步带你安装史上最难安装的 vim 插件 —— YouCompleteMe

YouCompleteMe is a fast, as-you-type, fuzzy-search code completion engine for Vim.参考: https://github.com/Valloric/YouCompleteMe#full-installation-guide本篇文章默认读者知道什么是 unix/linux,vim/vi, YouCompleteMe,如果有不清楚的,Search engine is your friend 或者留言讨论.YouCompl

一步一步带你创建Azure Point-to-Site VPN

Windows Azure 允许你将本地和云端进行打通,实现企业混合云平台的需求,如何打通本地网络和云端网络,这就需要VPN技术. 而常见的VPN技术主要有Point-To-Site和Site-To-Site,微软也采用这种方式让本地和云端数据互通. Point-To-Site VPN 将本地的一台设备(Point),与云端的网络(Site)进行互通互联. Point指的就是企业内网的一台主机(VPN客户端) Site是指Azure Virtual Network的网络 这样可以实现将企业内网的

一步一步带你做WebApi迁移ASP.NET Core2.0

随着ASP.NET Core 2.0发布之后,原先运行在Windows IIS中的ASP.NET WebApi站点,就可以跨平台运行在Linux中.我们有必要先说一下ASP.NET Core. ASP.NET Core 是新一代的 ASP.NET,第一次出现时的代号为 ASP.NET vNext,后来命名为ASP.NET 5,随着它的完善与成熟,最终命名为 ASP.NET Core,这表明它已不是 ASP.NET 的升级,而是一个重新设计的Web开发框架.而它一个非常重要的变化就是它不再依赖于I

一步一步带你实现ListView动画展开布局, ExpandableLayout实现

做项目的时候,需要一种listview,点击item的时候在item的下方展开一个菜单,于是在gituhub上找到了源码: ExpandableLayout,地址: https://github.com/traex/ExpandableLayout 这个项目实现的效果如下: 上一篇我已经讲解了这个项目的原理,有兴趣的同学可以点击这里看源码解析: http://blog.csdn.net/u010335298/article/details/51193565 今天我们主要是从开发者的角度一步一步的