RequireJS 基础学习

?1、起步?

2、基本配置

// Defaults. Do not set a default for map  config to speed up normalize(), which will run faster if there is no default.

// normalize 是一个对模块进行规范名称的函数,比如他会根据函数的名称进行取名标记!

config = {

waitSeconds: 7,

baseUrl: ‘./‘,

paths: {},

bundles: {},

pkgs: {},

shim: {},

config: {}

},

注意

1)baseUrl 如果没有手工配置那么就是当前路径,个人觉得baseUrl最好采用绝对路径,也就是 /project/

2)path 显示指定模块的路径,比如注册 jquery,那么必须知道jquery的路径才能运行jquery的文件,当然可以不配置这个路径,因为requireJS在组件定义define的时候,默认把文件名称作为组件名称,然后在调用组件的时候require根据依赖的组件名称在设置的目录下去寻找该js,所以,define、require 告诉我们命名规范很重要!

3)jQuery 默认支持AMD 规范,在jQuery源码里面可以看到,自己注册了AMD,但是这里注册有个问题,那就是默认为“jquery”,原因就是因为AMD默认使用文件名称作为JS的定义,刚好,jQuery的文件名称就是小写的形式,所以为了编码误会,采用这种小写的方式注册!

(注意虽然 jQuery 注册了AMD,但是jQuery同样注册了全局变量,所以在任何地方都可以使用$ )

3、函数介绍

1)requirejs.config , 这就是一个重写,覆盖默认配置选项,最常用的就是baseUrl 以及 path

2)define(name , deps ,callback),第一个是模块的名字,默认为文件名称,其实就是模块唯一的ID,第二个就是依赖项,第三个是会调函数,而且依赖项作为参数传入回调函数中。当通过require依赖需要哪个模块时,首先就是加载name的script标签,其次加载依赖项的标签,等所有js文件加载完成,那么就开始进行调用回调方法!内部是这样的,把所有依赖项都存储在一个数组中,每加载一个依赖项就把数组减少一个,直到所有都加载完成!

3)require(deps ,callback) ,  第一个是一个依赖数组,requireJS首先会根据数组的每一项依赖进行js文件加载,这个时候如果path中配置会从path 中查找,如果没有配置就会以此名称为路径名称在当前路径下查找,这些js的加载其实就是通过

创建script标签完成(所谓的异步加载),每加载的js文件都会注册一个事件onScriptLoad,加载之后立即调用define方法,同样也是加载JS标签,他们的加载顺序是根据注册的顺序,换句话如果A依赖B,那么先加载A后加载B,不用担心报错,因为他们的调用是在依赖完全加载之后才会回调函数,同样在添加标签时,还会为这个js加载完成注册一个事件:

node.addEventListener(‘load‘, context.onScriptLoad, false); 直到所有依赖项都加载完成,才会调用回调方法!

其中,getScriptData 首先是移除刚刚注册的事件,其二是返回script标签以及模块的id名称,也就是data.id;接着继续执行completeLoad ,这里才会真正去执行回调方法!

4 )根据模块名称返回路径

url = context.nameToUrl(normalizedName);

5 )相对当前模块的相对路径,文件不一定存在

url = require.toUrl("./style.css");

4、加载机制

1)首先通过jsp定义的data-main 以及 src 的script加载require.js ,以及通用配置项和require函数

2)解析require函数时,为每个依赖项创建script标签,创建script标签时为该node定义加载事件

3)一旦标签写入html中,就会异步加载,加载过程中RequireJS会根据onreadystatechange监听状态

4)一旦load完成,那么就执行js里面的代码,因为是加载组件,所以首先执行的就是define

5)RequireJS解析define函数,只是把一些依赖项加入一个全局的队列当中

6)加载完成之后,同时define也解析完成之后,那么之前的onScriptLoad事件监听就会被执行,

7)onScriptLoad其一就是获取这script的模块getScriptData,其二就是遍历全局队列,运行每一个依赖项

8)依赖项如果又是一个模块,那么和之前加载依赖项的步骤完全相同(创建标签、注册事件),直到所有的依赖项都加载完成

9)以上调用就是一个递归的过程,所以一旦所有都调用完成,依赖都加载完毕,那么当前项的回调函数就会被执行!

时间: 2025-02-01 01:43:04

RequireJS 基础学习的相关文章

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

Objc基础学习记录5

NSMutableString类继承的NSString类. NSMutableString是动态的字符串. 1.appendingString 方式: 向字符串尾部添加一个字符串. 2.appendingFormat:可以添加多个类型的字符串. int,chat float,double等 3.stringWithString 创建字符串, 4.rangeOfString 返回str1在另一个字符串中的位置. 5.NSMakeRange(0,3) 字符串0位到3位. 6.deleteCharac

Linux新手入门书籍推荐 鸟哥的linux私房菜-基础学习篇

这本书写的不错.赞~\(≧▽≦)/~ 2017-02-24 下午,我开始在Linux下写第一个.c程序,在终端打印hello world.gcc 源代码文件之后,输出可执行文件,但是 当我输入文件名执行它的时候,却提示我 无法找到命令.于是我找百度,查资料,花了半个小时,终于找到解决方法了, 输入"./filename"即可.... 2017-02-25 我看<基础学习篇>这本书,在P158页下面的例题讲解中找到了昨天下午异常的解析.我就很是感慨,心想:要是早看这本书,半个

Java基础学习——数组初识(1)

Java基础学习--数组初识(1) 1什么是数组 Java中常见的一种数据结构就是数组,数组可以分为一维数组.二维数组和多维数组. 数组是由一组相同的变量组成的数据类型,数组中每个元素具有相同的数据类型,数组中的每个元素都可以用一个统一的数组名和下标来确定. 2 数组的使用 数组的一般使用步骤: 声明数组 分配内存给该数组 下面是一维数组为例: 数据类型  数组名 []: 数组名 = new 数据类型 [数据个数]: 2.1一维数组的声明与赋值 1.数组的声明 int  num [];    

零基础学习 Hadoop 如何下手

想学习hadoop,可是苦于自己没有任何的基础,不知道该如何下手,也不知道自己能不能学会.其实零基础学习hadoop,没有想象的那么困难.曾经我也是一位小白,刚接触到云计算,想过培训,但是培训机构的选择也让我很纠结,就自己开始去摸索学习,现在我把自己的学习思路整理一下,希望对大家有帮助. 首先整体说一下学习过程给大家借鉴: 一.了解hadoop: 这里不具体阐述概念,有兴趣的同学可以自己上网去查.我们知道hadoop,有单机安装,伪分布安装和分布安装.同时hadoop的环境是Linux,所以我们

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

javascript基础学习(八)

javascript之日期对象 学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间. 日期对象的创建: new Date(); 二.将日期对象转换为字符串 将日期对象转换为字符串可以使用以下4种方法: date.toString();//将日期对象转换为字符串时,采